/* El traje de Every Benefits · muestra de portada
   Base: el traje de Chillin Online (mismo sector y misma audiencia),
   repintado con el verde del logo de Every Benefits y con el aire
   de las referencias que pasó Sebas (Medefy). */
:root{
  --tinta:#12100d;
  --tinta-suave:#6e7268;
  --linea:#e4e5da;
  --papel:#ffffff;
  --hueso:#f4f4ea;
  --verde:#008a4e;
  --verde-hondo:#05301d;
  --verde-claro:#e9f5ee;
  --verde-borde:#c5e3d2;
  --radio:10px;
  --radio-grande:16px;
  --medida:66ch;
  --titulo:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --cuerpo:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --titulo-peso:700;
  --titulo-espaciado:-.03em;
  --titulo-alto:1.10;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--hueso); color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:var(--titulo); font-weight:var(--titulo-peso); letter-spacing:var(--titulo-espaciado); line-height:var(--titulo-alto); margin:0}
p{margin:0}
a{color:inherit}
.env{width:min(1200px,100% - 48px); margin-inline:auto; position:relative; z-index:2}
@media(max-width:640px){.env{width:calc(100% - 32px)}}

/* ---------- barra ---------- */
.barra{position:sticky; top:0; z-index:60; background:rgba(245,242,238,.82); backdrop-filter:blur(12px) saturate(1.2);
  transition:box-shadow .35s ease, background .35s ease}
.barra.bajada{box-shadow:0 8px 30px rgba(18,16,13,.06); background:rgba(245,242,238,.94)}
.barra .env{display:flex; align-items:center; gap:32px; height:76px; transition:height .35s cubic-bezier(.2,.7,.3,1)}
.barra.bajada .env{height:62px}
.marca{display:flex; align-items:center; text-decoration:none; flex:none}
.marca img{height:48px; width:auto; display:block; transition:height .45s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1)}
.marca:hover img{transform:scale(1.03)}
.barra.bajada .marca img{height:38px}
@media(max-width:640px){.marca img{height:38px} .barra.bajada .marca img{height:32px}}
.nav{display:flex; gap:6px; margin-inline:auto; font-size:15px}
.nav a{text-decoration:none; color:var(--tinta-suave); padding:8px 14px; border-radius:99px; position:relative; transition:color .25s ease, background .25s ease}
.nav a:hover{color:var(--tinta); background:rgba(18,16,13,.04)}
.nav a.activo{color:var(--verde); background:var(--verde-claro)}
@media(max-width:900px){.nav{display:none}}

/* ---------- botones ---------- */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 24px;
  border-radius:99px; background:var(--verde); color:#fff; text-decoration:none; font-size:15px; font-weight:500; border:0; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease}
