:root {
  /* Verde profundo de marca. Antes esto era un azul petróleo (#0d2b34) con
     su elevado en #114651; se devolvió a la familia verde (#1e311b) que es el
     tono del proyecto. Los degradados de sections.css usan además el "profundo"
     #0c140b, que es el mismo verde llevado casi a negro. */
  --brand-canopy: #d6d4bf;
  --brand-canopy-rgb: 214, 212, 191;
  /* Antes era un turquesa (#2d7d8b). No pinta agua: alimenta paneles,
     bordes y anillos de toda la página, así que era la principal fuente
     de azul que quedaba. Ahora es el verde medio de la familia. */
  --brand-water: #3e6b3a;
  --brand-water-rgb: 62, 107, 58;
  --brand-sand: #ded7ba;
  --brand-sand-rgb: 222, 215, 186;
  --brand-earth: #c5af8e;
  --brand-earth-rgb: 197, 175, 142;
  --brand-sage: #1c221c;
  --brand-sage-rgb: 28, 34, 28;
  /* Verde tinta de los paneles (navbar, .intro-block, las caras de las
     .unified-card, los velos de sección…). Bajó desde #1e311b / #2c4a26:
     sobre el fondo nuevo esos dos se leían como los elementos MÁS claros de
     la página y le robaban el protagonismo al contenido. Siguen siendo verde
     —la distancia entre canales es lo que lo sostiene—, solo que apagado. */
  --brand-ink: #121815;
  --brand-ink-rgb: 18, 24, 21;
  --brand-ink-soft: #1a221e;
  --brand-ink-soft-rgb: 26, 34, 30;
  --brand-shadow: #060908;
  --brand-shadow-rgb: 6, 9, 8;
  --brand-success: #b8c69a;
  --brand-success-rgb: 184, 198, 154;
  --brand-danger: #e0a08d;
  --brand-danger-rgb: 224, 160, 141;
  --hero-text: var(--brand-sand);
  --hero-muted: rgba(var(--brand-sand-rgb), 0.72);
  --hero-ring: rgba(var(--brand-water-rgb), 0.30);
  --hero-accent: var(--brand-canopy);
  --hero-accent-soft: rgba(var(--brand-canopy-rgb), 0.4);
  --hero-water: var(--brand-water);
  --hero-earth: var(--brand-earth);
  --hero-sage: var(--brand-sage);
  --hero-ink: rgba(var(--brand-ink-rgb), 0.62);
  --hero-surface: rgba(var(--brand-water-rgb), 0.24);
  --hero-border: rgba(var(--brand-water-rgb), 0.22);
  --hero-shadow: 0 32px 70px rgba(0, 0, 0, 0.26);
  --button-radius: 13px;
  /* Cuerpo único de los títulos de sección. Antes cada sección traía el suyo
     —#kineki y #escenarios a 3rem, #ubicacion a 6.5rem, el hero a 3rem— y al
     recorrer la página los títulos cambiaban de tamaño de un bloque a otro.
     Todos apuntan aquí; cambiar este valor los mueve a la vez. */
  --section-title-size: clamp(2rem, 5vw, 3.9rem);
  /* Tipografía de marca — ver assets/css/fonts.css.
     --font-display (Stara) para títulos y encabezados; --font-body (Manrope,
     "Armonía") para cuerpo, subtítulos y piezas digitales.
     --font-serif se conserva como alias porque lo usan ~50 reglas repartidas
     en sections.css; apunta al display, no a una serif. */
  --font-display: "Stara", Georgia, serif;
  --font-serif: var(--font-display);
  --font-body: "Manrope", system-ui, sans-serif;

  /* ── ESCALA GLOBAL ──────────────────────────────────────────────────────
     El diseño está calibrado para una pantalla de ~980px de alto útil. En una
     laptop de 1366x768 (viewport real ~625px) o en un 1080p con el escalado de
     Windows al 125% (~730px) no cabía: el hero mide una columna fija de
     ~1126px —topbar + título + esfera + footer— y no se enteraba de que había
     la mitad de alto disponible, así que se veía "con zoom".

     En vez de reescribir cada medida (lo que cambiaría las proporciones entre
     pantallas), se encoge el conjunto: la página se dibuja idéntica, solo que
     al 92 / 86 / 80 / 75 por ciento. Es el equivalente a poner el navegador al
     80% — mismo diseño, más contenido a la vista.

     Se usa la propiedad `zoom` y NO `transform: scale()`: transform dibuja el
     resultado escalando píxeles ya renderizados (texto borroso, y rompe el
     scroll y los position:fixed), mientras que zoom rehace el layout, así que
     la tipografía sale nítida a resolución nativa.

     Solo se aplica de 992px de ancho en adelante: en teléfono y tablet la
     pantalla ya es pequeña de por sí y el diseño responsive propio se encarga;
     encogerlo más dejaría el texto ilegible. */
  --jt-zoom: 1;

  /* Alto de pantalla EN LAS UNIDADES DEL LIENZO YA ESCALADO.
     zoom multiplica las longitudes pero no toca las unidades de viewport: con
     zoom 0.8 una sección de `height: 100svh` calcula 625px y luego se dibuja a
     625 x 0.8 = 500px, dejando una franja muerta de 125px. Dividir entre el
     zoom lo devuelve a pantalla completa. Toda sección "a pantalla" debe usar
     esta variable en vez de 100svh. */
  --jt-screen-h: calc(100svh / var(--jt-zoom));
}

