/* ==========================================================================
   TGL Site Header — 2026 redesign
   Requires: tgl-design-system.css (tokens) · tgl-fonts.css (@font-face)

   ONE menu tree, two layouts. Above 1024px `.tgl-site-header__nav` is an
   inline row with click-to-open panels; below it, the same element becomes a
   full-screen sheet and the panels become accordions. Nothing is duplicated
   in the DOM — the old header shipped the whole menu twice.

   Two visual states, both from the design:

     over-hero   barra transparente, texto blanco, píldora translúcida  (295:157)
     stuck       barra blanca, texto negro, sin píldora                 (304:2699)

   `.is-stuck` la agrega el bundle. Sin JavaScript el header se queda en su
   estado inicial y todos los links siguen funcionando.
   ========================================================================== */

.tgl-site-header {
    /* ── Component tokens ── */
    /* 1665px, leído del archivo de Figma: el row del header (304:2649) mide
       `w-[1665px]` en x=134. Sigue siendo MÁS ancho que `--hero-max` (1639.667)
       y que `--tgl-container` (1144) a propósito — el header respira hasta los
       bordes, el contenido no. */
    --sh-max: 1665px;          /* 304:2649 */
    --sh-height: 80px;
    --sh-height-mobile: 58px;  /* 353:531 */
    --sh-gap: 24px;

    --sh-fg: var(--tgl-primitive-white);
    --sh-bg: transparent;
    --sh-pill-bg: rgba(255, 255, 255, 0.1);   /* 304:2621 */
    --sh-panel-bg: rgba(20, 20, 20, 0.92);
    --sh-panel-border: rgba(255, 255, 255, 0.14);
    --sh-divider: rgba(255, 255, 255, 0.8);   /* 297:2447 */
    --sh-search-bg: rgba(217, 217, 217, 0.2); /* 304:2643 */
    --sh-search-placeholder: rgba(255, 255, 255, 0.5);

    --sh-cta-bg: var(--tgl-primitive-orange-cta);
    --sh-cta-fg: var(--tgl-primitive-ink-1000);

    /* 16px / 23.45, del archivo (304:2653). Estaban en 14.4, que era una
       estimación: el `leading` de 23.45 sí era el del diseño, pero contra 16px
       y no contra 14.4. */
    --sh-link-size: 1rem;        /* 16px — 304:2653 */
    --sh-link-leading: 1.4656;   /* 23.45 / 16 */

    position: sticky;
    top: 0;
    z-index: var(--tgl-z-sticky);
    background: var(--sh-bg);
    color: var(--sh-fg);
    font-family: var(--tgl-font-body);

    /* Solo animan color y fondo. `height` NUNCA: animarla dispara layout en
       cada frame del scroll, y en iOS eso se ve como un tirón. */
    transition:
        background-color var(--tgl-transition-normal),
        color var(--tgl-transition-normal),
        box-shadow var(--tgl-transition-normal);
}

/* Sobre el hero: barra transparente, texto blanco. Es el estado inicial. */
.tgl-site-header--over-hero {
    position: fixed;
    inset-inline: 0;
    --sh-bg: transparent;
    /* 25px de aire arriba. Del archivo: el row del header arranca en y=36.61 y
       su alto lo fija el logo (57px), así que su centro cae en 65.1. Los 80px de
       `--sh-height` con `align-items: center` centran en 40; +25 lo lleva a 65.
       Solo sobre el hero — scrolleada, la barra blanca se pega al borde. */
    padding-top: 25px;
}

/* Texto blanco sobre transparente solo funciona si abajo hay algo oscuro, y la
   foto del hero la elige quien edita la página: la que se subió a producción es
   turquesa clarísima y se llevó puesto el logo y los links.

   Esto vive ACÁ y no en el hero a propósito. El header se repite en todo el
   sitio y sobre cualquier fondo, así que su contraste tiene que viajar con él;
   ponerlo en `tgl-hero.css` era arreglar el header oscureciendo otra cosa, y
   además competía con el velo `overlay` del shortcode, que es el único que
   debería decidir cuánto se oscurece la imagen.

   Todos los stops en px. Mezclar `%` con `px` en un mismo degradado fue el bug
   de la primera versión: el porcentaje se resuelve contra la altura del
   elemento, quedaba después del stop en px, y CSS reordena los stops — corte
   duro visible a media pantalla.

   160px de alto contra 80px de header: el degradado tiene que terminar de
   disolverse DEBAJO de la barra, o el corte se ve igual, solo que más arriba. */