.btn::before{content:""; position:absolute; inset:0; background:var(--verde-hondo); transform:translateY(101%); transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.btn:hover::before{transform:translateY(0)}
.btn > *{position:relative; z-index:1}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,138,78,.22)}
.btn-linea{background:transparent; color:var(--tinta); border:1px solid var(--linea)}
.btn-linea::before{background:var(--tinta)}
.btn-linea:hover{color:#fff; border-color:var(--tinta); box-shadow:0 10px 24px rgba(18,16,13,.14)}
.enlace-verde{color:var(--verde); text-decoration:none; font-size:15px; display:inline-flex; align-items:center; gap:6px}
.enlace-verde .flecha{display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.enlace-verde:hover .flecha{transform:translateX(4px)}
.btn .flecha{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn:hover .flecha{transform:translate(3px,-3px)}

/* ---------- fondo del hero: degradado, rejilla y halo ---------- */
.hero{position:relative; padding:84px 0 76px;
  background:linear-gradient(rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 92%)}
.rejilla-fondo{position:absolute; inset:-30% -20%; z-index:0; opacity:0; transform:rotate(-12deg); transition:opacity 1.6s ease;
  background-image:linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:112px 112px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 40%, #000 0%, transparent 78%);
  mask-image:radial-gradient(60% 55% at 50% 40%, #000 0%, transparent 78%)}
.rejilla-fondo.dentro{opacity:.85}
.halo{position:absolute; z-index:0; border-radius:50%; pointer-events:none; will-change:transform}
.halo-a{width:820px;height:820px; top:-240px; right:-200px; animation:flota 18s ease-in-out infinite;
  background:radial-gradient(circle at 50% 50%, rgba(0,138,78,.16) 0%, rgba(0,138,78,.07) 42%, rgba(0,138,78,0) 70%)}
.halo-b{width:720px;height:720px; bottom:-280px; left:-220px; animation:flota 23s ease-in-out infinite reverse;
  background:radial-gradient(circle at 50% 50%, rgba(5,48,29,.12) 0%, rgba(5,48,29,.05) 45%, rgba(5,48,29,0) 72%)}
@keyframes flota{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}

.hero .env{display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center}
.hero h1{font-size:clamp(38px,4.9vw,56px)}
.hero .entradilla{margin-top:18px; font-size:17.5px; color:var(--tinta-suave); max-width:46ch}
.hero .acciones{margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.prueba{margin-top:30px; padding-top:22px; border-top:1px solid var(--linea); display:flex; gap:32px; flex-wrap:wrap}
.prueba div > span{display:block; font-family:var(--titulo); font-size:25px; line-height:1.2; font-variant-numeric:tabular-nums}
.prueba div small{color:var(--tinta-suave); font-size:13.5px}
.estrellas{display:inline-flex; gap:3px; color:var(--verde); font-size:19px}
.estrellas i{font-style:normal; opacity:0; transform:scale(.4) rotate(-25deg); transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1)}
.estrellas.dentro i{opacity:1; transform:none}

/* mosaico: la foto manda y las fichas se le montan encima */
.mosaico{position:relative; display:block}
.pieza{border-radius:var(--radio-grande); border:1px solid var(--linea); background:var(--papel); padding:24px; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 1px 2px rgba(18,16,13,.03)}
.pieza-alta{width:100%; height:clamp(420px,48vw,620px); background:#e6e7db; border-color:#e3ded8; border-radius:24px}
.pieza-alta img{width:66px;height:66px;opacity:.45}
.pieza-alta em{display:block; font-style:normal; font-size:13px; color:var(--tinta-suave); margin-top:14px; text-align:center}
.pieza-verde{position:absolute; left:-58px; bottom:52px; width:286px; z-index:5; background:var(--verde); color:#fff; border-color:var(--verde);
  box-shadow:0 12px 34px rgba(0,138,78,.28), 0 40px 80px rgba(5,48,29,.18)}
.pieza-verde p{font-size:15.5px; line-height:1.55}
.pieza-verde footer{margin-top:14px; font-size:13px; opacity:.82}
.pieza-cifra{position:absolute; right:-30px; top:44px; width:214px; z-index:5; background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(18,16,13,.12), 0 40px 80px rgba(18,16,13,.08)}
.pieza-cifra span{font-family:var(--titulo); font-size:34px; line-height:1; font-variant-numeric:tabular-nums}
.pieza-cifra small{color:var(--tinta-suave); font-size:13.5px; line-height:1.45; display:block; margin-top:4px}
@media(max-width:900px){
  .hero{padding:52px 0 44px}
  .hero .env{grid-template-columns:1fr; gap:44px}
  .pieza-alta{height:320px}
  .pieza-verde{position:relative; left:0; bottom:0; width:auto; margin-top:-46px; margin-left:16px; margin-right:56px}
  .pieza-cifra{position:relative; right:0; top:0; width:auto; margin:14px 16px 0 56px}
}

/* ---------- cinta de confianza ---------- */
.cinta{overflow:hidden; padding:17px 0; background:var(--verde-hondo); color:rgba(255,255,255,.86)}
/* la cinta se desvanece en los dos extremos: sin esto, la frase de los bordes
   aparece cortada a media palabra y parece un fallo de maquetacion. La mascara va
   en la cinta, que es la que mide lo que se ve; la marquesina de dentro es mucho
   mas ancha que la pantalla y ahi el desvanecido cae fuera de la vista. */
.cinta{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)}
.marquesina{display:flex; width:max-content; animation:desliza 38s linear infinite}
.marquesina:hover{animation-play-state:paused}
.tira{display:flex; gap:56px; padding-right:56px; font-size:14.5px; white-space:nowrap; align-items:center}
.tira b{color:#fff; font-weight:500}
.tira i{font-style:normal; color:rgba(255,255,255,.32)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
section{padding:84px 0; position:relative}
section.encadena{padding-top:52px}
section.pegada-arriba{padding-top:32px}
section.apretada-abajo{padding-bottom:34px}
section.pegada{padding:0 0 30px}
section.blanca{background:var(--papel)}
@media(max-width:640px){section{padding:54px 0} section.encadena{padding-top:38px}}

.cabecera-seccion{max-width:var(--medida)}
.cabecera-seccion h2{font-size:clamp(28px,3.3vw,38px)}
.cabecera-seccion > p:last-child{margin-top:13px; color:var(--tinta-suave)}
.rotulo{display:inline-block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); margin-bottom:12px; font-weight:600}

/* ---------- reveal por lineas ---------- */
/* la mascara se alarga por abajo y por los lados lo que ocupan las colas de la g, la p o
   la y y el vuelo de la cursiva, y lo devuelve con margen negativo para que el titular no
   cambie de alto: con el recorte justo a la altura de linea se comia las colas. */
.linea-mascara{display:block; overflow:hidden; padding:0 .08em .2em; margin:0 -.08em -.2em}
.linea-mascara > span{display:block; transform:translateY(calc(100% + .25em)); transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.linea-mascara.dentro > span{transform:none}

/* ---------- cifras ---------- */
.cifras .env{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.cifra{position:relative; padding-left:22px}
.cifra::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--verde-borde); transform:scaleY(0); transform-origin:top; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cifra.dentro::before{transform:scaleY(1)}
.cifra span{display:block; font-family:var(--titulo); font-size:clamp(34px,4.2vw,50px); line-height:1; font-variant-numeric:tabular-nums}
.cifra small{display:block; margin-top:8px; color:var(--tinta-suave); font-size:14px}
@media(max-width:720px){.cifras .env{grid-template-columns:1fr 1fr; gap:28px}}

/* ---------- rejillas y tarjetas ---------- */
.rejilla{display:grid; gap:18px; margin-top:34px}
.tres{grid-template-columns:repeat(3,1fr)}
.cuatro{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.cuatro{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.tres{grid-template-columns:1fr}}
@media(max-width:560px){.cuatro{grid-template-columns:1fr}}

.tarjeta{position:relative; overflow:hidden; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio-grande); padding:26px; display:flex; flex-direction:column; gap:10px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease}
.tarjeta::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover{transform:translateY(-6px); border-color:var(--verde-borde); box-shadow:0 18px 40px rgba(18,16,13,.07)}
.tarjeta:hover::after{transform:scaleX(1)}
.tarjeta h3{font-size:23px}
.tarjeta p{color:var(--tinta-suave); font-size:15.5px; line-height:1.6}
.icono{width:46px; height:46px; border-radius:14px; border:1px solid var(--verde-borde); background:var(--verde-claro); display:grid; place-items:center; margin-bottom:6px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease}
.icono svg{width:22px;height:22px; stroke:var(--verde); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tarjeta:hover .icono{transform:scale(1.08) rotate(-4deg)}
.codigo{font-size:13px; letter-spacing:.08em; color:var(--verde); font-weight:500}
.ficha{margin-top:auto; padding-top:14px; border-top:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--tinta-suave)}
.tarjeta-curso .precio{font-family:var(--titulo); font-size:27px; color:var(--tinta)}
.estrella-fila{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--tinta-suave)}

/* ---------- pasos con linea que se dibuja ---------- */
.pasos{position:relative}
.pasos::before{content:""; position:absolute; left:20px; right:20px; top:19px; height:1px; background:var(--verde-borde); transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.pasos.dentro::before{transform:scaleX(1)}
@media(max-width:820px){.pasos::before{display:none}}
.paso{position:relative; padding-top:54px}
.paso .num{position:absolute; left:0; top:0; width:40px;height:40px;border-radius:50%; background:var(--verde); color:#fff; display:grid; place-items:center;
  font-family:var(--titulo); font-size:19px; box-shadow:0 0 0 6px var(--hueso)}
.paso h3{font-size:21px; margin-bottom:8px}
.paso p{color:var(--tinta-suave); font-size:15.5px}

/* ---------- testimonios ---------- */
.testimonio{background:var(--hueso); border:1px solid var(--linea); border-radius:var(--radio-grande); padding:26px; display:flex; flex-direction:column; gap:14px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease}
.testimonio:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(18,16,13,.07)}
.testimonio blockquote{margin:0; font-family:var(--titulo); font-size:20px; line-height:1.45}
.testimonio footer{margin-top:auto; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--tinta-suave)}
.avatar{width:38px;height:38px;border-radius:50%; background:var(--verde-claro); border:1px solid var(--verde-borde); display:grid; place-items:center; font-size:13px; color:var(--verde)}

/* ---------- precios ---------- */
.plan{position:relative; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio-grande); padding:28px; display:flex; flex-direction:column; gap:15px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease}
.plan:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(18,16,13,.07)}
.plan.destacado{background:var(--verde-claro); border-color:var(--verde-borde); transform:scale(1.02)}
.plan.destacado:hover{transform:scale(1.02) translateY(-6px)}
.plan .etiqueta{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--verde)}
.plan .importe{font-family:var(--titulo); font-size:46px; line-height:1}
.plan .importe small{font-size:15px; font-family:var(--cuerpo); color:var(--tinta-suave)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:15.5px; color:var(--tinta-suave)}
.plan li{display:flex; gap:10px; align-items:flex-start}
.plan li svg{width:18px;height:18px;flex:none;margin-top:5px;stroke:var(--verde);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto}

/* ---------- preguntas ---------- */
.preguntas{margin-top:32px; max-width:840px}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:24px; align-items:center;
  font-family:var(--titulo); font-size:20px; transition:color .25s ease}
.pregunta summary:hover{color:var(--verde)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta .signo{flex:none; width:30px;height:30px;border-radius:50%; border:1px solid var(--linea); display:grid; place-items:center; color:var(--verde); font-family:var(--cuerpo); font-size:17px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background .3s ease, border-color .3s ease}
.pregunta[open] .signo{transform:rotate(135deg); background:var(--verde-claro); border-color:var(--verde-borde)}
.pregunta .cuerpo{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1)}
.pregunta[open] .cuerpo{grid-template-rows:1fr}
.pregunta .cuerpo > div{overflow:hidden}
.pregunta .cuerpo p{padding-bottom:20px; color:var(--tinta-suave); max-width:var(--medida)}

/* ---------- cierre ---------- */
.cierre{position:relative; overflow:hidden; background:var(--verde-hondo); color:#fff; border-radius:24px; padding:60px 44px; text-align:center}
.cierre h2{font-size:clamp(28px,3.3vw,38px)}
.cierre p{margin:14px auto 28px; color:rgba(255,255,255,.7); max-width:52ch}
.cierre .halo{width:700px;height:700px; top:-300px; left:50%; margin-left:-350px; animation:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,138,78,.55) 0%, rgba(0,138,78,.18) 45%, rgba(0,138,78,0) 70%)}
@media(max-width:640px){.cierre{padding:42px 22px}}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea); background:var(--papel); padding:32px 0; font-size:14px; color:var(--tinta-suave)}
.pie .env{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}

