/* ==========================================================================
   Hero Instalaciones 2026 — versión "Etiquetas"
   Todo el CSS va plano (sin anidación con &): HubSpot no lo compila y los
   navegadores que no soportan CSS nesting descartarían la regla completa.
   ========================================================================== */

/* ==== Tokens ==== */
#instalaciones-hero {
  /* Marca */
  --accent: #ff5900;            /* Naranja Anáhuac: pin, tarjeta, hover del CTA, texto de etiqueta */
  --on-accent: #ffffff;         /* Texto/íconos sobre naranja y sobre el cielo */

  /* Pin — la caja del pin tiene la MISMA proporción que la imagen de máscara (80×103), así la
     forma entra completa sin recortes. Si cambias --pin-w, ajusta --pin-h = --pin-w × 103 / 80.
     Todo lo que se coloca respecto al pin (etiqueta, tarjeta, el "+") sale de aquí. */
  --pin-w: 40px;                /* Ancho del pin */
  --pin-h: 51.5px;              /* Alto del pin = 40 × 103 / 80 */
  --pin-head-y: 19px;           /* Centro de la cabeza del pin desde arriba (37.5% del alto): ahí va el "+" y de ahí crece la tarjeta */
  --pin-plus: 18px;             /* Tamaño del "+" */
  --pin-plus-stroke: 3px;       /* Grosor de las barras del "+" */

  /* Tarjeta del pin */
  --card-w: 195px;              /* Ancho de la tarjeta abierta */
  --card-h: 203px;              /* Alto de la tarjeta abierta. También reserva su espacio sobre el mapa en móvil */
  --card-x: -61px;              /* Corrimiento horizontal por defecto respecto al pin (el JS lo ajusta en los bordes) */
  --card-y: -110px;             /* Corrimiento vertical por defecto respecto al pin */

  /* Etiqueta con el nombre del lugar */
  --label-bg: var(--on-accent);         /* Fondo de la etiqueta */
  --label-color: var(--accent);         /* Texto de la etiqueta */
  --label-bg-hover: var(--accent);      /* Fondo en hover/focus (solo cambio de color) */
  --label-color-hover: var(--on-accent);/* Texto en hover/focus */
  --label-font-size: 13px;      /* Subirlo hace etiquetas más anchas y aumenta choques entre pins cercanos */
  --label-radius: 1000px;       /* 1000px = pastilla; 4px = rectángulo */
  --label-max-width: 160px;     /* Ancho máximo antes de partir el nombre en 2 líneas */
  --label-gap: 8px;             /* Separación entre el pin y su etiqueta */

  /* Cielo en móvil */
  --sky-height-mobile: 60svh;   /* Alto del cielo en ≤980px (desktop sigue en 100vh). Bajarlo acerca el mapa al título */
  --sky-min-height-mobile: 420px; /* Piso para que título + CTA + flecha no se encimen en pantallas bajas */
}

/* ==== Cielo (bienvenida) ==== */
.hero-sky {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 37px;                    /* Espacio entre título, CTA y flecha */
  position: relative;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.hero-sky h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
  color: var(--on-accent);
  font-size: 50px;
}
.hero-sky h1 .h1-subtitle {
  font-size: 30px;
}

.hero-sky .hero-sky-cta {
  color: var(--on-accent) !important;
  border: 1px solid var(--on-accent);
  padding: 10px 20px;
  border-radius: 1000px;
  text-decoration: none;
  /* Solo lo que cambia en hover: animar "all" obligaría al navegador a vigilar todas las propiedades */
  transition: background-color 0.5s, border-color 0.5s;
}
.hero-sky .hero-sky-cta:hover {
  background-color: var(--accent);
  text-decoration: none !important;
  border-color: var(--accent);
}