.tgl-site-header--over-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 160px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0,
        rgba(0, 0, 0, 0.22) 70px,
        rgba(0, 0, 0, 0) 160px
    );
    /* Detrás del contenido del header pero dentro de SU stacking context, así
       que sigue por encima del hero. */
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--tgl-transition-normal);
}

/* Scrolleado la barra ya es blanca sólida: la sombra sobra y ensucia el borde,
   y el aire de arriba deja de tener sentido — se pega al borde. */
.tgl-site-header.is-stuck::before { opacity: 0; }
.tgl-site-header.is-stuck { padding-top: 0; }

/* Scrolleado: barra blanca, texto negro, sin fondo en la píldora del nav. */
.tgl-site-header.is-stuck {
    --sh-fg: var(--tgl-primitive-ink-1000);
    --sh-bg: var(--tgl-primitive-white);
    --sh-pill-bg: transparent;
    --sh-panel-bg: var(--tgl-primitive-white);
    --sh-panel-border: var(--tgl-border-light);
    --sh-divider: var(--tgl-border-medium);
    --sh-search-bg: var(--tgl-primitive-gray-100);
    --sh-search-placeholder: var(--tgl-text-muted);
    box-shadow: var(--tgl-shadow-sm);
}

.tgl-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-gap);
    width: 100%;
    /* Igual que `.tgl-hero__inner`: `--sh-max` es el ancho del CONTENIDO, y con
       `box-sizing: border-box` el padding se comía de adentro y dejaba 1552 en
       vez de 1600 — el header terminaba 24px más angosto que el hero justo
       después de igualarles el token. */
    max-width: calc(var(--sh-max) + var(--tgl-space-6) * 2);
    min-height: var(--sh-height);
    margin-inline: auto;
    padding-inline: var(--tgl-space-6);
    box-sizing: border-box;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */

.tgl-site-header .tgl-site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;

    /* El header se monta dentro de un template de Elementor, cuyo kit estila
       `a` a nivel global. Sin esto el logo de texto sale azul y subrayado —
       verificado en el harness antes de que llegara a producción. */
    color: inherit;
    text-decoration: none;
}

.tgl-site-header .tgl-site-header__logo img {
    display: block;
    width: auto;
    /* 57px, del archivo (304:2650: `h-[57px] w-[196.112px]`). Estaba en 40, que
       venía heredado del header viejo. Entra en la barra de 80 con 11px arriba y
       abajo. */
    height: 3.5625rem; /* 57px — 304:2650 */
    max-width: none;
}

.tgl-site-header .tgl-site-header__logo-text {
    font-family: var(--tgl-font-heading);
    font-size: var(--tgl-font-size-lg);
    color: currentColor;
}


/* ── Nav ──────────────────────────────────────────────────────────────── */

.tgl-site-header .tgl-nav {
    display: flex;
    align-items: center;
    gap: 28px;                 /* 304:2621 */
    margin: 0;
    padding: 8px 20px;         /* 304:2621 */
    list-style: none;
    background: var(--sh-pill-bg);
    border-radius: var(--tgl-radius-full);
    transition: background-color var(--tgl-transition-normal);
}

.tgl-site-header .tgl-nav__item {
    position: relative;
    margin: 0;
}

.tgl-site-header .tgl-nav__top {
    display: inline-flex;
    align-items: center;
    gap: 2px;                  /* 304:2622 */
}

.tgl-site-header .tgl-nav__top-link,
.tgl-site-header .tgl-nav__panel-link,
.tgl-site-header .tgl-nav__link {
    color: currentColor;
    font-size: var(--sh-link-size);
    line-height: var(--sh-link-leading);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: opacity var(--tgl-transition-fast);
}

/* Los links del nav nunca se parten. Un item de dos palabras rompía la
   píldora en dos líneas y descolocaba toda la barra. */