@media (min-width: 992px) and (max-height: 899px) { :root { --jt-zoom: 0.92; } }
@media (min-width: 992px) and (max-height: 799px) { :root { --jt-zoom: 0.86; } }
@media (min-width: 992px) and (max-height: 699px) { :root { --jt-zoom: 0.80; } }
@media (min-width: 992px) and (max-height: 619px) { :root { --jt-zoom: 0.75; } }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--hero-text);
  background: linear-gradient(180deg, var(--page-bg-mid) 0%, var(--page-bg-deep) 100%);
  /* Ver la nota de --jt-zoom arriba. Vale 1 salvo en pantallas bajas. */
  zoom: var(--jt-zoom);
}

body,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid rgba(var(--brand-canopy-rgb), 0.96);
  outline-offset: 3px;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* height:auto es obligatorio ahora que las <img> llevan width/height en el HTML
   (esos atributos existen para que el navegador reserve el espacio y no haya
   salto de layout / CLS). Sin height:auto, max-width:100% encogería el ancho
   pero dejaría el alto fijo del atributo y la imagen saldría deformada.
   Las reglas que necesitan alto fijo (object-fit: cover) son más específicas
   y siguen ganando. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-page {
  min-height: var(--jt-screen-h);
}

.hero-page,
.hero-section,
#hero,
#explore,
.intro-block,
.explore-entrance,
.explore-philosophy {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-video.is-active,
.hero-poster {
  opacity: 1 !important;
}

.container-fluid {
  padding-left: clamp(1.25rem, 2vw, 2.25rem);
  padding-right: clamp(1.25rem, 2vw, 2.25rem);
}

/* Bootstrap fija .container en 1320px desde 1400px de viewport en adelante
   y ya no vuelve a crecer — en un monitor ancho/ultrawide el contenido
   queda centrado pero se ve angosto, con demasiado espacio muerto a los
   lados. Se amplía progresivamente para que ocupe mejor el espacio. */
/* Los max-width de .container son píxeles fijos, así que el zoom los encogería
   igual que al contenido y la columna de la página quedaría flotando estrecha
   en medio de la pantalla, con dos franjas muertas a los lados. Dividirlos
   entre el zoom mantiene el marco EXACTAMENTE del mismo ancho físico de
   siempre; lo único que cambia es que dentro cabe más porque el contenido se
   dibuja más pequeño. Los tres primeros valores son los de Bootstrap. */
@media (min-width: 992px) {
  .container { max-width: calc(960px / var(--jt-zoom)); }
}
@media (min-width: 1200px) {
  .container { max-width: calc(1140px / var(--jt-zoom)); }
}
@media (min-width: 1400px) {
  .container { max-width: calc(1320px / var(--jt-zoom)); }
}
@media (min-width: 1600px) {
  .container { max-width: calc(1440px / var(--jt-zoom)); }
}
@media (min-width: 1920px) {
  .container { max-width: calc(1680px / var(--jt-zoom)); }
}
@media (min-width: 2400px) {
  .container { max-width: calc(1960px / var(--jt-zoom)); }
}
@media (min-width: 3000px) {
  .container { max-width: calc(2280px / var(--jt-zoom)); }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 2000;
  padding: 0.85rem 1rem;
  border-radius: var(--button-radius);
  background: var(--hero-accent);
  color: var(--brand-ink);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 220ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.noscript-notice {
  margin: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(var(--brand-canopy-rgb), 0.32);
  border-radius: 1rem;
  background: rgba(var(--brand-ink-soft-rgb), 0.92);
  color: var(--hero-text);
}

.noscript-notice a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Al imprimir manda el tamaño del papel, no el de la pantalla: el zoom no
   pinta nada ahí y encogería el PDF sin motivo. Las hojas de impresión de
   sections.css (body.jt-print-landscape, body.is-catalog-open) siguen usando
   100vh a propósito, que es lo correcto contra la página. */
@media print {
  body { zoom: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Splash de logo — una vez por sesión, ver script inline en index.html ── */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-ink);
  transition: opacity 650ms ease;
}

.splash-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  width: clamp(150px, 32vw, 280px);
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  filter: drop-shadow(0 0 44px rgba(var(--brand-canopy-rgb), 0.3));
  animation: splashLogoIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes splashLogoIn {
  0%   { opacity: 0;   transform: scale(0.8);  clip-path: inset(0 100% 0 0); }
  55%  { opacity: 1;   transform: scale(1.03); clip-path: inset(0 0% 0 0); }
  100% { opacity: 1;   transform: scale(1);    clip-path: inset(0 0% 0 0); }
}