/* ---------- aviso de muestra ---------- */
.aviso{margin-top:44px; border:1px dashed var(--verde-borde); background:var(--verde-claro); border-radius:var(--radio-grande); padding:22px 26px}
.aviso h3{font-family:var(--cuerpo); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--verde); margin-bottom:12px}
.aviso ul{margin:0; padding-left:20px; color:var(--tinta-suave); font-size:15px}

/* ---------- entrada al llegar ---------- */
.entra{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.entra.dentro{opacity:1; transform:none}
/* las piezas con inclinación entran moviendo sus variables, no su transform */
.tarjeta.entra,.plan.entra,.testimonio.entra{transform:translate3d(var(--dx,0px),var(--y,26px),0) rotate(var(--rot,0deg))}
.tarjeta.entra.dentro,.plan.entra.dentro,.testimonio.entra.dentro{--y:0px; --dx:0px; --rot:0deg}
.zoom{opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.3,1)}
.zoom.dentro{opacity:1; transform:none}

/* --- repertorio de entradas ---------------------------------------------- */
/* Cada pieza de la pagina entra con un gesto distinto segun lo que es, para que
   bajar por la pagina no sea el mismo movimiento nueve veces. El gesto se guarda
   en data-entra y lo reparte traje.js; el observador anade .dentro al llegar.
   Para forzar un gesto concreto, se pone data-entra a mano en el HTML: el
   reparto automatico respeta lo que ya venga marcado.

   Cada gesto es una ANIMACION, no una transicion, y al terminar el guion quita
   data-entra de la pieza. Asi la pieza queda limpia y vuelve a mandar lo suyo:
   el hover que la levanta, la inclinacion hacia el raton y el borde redondeado.
   Con transiciones, el transform de reposo del reveal pisaba el del hover (las
   tarjetas dejaban de levantarse) y el clip-path del barrido recortaba las
   esquinas redondeadas de las fotos. */