.tgl-site-header .tgl-nav__top-link { white-space: nowrap; }

/* ── Reset de <button> ──
   Acá SÍ va `!important`, y es una decisión, no pereza.
   Subir la especificidad a (0,2,0) alcanzó para los <a>: los links del nav y
   el logo salen blancos. No alcanzó para los <button>: "Our Services" seguía
   con el fondo naranja del kit en el sitio real. `tgl-header.css` —el header
   que hoy anda en producción— resuelve exactamente esto igual (líneas 763-768).
   Cuando dos rondas de especificidad pierden contra el mismo adversario, la
   respuesta es el martillo que el repo ya sabe que funciona.

   Se limita a las propiedades que hacen que un botón PAREZCA un botón. */
.tgl-site-header .tgl-nav__toggle,
.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-close,
.tgl-site-header .tgl-site-search__toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: currentColor !important;
    /* `font-family` sí, `font` NO: el atajo resetea también `font-size`, y el
       botón de "Our Services" es a la vez el label del item — se quedaba sin
       sus 14.4px y salía del tamaño del resto del nav. */
    font-family: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* El botón de búsqueda sí tiene fondo y forma propios; el reset de arriba se
   los saca, así que se los devolvemos con el mismo peso. */
.tgl-site-header .tgl-site-search__toggle {
    background-color: var(--sh-search-bg) !important;
    border-radius: var(--tgl-radius-full) !important;
}

.tgl-site-header .tgl-nav__toggle,
.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-close {
    background-color: transparent !important;
}

.tgl-site-header .tgl-nav__toggle:hover,
.tgl-site-header .tgl-nav__toggle:focus,
.tgl-site-header .tgl-nav__toggle:active {
    background-color: transparent !important;
    color: currentColor !important;
}

/* Un padre SIN destino se emite como un botón que lleva las dos clases:
   `__top-link` (es el label) y `__toggle` (abre el panel). En ese caso NO
   debe tomar el tamaño fijo del botón de chevron suelto — con 20×20 el texto
   se parte y la píldora se deforma. */
.tgl-site-header .tgl-nav__top-link.tgl-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
    height: auto;
    /* Con `!important` porque el reset de botón de arriba también lo lleva, y
       si no este par pierde contra él. */
    font-size: var(--sh-link-size) !important;
    line-height: var(--sh-link-leading) !important;
    padding: 0 !important;
}

/* El campo abierto se traga el fondo del botón: la píldora la pinta el form. */
.tgl-site-header .tgl-site-search.is-open .tgl-site-search__toggle {
    background-color: transparent !important;
}

/* El hover TIENE que redeclarar `color`, y con `!important`. El kit de
   Elementor define `a:hover` con `!important`, así que sin esto los links del
   nav se ponen naranjas al pasar por encima aunque el color en reposo ya esté
   ganado. Medido en el harness: hovereando salía #fa8b50.

   El feedback de hover lo da `opacity`, no el color: así funciona igual sobre
   el hero (texto blanco) y sobre la barra blanca (texto negro), sin tener que
   definir dos colores de hover distintos. */
.tgl-site-header .tgl-nav__top-link:hover,
.tgl-site-header .tgl-nav__panel-link:hover,
.tgl-site-header .tgl-nav__link:hover,
.tgl-site-header .tgl-nav__top-link:focus,
.tgl-site-header .tgl-nav__panel-link:focus,
.tgl-site-header .tgl-nav__link:focus {
    color: currentColor !important;
    background-color: transparent !important;
    opacity: 0.7;
}

/* El destacado del footer del panel ("Foster Hill") conserva su naranja en
   hover: ahí el color ES el diseño, no una fuga del kit. */
.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link:first-child,
.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link:first-child:hover {
    color: var(--tgl-primitive-orange-cta) !important;
}

.tgl-site-header .tgl-nav__top-link[aria-current="page"] { text-decoration: underline; }

.tgl-site-header .tgl-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: currentColor;
    background: none;
    border: 0;
    cursor: pointer;
}

.tgl-site-header .tgl-nav__chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--tgl-transition-normal);
}

