/* =====================================================================
   contacto.css  -  Formulario de contacto de Toldos Gennius
   Cargar DESPUÉS de reset.css, style.css, grid.css y responsive.css.
   Colores de marca: naranja #ff9601, gris oscuro #262626, rojo #950916.
   ===================================================================== */

.contact, .contact * {box-sizing:border-box}
.contact {max-width:1000px; margin:0 auto; padding:0 20px; color:#262626; font:16px/1.55 Arial, Helvetica, sans-serif}
.contact .strong {font-weight:700}
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- Título ---------- */
.contact-head {text-align:center; margin-bottom:34px}
.contact-title {margin:0 0 10px; font:normal 40px/1.15 "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-1px; color:#262626}
.contact-title::after {content:""; display:block; width:60px; height:4px; margin:16px auto 0; border-radius:2px; background:#ff9601}
.contact-lead {max-width:560px; margin:0 auto; color:#555; font-size:17px}

/* ---------- Rejilla: formulario + lateral ---------- */
.contact-grid {display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; align-items:start}

/* ---------- Formulario ---------- */
.req-note {margin:0 0 22px; color:#666; font-size:14px}
.req {color:#950916; font-weight:700}
.opt {color:#777; font-weight:400; font-size:13px}

.fs {margin:0 0 30px; padding:0; border:0}
.fs-title {display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:0 0 12px; border-bottom:1px solid #e8e8e8;
           font:700 20px/1.2 "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:0; color:#262626}
.fs-title .n {display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%;
              background:#ff9601; color:#262626; font:700 15px/1 Arial, Helvetica, sans-serif}

.fields {display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.field {min-width:0}
.field.full {grid-column:1 / -1}
.field label {display:block; margin:0 0 6px; color:#262626; font:700 15px/1.3 Arial, Helvetica, sans-serif}

.contact input[type="text"], .contact input[type="tel"], .contact input[type="email"], .contact select, .contact textarea {
    display:block; width:100%; height:50px; padding:0 14px; color:#262626; font:16px Arial, Helvetica, sans-serif;
    background:#fff; border:1.5px solid #c9c9c9; border-radius:8px; outline:0;
    -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s, background-color .15s}
.contact textarea {height:auto; min-height:150px; padding:12px 14px; line-height:1.5; resize:vertical}
.contact select {padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                 background-repeat:no-repeat; background-position:right 14px center}
.contact input:hover, .contact select:hover, .contact textarea:hover {border-color:#9a9a9a}
.contact input:focus, .contact select:focus, .contact textarea:focus {border-color:#ff9601; box-shadow:0 0 0 3px rgba(255,150,1,.28)}

.hint-row {display:flex; justify-content:space-between; gap:16px; margin-top:6px}
.hint {color:#666; font-size:13px; line-height:1.4}
.counter {flex:0 0 auto; color:#777; font-size:13px; font-variant-numeric:tabular-nums}

/* ---------- Errores ---------- */
.err {display:none; margin-top:6px; color:#b3261e; font-size:14px; line-height:1.35; font-weight:700}
.field.invalid .err {display:block}
.field.invalid input, .field.invalid select, .field.invalid textarea {border-color:#b3261e; background-color:#fff8f7}
.field.invalid input:focus, .field.invalid select:focus, .field.invalid textarea:focus {box-shadow:0 0 0 3px rgba(179,38,30,.22)}

/* ---------- Consentimiento y botón ---------- */
.consent {margin:2px 0 22px}
.contact .check {display:flex; align-items:flex-start; gap:10px; margin:0; font-weight:400; font-size:15px; cursor:pointer}
.contact .check input {flex:0 0 22px; width:22px; height:22px; margin:1px 0 0; accent-color:#ff9601; cursor:pointer}
.contact .check a {color:#950916; font-weight:700; text-decoration:underline}
.field.invalid .check input {outline:2px solid #b3261e; outline-offset:1px}

.actions {display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn-submit {height:56px; padding:0 40px; border:0; border-radius:8px; background:#ff9601; color:#262626; cursor:pointer;
             font:700 18px/1 Arial, Helvetica, sans-serif; letter-spacing:.02em; box-shadow:0 2px 0 #c97400; transition:background-color .15s, transform .05s}
.btn-submit:hover {background:#ffa91f}
.btn-submit:active {transform:translateY(1px); box-shadow:none}
.btn-submit:disabled {opacity:.65; cursor:wait}
.btn-submit:focus-visible {outline:3px solid #262626; outline-offset:3px}

/* ---------- Lateral ---------- */
.card {margin:0 0 20px; padding:24px; background:#f7f5f1; border:1px solid #ebe5da; border-radius:12px}
.card-title {margin:0 0 14px; font:700 19px/1.25 "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:0; color:#262626}
.btn-call {display:flex; align-items:center; justify-content:center; height:50px; margin:0 0 10px; border-radius:8px; background:#262626; color:#fff;
           font:700 19px/1 Arial, Helvetica, sans-serif; letter-spacing:.02em; text-decoration:none}
.btn-call:hover {background:#000; color:#fff}
.btn-call.alt {background:#fff; color:#262626; border:2px solid #262626}
.btn-call.alt:hover {background:#262626; color:#fff}
.card-line {margin-top:14px; font-size:15px; line-height:1.55}
.card-line.addr {padding-top:14px; border-top:1px solid #e3dccf}
.contact a.lnk {color:#950916; font-weight:700; text-decoration:underline}
.card-text {font-size:15px; line-height:1.6; color:#444}

/* ---------- Tablet / móvil ---------- */
@media (max-width:900px) {
    .contact-grid {grid-template-columns:1fr; gap:10px}
    .contact-aside {margin-top:6px}
}
@media (max-width:768px) {
    .contact {padding:0 4px; font-size:16px}
    .contact-title {font-size:30px}
    .contact-lead {font-size:16px}
    .contact-head {margin-bottom:24px}
    .fs-title {font-size:18px}
    .card {padding:20px}
    .btn-submit {width:100%}
    .box .padding {padding:22px 0 26px}
}
@media (max-width:560px) {
    .fields {grid-template-columns:1fr; gap:16px}
    .field.full {grid-column:auto}
}
@media (prefers-reduced-motion:reduce) {
    .contact * {transition:none !important}
}