/* ==========================================================================
   ContactSection — "We're here to make your stay truly unique"

   Figma `Frame 1228` (353:678), leído en Dev Mode el 2026-09-10.

   ⚠️ EL FRAME ESTÁ ESCALADO A 80/81 (0.98765). Todos sus números vienen con
   decimales raros y todos dividen exacto por ahí: 39.506→40, 15.802→16,
   10.864→11, 0.988→1, 43.457→44, 3.951→4, 5.926→6, 9.877→10, 35.556→36,
   17.778→18, 94.815→96. **Los valores de este archivo son los redondos.**
   Copiar los literales del archivo mete 1.25% de error de escala en toda la
   sección, y ese error no se ve hasta que la sección queda al lado de otra.

   Ancho: la fila mide 1241.48 en el archivo, que es la caja de 1240 del
   diseño llenada de lado a lado sin gutter — la misma excepción que ya hace
   `Section` (206:811) y que `tgl-intro.css` documenta. Acá se usa el container
   compartido igual que en `Homes`, `Testimonials` y el FAQ: una sección más
   ancha que sus vecinas rompe la alineación vertical de la página.

   Las proporciones de las dos columnas sí son las del archivo: copy 670.6
   contra imagen 512.6 es 1.31 a 1.
   ========================================================================== */

