/* ============================================================
   TERRITORY — Brand Overrides
   Manual de Sitio Web (261225)

   ESTA ITERACIÓN: HEADER ÚNICAMENTE
   - Franja Azul 7 (#1A4D80) sólida
   - Franja delgada Azul 5 (#3399FF) inmediatamente debajo
   - Logo TERRITORY en blanco a la izquierda
   - Nav en TEXTO Nunito Semibold blanco
   - Separadores " | "
   - Ícono de Instagram al final
   - Fondo del sitio: Gris Fondo #F8F5F3
   ============================================================ */

:root {
  --azul-8: #0D2640;
  --azul-7: #1A4D80;
  --azul-6: #2673BF;
  --azul-5: #3399FF;
  --azul-1: #D6EBFF;
  --verde-1: #A0B534;
  --gris-fondo: #F8F5F3;
  --blanco: #FFFFFF;

  /* ============================================================
     CAPA SÓLIDA detrás del GRADIENT y delante del MAPA
     (el rectángulo que va desde top: 75.2cqi hasta el bottom).
     >>> Cambiá ESTOS valores para ajustar color y opacidad. <<<
     Buscar selector: .map-section .tm-map-accordion .div-block-6::before
     ============================================================ */
  --map-solid-color: #FFFFFF;       /* color del bloque sólido */
  --map-solid-opacity: 1;           /* 0 = transparente, 1 = sólido */

  /* ============================================================
     POSICIÓN VERTICAL DEL HERO (territory-hero)
     Valor en cqi (% del ancho del contenedor) = posición FIJA
     desde el top, anclada a la imagen. Mantiene el inicio del
     texto en el mismo lugar que en desktop (~80% del ancho).
     Si el texto es más alto, el contenedor crece hacia abajo
     y el área extra queda cubierta por el gradient/solid.
     ============================================================ */
  --hero-top: 80cqi;

  /* ============================================================
     COLOR del ÁREA SÓLIDA debajo de la imagen.
     Cuando el contenedor crece más alto que la imagen (mobile),
     el área debajo de la imagen se llena con este color SÓLIDO
     (sin gradient), para que el hero tenga buen contraste y NO
     se sienta el fade en viewports angostos.
     ============================================================ */
  --map-extension-color: var(--azul-8);
}