.tgl-site-header .tgl-nav__toggle[aria-expanded="true"] .tgl-nav__chevron { transform: rotate(180deg); }

/* ── Panel ────────────────────────────────────────────────────────────── */

/* Sin JS el panel nunca se abre, y el link del padre sigue funcionando. Por
   eso el estado por defecto es el atributo `hidden` y no una clase. */
.tgl-site-header .tgl-nav__panel[hidden] { display: none; }

.tgl-site-header .tgl-nav__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    padding: 14px 20px 10px;                    /* 297:2451 */
    background: var(--sh-panel-bg);
    border: 1px solid var(--sh-panel-border);
    border-radius: var(--tgl-radius-lg);        /* 10px */
    backdrop-filter: blur(12px);
    box-shadow: var(--tgl-shadow-lg);
}

.tgl-site-header .tgl-nav__panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tgl-site-header .tgl-nav__group-label {
    margin: 0 0 8px;
    font-family: var(--tgl-eyebrow-font);
    font-size: 0.625rem;                        /* 10px — 297:2445 */
    font-weight: 600;
    letter-spacing: var(--tgl-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--tgl-primitive-teal-700);
}

.tgl-site-header .tgl-nav__group-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Un link de panel que ADEMÁS tiene hijos ("Friends of the Good Life"):
   conserva su propio destino y los hijos bajan indentados debajo. No hay
   flyout de tercer nivel — en el header viejo ese flyout, en pantalla táctil,
   hace que el padre no se pueda tocar nunca. */
.tgl-site-header .tgl-nav__group:not(.is-grid) .tgl-nav__panel-link + .tgl-nav__group-links {
    margin-top: 8px;
    padding-left: var(--tgl-space-4);
    border-left: 1px solid var(--sh-panel-border);
}

.tgl-site-header .tgl-nav__group:not(.is-grid) .tgl-nav__group-links .tgl-nav__link {
    font-weight: 400;
    opacity: 0.85;
}

/* `is-grid` en el item padre, desde el campo nativo "CSS Classes" de
   Appearance → Menus. Es lo que convierte la lista de islas en la grilla de
   dos filas del diseño, sin admin propio. */
.tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-links {
    flex-flow: row wrap;
    gap: 10px 21px;                             /* 297:2444 */

    /* Sin ancho explícito el panel es shrink-to-fit y la grilla se acomoda en
       2 columnas en vez de 4. 4 × 107 + 3 × 21 = 491, que es lo que da el
       diseño (297:2444). Se resetea en mobile, donde la lista es vertical. */
    width: 491px;
}

.tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-item { flex: 0 0 107px; }

.tgl-site-header .tgl-nav__group-item { margin: 0; }

.tgl-site-header .tgl-nav__group-item .tgl-nav__link,
.tgl-site-header .tgl-nav__panel-link {
    display: block;
    font-size: 0.891rem;                        /* 14.264px */
    font-weight: 600;
    white-space: nowrap;
}

.tgl-site-header .tgl-nav__panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tgl-space-4);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sh-divider);
}

.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link {
    font-weight: 400;
    text-decoration: underline;
}

/* El primer link del footer es el destacado ("Foster Hill"). */
.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link:first-child {
    color: var(--tgl-primitive-orange-cta);
}

/* ── Acciones ─────────────────────────────────────────────────────────── */

.tgl-site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;                                   /* 304:2738 */
    flex-shrink: 0;
}

/* El form reserva SIEMPRE su ancho expandido (163px del diseño, 304:2643) y el
   input crece hacia adentro. La lupa queda pegada a la derecha con
   `justify-content: flex-end`; los 124px que sobran cuando está cerrado son
   espacio vacío sin fondo, invisible.

   Por qué así y no dejando que el form crezca: `.tgl-site-header__inner` usa
   `space-between`, así que los dos huecos son iguales. Medido a 1440px: 276px
   de hueco de cada lado. Si el form crece 124px, los huecos pasan a 214 y el
   nav se corre 62px — exactamente la mitad del crecimiento. Reservar el ancho
   mata el corrimiento sin overlay, sin esconder el nav y sin una línea de JS.

   Y cuesta cero: hay 551px de slack en la barra (1377 − 130 logo − 546 nav −
   149 acciones). El nav no está anclado a nada; solo queda 62px más a la
   izquierda de forma permanente. */