.hero-sky .scroll-arrow {
  position: relative;
  cursor: pointer;
}
.hero-sky .scroll-arrow:hover {
  opacity: .5;
}
/* Foco de teclado visible en los dos controles del cielo (con mouse no aparece) */
.hero-sky .hero-sky-cta:focus-visible,
.hero-sky .scroll-arrow:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: 4px;
}
.hero-sky .scroll-arrow span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid var(--on-accent);
  border-bottom: 1px solid var(--on-accent);
  transform: rotate(-45deg);
  box-sizing: border-box;
  animation: sdb04 2s infinite; /* Cambiar 2s = ritmo del rebote de la flecha */
}
@keyframes sdb04 {
  0%   { transform: rotate(-45deg) translate(0, 0); }
  20%  { transform: rotate(-45deg) translate(-10px, 10px); }
  40%  { transform: rotate(-45deg) translate(0, 0); }
}
/* Quien pidió menos movimiento en su sistema ve la flecha quieta */
@media (prefers-reduced-motion: reduce) {
  .hero-sky .scroll-arrow span {
    animation: none;
  }
}

.hero-sky .cloud {
  position: absolute;
  height: 265px;
  width: 500px;
}
.hero-sky .cloud.left-cloud {
  left: -10%;
  bottom: 0;
}
.hero-sky .cloud.right-cloud {
  right: -10%;
}

/* ==== Mapa ====
   background-size 100% 100% (no "cover") a propósito: los pins se colocan en % y así caen
   siempre sobre el mismo punto de la ilustración, sin importar el ancho de pantalla. */
.hero-campus {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -67px;            /* El mapa se monta sobre el borde inferior del cielo */
}

/* ==== Punto del mapa ====
   Caja del tamaño exacto del pin colocada con top/left % desde el HTML.
   Todo lo demás (tarjeta y etiqueta) se mide desde su esquina superior izquierda. */
.hero-campus .map-spot {
  position: absolute;
  width: var(--pin-w);
  height: var(--pin-h);
}
/* Abierto: el punto entero sube de capa para que su tarjeta tape pins/etiquetas vecinos */
.hero-campus .map-spot.is-open {
  z-index: 5;
}

.hero-campus .map-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pin-w);
  height: var(--pin-h);
  padding: 0;
  box-sizing: border-box;       /* Fijo para que el tema no lo cambie */
  color: var(--on-accent);      /* Color del "+" */
  background-color: var(--accent);
  z-index: 2;                   /* Pin SIEMPRE encima de cualquier etiqueta (la etiqueta nunca lo tapa) */
  /* La máscara se estira EXACTO a la caja (que ya tiene su proporción): sin "cover", que la
     agrandaba, la anclaba a la izquierda y le cortaba ~3px del lado derecho. */
  -webkit-mask-repeat: no-repeat; /* Prefijos para Safari < 15.4 */
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  overflow: hidden;
  cursor: pointer;
  /* Sin cambio de color en hover a propósito: la tarjeta lo tapa al instante, y un pin que se
     pone blanco debajo de la tarjeta que nace hacía visible un destello. */
}
/* El "+" se dibuja con dos barras CSS centradas en la cabeza del pin, no con un carácter de texto:
   la posición de un "+" de texto depende de la fuente y del line-height (y del tema), y quedaba bajo. */
.hero-campus .map-pin-plus {
  position: absolute;
  left: 50%;
  top: var(--pin-head-y);
  width: var(--pin-plus);
  height: var(--pin-plus);
  translate: -50% -50%;
  font-size: 0;                 /* Oculta el "+" de texto del HTML; quedan las barras */
}
.hero-campus .map-pin-plus::before,
.hero-campus .map-pin-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 2px;
  background-color: currentColor;
}
/* Al abrir, el "+" se apaga al instante: la tarjeta nace como un círculo más chico que el "+"
   y sus puntas blancas se asomarían alrededor durante los primeros frames */
.hero-campus .map-spot.is-open .map-pin-plus {
  opacity: 0;
}
.hero-campus .map-pin-plus::before { width: 100%; height: var(--pin-plus-stroke); } /* barra horizontal */
.hero-campus .map-pin-plus::after  { width: var(--pin-plus-stroke); height: 100%; } /* barra vertical */