[data-entra]:not(.dentro){opacity:0}
[data-entra].dentro{
  animation-duration:.95s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-fill-mode:both;
}

[data-entra="sube"]:not(.dentro){transform:translateY(30px)}
[data-entra="sube"].dentro{animation-name:eb-sube}
@keyframes eb-sube{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}

[data-entra="baja"]:not(.dentro){transform:translateY(-26px)}
[data-entra="baja"].dentro{animation-name:eb-baja}
@keyframes eb-baja{from{opacity:0; transform:translateY(-26px)} to{opacity:1; transform:none}}

[data-entra="izq"]:not(.dentro){transform:translateX(-46px)}
[data-entra="izq"].dentro{animation-name:eb-izq}
@keyframes eb-izq{from{opacity:0; transform:translateX(-46px)} to{opacity:1; transform:none}}

[data-entra="der"]:not(.dentro){transform:translateX(46px)}
[data-entra="der"].dentro{animation-name:eb-der}
@keyframes eb-der{from{opacity:0; transform:translateX(46px)} to{opacity:1; transform:none}}

[data-entra="crece"]:not(.dentro){transform:scale(.92)}
[data-entra="crece"].dentro{animation-name:eb-crece}
@keyframes eb-crece{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}

[data-entra="encoge"]:not(.dentro){transform:scale(1.06)}
[data-entra="encoge"].dentro{animation-name:eb-encoge; animation-duration:1.1s}
@keyframes eb-encoge{from{opacity:0; transform:scale(1.06)} to{opacity:1; transform:none}}

[data-entra="pluma"]:not(.dentro){transform:translateY(44px) rotate(1.6deg)}
[data-entra="pluma"].dentro{animation-name:eb-pluma; animation-duration:1.1s}
@keyframes eb-pluma{from{opacity:0; transform:translateY(44px) rotate(1.6deg)} to{opacity:1; transform:none}}

[data-entra="abanico"]:not(.dentro){transform:translateY(32px) rotate(-2.4deg); transform-origin:bottom left}
[data-entra="abanico"].dentro{animation-name:eb-abanico; transform-origin:bottom left}
@keyframes eb-abanico{from{opacity:0; transform:translateY(32px) rotate(-2.4deg)} to{opacity:1; transform:none}}

[data-entra="giro"]:not(.dentro){transform:perspective(900px) rotateX(16deg) translateY(24px); transform-origin:top center}
[data-entra="giro"].dentro{animation-name:eb-giro; transform-origin:top center}
@keyframes eb-giro{from{opacity:0; transform:perspective(900px) rotateX(16deg) translateY(24px)} to{opacity:1; transform:none}}

[data-entra="bruma"]:not(.dentro){filter:blur(12px); transform:scale(1.02)}
[data-entra="bruma"].dentro{animation-name:eb-bruma; animation-duration:1.05s}
@keyframes eb-bruma{from{opacity:0; filter:blur(12px); transform:scale(1.02)} to{opacity:1; filter:blur(0); transform:none}}

/* el fundido no lleva transform: es para piezas que ya usan el suyo */
[data-entra="fundido"].dentro{animation-name:eb-fundido}
@keyframes eb-fundido{from{opacity:0} to{opacity:1}}

/* revelados de mascara: entran opacos, lo que se mueve es el recorte */
[data-entra="barrido"]:not(.dentro){opacity:1; clip-path:inset(0 0 100% 0)}
[data-entra="barrido"].dentro{animation-name:eb-barrido; animation-duration:1.2s; animation-timing-function:cubic-bezier(.7,0,.16,1)}
@keyframes eb-barrido{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}

