/* Titulares del hero: Paul Slab (slab serif display). Bold para el titulo, Regular para el subtitulo. */
@font-face { font-family: 'Paul Slab'; src: url('../assets/fonts/paulslab-bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paul Slab'; src: url('../assets/fonts/paulslab-regular.otf') format('opentype'); font-weight: 400; font-display: swap; }

html, body { margin: 0; padding: 0; background: #f1a3b1; } /* rosa coral (paleta Pink Sunshine Co) */
body { font-family: -apple-system, system-ui, sans-serif; overflow-x: hidden; }
/* El transform del hero se COMPONE por variables: --px/--py (parallax de raton, motion.js) y
   --cam (zoom de camara de la intro, main.js). No escribir transform directo sobre #stage.
   El drop-shadow despega los hilos y el logo del coral (profundidad de materia); si algun
   equipo va justo de GPU, esta linea es lo primero que se quita. */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block;
  transform: translate(var(--px, 0px), calc(var(--py, 0px) + var(--sink, 0px))) scale(var(--cam, 1)) rotate(var(--tilt, 0deg));
  will-change: transform;
  filter: drop-shadow(0 14px 22px rgba(110, 19, 32, 0.20)); }

/* Hint de scroll de la intro (lo gobierna main.js): asoma a los 5s si no hay interaccion */
#herohint { position: fixed; left: 50%; bottom: 4.5vh; transform: translateX(-50%); z-index: 5;
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #6e1320; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
#herohint::after { content: '\2193'; display: block; text-align: center; margin-top: 4px; letter-spacing: 0;
  animation: hintbob 1.6s ease-in-out infinite; }
#herohint.show { opacity: 0.7; }
@keyframes hintbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Foco visible por teclado (accesibilidad): anillo rojo; crema sobre nav rojo / footer wine */
:focus-visible { outline: 2px solid #c12530; outline-offset: 3px; border-radius: 3px; }
#nav :focus-visible, #navoverlay :focus-visible, .site-footer :focus-visible { outline-color: #f6e7d8; }

/* Skip link: salta la navegacion al contenido (visible solo al enfocar con teclado) */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 100; background: #6e1320; color: #f6e7d8;
  padding: 10px 18px; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 14px; text-decoration: none; transition: top 0.18s ease; }
.skip-link:focus { top: 12px; }

/* Copy del hero: aparece tras la migracion y se escribe (maquina de escribir, js/hero.js).
   Titulo y subtitulo en Paul Slab MAYUSCULAS; el texto en Jost, tipo oracion. Bloque alineado a la izquierda. */
#herocopy {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(90vw, 1040px); max-width: 92vw; z-index: 5; pointer-events: none; text-align: center;
  opacity: 0; transition: opacity 0.4s ease;
}
#herocopy.show { opacity: 1; }

/* El H1 (la tagline de marca). SEO: se pinta VISIBLE desde el primer frame, bajo la pastilla del
   menu (que ocupa 22px + 60px de alto), y ahi se queda mientras corre la intro. Cuando el copy del
   hero aparece, hero.js le escribe el `top` final y BAJA a su posicion de siempre, justo encima del
   titulo. Va fuera de #herocopy porque ese bloque nace en opacity:0 y el H1 no puede nacer oculto.
   El fundido al scrollear lo aplica scroll.js junto al del bloque, si no se quedaria fijo sobre las
   tarjetas del scrollytelling. */