.tgl-site-header .tgl-site-search {
    position: relative;   /* ancla del panel de resultados */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 163px;
    height: 39px;
    border-radius: var(--tgl-radius-full);
    transition: background-color var(--tgl-transition-normal);
}

.tgl-site-header .tgl-site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    padding: 0;
    color: currentColor;
    background: var(--sh-search-bg);
    border: 0;
    border-radius: var(--tgl-radius-full);
    cursor: pointer;
}

.tgl-site-header .tgl-site-search__toggle svg { width: 18px; height: 18px; }

/* El campo arranca colapsado y se expande al abrir. Se anima `width` y no
   `display`, para que la transición exista y el input siga siendo enfocable. */
.tgl-site-header .tgl-site-search__input {
    width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: currentColor;
    font-family: inherit;
    font-size: 0.891rem;
    opacity: 0;
    pointer-events: none;
    transition:
        width var(--tgl-transition-slow),
        opacity var(--tgl-transition-fast),
        padding var(--tgl-transition-slow);
}

.tgl-site-header .tgl-site-search__input::placeholder { color: var(--sh-search-placeholder); }
.tgl-site-header .tgl-site-search__input:focus { outline: none; }

.tgl-site-header .tgl-site-search.is-open { background: var(--sh-search-bg); }

.tgl-site-header .tgl-site-search.is-open .tgl-site-search__input {
    width: 124px;                               /* 163 − 39 del botón */
    padding-inline: 12px;
    opacity: 1;
    pointer-events: auto;
}

.tgl-site-header .tgl-site-search.is-open .tgl-site-search__toggle { background: transparent; }

/* ── Resultados en vivo ──
   El diseño 2026 no dibuja esta superficie. Se resolvió como lista vertical
   (patrón combobox estándar) en vez del carrusel con flechas y puntos que
   tiene el header viejo: navegable por teclado y sin pelear el scroll en
   mobile. Ver §2.13 del plan. */

.tgl-site-header .tgl-site-search__results[hidden] { display: none; }

.tgl-site-header .tgl-site-search__results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--tgl-z-dropdown);
    width: min(420px, calc(100vw - 2 * var(--tgl-space-6)));
    padding: var(--tgl-space-3);
    background: var(--sh-panel-bg);
    border: 1px solid var(--sh-panel-border);
    border-radius: var(--tgl-radius-lg);
    backdrop-filter: blur(12px);
    box-shadow: var(--tgl-shadow-lg);
}

.tgl-site-header .tgl-site-search__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tgl-space-4);
    padding-bottom: var(--tgl-space-2);
    margin-bottom: var(--tgl-space-2);
    border-bottom: 1px solid var(--sh-divider);
}

.tgl-site-header .tgl-site-search__status {
    margin: 0;
    font-size: var(--tgl-text-eyebrow);
    color: currentColor;
    opacity: 0.75;
}

.tgl-site-header .tgl-site-search__see-all {
    flex-shrink: 0;
    color: var(--tgl-primitive-orange-cta);
    font-size: var(--tgl-text-eyebrow);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.tgl-site-header .tgl-site-search__list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Seis resultados y el resto scrollea DENTRO del panel. Un dropdown más
       alto que la ventana deja el último resultado inalcanzable. */
    max-height: 336px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tgl-site-header .tgl-search-result {
    display: flex;
    align-items: center;
    gap: var(--tgl-space-3);
    padding: var(--tgl-space-2);
    border-radius: var(--tgl-radius-md);
    color: currentColor;
    text-decoration: none;
    transition: background-color var(--tgl-transition-fast);
}

/* `.is-active` la pone el teclado (flechas); `:hover` es el mouse. Se ven
   igual a propósito: son el mismo estado para el usuario. */
.tgl-site-header .tgl-search-result:hover,
.tgl-site-header .tgl-search-result.is-active {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.tgl-site-header .tgl-search-result__media {
    flex: 0 0 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--tgl-radius-sm);
    line-height: 0;
}

.tgl-site-header .tgl-search-result__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tgl-site-header .tgl-search-result__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;   /* sin esto el texto largo desborda el flex en vez de cortarse */
}