[data-entra="barrido-lado"]:not(.dentro){opacity:1; clip-path:inset(0 100% 0 0)}
[data-entra="barrido-lado"].dentro{animation-name:eb-barrido-lado; animation-duration:1.2s; animation-timing-function:cubic-bezier(.7,0,.16,1)}
@keyframes eb-barrido-lado{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

[data-entra="telon"]:not(.dentro){opacity:1; clip-path:inset(0 0 0 100%)}
[data-entra="telon"].dentro{animation-name:eb-telon; animation-duration:1.2s; animation-timing-function:cubic-bezier(.7,0,.16,1)}
@keyframes eb-telon{from{clip-path:inset(0 0 0 100%)} to{clip-path:inset(0 0 0 0)}}







/* ---------- hueco del vídeo ---------- */
.cortina .velo{background:linear-gradient(90deg, rgba(5,48,29,.82) 0%, rgba(5,48,29,.5) 50%, rgba(5,48,29,.22) 100%)}
.play{position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); display:grid; place-items:center; z-index:4;
  box-shadow:0 10px 30px rgba(5,48,29,.3); transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease}
.play svg{width:26px;height:26px; fill:var(--verde-hondo); margin-left:4px}
.play:hover{transform:scale(1.08); background:#fff}
.play::before{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  animation:pulso 2.6s ease-out infinite}
@keyframes pulso{
  0%{transform:scale(1); opacity:.9}
  70%{transform:scale(1.45); opacity:0}
  100%{transform:scale(1.45); opacity:0}}
.pie-video{position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(255,255,255,.82); font-size:13px; z-index:4; letter-spacing:.04em}
@media(max-width:640px){.play{width:66px;height:66px} .play svg{width:20px;height:20px}}

/* ---------- tarjetas con foto ---------- */
.tarjeta.con-foto{padding:0}
.tarjeta.con-foto > .cuerpo-tarjeta{padding:22px 24px 24px; display:flex; flex-direction:column; gap:11px; flex:1}
.foto-tapa{position:relative; overflow:hidden; background:#e6e7db}
.foto-tapa img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover .foto-tapa img{transform:scale(1.09)}
.foto-h{aspect-ratio:16/9}
.foto-c{aspect-ratio:1/1}
.foto-a{aspect-ratio:4/5}
.tarjeta.con-foto .codigo{position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,.92);
  padding:4px 12px; border-radius:99px; font-size:12px; box-shadow:0 2px 8px rgba(18,16,13,.12)}
.tarjeta.verde.con-foto .codigo{background:var(--verde); color:#fff}
.tarjeta.con-foto .ficha{margin-top:auto}

/* el catálogo, con las tarjetas juntas */
.rejilla.junta{gap:10px}

/* ---------- fotografía ---------- */
.pieza-alta{padding:0; overflow:hidden; background:#e6e7db}
.pieza-alta img{width:100%; height:100%; object-fit:cover; opacity:1; animation:ken 24s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.16)}}

/* la cortina: la foto se abre de abajo arriba */
.cortina{position:relative; border-radius:32px; overflow:hidden; box-shadow:0 30px 70px rgba(18,16,13,.14);
  background:linear-gradient(135deg,#05301d 0%,#0b5c39 100%)}
.cortina.espera{clip-path:inset(0 0 100% 0); transition:clip-path 1.35s cubic-bezier(.7,0,.16,1)}
.cortina.espera.dentro{clip-path:inset(0 0 0 0)}
.cortina video, .cortina img{display:block; width:100%; height:clamp(340px,44vw,580px); object-fit:cover; transition:transform 2.2s cubic-bezier(.2,.7,.3,1)}
.cortina.espera video, .cortina.espera img{transform:scale(1.12)}
.cortina.espera.dentro video, .cortina.espera.dentro img{transform:scale(1)}
.cortina .velo{position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,48,29,.86) 0%, rgba(5,48,29,.55) 45%, rgba(5,48,29,.08) 100%)}
.cortina .dicho{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:0 clamp(24px,6vw,72px); color:#fff; max-width:760px}
.cortina .dicho h2{font-size:clamp(28px,3.6vw,44px); color:#fff}
.cortina .dicho p{color:rgba(255,255,255,.8); max-width:44ch}
.cortina.espera .dicho > *{opacity:0; transform:translateY(26px); transition:opacity .9s ease .55s, transform .9s cubic-bezier(.2,.7,.3,1) .55s}
.cortina.espera.dentro .dicho > *{opacity:1; transform:none}
.cortina.espera.dentro .dicho > *:nth-child(2){transition-delay:.7s}
.cortina.espera.dentro .dicho > *:nth-child(3){transition-delay:.85s}

/* caras de los testimonios */
.avatar{overflow:hidden; padding:0}
.avatar img{width:100%;height:100%;object-fit:cover; display:block}

/* el cierre, con las torres detrás */
.cierre{isolation:isolate}
.cierre .foto{position:absolute; inset:0; z-index:-1; opacity:.22}
.cierre .foto img{width:100%;height:100%;object-fit:cover; filter:grayscale(.4)}

/* los números de los pasos entran con rebote */
.paso .num{transform:scale(0); transition:transform .7s cubic-bezier(.34,1.56,.64,1) .15s}
.paso.dentro .num{transform:scale(1)}

/* ---------- piezas en verde, para romper el ritmo ---------- */
.tarjeta.verde, .testimonio.verde{background:var(--verde); border-color:var(--verde); color:#fff;
  box-shadow:0 2px 6px rgba(5,48,29,.18), 0 20px 44px rgba(0,138,78,.22)}
.tarjeta.verde h3, .testimonio.verde blockquote{color:#fff}
.tarjeta.verde p, .testimonio.verde footer{color:rgba(255,255,255,.78)}
.tarjeta.verde .codigo{color:rgba(255,255,255,.9)}
.tarjeta.verde .ficha{border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.78)}
.tarjeta.verde .enlace-verde{color:#fff}
.tarjeta.verde .icono{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28)}
.tarjeta.verde .icono svg{stroke:#fff}
.tarjeta.verde::after{background:#fff}
.testimonio.verde .avatar{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff}
.tarjeta.verde .precio{color:#fff}

/* tarjeta en verde claro, un escalón más suave */
.tarjeta.verde-suave{background:var(--verde-claro); border-color:var(--verde-borde)}
.cinta-tarjeta{position:absolute; top:16px; right:-34px; transform:rotate(38deg); background:var(--verde); color:#fff;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 40px; font-weight:600; z-index:3}

/* una sección entera en verde hondo */
section.verde{color:#fff}
section.verde > .env{background:var(--verde-hondo); border-radius:32px; padding:60px 52px; width:min(1288px,100% - 40px);
  box-shadow:0 30px 70px rgba(5,48,29,.22); position:relative; overflow:hidden}
section.verde > .env::before{content:""; position:absolute; width:760px;height:760px; top:-330px; right:-220px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(0,138,78,.75) 0%, rgba(0,138,78,.18) 45%, rgba(0,138,78,0) 70%);
  animation:aurora-a 22s ease-in-out infinite alternate; pointer-events:none}
section.verde > .env::after{content:""; position:absolute; width:620px;height:620px; bottom:-300px; left:-180px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(176,196,110,.30) 0%, rgba(176,196,110,.08) 45%, rgba(176,196,110,0) 70%);
  animation:aurora-c 28s ease-in-out infinite alternate; pointer-events:none}
section.verde .rotulo{color:#9fe3c4}
section.verde h2{color:#fff}
section.verde .paso p{color:rgba(255,255,255,.72)}
section.verde .paso h3{color:#fff}
section.verde .paso .num{background:#fff; color:var(--verde-hondo); box-shadow:0 0 0 6px rgba(255,255,255,.10)}
section.verde .pasos::before{background:rgba(255,255,255,.24)}
@media(max-width:820px){section.verde > .env{padding:42px 22px; border-radius:24px; width:calc(100% - 24px)}}

/* ---------- auroras: manchas de luz que cambian de clima ---------- */
.telon{--c1:0,138,78; --c2:5,48,29; --c3:176,196,110; --c4:0,138,78;
  --i1:.20; --i2:.16; --i3:.20; --i4:.16; --giro:0deg; --escala:1}
.telon .capa{position:absolute; inset:0; transform:rotate(var(--giro)) scale(var(--escala));
  transition:transform 2.4s cubic-bezier(.25,.8,.3,1)}
.aurora{position:absolute; border-radius:50%; will-change:transform; pointer-events:none;
  transition:background 1.8s ease, opacity 1.8s ease, width 2.4s ease, height 2.4s ease}
.aurora-1{width:900px;height:900px; top:-320px; right:-180px;
  background:radial-gradient(circle at 50% 50%, rgba(var(--c1),var(--i1)) 0%, rgba(var(--c1),calc(var(--i1)*.4)) 40%, rgba(var(--c1),0) 68%);
  animation:aurora-a 26s ease-in-out infinite alternate}
.aurora-2{width:760px;height:760px; top:6%; left:-260px;
  background:radial-gradient(circle at 50% 50%, rgba(var(--c2),var(--i2)) 0%, rgba(var(--c2),calc(var(--i2)*.4)) 44%, rgba(var(--c2),0) 70%);
  animation:aurora-b 34s ease-in-out infinite alternate}
.aurora-3{width:680px;height:680px; top:34%; right:8%;
  background:radial-gradient(circle at 50% 50%, rgba(var(--c3),var(--i3)) 0%, rgba(var(--c3),calc(var(--i3)*.35)) 45%, rgba(var(--c3),0) 70%);
  animation:aurora-c 30s ease-in-out infinite alternate}
.aurora-4{width:820px;height:820px; bottom:-8%; left:16%;
  background:radial-gradient(circle at 50% 50%, rgba(var(--c4),var(--i4)) 0%, rgba(var(--c4),calc(var(--i4)*.35)) 42%, rgba(var(--c4),0) 68%);
  animation:aurora-d 38s ease-in-out infinite alternate}
@keyframes aurora-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-120px,90px,0) scale(1.18)}
  100%{transform:translate3d(60px,-70px,0) scale(.94)}}
@keyframes aurora-b{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(140px,-60px,0) scale(.9)}
  100%{transform:translate3d(-40px,110px,0) scale(1.14)}}
@keyframes aurora-c{
  0%{transform:translate3d(0,0,0) scale(.96)}
  50%{transform:translate3d(-90px,-110px,0) scale(1.2)}
  100%{transform:translate3d(110px,60px,0) scale(1)}}
@keyframes aurora-d{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  50%{transform:translate3d(90px,-90px,0) scale(.92)}
  100%{transform:translate3d(-110px,40px,0) scale(1.16)}}

/* la mancha que sigue al ratón */
.aurora-raton{position:fixed; width:620px;height:620px; left:0; top:0; margin:-310px 0 0 -310px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 50% 50%, rgba(0,138,78,.13) 0%, rgba(0,138,78,.05) 40%, rgba(0,138,78,0) 66%);
  opacity:0; transition:opacity 1.2s ease; will-change:transform}
.aurora-raton.viva{opacity:1}

/* la malla de líneas respira y se desplaza sin parar */
.telon .malla{animation:malla-deriva 60s linear infinite; will-change:transform}
@keyframes malla-deriva{
  from{transform:rotate(-10deg) translate3d(0,0,0)}
  to{transform:rotate(-10deg) translate3d(-120px,-120px,0)}}

/* ================= PROBADOR DE TIPOGRAFÍA (solo en la muestra) ================= */
.probador{position:fixed; right:18px; bottom:18px; z-index:200; background:#fff; border:1px solid var(--linea);
  border-radius:16px; box-shadow:0 10px 30px rgba(18,16,13,.12), 0 40px 80px rgba(18,16,13,.08); padding:14px; width:246px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.probador h4{margin:0 0 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); font-weight:600}
.probador button{display:block; width:100%; text-align:left; margin-bottom:6px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--linea); background:#fff; cursor:pointer; font-size:13px; line-height:1.35; color:var(--tinta); transition:all .2s ease}
.probador button:hover{border-color:var(--verde-borde); background:var(--verde-claro)}
.probador button.puesta{border-color:var(--verde); background:var(--verde-claro); color:var(--verde)}
.probador button b{display:block; font-size:14px; font-weight:600}
.probador button small{color:var(--tinta-suave); font-size:11.5px}
.probador button.puesta small{color:var(--verde)}
.probador .plegar{position:absolute; top:10px; right:12px; width:22px; height:22px; padding:0; border-radius:50%; text-align:center; line-height:20px; margin:0}
.probador.plegado{width:auto; padding:10px 14px}
.probador.plegado h4{margin:0}
.probador.plegado .lista{display:none}
@media(max-width:640px){.probador{display:none}}

/* ================= PROFUNDIDAD: telón fijo y piezas flotando ================= */

/* el fondo se queda quieto detrás de todo y deriva despacio */
.telon{position:fixed; inset:-15% -10%; z-index:0; pointer-events:none; will-change:transform}
.telon .malla{position:absolute; inset:0;
  background-image:linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:120px 120px; transform:rotate(-10deg); opacity:0; transition:opacity 2s ease .3s;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 25%, #000 0%, rgba(0,0,0,.5) 55%, transparent 92%);
  mask-image:radial-gradient(90% 80% at 50% 25%, #000 0%, rgba(0,0,0,.5) 55%, transparent 92%)}
.telon.dentro .malla{opacity:.62}
body{position:relative}
main, .pie{position:relative; z-index:2}
/* la barra fuera de esa regla: con position:relative perdia el sticky y se iba con el scroll */
.barra{position:sticky; top:0; z-index:60}

/* la barra se despega y flota en píldora al bajar */
.barra{background:transparent; backdrop-filter:none; box-shadow:none; padding-top:0; transition:padding-top .45s cubic-bezier(.2,.7,.3,1)}
.barra.bajada{background:transparent; box-shadow:none; padding-top:12px}
.barra .env{width:min(1200px,100% - 48px); border-radius:0; padding:0; background:transparent; box-shadow:none;
  transition:height .45s cubic-bezier(.2,.7,.3,1), width .45s cubic-bezier(.2,.7,.3,1), background .45s ease,
             box-shadow .45s ease, border-radius .45s ease, padding .45s ease, transform .45s cubic-bezier(.2,.7,.3,1)}
.barra.bajada .env{
  width:min(1040px,100% - 32px); height:60px; border-radius:99px; padding:0 12px 0 22px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 1px rgba(18,16,13,.04), 0 10px 24px rgba(18,16,13,.07), 0 30px 60px rgba(18,16,13,.06);
}

/* piezas con relieve: sombra corta + sombra larga */
.tarjeta,.testimonio,.plan,.pieza{
  box-shadow:0 1px 2px rgba(18,16,13,.035), 0 12px 28px rgba(18,16,13,.045);
}
.tarjeta:hover,.testimonio:hover,.plan:hover{
  box-shadow:0 2px 4px rgba(18,16,13,.05), 0 22px 46px rgba(18,16,13,.09), 0 44px 90px rgba(18,16,13,.06);
}

/* las bandas blancas dejan de ser bandas: son planchas que flotan */
section.blanca{background:transparent}
section.blanca > .env{
  background:rgba(255,255,255,.92);
  border-radius:32px; padding:56px 52px; width:min(1288px,100% - 40px);
  box-shadow:0 1px 2px rgba(18,16,13,.03), 0 30px 70px rgba(18,16,13,.055)}
@media(max-width:820px){section.blanca > .env{padding:38px 22px; border-radius:24px; width:calc(100% - 24px)}}

/* inclinación 3D con el ratón */
.tarjeta,.plan,.testimonio{
  transform-style:preserve-3d;
  transform:translate3d(var(--dx,0px),var(--y,0px),0) rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .35s ease}
.tarjeta:hover,.testimonio:hover{--y:-6px}
.plan:hover{--y:-6px}
.plan.destacado{transform:translate3d(var(--dx,0px),var(--y,0px),0) rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02)}
.plan.destacado:hover{transform:translate3d(0,-6px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02)}
.tarjeta.inclinando,.plan.inclinando,.testimonio.inclinando{transition:box-shadow .35s ease, border-color .3s ease}
.rejilla{perspective:1200px}
/* lo de dentro se despega del papel */
.tarjeta .icono,.tarjeta h3,.tarjeta .codigo,.plan .importe,.testimonio blockquote{transform:translateZ(28px)}
.tarjeta p,.plan ul,.testimonio footer{transform:translateZ(12px)}

/* el mosaico del hero, en capas */
.mosaico{perspective:1000px; transform-style:preserve-3d}
.pieza-verde{box-shadow:0 10px 30px rgba(0,138,78,.18), 0 30px 60px rgba(0,138,78,.14)}

/* los títulos van un pelín más lentos que el resto */
.titular-lineas{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .aurora-raton{display:none}
  section.verde > .env::before, section.verde > .env::after{animation:none}
  .telon .capa{transition:none}
  .aurora{animation:none; transition:none}
  .telon .malla{animation:none}
  .telon{display:none}
  .barra.bajada .env{transition:none}
  .tarjeta,.plan,.testimonio{transform:none !important}
  .tarjeta .icono,.tarjeta h3,.tarjeta .codigo,.plan .importe,.testimonio blockquote,
  .tarjeta p,.plan ul,.testimonio footer{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra,.zoom,[data-entra]{opacity:1; transform:none; filter:none; clip-path:none; transition:none; animation:none}
  .linea-mascara > span{transform:none; transition:none}
  .estrellas i{opacity:1; transform:none}
  .marquesina{animation:none}
  .halo{animation:none}
  .rejilla-fondo{opacity:.85; transition:none}
  .barra .env{transition:none}
  .tarjeta:hover,.testimonio:hover,.plan:hover{transform:none}
  .plan.destacado{transform:none}
  .pasos::before,.cifra::before{transition:none}
  .pasos::before,.cifra::before{transform:none}
}

/* ---------- la tarjeta entera es un enlace ---------- */
.enlace-tapa{position:absolute; inset:0; z-index:6; overflow:hidden; text-indent:-200vw; white-space:nowrap;
  border-radius:inherit; -webkit-tap-highlight-color:transparent}
.enlace-tapa:focus-visible{outline:2px solid var(--verde); outline-offset:3px; text-indent:0}
.tarjeta-curso{cursor:pointer}

/* ---------- los enlaces del pie ---------- */
.enlaces-pie{display:flex; gap:20px; flex-wrap:wrap}
.enlaces-pie a{text-decoration:none; color:var(--tinta-suave); transition:color .25s ease}
.enlaces-pie a:hover{color:var(--verde)}
@media(max-width:640px){.pie .env{flex-direction:column; gap:16px} .enlaces-pie{gap:14px}}

/* ---------- los saltos a una seccion se funden, no recorren la pagina ---------- */
main{transition:opacity .22s ease}
body.saltando main{opacity:0}
@keyframes asoma-bloque{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:none}}
main.asomando{animation:asoma-bloque .44s cubic-bezier(.2,.7,.3,1) both}
@media(prefers-reduced-motion:reduce){
  main{transition:none}
  body.saltando main{opacity:1}
  main.asomando{animation:none}
}

/* ============================================================
   Transiciones suaves entre paginas y entre idiomas
   Entre paginas: fundido cruzado del navegador (view transitions). Donde no
   existe, la pagina se funde al salir y aparece fundida al llegar.
   Entre idiomas: el texto se funde, cambia y vuelve.
   ============================================================ */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s; animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* si se llega con el espanol guardado, el contenido espera escondido a que se
   cambie el texto: sin esto se veia el ingles un instante y saltaba */
html.es-pronto main, html.es-pronto .pie, html.es-pronto .barra .env{opacity:0}
main, .pie{transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.barra .env{transition:height .45s cubic-bezier(.2,.7,.3,1), width .45s cubic-bezier(.2,.7,.3,1), background .45s ease,
  box-shadow .45s ease, border-radius .45s ease, padding .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), opacity .4s cubic-bezier(.4,0,.2,1)}

html.cambia-idioma main, html.cambia-idioma .pie, html.cambia-idioma .barra .nav,
html.cambia-idioma .barra .btn{opacity:0; transition-duration:.22s}
.barra .nav{transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.barra .btn{transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease}

html.sin-vt body{animation:eb-llega .5s cubic-bezier(.4,0,.2,1) both}
html.sin-vt.saliendo body{opacity:0; transition:opacity .28s ease}
@keyframes eb-llega{from{opacity:0} to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.sin-vt body{animation:none}
  main, .pie, .barra .nav, .barra .btn{transition:none}
}

/* ============================================================
   Sin scroll lateral en ninguna pantalla
   clip y no hidden: hidden en html convierte la pagina en caja de scroll
   y la barra pierde el sticky. Ademas, lo fijo que era mas ancho que la
   pantalla se ajusta a ella: en movil lo fijo tambien empuja de lado.
   ============================================================ */
html, body{overflow-x:clip}
.telon{inset:-15% 0}
@media(hover:none){.aurora-raton{display:none}}