/* ---------- Fondo base ---------- */
body, .body {
  background-color: var(--gris-fondo) !important;
  font-family: 'Nunito', sans-serif !important;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Eliminar cualquier degradado/sombra previo y dejar solo Azul 7 sólido */
.tm-navbar,
.tm-navbar .navbar-no-shadow-container,
.tm-navbar .container-regular,
.tm-navbar .navbar-wrapper {
  background: var(--azul-7) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.tm-navbar {
  position: relative !important;
  width: 100% !important;
  height: auto !important;       /* override Webflow 6vw */
  min-height: 0 !important;
  padding: 0;
  margin: 0;
  border: 0 !important;
  z-index: 5;
  overflow: visible !important;
}

/* Franja delgada Azul 5 #3399FF debajo de la franja Azul 7 */
.tm-navbar__strip {
  display: block !important;
  width: 100% !important;
  height: 6px !important;
  background: var(--azul-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  font-size: 0;
  position: relative;
  z-index: 50;
}

/* Map section: respiración con la franja. */
.map-section {
  position: relative !important;
  z-index: 1;
  margin: 0 !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  background-color: var(--gris-fondo) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

html, body, .body {
  background-color: var(--gris-fondo) !important;
  margin: 0 !important;
}

/* Contenedor del mapa: ancho 800 fijo (o 92vw). El alto NO está fijado:
   crece naturalmente con su contenido. El único hijo en flujo es el
   .territory-hero (posicionado por margin-top: var(--hero-top), lo que
   ancla su TOP en un lugar fijo relativo al ancho de la imagen).
   La imagen y los pines son absolutos y NO empujan la altura.
   Resultado: container_height = --hero-top + altura_del_hero. Cuando
   el hero crece (más wrapping en viewports angostos), el contenedor
   crece hacia abajo automáticamente. El gradient/solid extiende hasta
   el bottom del contenedor (cubriendo todo lo que esté debajo). */
.map-section .div-block-6 {
  width: 800px !important;
  max-width: 92vw !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: var(--gris-fondo) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 7px;
  container-type: inline-size;   /* habilita unidades cqi para anclar al ancho */
}

/* Wrapper del mapa: arranca con aspect-ratio 800/600 (recortado abajo) y
   3s después pasa a su aspect-ratio natural 800/940. */
.map-section .tm-map-accordion {
  width: 800px;
  max-width: 92vw;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 800 / 600;
  transition: aspect-ratio 0.1s cubic-bezier(.22, .9, .32, 1);
}
.map-section .tm-map-accordion.is-open {
  aspect-ratio: auto;
  height: auto;
}
.map-section .tm-map-accordion .div-block-6 {
  margin: 0 !important;
}

/* ============================================================
   CAPA SÓLIDA (atrás del gradient, delante del mapa).
   Bloque rectangular que ocupa la misma zona que el degradado.
   COLOR y OPACIDAD se controlan desde las variables :root al
   inicio del archivo: --map-solid-color y --map-solid-opacity.
   ============================================================ */
.map-section .tm-map-accordion .div-block-6::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 75.2cqi;
  height: 42.3cqi;     /* 117.5cqi (bottom imagen) − 75.2cqi → sólo área de imagen */
  background: var(--map-solid-color);
  opacity: var(--map-solid-opacity);
  pointer-events: none;
  z-index: 1;       /* detrás del gradient (z 2), delante del mapa */
}

/* CAPA 2 (delante): el degradado. Mismo rectángulo que la capa blanca.
   Gradación a Azul 8 (#0D2640) anclada a la IMAGEN (no al contenedor).
   La imagen tiene aspect 800/940 y está anclada al top → su altura visible
   siempre es container_width × (940/800) = 117.5cqi.
   El gradient comienza al 64% de la altura de la imagen = 0.64 × 117.5 = 75.2cqi.
   Así el TOP del gradient queda fijo al ancho del contenedor (= a la imagen)
   y nunca se mueve para arriba cuando cambia el aspect-ratio. El BOTTOM
   se ancla al contenedor, así que puede extenderse más allá del alto de la imagen. */
.map-section .tm-map-accordion .div-block-6::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 75.2cqi;
  bottom: 0;
  /* Stops anclados en CQI (no %) → la transición transparente→opaca ocurre
     SIEMPRE en los primeros 42.3cqi (= área de la imagen) y abajo se queda
     opaco Azul 8 sólido. Una sola capa continua → sin "barra" visible
     entre la imagen y el área extendida del hero. */
  background: linear-gradient(
    180deg,
    rgba(133, 194, 255, 0)     0,
    rgba(133, 194, 255, 0.12)  4.23cqi,   /* 10% × 42.3cqi */
    rgba( 92, 173, 255, 0.28)  9.30cqi,   /* 22% */
    rgba( 38, 115, 191, 0.50) 16.07cqi,   /* 38% */
    rgba( 26,  77, 128, 0.78) 24.53cqi,   /* 58% */
    rgba( 13,  38,  64, 0.96) 34.69cqi,   /* 82% */
    rgba( 13,  38,  64, 1)    42.30cqi,   /* 100% → bottom imagen */
    rgba( 13,  38,  64, 1)   100%        /* y queda sólido hasta el bottom */
  );
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   HERO — "A Journey of identity"
   Continúa visualmente la gradación: fondo Azul 8 sólido
   ============================================================ */
/* Hero anclado por su TOP en --hero-top (cqi = % del ancho del contenedor).
   Es el ÚNICO hijo en flujo de .div-block-6, así que su altura empuja
   el alto total del contenedor → si el texto crece, el contenedor crece
   hacia abajo (y el gradient/solid lo cubre porque van hasta bottom: 0). */
.territory-hero {
  position: relative;
  margin-top: var(--hero-top);
  padding: 41px 44px 64px;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "topline topline"
    "text    cta";
  gap: 39px 32px;
  align-items: start;
  z-index: 4;                  /* sobre el degradado (z 2) y los pines */

  /* Oculto hasta que el acordeón se despliegue */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: .35s;
}

.tm-map-accordion.is-open .territory-hero {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.territory-hero__text { min-width: 0; }

.territory-hero__title {
  font-family: 'Lobster', cursive !important;
  font-weight: 400 !important;
  font-size: 48px;
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0 0 10px;
  letter-spacing: 0.4px;
}

/* Línea fina centrada arriba del bloque de texto (75% del ancho) */
.territory-hero__topline {
  grid-area: topline;
  width: 75%;
  justify-self: center;
  height: 1px;
  background: #FFFFFF;
  border: 0;
  margin: 0;
  opacity: 0.9;
}

/* Línea corta blanca debajo del título (como subrayado) */
.territory-hero__rule {
  width: 80px;
  height: 3px;
  background: #FFFFFF;
  border: 0;
  margin: 24px 0 24px;
  opacity: 1;
}

.territory-hero__text { grid-area: text; min-width: 0; }
.territory-hero__cta  { grid-area: cta; }

.territory-hero__copy {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  max-width: 520px;
  margin: 0;
}

.territory-hero__cta {
  display: inline-block;
  background: #FFFFFF;
  color: #1A4D80;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  align-self: start;
  margin-top: 6px;
}
.territory-hero__cta:hover {
  background: #3399FF;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(13, 38, 64, .35);
}

/* ============================================================
   MOBILE — sólo ajustes tipográficos y layout del hero.
   La estructura (imagen absoluta arriba, hero absoluto al bottom,
   gradient anclado a 75.2cqi, contenedor con min-height que crece)
   es unificada y vive en las reglas base — no se reposiciona nada
   en mobile, sólo se ajustan tamaños de texto y disposición del grid.
   ============================================================ */
@media (max-width: 767px) {

  /* Hero: una sola columna (texto encima del CTA) */
  .territory-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topline"
      "text"
      "cta";
    padding: 22px 22px 28px;
    gap: 18px;
  }

  .territory-hero__title  { font-size: 38px; line-height: 1.05; }
  .territory-hero__copy   { font-size: 13px; }
  .territory-hero__cta    { justify-self: start; padding: 12px 22px; font-size: 14px; }
  .territory-hero__rule   { margin: 14px 0; }
  .territory-hero__topline { width: 75%; }
}

/* texto viejo "Click the pins..." debajo del mapa: lo escondemos */
.map-section .div-block-7 { display: none !important; }

/* Sección de tiles legacy (Webflow): oculta */
.brix---section-2 { display: none !important; }

/* ============================================================
   FOOTER — siguiendo el manual
   - 2 franjas arriba: Azul 5 #3399FF + Verde 1 #A0B534
   - Fondo Gris Fondo #F8F5F3
   - Logo TERRITORY en Azul 6 #2673BF (centrado)
   - "Copyright © 2025 territorymiami.org" en Nunito Light debajo
   - Ícono Instagram a la derecha en Azul 6
   ============================================================ */
.footer-section {
  background-color: var(--gris-fondo) !important;
  position: relative !important;
  padding-top: 0 !important;
  z-index: 99;
}

/* Franjas arriba del footer:
   - Azul 5: 5% más gruesa que la base (6 → 7px)
   - Gap entre franjas: ~2% (visible separación con gris fondo)
   - Verde 1: 20% más delgada que la base (6 → 5px)
   Total: 7 + 4 + 5 = 16px */
.footer-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
  background: linear-gradient(to bottom, var(--azul-5) 0, var(--azul-5) 19px, var(--gris-fondo) 0px, var(--gris-fondo) 26px, var(--verde-1) 0px, var(--verde-1) 0px);
}
.footer-section::after { content: none; }

.brix---footer-wrapper {
  background-color: var(--gris-fondo) !important;
  padding: 64px 24px 36px !important;
}

.brix---container-default-2 {
  max-width: 1100px;
  margin: 0 auto;
}

/* Layout: logo centrado, copyright debajo, IG a la derecha */
.brix---footer-bottom-v12 {
  position: relative;
}

.brix---grid-footer-v12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Logo TERRITORY recoloreado a Azul 6 #2673BF, PLANO.
   Usa un filtro SVG (definido en index.html) que:
   - Setea RGB a (38, 115, 191) = Azul 6 exacto
   - Aplica un umbral al canal alpha (multiplicador 6, offset -1.5) que
     elimina los pixeles semi-transparentes (anti-aliasing/sombras).
   Resultado: silueta sólida sin halos. */
.brix---footer-logo-wrapper {
  order: 1;
  margin: 0 !important;
  display: inline-block;
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}
.brix---footer-logo {
  height: 90px;
  width: auto;
  display: block;
  margin: 0 auto;
  opacity: 1;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.brix---footer-logo-wrapper {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  text-align: center;
}

/* Copyright debajo del logo, Nunito Light */
.brix---text-left---t-center {
  order: 2;
  text-align: center;
}
.brix---paragraph-default-2 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px;
  color: #000000 !important;
  text-align: center;
  margin: 0;
}
.brix---paragraph-link {
  color: #000000 !important;
  font-weight: 300 !important;
  text-decoration: none;
}
.brix---paragraph-link:hover {
  color: var(--azul-6) !important;
}

/* Icono Instagram: oculto (no va en el footer según indicación) */
.brix---grid-footer-v12 > div:last-child,
.brix---social-media-grid-right---t-center,
.brix---icon-square-36px {
  display: none !important;
}

/* Sub-footer "Donated to this non-profit by BuildMyWebsite": oculto */
.spark-footer-bottom { display: none !important; }

@media (max-width: 767px) {
  .brix---footer-wrapper { padding: 40px 20px 28px !important; }
  .brix---footer-logo { height: 56px; }
  .brix---grid-footer-v12 > div:last-child {
    position: static;
    transform: none;
    margin-top: 12px;
  }
}

/* Imagen del mapa nuevo: contenida con aspecto natural, anclada al TOP.
   Cuando el contenedor crece más alto que la imagen (viewports angostos
   donde el hero necesita espacio), la imagen se queda arriba y debajo
   queda el área donde se extiende el hero/gradient. */
.map-section .image-7 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain;
  object-position: top center;
}

/* Pines: absolute con coords % relativas a la imagen 800x940 */
.map-section .div-block-6 a.lightbox-link {
  position: absolute !important;
  display: block;
  width: 5.4%;
  min-width: 25px;
  z-index: 3;
  transform: translate(-50%, -100%);
}
.map-section .div-block-6 a.lightbox-link img[class^="pin-"] {
  position: static !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Posiciones de cada pin sobre el mapa: top en cqi (relativo al ancho del
   contenedor) para que queden anclados a la imagen aunque el contenedor
   crezca de altura en viewports angostos. Cada top = porcentaje original
   × 117.5cqi (altura de la imagen). */
.map-section .div-block-6 a.lightbox-link:nth-of-type(1) { left: 68%;  top: 23.5cqi;   } /* 1 Miami Circle — original 20% */
.map-section .div-block-6 a.lightbox-link:nth-of-type(2) { left: 31%;  top: 28.2cqi;   } /* 2 Wagner House — original 24% */
.map-section .div-block-6 a.lightbox-link:nth-of-type(3) { left: 36%;  top: 23.5cqi;   } /* 3 Brightline Station — original 20% */
.map-section .div-block-6 a.lightbox-link:nth-of-type(4) { left: 76%;  top: 64.625cqi; } /* 4 Vizcaya — original 55% */
.map-section .div-block-6 a.lightbox-link:nth-of-type(5) { left: 43%;  top: 12.925cqi; } /* 5 Freedom Tower — original 11% */
.map-section .div-block-6 a.lightbox-link:nth-of-type(6) { left: 38%;  top: 30.55cqi;  } /* 6 Fort Dallas — original 26% */

.tm-navbar .navbar-no-shadow-container {
  padding: 0 !important;
  max-width: 100% !important;
}

.tm-navbar .container-regular {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 64px !important;
  box-sizing: border-box;
}

.tm-navbar .navbar-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 120px;
  gap: 40px;
  width: 100%;
  position: relative !important;
  flex-wrap: nowrap !important;
}

/* Reset Webflow absolute positioning de la marca y el menú */
.tm-navbar .navbar-brand,
.tm-navbar .nav-menu-wrapper,
.tm-navbar .tm-nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

.tm-navbar .tm-nav {
  margin-left: auto !important;
}

/* --- Logo TERRITORY en blanco --- */
.tm-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.tm-navbar .navbar-brand .image-9 {
  height: 56px;
  width: auto;
  max-width: none;
  display: block;
  /* logo intacto: sin filtros, sin sombras */
  filter: none !important;
  box-shadow: none !important;
}

/* --- Menú de navegación: texto Nunito Semibold blanco --- */
.tm-nav {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
}

.tm-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.tm-nav__item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.tm-nav__link {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 300 !important;          /* Light */
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #FFFFFF !important;            /* blanco FFFFFF */
  text-decoration: none;
  text-transform: uppercase;
  padding: 4px 0;
  transition: color .18s ease, opacity .18s ease;
  white-space: nowrap;
  line-height: 1;
}
.tm-nav__link:hover {
  color: var(--azul-1) !important;
  opacity: 1;
}

.tm-nav__sep {
  color: #FFFFFF;
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  font-size: 20px;
  opacity: 0.9;
  line-height: 1;
  user-select: none;
  margin: 0 -4px;
}

/* --- Icono Instagram --- */
.tm-nav__item--ig { margin-left: 4px; }
.tm-nav__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.tm-nav__ig:hover {
  color: var(--azul-7);
  background: #FFFFFF;
  transform: translateY(-1px);
}
.tm-nav__ig svg { display: block; }

/* --- Botón hamburguesa (mobile) en blanco --- */
.tm-navbar .menu-button .icon { color: #FFFFFF; }

/* --- Forzar el menú visible en tablet/desktop (Webflow lo ocultaba) --- */
.tm-navbar .tm-nav.w-nav-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
}

/* Ocultar el botón hamburguesa que Webflow inyecta */
.tm-navbar .menu-button.w-nav-button {
  display: none !important;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .tm-navbar .container-regular { padding: 0 32px !important; }
  .tm-nav__list { gap: 14px; }
  .tm-nav__link { font-size: 15px; letter-spacing: 0.3px; }
  .tm-nav__sep { font-size: 16px; }
}

@media (max-width: 900px) {
  .tm-navbar .container-regular { padding: 0 20px !important; }
  .tm-navbar .navbar-wrapper { min-height: 90px; gap: 16px; }
  .tm-navbar .navbar-brand .image-9 { height: 40px; }
  .tm-nav__list { gap: 10px; }
  .tm-nav__link { font-size: 12px; }
  .tm-nav__sep { font-size: 14px; }
}

@media (max-width: 640px) {
  .tm-navbar .tm-nav.w-nav-menu { display: none !important; }
  .tm-navbar .menu-button.w-nav-button { display: flex !important; color: #fff; align-items: center; justify-content: center; }

  /* El overlay que Webflow inyecta es el panel dropdown */
  .tm-navbar .w-nav-overlay {
    background: var(--azul-7) !important;
    overflow: visible !important;
    box-shadow: 0 8px 20px rgba(13, 38, 64, 0.35);
    z-index: 1000;
  }

  /* Cuando Webflow abre el menú lo mostramos estático dentro del overlay */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open],
  .tm-navbar .w-nav-overlay .tm-nav.w-nav-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 24px 20px 28px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Lista vertical, centrada */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__list,
  .tm-navbar .w-nav-overlay .tm-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Cada item ocupa el ancho completo y centra su contenido */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__item,
  .tm-navbar .w-nav-overlay .tm-nav__item {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Separadores "|" ocultos en móvil */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__sep,
  .tm-navbar .w-nav-overlay .tm-nav__sep { display: none !important; }

  /* Links: touch target generoso, centrado, divisor sutil entre items */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__link,
  .tm-navbar .w-nav-overlay .tm-nav__link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 17px;
    letter-spacing: 1.2px;
    padding: 16px 12px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* El último link (antes del IG) sin borde inferior */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__item:nth-last-child(2) .tm-nav__link,
  .tm-navbar .w-nav-overlay .tm-nav__item:nth-last-child(2) .tm-nav__link {
    border-bottom: 0;
  }

  /* Item de Instagram: centrado y con respiración arriba */
  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__item--ig,
  .tm-navbar .w-nav-overlay .tm-nav__item--ig {
    display: flex;
    justify-content: center;
    margin: 18px 0 4px;
  }

  .tm-navbar .tm-nav.w-nav-menu[data-nav-menu-open] .tm-nav__ig,
  .tm-navbar .w-nav-overlay .tm-nav__ig {
    width: 40px;
    height: 40px;
  }
}

/* Ocultar el menú legacy (dropdowns viejos con imágenes) */
.tm-legacy-nav { display: none !important; }