.tgl-site-header .tgl-search-result__title {
    font-size: 0.891rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgl-site-header .tgl-search-result__price {
    font-size: var(--tgl-text-eyebrow);
    opacity: 0.75;
}

/* Señal de carga sin spinner: un spinner nuevo es markup, CSS y una animación
   más para 300 ms de espera. */
.tgl-site-header .tgl-site-search.is-loading .tgl-site-search__list { opacity: 0.5; }

.tgl-site-header .tgl-site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;                                   /* 304:2744 */
    height: 39px;
    padding-inline: 11px;
    background: var(--sh-cta-bg);
    color: var(--sh-cta-fg);
    border-radius: var(--tgl-radius-full);
    font-size: 0.865rem;                        /* 13.832px */
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter var(--tgl-transition-fast);
}

/* Invertido, no atenuado.

   `filter: brightness(0.94)` no se veía, y peor: el CTA es un `<a>`, así que el
   `.elementor-kit-6 a:hover` del kit — que lleva `!important` — le ganaba al
   `color` y lo dejaba del mismo tono que el fondo del botón. El texto
   desaparecía en hover. Declarar los dos colores con `!important` es lo único
   que le gana a otro `!important`, y es el mismo patrón que ya usa
   `.tgl-hero__submit`. */
.tgl-site-header .tgl-site-header__cta:hover,
.tgl-site-header .tgl-site-header__cta:focus-visible {
    background: var(--sh-cta-fg) !important;
    color: var(--sh-cta-bg) !important;
}

.tgl-site-header .tgl-site-header__cta-arrow { width: 10px; height: 8px; }

/* El CTA del sheet solo existe en mobile. */
.tgl-site-header .tgl-site-header__cta--sheet { display: none; }

/* `color` y el reset de botón van FUERA del media query a propósito. Estaban
   dentro, así que arriba del breakpoint el kit de Elementor le ganaba a la
   hamburguesa y la pintaba de su color de botón. Está oculta ahí, pero un
   estilo que depende del viewport para no romperse es una trampa esperando. */
.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-close {
    color: currentColor;
    background: none;
    border: 0;
    padding: 0;
}

.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-head { display: none; }

/* ==========================================================================
   Mobile — el caso principal, no el fallback. 80% del tráfico.
   ========================================================================== */