/* ==== Tarjeta del pin ====
   Geometría en los tokens --card-* (por defecto cubre el pin, como la tarjeta original).
   La ANIMACIÓN no está aquí: module.js escribe --open (0 cerrado → 1 abierto, con rebote:
   puede pasar de 1 un instante) y el CSS solo la traduce a escala.
   No hay transition a propósito: el resorte calcula cada frame, y una transición encima lo
   suavizaría dos veces (dos animaciones peleando por la misma propiedad). */
.hero-campus .map-pin-card {
  --card-from: 0.1;             /* Escala inicial: un círculo naranja más chico que la cabeza del pin, invisible
                                   sobre ella. Subirlo hace que el arranque se asome fuera del pin */
  --open: 0;                    /* Lo escribe el JS. No lo cambies aquí */

  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  z-index: 3;                   /* Encima de su pin: la tarjeta "es" el pin que creció */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;             /* El título entra desde el borde inferior de la tarjeta, recortado */
  background-color: var(--accent);
  color: var(--on-accent) !important;
  text-decoration: none !important;
  /* Crece desde la CABEZA del pin, expresada en coordenadas de la tarjeta.
     Como usa --card-x/--card-y, si el JS recorre la tarjeta en un borde, el punto sigue al pin. */
  transform-origin: calc(var(--pin-w) / 2 - var(--card-x)) calc(var(--pin-head-y) - var(--card-y));
  scale: calc(var(--card-from) + (1 - var(--card-from)) * var(--open));
  /* Nace como CÍRCULO (50%) dentro de la cabeza del pin —naranja sobre naranja, no se nota— y se
     vuelve rectángulo al llegar. Con esquinas rectas desde el inicio se veía un cuadrito sobre el pin. */
  border-radius: calc(50% * (1 - min(var(--open), 1)));
  visibility: hidden;           /* El JS la hace visible mientras se mueve o está abierta */
  pointer-events: none;
  /* SIN transición, y con !important porque la tarjeta es un <a> y muchos temas ponen
     "a { transition: all }": esa transición se metería encima del resorte (lo suaviza con retraso
     y demora el ocultarse), y la tarjeta reaparecía en pequeño un instante al cerrar. */
  transition: none !important;
}
.hero-campus .map-pin-card.is-live {
  visibility: visible;
}
.hero-campus .map-spot.is-open .map-pin-card {
  pointer-events: auto;
}
.hero-campus .map-pin-card:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: 2px;
}
.hero-campus .map-pin-img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  /* La foto aparece cuando la tarjeta ya salió del pin (--open ≥ ~0.4): en los primeros frames
     se vería una miniatura de la foto dentro del círculo naranja. Cambiar 0.15 adelanta/atrasa
     cuándo empieza a verse; el ×4 es qué tan rápido termina de aparecer. */
  opacity: clamp(0, (var(--open) - 0.15) * 4, 1);
}
/* El título sale de la tarjeta un momento DESPUÉS que ella (segundo resorte, --title-in 0→1):
   primero aparece el lugar, luego su nombre. Al cerrar se invierte: el título se va primero. */
.hero-campus .map-pin-title {
  --title-in: 0;                /* Lo escribe el JS */
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 70px;
  box-sizing: border-box;
  padding: 10px;
  color: var(--on-accent);
  font-size: 14px;
  line-height: 120%;
  background-color: var(--accent);
  translate: 0 calc((1 - var(--title-in)) * 100%);
}
.hero-campus .map-pin-title .map-pin-arrow {
  flex: none;
  height: 18px;
  width: 19px;
}

/* ==== Etiqueta siempre visible (debajo del pin) ====
   Anclada al .map-spot; los margin la bajan y la centran según --pin-w / --pin-h.
   Va fuera del .map-pin porque su mask-image recortaría el texto. */