.hkicker {
  position: fixed; left: 50%; top: 102px; transform: translateX(-50%);
  z-index: 6; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: 'Jost', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: clamp(11px, 1.3vw, 15px); color: #8c0f18;
  transition: top 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { .hkicker { transition: none; } }
#herocopy .htitle {
  font-family: 'Paul Slab', serif; font-weight: 700; text-transform: uppercase; color: #a60000;
  margin: 0; line-height: 0.98; font-size: clamp(46px, 9vw, 128px); white-space: nowrap;
}
#herocopy .hsubtitle {
  font-family: 'Paul Slab', serif; font-weight: 400; text-transform: uppercase; color: #a60000;
  margin: 0.04em 0 0; line-height: 1.02; font-size: clamp(26px, 4.4vw, 60px); white-space: nowrap;
}
#herocopy .hbody {
  font-family: 'Jost', sans-serif; font-weight: 400; color: #8c0f18;
  margin: 0.7em auto 0; max-width: 100%; line-height: 1.5; font-size: clamp(16px, 2vw, 24px);
}
@keyframes mwblink { 50% { opacity: 0; } }
#herocopy [data-type].typing::after { content: '|'; margin-left: 0.04em; font-weight: 400; animation: mwblink 1s steps(1) infinite; }
/* letras del titulo/subtitulo: inline-block para poder transformarlas (crecen/se levantan con el raton) */
#herocopy .ch { display: inline-block; position: relative; white-space: pre; transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1); }
#herocopy .ch.cursor::after { content: '|'; position: absolute; left: 100%; top: 0; animation: mwblink 1s steps(1) infinite; }

/* Pastilla de menu flotante: SIEMPRE visible y al frente; toda la animacion pasa por detras.
   El wordmark (izquierda) se cose en blanco durante la migracion; los enlaces y el idioma
   (derecha) estan presentes desde el inicio: dejan claro que es un sitio web, no un videojuego. */
#nav {
  position: fixed; top: 22px; left: 24px; right: 24px; height: 60px;
  display: flex; align-items: center; padding: 0 30px;
  background: linear-gradient(90deg, #e01515 0%, #a60000 55%, #6e1320 100%);
  border-radius: 30px;
  z-index: 10;
}
#navhome { display: flex; align-items: center; text-decoration: none; }
#navlogo { height: 30px; width: auto; display: block; }

/* lado derecho: enlaces + idioma (+ hamburguesa en movil). Visible desde el inicio.
   Tipografia del menu: Jost en mayusculas (el wordmark cosido no usa esta fuente). */
#navmenu, #navoverlay {
  font-family: 'Jost', sans-serif;
}
#navmenu {
  margin-left: auto; display: flex; align-items: center; gap: 26px;
}

.navlink {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.92; transition: opacity 0.15s ease;
}
.navlink:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.navcta { font-weight: 700; opacity: 1; }

.navlang {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  font-family: inherit;
}
.navlang svg { width: 15px; height: 15px; }

/* hamburguesa: oculta en escritorio, visible en movil */
.navham {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0; width: 44px; height: 44px;
}
.navham span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

/* overlay de menu en movil: pantalla completa, enlaces grandes, idioma abajo */
#navoverlay {
  position: fixed; inset: 0; z-index: 20;
  background: linear-gradient(150deg, #d11414 0%, #a60000 55%, #6e1320 100%);
  display: flex; flex-direction: column; padding: 86px 28px 32px;
  opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease;
}
#navoverlay.open { opacity: 1; visibility: visible; }
.navoverlay-links { display: flex; flex-direction: column; }
#navoverlay .navlink { font-size: 30px; font-weight: 800; padding: 10px 0; opacity: 0.96; }
#navoverlay .navcta { opacity: 1; }
.navclose {
  position: absolute; top: 22px; right: 26px;
  background: none; border: 0; color: #fff; font-size: 30px; line-height: 1;
  font-weight: 300; cursor: pointer;
}
.navlang--big {
  margin-top: auto; width: 100%; justify-content: flex-start;
  padding-top: 22px; font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.navlang--big svg { width: 18px; height: 18px; }

/* breakpoint: en estrecho, la barra colapsa a la hamburguesa */
@media (max-width: 720px) {
  #navmenu .navlink, #navmenu .navlang { display: none; }
  .navham { display: flex; }
}
@media (min-width: 721px) {
  #navoverlay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #navmenu, #navoverlay { transition: none; }
}