/* base.css · v8 · lo edita SOLO el integrador.
   Reset, tipografía, .wrap, section, .claro, .kicker/.lead, .boton, [data-entra], .escena,
   .personaje/.globo, .burbuja, reduced-motion.
   REGLA (guarda contra la trampa de la v6): estos componentes NO se redefinen en ningún CSS de sección.
   Un CSS de sección solo usa selectores que empiezan por el id de su sección (#hero …, #viaje …). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:400 17px/1.55 var(--f-cuerpo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accion);outline-offset:3px;border-radius:4px}

/* ── tipografía ── */
h1,h2,h3,h4,.kicker,.boton,.num{font-family:var(--f-titulo)}
h1{font-weight:600;font-size:clamp(40px,7vw,76px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-weight:600;font-size:clamp(28px,4.4vw,48px);line-height:1.06;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
h3{font-weight:600;font-size:22px;line-height:1.2;margin:0 0 6px;text-wrap:balance}
h4{font-weight:600;font-size:17px;line-height:1.25;margin:0 0 4px}
p{max-width:62ch;text-wrap:pretty}
.kicker{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);margin:0 0 14px}
.lead{font-size:17px;color:var(--tinta-2);max-width:62ch;margin:0 0 32px}
.como,.nota{font-size:14px;color:var(--tinta-2);max-width:62ch}
.chica{font-size:14px;color:var(--tinta-2)}

/* ── ritmo ── */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--canal)}
section,header,footer{position:relative}
section{padding:var(--ritmo) 0}
.claro{background:var(--fondo);color:var(--tinta)}   /* la banda clara siempre con fondo propio */

/* ── botón y enlace (biblia §7 hover) ── */
.boton{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  background:var(--accion);color:#0B1E2B;font-weight:600;font-size:17px;text-decoration:none;
  border:0;cursor:pointer;transition:background .16s var(--cromo)}
.boton:hover{background:var(--accion-hover)}
.boton.chico{padding:9px 16px;font-size:14px}
.boton.fantasma{background:transparent;color:var(--tinta);border:1px solid var(--marco)}
.boton.fantasma:hover{background:rgba(143,163,173,.12)}
.enlace{color:var(--tinta);text-decoration:none;background-image:linear-gradient(var(--accion),var(--accion));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .22s var(--cromo)}
.enlace:hover,.enlace:focus-visible{background-size:100% 1.5px}
.claro .enlace{background-image:linear-gradient(var(--accion),var(--accion));color:var(--tinta)}

/* ── la escena a sangre (de la v7; alturas en svh, nunca vh) ── */
.escena{position:relative;width:100%;min-height:76svh;display:grid;align-items:end;overflow:hidden;
  background:var(--superficie);isolation:isolate;margin:48px 0 0}
@media(max-width:760px){.escena{min-height:64svh}}
.escena>img.fondo,.escena>picture.fondo>img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;
  object-position:var(--foco,50% 50%);will-change:transform;z-index:0}
.escena>picture.fondo{display:contents}
.escena::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--fondo) 0%,rgba(var(--fondo-rgb),0) 14%,rgba(var(--fondo-rgb),0) 76%,var(--fondo) 100%)}
.escena>.texto{position:relative;z-index:3;width:100%;max-width:var(--ancho);margin:0 auto;padding:140px var(--canal) 56px}
@media(min-width:861px){.escena>.texto{padding:180px var(--canal) 72px}}
.escena>.texto::before{content:'';position:absolute;z-index:-1;left:-50vw;right:-50vw;top:0;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--fondo-rgb),0),rgba(var(--fondo-rgb),.58) 42%,rgba(var(--fondo-rgb),.92))}
.escena h3{font-size:clamp(24px,3.4vw,40px);margin-bottom:10px}
.escena .lead{margin-bottom:6px;color:#D9DED7}
.escena .kicker{color:#B9C7CD}

/* ── el oso recortado sobre una escena, entero, nunca pegado al borde (de la v7) ── */
.oso-en{position:absolute;z-index:2;bottom:0;right:5vw;width:min(24vw,300px);pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));transform-origin:50% 100%}
.oso-baranda{right:9vw;width:min(27vw,340px)}
/* el que asoma: la «pared» está en la columna 135 de 512 (26,37 %); se corre justo eso fuera de la pantalla */
.oso-asoma{--ancho-oso:min(28vw,380px);width:var(--ancho-oso);right:calc(var(--ancho-oso) * -0.2637);transform:scaleX(-1);transform-origin:50% 100%}
@media(max-width:760px){.oso-en{width:38vw;right:4vw}.oso-baranda{width:42vw}
  .oso-asoma{--ancho-oso:50vw;width:var(--ancho-oso);right:calc(var(--ancho-oso) * -0.2637)}}

