/* ==========================================================================
   Inicio fino (13-oct, noche) · pedido de Bela: sin galaxia, «más fino y elegante».
   Va después de estilos.css y solo toca el inicio (y el menú mientras está encima de él).
   Elegido el 14-oct: CREMA PAPEL (crema del manual con grano de papel apenas visible, spark rojo plano como un sello).
   La propuesta negra y el parámetro ?fondo se retiraron; <html data-inicio="crema"> queda fijo en el HTML.
   Los prefijos :root:not([data-inicio="negro"]) se dejan a propósito: dan la especificidad que gana a .tono-osc de estilos.css.
   ========================================================================== */

/* ---------- común ---------- */
.hero__panel{position:relative;display:flex;flex:1 1 100%;min-width:0;min-height:inherit}
.escenario{display:none}                                  /* ya no hay lienzo fijo: ni galaxia, ni nebulosa */
.hero__texto::before{content:none}                        /* el velo oscuro era para leer sobre estrellas */
.hero__frase{transition:opacity .24s ease,translate .5s var(--suave)}
.hero__frase--sale{filter:none}
.hero__pausa,.hero__aviso{display:none!important}         /* nada se mueve solo: no hace falta pausar */
.hero__desliza{animation:none;opacity:1;left:var(--lateral);translate:none}   /* alineado a la columna del texto, no centrado */

/* El spark entra una sola vez, como un sello: gira 60° mientras baja y se asienta con un leve rebote.
   Va en transform para dejar libre la propiedad rotate, que es la que usan los giros al tocarlo. */
.hero-poster .hero__poster{animation:sello .86s cubic-bezier(.2,.75,.25,1) .1s both}
@keyframes sello{
  0%  {opacity:0;transform:rotate(-60deg) scale(1.22)}
  45% {opacity:1}
  70% {transform:rotate(3deg) scale(.975)}
  100%{opacity:1;transform:none}
}
.hero__objeto{border-radius:50%}                          /* el foco dibuja un anillo de sello, no la esquina de un ícono de app */
.hero__objeto:focus-visible{outline-offset:6px}
.hero__objeto:hover .hero__poster{scale:1.015}
.hero__poster{transition:opacity .3s ease,rotate .62s var(--back),scale .4s var(--suave)}

/* ---------- A · CREMA PAPEL ---------- */
:root:not([data-inicio="negro"]) .hero{
  --acento:var(--rojo);--foco:var(--rojo);--texto2:var(--tinta);--raya:var(--linea);
  color:var(--negro);background-color:var(--crema)}
/* grano de papel: solo un diente fino multiplicado al 7 %: casi no se nota, y así debe ser (sin nubes que en pantallas grandes se lean como manchas).
   El url(#g) del filtro va como url%28%23g%29: sin paréntesis sueltos dentro del data:, para que el empaquetador no lo lea como archivo */
:root:not([data-inicio="negro"]) .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .25 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .05 .35 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  background-size:280px 280px;opacity:.07}
:root:not([data-inicio="negro"]) .hero__etiqueta{color:var(--tinta)}
:root:not([data-inicio="negro"]) .hero__etiqueta::before{background:var(--rojo)}
:root:not([data-inicio="negro"]) .hero__grito,
:root:not([data-inicio="negro"]) .hero__frase{color:var(--negro)}
:root:not([data-inicio="negro"]) .hero__bajada{color:var(--tinta)}
:root:not([data-inicio="negro"]) .hero__pista,
:root:not([data-inicio="negro"]) .hero__desliza{color:var(--tinta2)}
:root:not([data-inicio="negro"]) .hero__objeto:focus-visible{outline-color:var(--rojo)}
:root:not([data-inicio="negro"]) .hero .btn--rojo:hover{background:var(--negro);color:var(--crema)}
:root:not([data-inicio="negro"]) .hero .btn--linea{color:var(--negro)}
:root:not([data-inicio="negro"]) .hero .btn--linea:hover{background:var(--negro);border-color:var(--negro);color:var(--crema)}
/* menú encima de la crema: tinta negra. Al bajar más de 80 px se vuelve sólido; mientras siga sobre el inicio
   (menu--sobre-inicio) es crema translúcida con raya de línea, para no pisar el titular; ya en el manifiesto, negro humo como siempre */
:root:not([data-inicio="negro"]) .menu--solido.menu--sobre-inicio{background:rgba(243,237,229,.92);border-bottom-color:var(--linea)}
:root:not([data-inicio="negro"]) :is(.menu:not(.menu--solido),.menu--sobre-inicio){--foco:var(--rojo);color:var(--negro)}
:root:not([data-inicio="negro"]) :is(.menu:not(.menu--solido),.menu--sobre-inicio) .menu__nav a{color:var(--negro)}
:root:not([data-inicio="negro"]) :is(.menu:not(.menu--solido),.menu--sobre-inicio) .menu__nav a::after{background:var(--rojo)}
:root:not([data-inicio="negro"]) :is(.menu:not(.menu--solido),.menu--sobre-inicio) .btn--rojo:hover{background:var(--negro);color:var(--crema)}
/* el pie del inicio se apoya en una raya fina: el paso de la crema al manifiesto negro es un corte seco, como pasar de página */
:root:not([data-inicio="negro"]) .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea);z-index:0}

/* ---------- ritmo de revista (crítica 14-oct): un solo grito; el sub en itálica 400, la frase del spark como pie de foto ---------- */
.hero__sub{margin-top:clamp(28px,3vw,44px);font:italic 400 clamp(22px,2.3vw,32px)/1.14 var(--disp);letter-spacing:-.01em}
.hero__bajada{margin-top:16px;text-wrap:pretty}
.hero__ctas{margin-top:36px}
.hero__frase{font:600 clamp(20px,1.7vw,24px)/1.1 var(--disp);letter-spacing:-.01em}
:root:not([data-inicio="negro"]) .hero__frase{color:var(--tinta)}
/* la frase va siempre en un renglón (sitio.js no la parte en el modo 2d): reserva uno solo y el titular no salta al tocar */
@media (max-width:1023px){
  .hero-2d .hero__frase{min-height:1.1em;white-space:nowrap}
}

/* celular (crítica 14-oct): la página abre directo con el titular, como pidió el dueño. El sello va debajo de los
   botones, chico, con su frase al lado, como el pie de una portada. Cabe en 390×844 y en 375×667 con los dos botones. */
@media (max-width:599px){
  .hero__wrap{justify-content:flex-start}
  .hero__escena{order:1;align-self:stretch;flex-direction:row;align-items:center;gap:18px;margin-top:30px}
  .hero-2d .hero__escena,html:not(.js) .hero__escena{--ancla:104px}
  .hero__objeto{flex:none}
  .hero__rotulo{flex:1 1 auto;min-width:0;max-width:none;margin:0;text-align:left}
  .hero-2d .hero__frase{min-height:2.2em;justify-content:center;white-space:normal;margin-bottom:6px;font-size:20px}
  .hero__pista{text-wrap:wrap}
  .hero__sub{font-size:22px;margin-top:24px}
  .hero__ctas{margin-top:28px}
}
/* celulares bajos (iPhone SE, Android chicos, 375×667): sello más chico y sin la pista */
@media (max-width:599px) and (max-height:740px){
  .hero-2d .hero__escena,html:not(.js) .hero__escena{--ancla:84px}
  .hero__pista{display:none}
  .hero__escena{margin-top:22px}
}

@media (prefers-reduced-motion:reduce){
  .hero-poster .hero__poster{animation:none}
  .hero__objeto:hover .hero__poster{scale:none}
}