@media (max-width: 1023px) {

    .tgl-site-header__inner {
        min-height: var(--sh-height-mobile);
        padding-inline: var(--tgl-space-4);
    }

    .tgl-site-header__logo img { height: 32px; }   /* 353:532 */

    /* El mismo <nav> del desktop, ahora como hoja a pantalla completa. */
    .tgl-site-header__nav {
        position: fixed;
        inset: 0;
        z-index: var(--tgl-z-overlay);
        display: flex;
        flex-direction: column;
        padding: var(--tgl-space-6) var(--tgl-space-5) var(--tgl-space-8);
        /* "White Sand" (355:773), no blanco. Es un color con nombre propio en
           el diseño y la hoja es la única superficie que lo usa hasta ahora. */
        background: var(--tgl-primitive-sand-100);
        color: var(--tgl-primitive-ink-1000);
        overflow-y: auto;
        overscroll-behavior: contain;

        /* `transform` + `visibility` en vez de `display`, para que la hoja
           anime y siga fuera del orden de tabulación mientras está cerrada. */
        visibility: hidden;
        transform: translateX(100%);
        transition:
            transform var(--tgl-transition-slow),
            visibility var(--tgl-transition-slow);
    }

    .tgl-site-header.is-nav-open .tgl-site-header__nav {
        visibility: visible;
        transform: translateX(0);
    }

    .tgl-site-header .tgl-site-header__sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--tgl-space-8);
    }

    .tgl-site-header .tgl-site-header__sheet-logo { line-height: 0; }

    .tgl-site-header .tgl-site-header__sheet-logo img {
        display: block;
        width: auto;
        height: 2.1875rem;   /* 35px — 355:775 */
    }

    .tgl-site-header .tgl-site-header__sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: currentColor;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .tgl-site-header .tgl-site-header__sheet-close svg { width: 17px; height: 17px; }

    .tgl-site-header .tgl-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: none;
    }

    .tgl-site-header .tgl-nav__item { padding-block: 8px; }

    .tgl-site-header .tgl-nav__top { justify-content: space-between; width: 100%; }

    /* El `!important` acompaña al de la regla desktop del botón combinado.
       Sin él, "Our Services" —que es un <button> con `__top-link` Y `__toggle`,
       y por eso arrastra el `font-size: 14.4px !important` que necesitábamos
       para ganarle al kit— salía más chico que el resto de los items dentro de
       la hoja. Visible en tablet y en mobile. */
    .tgl-site-header .tgl-nav__top-link,
    .tgl-site-header .tgl-nav__top-link.tgl-nav__toggle {
        font-size: 1.4375rem !important;          /* 23px — 355:783 */
        /* El diseño da 21.7px de interlineado sobre 23px de cuerpo, o sea 0.94.
           Se usa 1.2: en un item de una línea se ve igual, y si en un teléfono
           angosto alguno envuelve, con 0.94 las dos líneas se pisarían. */
        line-height: 1.2 !important;
        font-weight: 400;
    }

    /* 22px entre items de primer nivel (355:781) */
    .tgl-site-header .tgl-nav { gap: 22px; }
    .tgl-site-header .tgl-nav__item { padding-block: 0; }

    /* Todas las filas miden lo mismo, sin importar qué tenga adentro.
       Antes no: "Vacation Rentals" trae un botón de chevron aparte de 44px y
       su fila medía 44; "Our Services" es un botón solo y su fila medía lo que
       el texto, ~28. De ahí el hueco raro entre esos dos y no entre el resto.
       Con 44px fijos se empareja Y los items sin panel dejan de ser objetivos
       táctiles de 28px, que estaban por debajo del mínimo recomendado. */
    .tgl-site-header .tgl-nav__top,
    .tgl-site-header .tgl-nav__item > .tgl-nav__top-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        width: 100%;
    }

    /* El item sin destino ES el botón, así que el `space-between` de
       `.tgl-nav__top` no tiene dos hijos que separar y su chevron quedaba
       pegado al texto mientras el de los demás iba al borde derecho. Acá el
       botón ocupa todo el ancho y separa por su cuenta. */
    .tgl-site-header .tgl-nav__top-link.tgl-nav__toggle {
        width: 100% !important;
        justify-content: space-between;
    }

    /* El botón de chevron suelto pasa de 20×20 a 44×44. Dos motivos: 20px es
       menos de la mitad del objetivo táctil mínimo recomendado, y con el
       chevron pegado a la derecha su punta cae en la misma vertical que la del
       botón combinado (antes quedaban 4px de diferencia). */
    .tgl-site-header .tgl-nav__toggle:not(.tgl-nav__top-link) {
        width: 44px;
        height: 44px;
        justify-content: flex-end;
    }

    /* Acordeón: el panel pasa a ser parte del flujo, sin posicionamiento. */
    .tgl-site-header .tgl-nav__panel {
        position: static;
        transform: none;
        min-width: 0;
        margin-top: var(--tgl-space-3);
        padding: 0 0 0 var(--tgl-space-5);
        background: none;
        border: 0;
        border-radius: 0;
        backdrop-filter: none;
        box-shadow: none;
    }

    .tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-links {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        width: auto;   /* anula los 491px de la grilla desktop */
    }

    .tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-item { flex: none; }

    .tgl-site-header .tgl-nav__group-item .tgl-nav__link,
    .tgl-site-header .tgl-nav__panel-link {
        font-size: 1rem;                          /* 16px — 355:805 */
        font-weight: 400;
    }

    /* 31px de sangría y 12px entre links, como el diseño (355:804) */
    .tgl-site-header .tgl-nav__panel {
        padding-left: 31px;
    }

    .tgl-site-header .tgl-nav__panel-body { gap: 12px; }

    .tgl-site-header .tgl-nav__panel-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 12px;
        padding-top: 0;
        border-top: 0;   /* en mobile el diseño no dibuja divisor (355:804) */
    }

    /* El subrayado es un borde inferior del ancho del texto, no
       `text-decoration`: así el naranja de Foster Hill (355:835) y el negro de
       All Rentals (355:824) se ven como en el diseño. */
    .tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link {
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
    }

    .tgl-site-header .tgl-site-header__cta--sheet {
        display: inline-flex;
        margin-top: auto;
        height: 40px;                              /* 138:1307 */
    }

    .tgl-site-header .tgl-site-header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: currentColor;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .tgl-site-header .tgl-site-header__burger svg { width: 22px; height: 15px; }

    /* ── Buscador dentro de la hoja ──
       El diseño no lo dibuja ni en la barra ni en la hoja mobile. Se decidió
       ponerlo en la hoja el 2026-09-02: el 80% del tráfico es mobile y buscar
       una casa por nombre es un camino de navegación real, no un extra. En la
       barra sí queda afuera — ahí compite con el logo y la hamburguesa en 390px.

       El <form> es EL MISMO nodo del desktop; lo mueve el bundle. Por eso acá
       no hay un segundo buscador que mantener en sincronía. */
    .tgl-site-header .tgl-site-header__sheet-search {
        margin-bottom: 28px;
    }

    .tgl-site-header .tgl-site-header__sheet-search .tgl-site-search {
        width: 100%;
        height: 44px;              /* objetivo táctil, no los 39px del desktop */
        justify-content: flex-start;
        background: var(--tgl-primitive-white);
        border: 1px solid rgba(16, 16, 16, 0.12);
        border-radius: var(--tgl-radius-full);
    }

    .tgl-site-header .tgl-site-header__sheet-search .tgl-site-search__toggle {
        order: -1;                 /* la lupa va a la izquierda del campo */
        width: 44px;
        height: 44px;
        background-color: transparent !important;
    }

    /* El campo llena lo que queda. `flex: 1` en vez del ancho fijo de 124px
       del desktop, que en un teléfono de 390px se quedaría corto. */
    .tgl-site-header .tgl-site-header__sheet-search .tgl-site-search__input {
        flex: 1;
        width: auto;
        min-width: 0;
        padding-inline: 0 12px;
        opacity: 1;
        pointer-events: auto;
        font-size: 1rem;           /* 16px: menos que esto y iOS hace zoom al enfocar */
    }

    /* Los resultados salen a todo el ancho de la hoja, no en un panel de 420px
       anclado a la derecha. */
    .tgl-site-header .tgl-site-header__sheet-search .tgl-site-search__results {
        /* `left` y `right` en 0 con `width: auto`: el panel calca el ancho del
           form sin depender de a qué se refiere el 100%. Con `width: 100%` se
           pasaba unos píxeles del borde derecho de la pantalla. */
        left: 0;
        right: 0;
        width: auto;
        background: var(--tgl-primitive-white);
        border-color: rgba(16, 16, 16, 0.12);
        color: var(--tgl-primitive-ink-1000);
        backdrop-filter: none;
    }

    /* El CTA no va en la barra abajo de 1024px: el único "Plan a trip" vive
       dentro de la hoja. Decisión del 2026-09-02.

       Se aparta del diseño a propósito — el frame mobile (353:531) dibuja
       logo + CTA + hamburguesa en la barra. Con los dos, el CTA y la
       hamburguesa se apretaban contra el borde, y al abrir el menú quedaban
       dos "Plan a trip" en pantalla.

       `display: none` y no `visibility: hidden`: `visibility` deja el hueco
       reservado y la hamburguesa seguiría corrida hacia la izquierda por un
       botón que nadie ve. */
    .tgl-site-header .tgl-site-header__actions .tgl-site-header__cta {
        display: none;
    }
}

/* ==========================================================================
   Accesibilidad y preferencias
   ========================================================================== */

.tgl-site-header :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: var(--tgl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .tgl-site-header,
    .tgl-site-header__nav,
    .tgl-site-header .tgl-site-search__input,
    .tgl-site-header .tgl-nav__chevron,
    .tgl-site-header .tgl-nav {
        transition: none;
    }
}