.tgl-contact {
    padding-block: 7.5rem;                    /* 120 — el ritmo de Islands, Homes y Testimonials */
    background: #fff;                          /* 353:678 */
    color: var(--tgl-contact-ink, #101010);
    font-family: var(--tgl-font-body, system-ui, sans-serif);
}

.tgl-contact .tgl-contact__inner {
    max-width: var(--tgl-container, 71.5rem);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: grid;
    gap: 3.5rem;                               /* 56 — 58.272 desescalado a 59, redondeado al ritmo */
    /* `stretch`, no `center`. En el archivo la imagen mide 677.5 contra los
       691.2 de la columna de copy: ocupa la fila casi entera. Centrada la deja
       flotando con aire arriba y abajo, porque al usar el container compartido
       de 1144 la columna de copy no encoge en la misma proporción que la
       imagen — el form tiene alturas propias. */
    align-items: stretch;                      /* 353:679 */
}

/* ── Columna de copy ──────────────────────────────────────────────────── */

.tgl-contact .tgl-contact__eyebrow {
    margin: 0 0 1.25rem;
    /* Open Sans BOLD, no Outfit: es el único eyebrow del rediseño que no usa
       la familia de UI (353:683). Va como está — normalizarlo sería inventar
       una decisión que la diseñadora no tomó. */
    font-family: var(--tgl-font-body, system-ui, sans-serif);
    font-weight: 700;
    font-size: .6875rem;                       /* 11 — 353:683 */
    letter-spacing: var(--tgl-tracking-eyebrow, .22em);  /* 2.42/11, el mismo de todo el diseño */
    text-transform: uppercase;
    color: var(--tgl-contact-eyebrow, #0d3138);
}

.tgl-contact .tgl-contact__title {
    margin: 0 0 1.25rem;
    font-family: var(--tgl-font-heading, Georgia, serif);
    /* Medium, no Regular: es el único heading del rediseño en 500 (353:684). */
    font-weight: 500;
    font-size: 2.5rem;                         /* 40 — 353:684 */
    line-height: 1.21;                         /* 48.4/40 */
    letter-spacing: -.022em;                   /* -0.88/40 */
    color: var(--tgl-contact-ink, #101010);
}

.tgl-contact .tgl-contact__lead {
    margin: 0;
    font-size: 1rem;                           /* 16 — 353:687 */
    line-height: 1.89;                         /* 30.24/16 */
    color: var(--tgl-contact-ink, #101010);
    max-width: 40rem;
}

/* ── La card del form ─────────────────────────────────────────────────── */

.tgl-contact .tgl-contact__card {
    margin-top: 2.5rem;                        /* 40 — 39.506 desescalado */
    padding: 2.375rem 2.25rem;                 /* 38 / 36 — 353:688 */
    background: #fff;
    border: 1px solid var(--tgl-contact-card-border, #5b7176);
    border-radius: 6px;
    /* El archivo dibuja 0.494px de borde, que es medio pixel: a 1x no se
       renderiza consistente entre navegadores, así que va 1px. La sombra sí es
       la del archivo, desescalada: 3 4 3.5 al 15%. */
    box-shadow: 3px 4px 3.5px rgba(0, 0, 0, .15);
}

.tgl-contact .tgl-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;                             /* 18 — 353:689 */
}

.tgl-contact .tgl-contact__field--wide {
    grid-column: 1 / -1;
}

.tgl-contact .tgl-contact__field label {
    display: block;
    margin-bottom: .5rem;                      /* 8 — 353:691 a 353:693 */
    font-size: 1rem;                           /* 16 — 353:692 */
    letter-spacing: .118em;                    /* 1.89/16 */
    text-transform: uppercase;
    color: var(--tgl-contact-label, #5b7176);
}

.tgl-contact .tgl-contact__field input,
.tgl-contact .tgl-contact__field textarea {
    box-sizing: border-box;
    width: 100%;
    /* 44 de alto (353:693) es también, y no por casualidad, el mínimo táctil
       que el plan exige en 320px. */
    min-height: 44px;
    padding: .625rem .75rem;
    border: 1px solid var(--tgl-contact-field-border, #dbe4e5);
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--tgl-contact-ink, #101010);
}

.tgl-contact .tgl-contact__field textarea {
    min-height: 96px;                          /* 353:709 */
    resize: vertical;
}

.tgl-contact .tgl-contact__field input:focus-visible,
.tgl-contact .tgl-contact__field textarea:focus-visible {
    /* El archivo no dibuja el foco. Un form sin foco visible no es una
       decisión de diseño, es un form que no se puede usar con teclado, así que
       acá se agrega y se anota. */
    outline: 2px solid var(--tgl-contact-label, #5b7176);
    outline-offset: 1px;
}

/* El honeypot. Fuera de la pantalla y fuera del árbol de accesibilidad: si un
   lector de pantalla lo anuncia, una persona ciega lo completa y su consulta
   se descarta como spam. `display:none` no sirve — hay bots que lo miran. */
.tgl-contact .tgl-contact__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tgl-contact .tgl-contact__consent {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    margin-top: 1.125rem;
    font-size: .8125rem;                       /* 13 */
    line-height: 1.6;
    color: var(--tgl-contact-label, #5b7176);
}

.tgl-contact .tgl-contact__consent input {
    flex: none;
    /* 18px y no 13: el checkbox es el control, y encogerlo al tamaño de su
       texto lo deja por debajo del área táctil usable. */
    width: 18px;
    height: 18px;
    margin-top: .125rem;
}

.tgl-contact .tgl-contact__submit {
    width: 100%;
    margin-top: 1.375rem;                      /* 22 — 353:688 */
    padding-block: .9375rem;                   /* 15 — 353:710 */
    border: 0;
    border-radius: 4px;
    background: var(--tgl-contact-button, #ef6b3d);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;                           /* 16 — 353:711 */
    letter-spacing: .035em;                    /* 0.56/16 */
    cursor: pointer;
}

.tgl-contact .tgl-contact__submit:hover {
    filter: brightness(.94);
}

.tgl-contact .tgl-contact__submit[disabled] {
    opacity: .6;
    cursor: progress;
}

/* El mensaje de resultado. `role="status"` en el HTML lo anuncia solo; acá
   sólo se le da forma. Nunca arranca oculto con `display:none`: un contenedor
   que aparece de la nada no siempre se anuncia. */
.tgl-contact .tgl-contact__message {
    margin-top: 1rem;
    font-size: .9375rem;
    line-height: 1.6;
    min-height: 1.5rem;
}

.tgl-contact .tgl-contact__message--error {
    color: #b3261e;
}

/* ── La imagen ────────────────────────────────────────────────────────── */

.tgl-contact .tgl-contact__media {
    margin: 0;
    border-radius: 10px;                       /* 353:712 */
    overflow: hidden;
}

/* Solo aparece dentro del editor de Elementor, cuando no hay foto elegida. En
   el front una sección sin foto es una sola columna a propósito; acá el marco
   existe para que se vea que el bloque TIENE una segunda columna. */
.tgl-contact .tgl-contact__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    border: 1px dashed var(--tgl-contact-field-border, #dbe4e5);
    background: var(--tgl-section-bg, #f8f9fb);
    color: var(--tgl-contact-label, #5b7176);
    font-size: .8125rem;
    letter-spacing: .118em;
    text-transform: uppercase;
}

.tgl-contact .tgl-contact__media img {
    display: block;
    width: 100%;
    height: 100%;
    /* El ratio del archivo (512.6 x 677.5, retrato) queda como piso: cuando la
       columna de copy es más baja que eso, la imagen manda; cuando es más alta,
       `height:100%` la estira y `cover` recorta en vez de deformar. */
    min-height: 0;
    aspect-ratio: 512 / 678;
    object-fit: cover;
}

/* ── Ancho: dos columnas y la grilla interna del form ─────────────────── */

@media (min-width: 62rem) {

    .tgl-contact .tgl-contact__inner {
        /* 670.6 de copy contra 512.6 de imagen = 1.31 a 1 (353:680, 353:712). */
        grid-template-columns: 1.31fr 1fr;
        padding-inline: 0;
    }

    .tgl-contact .tgl-contact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Mobile — 80% del tráfico
   ========================================================================== */

@media (max-width: 61.9375rem) {

    .tgl-contact {
        padding-block: var(--tgl-space-12, 4rem);
    }

    .tgl-contact .tgl-contact__inner {
        display: flex;
        flex-direction: column;
    }

    /* Apilada, la foto va al final: quien llegó hasta acá viene a escribir, no
       a mirar otra imagen antes de poder hacerlo. */
    .tgl-contact .tgl-contact__media {
        order: 2;
    }

    .tgl-contact .tgl-contact__title {
        font-size: 2rem;                       /* 32 — el mismo escalón que toman Testimonials y el FAQ */
    }

    .tgl-contact .tgl-contact__card {
        padding: 1.5rem 1.25rem;
    }

    .tgl-contact .tgl-contact__field label {
        font-size: .875rem;
    }
}