.hero-campus .map-pin-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;                   /* Encima del mapa, debajo de los pins (2) y la tarjeta abierta (3) */
  box-sizing: border-box;
  display: block;
  width: max-content;
  max-width: var(--label-max-width);
  padding: 4px 10px;
  background-color: var(--label-bg);
  color: var(--label-color) !important;
  font-size: var(--label-font-size);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  border-radius: var(--label-radius);
  pointer-events: auto;
  /* Siempre centrada debajo del pin: X = mitad del ancho del pin, Y = alto del pin + separación */
  margin-left: calc(var(--pin-w) / 2);
  margin-top: calc(var(--pin-h) + var(--label-gap));
  transform: translateX(-50%);
  transition: background-color .3s, color .3s, opacity .3s; /* Cambiar .3s = velocidad del cambio de color */
}
a.map-pin-label:hover,
a.map-pin-label:focus-visible {
  background-color: var(--label-bg-hover);
  color: var(--label-color-hover) !important;
}
a.map-pin-label:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: 2px;
}
/* Cuando la tarjeta del pin está abierta, su etiqueta se oculta para no encimarse.
   Solo se vuelve transparente: SIGUE recibiendo el cursor. Si dejara de recibirlo
   (pointer-events: none), el cursor que estaba sobre ella "caería" al mapa, la tarjeta
   se cerraría, la etiqueta volvería y la tarjeta se reabriría: un parpadeo en bucle. */
.hero-campus .map-spot.is-open .map-pin-label:not(:focus-visible) {
  opacity: 0;
}

/* ==== Tablet y móvil (≤980px) ==== */
@media screen and (max-width: 980px) {
  #instalaciones-hero {
    /* El mapa mide 1440px fijo, así que las etiquetas conservan su lugar;
       solo se reducen un poco para que haya menos choques entre pins cercanos. */
    --label-font-size: 12px;
    --label-max-width: 140px;
  }

  .hero-sky {
    height: var(--sky-height-mobile);
    min-height: var(--sky-min-height-mobile);
    gap: 24px;                  /* Menos aire entre título, CTA y flecha para el cielo más corto */
    margin-bottom: calc(var(--card-h) * -1); /* El riel sube sobre el cielo lo mismo que reserva arriba */
    padding: 0 30px;
  }
  .hero-sky h1 {
    gap: 16px;
    font-size: 30px;
    text-align: center !important;
  }
  .hero-sky h1 .h1-subtitle {
    display: none;
  }

  .hero-campus-rail {
    overflow-x: scroll;
    overscroll-behavior-x: none;
    position: relative;
    box-sizing: border-box;
    padding-top: var(--card-h); /* Espacio para que las tarjetas de pins altos no se recorten arriba */
  }
  .hero-campus-rail::-webkit-scrollbar {
    height: 15px;
  }
  .hero-campus-rail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1000px;
    height: 10px;
  }
  .hero-campus-rail::-webkit-scrollbar-track {
    background-color: #365421;
  }

  /* Modo scroll fijado: lo ACTIVA el JS (clase pinned-mode) solo si hay GSAP
     y el usuario no pidió prefers-reduced-motion. overflow-x: hidden recorta el
     mapa de 1440px al ancho de la pantalla mientras el JS lo desplaza con transform.
     Sin esta clase, queda el scroll manual de arriba como respaldo accesible. */
  .hero-campus-rail.pinned-mode {
    overflow-x: hidden;
  }

  .hero-campus {
    width: 1440px;
  }
}

/* Firefox no entiende ::-webkit-scrollbar: le damos los mismos colores con scrollbar-color.
   Dentro de @supports para que Chrome/Safari conserven su barra custom (en Chrome,
   scrollbar-color anularía los estilos ::-webkit-scrollbar de arriba). */
@supports not selector(::-webkit-scrollbar) {
  @media screen and (max-width: 980px) {
    .hero-campus-rail {
      scrollbar-color: rgba(255, 255, 255, 0.5) #365421;
    }
  }
}

@media screen and (max-width: 700px) {
  .hero-sky .cloud {
    display: none;
  }
}