/* ── Aurora en video con alfa o sticker (de la v7) ── */
.aur{position:absolute;z-index:2;pointer-events:none;aspect-ratio:1/1}
.aur video,.aur img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 28px rgba(127,227,220,.35))}
.aur-flota>video,.aur-flota>img{animation:flota 5200ms ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.aur-fija{filter:drop-shadow(0 0 24px rgba(127,227,220,.55));animation:respira 3200ms ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ── PERSONAJE + GLOBO ENCIMA (brief 1). El globo es HIJO del personaje, nunca de .texto:
      así ningún selector de sección lo atropella. La colita apunta a la cabeza. ── */
.personaje{position:relative;display:inline-block;margin:0}
.personaje>img,.personaje>video{display:block}
/* El corrimiento horizontal del globo (--gx) va en `translate`, NO dentro de `transform`: cualquier animación
   o transición de sección que escriba `transform` (la trampa v6; en v8.0 lo hizo hero-salva) se comía el
   translateX(-50%) y el globo quedaba corrido y cortado por el borde (Nicolás, 22-sep, punto 1).
   --ajuste lo escribe main.js (acomodaGlobos) cuando un globo se saldría de la pantalla: corre el globo y
   la colita se corre lo contrario, para que siga apuntando a la cabeza. */
.personaje>.globo{position:absolute;z-index:var(--z-globo);left:50%;bottom:calc(100% + 10px);
  --gx:-50%;--ajuste:0px;margin:0;width:max-content;max-width:min(30ch,80vw);transform-origin:bottom center;
  translate:calc(var(--gx) + var(--ajuste)) 0}
.personaje>.globo::after{left:calc(50% - var(--ajuste));margin-left:-6px}
.personaje.globo-izq>.globo{left:0;--gx:0}
.personaje.globo-izq>.globo::after{left:calc(22px - var(--ajuste));margin-left:0}
.personaje.globo-der>.globo{left:auto;right:0;--gx:0}
.personaje.globo-der>.globo::after{left:auto;right:calc(22px + var(--ajuste));margin-left:0}

/* ── bocadillos (biblia §7: enteros, 320 ms, escala .92→1 desde la cola) ── */
.globo{position:relative;display:inline-block;max-width:30ch;margin:14px 0 0;padding:12px 16px;
  border-radius:16px;font-size:15px;line-height:1.35;background:var(--superficie);
  border:1px solid var(--marco);color:var(--tinta);--gx:0;translate:var(--gx) 0;
  opacity:0;transform:scale(.92);transform-origin:bottom left;
  transition:opacity .12s linear,transform .32s var(--peluche)}
.globo.vino{opacity:1;transform:scale(1)}
.globo-aurora{border-color:rgba(127,227,220,.35);box-shadow:0 0 0 3px rgba(127,227,220,.10);transition-timing-function:var(--cromo)}
.globo::after{content:'';position:absolute;left:22px;bottom:-7px;width:12px;height:12px;
  background:var(--superficie);border-right:1px solid var(--marco);border-bottom:1px solid var(--marco);transform:rotate(45deg)}
.escena .globo{background:rgba(18,41,58,.92);backdrop-filter:blur(6px)}
.escena .globo::after{background:rgba(18,41,58,.92)}

/* ── el chat (burbujas) ── */
.chat{display:grid;gap:10px;max-width:420px}
.burbuja{padding:12px 16px;border-radius:16px;font-size:15px;background:var(--superficie);
  border:1px solid var(--marco);width:fit-content;max-width:88%;margin:0;
  opacity:0;transform:translateY(10px);transition:opacity .48s var(--orbe),transform .48s var(--orbe)}
.burbuja.vino{opacity:1;transform:none}
.burbuja.mia{margin-left:auto;background:#16344A;color:#F7F1E6}
.claro .burbuja.mia{background:#DCE8EE;color:#0B1E2B}
.burbuja.suya{border-color:rgba(127,227,220,.35);box-shadow:0 0 0 3px rgba(127,227,220,.10)}
.burbuja .rotulo{display:block;font-size:12px;color:var(--tinta-2);margin-top:6px}

/* ── entradas al hacer scroll (biblia §7: 12 px, 480 ms, ease-orbe) ── */
[data-entra]{opacity:0;transform:translateY(12px);transition:opacity .48s var(--orbe),transform .48s var(--orbe)}
[data-entra].vino{opacity:1;transform:none}

/* ── accesibilidad ── */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog{border:0;padding:0;background:var(--fondo);color:var(--tinta);border-radius:var(--radio);max-width:min(96vw,1100px)}
dialog::backdrop{background:rgba(11,30,43,.86);backdrop-filter:blur(6px)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-entra],.globo,.burbuja{opacity:1!important;transform:none!important}
}