/* clip en vez de hidden: recorta el desborde lateral sin romper los
   encabezados pegajosos, que sí se rompen con overflow:hidden. */
html{overflow-x:clip}

/* ============================================================
   CAPA DE EFECTOS COMPARTIDA
   La heredan todos los arquetipos. Da profundidad sin imponer
   estilo: texturas, relieve, movimiento ligado al scroll y
   microinteracciones. Todo se apaga con movimiento reducido.
   ============================================================ */

/* --- Grano: quita el aspecto plano del color liso --- */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* --- Aparición con dirección --- */
.anim [data-ap]{opacity:0; will-change:transform, opacity;
  /* recorridos cortos y curva larga: se nota el movimiento, no el truco */
  transition:opacity 1s cubic-bezier(.16,.84,.24,1), transform 1s cubic-bezier(.16,.84,.24,1)}
.anim [data-ap="izq"]{transform:translateX(-28px)}
.anim [data-ap="der"]{transform:translateX(28px)}
.anim [data-ap="abajo"]{transform:translateY(26px)}
.anim [data-ap="zoom"]{transform:scale(.95)}
.anim [data-ap="giro"]{transform:translateY(34px) rotate(-2.5deg)}
.anim [data-ap].visto{opacity:1; transform:none}

/* --- Barrido de la imagen al entrar --- */
.anim [data-cortina]{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.2,.8,.25,1)}
.anim [data-cortina].visto{clip-path:inset(0 0 0 0)}

/* --- Relieve al inclinar con el puntero --- */
/* Sin preserve-3d: crea un contexto 3D que impide a los contenedores con
   overflow:hidden recortar sus adornos, y aparecía barra horizontal. */
[data-relieve]{will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s cubic-bezier(.2,.8,.25,1)}
[data-relieve].inclinado{transition:transform .12s linear}

/* --- Foco que sigue al puntero --- */
[data-foco]{position:relative; isolation:isolate}
[data-foco]::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(340px circle at var(--fx,50%) var(--fy,50%),
    rgba(255,255,255,.5), transparent 62%);
}
[data-foco].encendido::after{opacity:1}

/* --- Botones que se dejan atraer --- */
[data-iman]{will-change:transform}

/* --- Brillo que recorre el borde de una tarjeta --- */
[data-borde]{position:relative}
[data-borde]::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:0;
  background:conic-gradient(from var(--giro,0deg), transparent 0 62%, var(--lav) 78%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease;
}
[data-borde]:hover::before{opacity:1}
.anim [data-borde]:hover::before{animation:girarBorde 2.6s linear infinite}
@keyframes girarBorde{to{--giro:360deg}}
@property --giro{syntax:'<angle>'; initial-value:0deg; inherits:false}

/* --- Subrayado que crece bajo los enlaces de texto --- */
.anim a[data-linea]{background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s cubic-bezier(.2,.8,.25,1)}
.anim a[data-linea]:hover{background-size:100% 1.5px}

/* --- Historia plegable --- */
.hist{margin-top:8px}
.hist > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:.95rem; padding:12px 0; user-select:none;
}
.hist > summary::-webkit-details-marker{display:none}
.hist > summary .mas{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1.5px solid currentColor; transition:transform .4s cubic-bezier(.2,.8,.25,1), background .3s ease;
}
.hist > summary .mas svg{width:14px; height:14px; transition:transform .4s cubic-bezier(.2,.8,.25,1)}
.hist[open] > summary .mas svg{transform:rotate(45deg)}
.hist > summary:hover .mas{transform:scale(1.1)}
.hist-cuerpo{overflow:hidden}
.anim .hist[open] .hist-cuerpo{animation:desplegar .6s cubic-bezier(.2,.8,.25,1)}
@keyframes desplegar{from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:none}}

/* --- Cuenta regresiva del scroll en secciones largas --- */
.anim [data-progreso]{position:relative}
.anim [data-progreso]::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:var(--avance,0%);
  background:linear-gradient(180deg,var(--lav),transparent); border-radius:3px; opacity:.7;
}

@media (max-width:820px){
  [data-relieve]{transform:none!important}
  [data-foco]::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  body::before{display:none}
  .anim [data-ap]{opacity:1!important; transform:none!important}
  .anim [data-cortina]{clip-path:none!important}
  [data-relieve], [data-iman]{transform:none!important}
  [data-foco]::after, [data-borde]::before{display:none}
}

/* ============================================================
   SEPARADORES CON FORMA
   Ninguna sección se corta con una línea recta.
   ============================================================ */
/* Se declara arriba del todo para que cualquier bloque pueda dejarle sitio:
   el separador se monta encima de la sección anterior y taparía lo que hubiera
   en sus últimos píxeles. */
:root{--sep-alto:clamp(36px,5vw,72px)}
.sep{
  /* El separador se monta sobre los últimos píxeles de la sección de arriba y es
     transparente. Así hereda su degradado, sus halos y su color sin tener que
     adivinarlos, y no queda ninguna franja blanca. */
  /* La altura tiene que dar para que la curva se note. Con 29 px la onda queda
     en una pendiente de catorce píxeles a lo largo de mil doscientos de ancho, y
     eso el ojo lo lee como una raya, no como una onda. */
  --sep-alto:clamp(36px,5vw,72px);
  position:relative; z-index:3; line-height:0; pointer-events:none;
  height:var(--sep-alto); margin-top:calc(-1 * var(--sep-alto)); margin-bottom:-1px;
}
.sep svg{display:block; width:100%; height:100%}
.sep .relleno{fill:var(--sep)}
/* El eco va del mismo color, apenas insinuado: profundidad sin una raya suelta */
.sep .eco{fill:var(--sep); opacity:.34}
/* Trazo fino sobre la curva. Casi nunca conviene: en una onda aplastada se lee
   como una regla horizontal de otro color. Solo para formas muy marcadas. */
.sep .linea{fill:none; stroke:var(--sep-linea, transparent); stroke-width:2;
  vector-effect:non-scaling-stroke; stroke-linecap:round}
.sep-espejo svg{transform:scaleX(-1)}
.sep-fino{--sep-alto:clamp(28px,3.8vw,52px)}
.sep-alto{--sep-alto:clamp(52px,7vw,104px)}
/* Variante que sí ocupa su propio espacio, para cuando arriba no hay margen libre */
.sep-bloque{margin-top:0; background:var(--sep-fondo, transparent)}
.sep-doble{--sep-alto:clamp(46px,6.5vw,104px)}
/* Una banda estrecha entre dos separadores se queda sin aire: la ola se monta
   sobre sus últimos píxeles y le tapa el texto. Cualquier cinta de ese tipo
   lleva la clase «franja» y se le reserva el alto de la ola arriba y abajo. */
.franja{padding-top:calc(var(--sep-alto) + 14px) !important;
  padding-bottom:calc(var(--sep-alto) + 14px) !important}

/* El separador se pinta con el mismo color que la banda de abajo, así que la
   zona de color empieza antes que la caja de la banda. Centrar el contenido
   dentro de la caja lo deja caído respecto a lo que el ojo ve. Se sube la mitad
   de la altura del separador; la caja no cambia de alto, solo el contenido. */
.sep + .franja, .sep + footer, .sep + .p-tira{--comp:calc(var(--sep-alto) * .5)}
.sep-fino + .franja, .sep-fino + footer, .sep-fino + .p-tira{--comp:calc(clamp(28px,3.8vw,52px) * .5)}
.sep + .franja > *, .sep + footer > .wrap, .sep + .p-tira > .wrap{
  position:relative; top:calc(var(--comp, 0px) * -1)}
.sep-doble .atras{fill:var(--sep2); opacity:.55}
.sep-doble .frente{fill:var(--sep)}

/* ============================================================
   MARCOS Y EFECTOS ALREDEDOR DE LAS IMÁGENES
   ============================================================ */

/* Trazo punteado que rodea la foto, desplazado */
.marco-trazo{position:relative}
.marco-trazo::before{
  content:""; position:absolute; inset:-14px; border-radius:inherit; z-index:0;
  border:2px dashed var(--lav); opacity:.55;
}
/* El giro solo tiene sentido en fotos redondas: sobre un rectángulo grande el
   marco rota hasta cruzar el diseño en diagonal. Se pide con la clase 'gira'. */
.anim .marco-trazo.gira::before{animation:girarTrazo 34s linear infinite}
@keyframes girarTrazo{to{transform:rotate(360deg)}}

/* Aro de degradado que gira alrededor de una foto redonda */
.aro-giro{position:relative; isolation:isolate}
.aro-giro::before{
  content:""; position:absolute; inset:-9px; border-radius:50%; z-index:-1;
  background:conic-gradient(from var(--giro,0deg), transparent 0 42%, var(--lav) 62%, transparent 82%);
  filter:blur(1px);
}
.anim .aro-giro::before{animation:girarBorde 5.5s linear infinite}

/* Brillo que barre la imagen al pasar el puntero */
.barrido{position:relative; overflow:hidden}
.barrido::after{
  content:""; position:absolute; top:-60%; left:-80%; width:55%; height:220%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(18deg) translateX(0); pointer-events:none; opacity:0;
}
.barrido:hover::after{opacity:1}
.anim .barrido:hover::after{animation:barrer .85s cubic-bezier(.2,.8,.25,1)}
@keyframes barrer{from{transform:rotate(18deg) translateX(0)} to{transform:rotate(18deg) translateX(420%)}}

/* Un brillo del color de la marca cruza la pieza una sola vez al aparecer.
   A diferencia de «barrido», no espera al puntero y usa el acento, no el blanco. */
.brillo-oro{position:relative; overflow:hidden}
.brillo-oro::after{
  content:""; position:absolute; top:-40%; left:-70%; width:45%; height:200%; z-index:2;
  background:linear-gradient(104deg, transparent, var(--lav), transparent);
  opacity:0; mix-blend-mode:screen; transform:rotate(16deg); pointer-events:none;
}
.anim .brillo-oro.visto::after{animation:cruzarOro 1.5s cubic-bezier(.25,.8,.3,1) .25s}
@keyframes cruzarOro{
  0%{opacity:0; transform:rotate(16deg) translateX(0)}
  18%{opacity:.55}
  100%{opacity:0; transform:rotate(16deg) translateX(420%)}
}

/* Un bloque de color macizo que asoma por detrás de la pieza al aparecer.
   Es el recurso de un cartel: nada de degradados ni sombras, solo color plano. */
.bloque-color{position:relative}
.bloque-color::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--lav);
  transform:translate(0,0); transition:transform .8s cubic-bezier(.2,.8,.25,1) .1s;
}
.bloque-color.visto::before{transform:translate(var(--bloque-x,14px), var(--bloque-y,14px))}

/* Un halo suave del color de la marca se abre por detrás de la pieza al aparecer.
   Nada de bordes ni líneas: solo aire de color. Para temas delicados. */
.florecer{position:relative}
.florecer::before{
  content:""; position:absolute; inset:-6%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--lav), transparent 66%);
  opacity:0; transform:scale(.72);
  transition:opacity 1.1s cubic-bezier(.2,.8,.25,1), transform 1.3s cubic-bezier(.2,.8,.25,1);
}
.florecer.visto::before{opacity:.34; transform:scale(1)}

/* Una cinta de satén cruza la esquina de la pieza y llega deslizándose al aparecer.
   Es el lazo de una caja de regalo. Se pinta con el acento de la marca. */
.lazo{position:relative; overflow:hidden}
.lazo::before{
  content:""; position:absolute; top:22px; right:-52px; width:190px; height:28px; z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent 45%, rgba(0,0,0,.12)), var(--lav);
  transform:rotate(45deg) translateX(70px); opacity:0; pointer-events:none;
  box-shadow:0 3px 8px rgba(0,0,0,.14);
  transition:transform .9s cubic-bezier(.2,.8,.25,1) .15s, opacity .5s ease .15s;
}
.lazo.visto::before{opacity:1; transform:rotate(45deg) translateX(0)}

/* Una pegatina que cae sobre la pieza con un pequeño rebote al aparecer.
   Para etiquetas de precio y sellos: cosas que se pegan encima. */
.pegatina{opacity:0; transform:rotate(var(--giro,-6deg)) scale(.6); transform-origin:center}
.anim .pegatina.visto{animation:pegar .7s cubic-bezier(.34,1.56,.64,1) .2s forwards}
.pegatina.visto{opacity:1; transform:rotate(var(--giro,-6deg)) scale(1)}
@keyframes pegar{
  0%{opacity:0; transform:rotate(var(--giro,-6deg)) scale(.6)}
  100%{opacity:1; transform:rotate(var(--giro,-6deg)) scale(1)}
}

/* Una viñeta oscura que se levanta al aparecer: la foto llega en penumbra y se abre.
   Para temas editoriales sobre fondo oscuro. */
.vineta{position:relative; overflow:hidden}
.vineta::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.72) 100%);
  opacity:1; transition:opacity 1.6s cubic-bezier(.2,.8,.25,1) .1s}
.vineta.visto::after{opacity:.18}

/* Un chorrito del color de la marca cae desde el borde de arriba de la pieza al
   aparecer, como una gota de queso. Para comida. */
.chorrito{position:relative}
.chorrito::before{content:""; position:absolute; top:-2px; left:22%; width:16px; height:0; z-index:3;
  background:var(--lav); border-radius:0 0 999px 999px; pointer-events:none;
  transition:height 1.1s cubic-bezier(.3,1.4,.5,1) .2s}
.chorrito::after{content:""; position:absolute; top:-2px; right:26%; width:11px; height:0; z-index:3;
  background:var(--lav); border-radius:0 0 999px 999px; pointer-events:none;
  transition:height 1.3s cubic-bezier(.3,1.4,.5,1) .45s}
.chorrito.visto::before{height:44px}
.chorrito.visto::after{height:28px}

/* Confeti: seis puntos de colores saltan alrededor de la pieza al aparecer y se
   quedan flotando. Los colores se pasan con --confeti-1, -2 y -3. */
.confeti{position:relative}
.confeti::before, .confeti::after{content:""; position:absolute; z-index:3; pointer-events:none; width:14px; height:14px;
  border-radius:50%; opacity:0; transform:scale(0); transition:transform .7s cubic-bezier(.34,1.56,.64,1) .2s, opacity .4s ease .2s}
.confeti::before{top:-8px; left:-8px; background:var(--confeti-1, var(--lav));
  box-shadow:40px -18px 0 -3px var(--confeti-2, var(--lav)), -6px 56px 0 -5px var(--confeti-3, var(--lav))}
.confeti::after{right:-6px; bottom:-8px; background:var(--confeti-2, var(--lav)); transition-delay:.45s;
  box-shadow:-34px 14px 0 -4px var(--confeti-3, var(--lav)), 8px -60px 0 -3px var(--confeti-1, var(--lav))}
.confeti.visto::before, .confeti.visto::after{opacity:1; transform:scale(1)}
.anim .confeti.visto::before{animation:flotarConfeti 5s ease-in-out 1s infinite}
.anim .confeti.visto::after{animation:flotarConfeti 6s ease-in-out 1.6s infinite reverse}
@keyframes flotarConfeti{0%,100%{translate:0 0} 50%{translate:0 -8px}}

/* Costura: una puntada discontinua que rodea la pieza y se dibuja al aparecer.
   Para moda y confección. */
.costura{position:relative}
.costura::before{content:""; position:absolute; inset:10px; z-index:3; pointer-events:none; border:2px dashed var(--lav);
  border-radius:inherit; opacity:0; clip-path:inset(0 100% 0 0); transition:clip-path 1.4s cubic-bezier(.2,.8,.25,1) .2s, opacity .3s ease .2s}
.costura.visto::before{opacity:.9; clip-path:inset(0 0 0 0)}

/* Corazones: dos corazones del acento suben desde la pieza al aparecer y se quedan
   flotando, uno a cada lado. Para marcas con corazón en el logo. */
.corazones{position:relative}
.corazones::before, .corazones::after{content:"\2665"; position:absolute; z-index:4; pointer-events:none; color:var(--lav); font-family:serif; line-height:1;
  opacity:0; transform:translateY(24px) scale(.6); transition:opacity .6s ease, transform 1.2s cubic-bezier(.2,.8,.25,1)}
.corazones::before{left:-10px; top:14%; font-size:28px; transition-delay:.25s}
.corazones::after{right:-12px; top:38%; font-size:18px; transition-delay:.55s}
.corazones.visto::before, .corazones.visto::after{opacity:1; transform:translateY(0) scale(1)}
.anim .corazones.visto::before{animation:flotarCorazon 4.2s ease-in-out 1.4s infinite}
.anim .corazones.visto::after{animation:flotarCorazon 3.6s ease-in-out 1.8s infinite}
@keyframes flotarCorazon{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.06)}}

/* Señal: dos anillos del acento se expanden desde el centro de la pieza, como una
   señal que se emite. Para tecnología y conectividad. */
.senal{position:relative}
.senal::before, .senal::after{content:""; position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1; border-radius:50%; border:2px solid var(--lav); z-index:0; pointer-events:none;
  transform:translate(-50%,-50%) scale(.6); opacity:0}
.senal > *{position:relative; z-index:1}
.anim .senal.visto::before{animation:senalOnda 3.2s ease-out infinite}
.anim .senal.visto::after{animation:senalOnda 3.2s ease-out 1.6s infinite}
@keyframes senalOnda{0%{transform:translate(-50%,-50%) scale(.6); opacity:.7} 100%{transform:translate(-50%,-50%) scale(1.7); opacity:0}}

/* Vapor: dos hilos que suben y se desvanecen por encima de la pieza, como el
   vapor de un plato caliente. Para comida. */
.vapor{position:relative}
.vapor::before, .vapor::after{content:""; position:absolute; z-index:2; pointer-events:none; width:6px; height:38px; top:-30px;
  border-radius:999px; background:linear-gradient(to top, currentColor, transparent); opacity:0}
.vapor::before{left:38%}
.vapor::after{left:56%; height:28px; top:-22px}
.anim .vapor.visto::before{animation:subeVapor 3.4s ease-out infinite}
.anim .vapor.visto::after{animation:subeVapor 3.4s ease-out 1.2s infinite}
@keyframes subeVapor{
  0%{opacity:0; transform:translateY(10px) scaleY(.6)}
  30%{opacity:.5}
  100%{opacity:0; transform:translateY(-22px) scaleY(1.2)}
}

/* Destellos que titilan alrededor */
.destellos{position:relative}
.destellos::before, .destellos::after{
  content:""; position:absolute; width:14px; height:14px; z-index:2; pointer-events:none;
  background:
    linear-gradient(var(--lav), var(--lav)) center/2px 100% no-repeat,
    linear-gradient(var(--lav), var(--lav)) center/100% 2px no-repeat;
  opacity:0;
}
.destellos::before{top:-10px; right:12%}
.destellos::after{bottom:8%; left:-12px; width:10px; height:10px}
.anim .destellos::before{animation:titilar 4.2s ease-in-out infinite}
.anim .destellos::after{animation:titilar 4.2s 1.9s ease-in-out infinite}
@keyframes titilar{
  0%,72%,100%{opacity:0; transform:scale(.4) rotate(0deg)}
  84%{opacity:.95; transform:scale(1) rotate(45deg)}
}

/* Esquinas dibujadas, para fotos rectangulares */
/* Un trazo que se dibuja solo por dos lados de la pieza al entrar en pantalla.
   Pensado para temas sin fotografía, donde la línea es el adorno. */
.trazo-crece{position:relative}
.trazo-crece::before, .trazo-crece::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  background:var(--lav); transition:transform 1s cubic-bezier(.2,.8,.25,1) .1s;
}
.trazo-crece::before{top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left}
.trazo-crece::after{top:0; left:0; width:2px; height:100%; transform:scaleY(0); transform-origin:top;
  transition-delay:.35s}
.trazo-crece.visto::before{transform:scaleX(1)}
.trazo-crece.visto::after{transform:scaleY(1)}

/* Un halo que late una vez cuando la pieza aparece */
.pulso-borde{position:relative}
.pulso-borde::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; z-index:-1;
  box-shadow:0 0 0 0 var(--lav); opacity:.5; pointer-events:none;
}
.anim .pulso-borde.visto::after{animation:latirBorde 1.6s ease-out .4s}
@keyframes latirBorde{
  from{box-shadow:0 0 0 0 var(--lav); opacity:.55}
  to{box-shadow:0 0 0 16px transparent; opacity:0}
}

.esquinas{position:relative}
.esquinas::before, .esquinas::after{
  content:""; position:absolute; width:52px; height:52px; z-index:2; pointer-events:none;
  border:2.5px solid var(--lav);
}
.esquinas::before{top:-12px; left:-12px; border-right:0; border-bottom:0; border-radius:12px 0 0 0}
.esquinas::after{bottom:-12px; right:-12px; border-left:0; border-top:0; border-radius:0 0 12px 0}

@media (max-width:620px){
  .marco-trazo::before{inset:-8px}
  .esquinas::before, .esquinas::after{width:34px; height:34px}
  .destellos::before, .destellos::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .trazo-crece::before, .trazo-crece::after{transition:none; transform:none}
  .florecer::before{transition:none; opacity:.3; transform:scale(1)}
  .lazo::before{transition:none; opacity:1; transform:rotate(45deg)}
  .pegatina{opacity:1; transform:rotate(var(--giro,-6deg)) scale(1); animation:none}
  .vineta::after{transition:none; opacity:.18}
  .chorrito::before, .chorrito::after{transition:none}
  .confeti::before, .confeti::after{transition:none; opacity:1; transform:scale(1); animation:none}
  .costura::before{transition:none; opacity:.9; clip-path:none}
  .corazones::before, .corazones::after{transition:none; opacity:1; transform:none; animation:none}
  .senal::before, .senal::after{animation:none !important; opacity:.35; transform:translate(-50%,-50%) scale(1.2)}
  .vapor::before, .vapor::after{animation:none !important; opacity:0}
  .bloque-color::before{transition:none; transform:translate(var(--bloque-x,14px), var(--bloque-y,14px))}
  .anim .brillo-oro.visto::after{animation:none}
  .anim .marco-trazo.gira::before, .anim .aro-giro::before,
  .anim .pulso-borde.visto::after,
  .anim .destellos::before, .anim .destellos::after{animation:none}
  .barrido::after{display:none}
}

/* ============================================================
   ROBUSTEZ Y CONVERSIÓN
   ============================================================ */

/* Enlace para saltar al contenido: lo usa quien navega con teclado o lector */
.saltar{position:absolute; left:-999px; top:12px; z-index:200; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none}
.saltar:focus{left:12px}

/* Foco visible y coherente en todo lo que se puede pulsar */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--lav); outline-offset:3px; border-radius:6px}
.btn:focus-visible{outline-offset:4px}

/* Insignia de "más pedido": prueba social real, sacada de los clics */
.insignia{
  position:absolute; top:16px; right:16px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:var(--navy); font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 12px; border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.insignia::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lav);
  box-shadow:0 0 0 0 var(--lav)}
.anim .insignia::before{animation:latidoInsignia 2.2s ease-out infinite}
@keyframes latidoInsignia{0%{box-shadow:0 0 0 0 var(--lav)} 70%,100%{box-shadow:0 0 0 9px transparent}}
.insignia-linea{position:static; margin-bottom:12px; box-shadow:none; background:var(--lav);
  color:var(--navy); align-self:flex-start}

/* Barra de compra fija en móvil: aparece cuando el botón principal ya pasó */
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px); border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -10px 30px rgba(0,0,0,.08);
  transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
.barra-compra .bc-txt{min-width:0}
.barra-compra .bc-txt b{display:block; font-size:1.1rem; color:var(--navy); line-height:1.1}
.barra-compra .bc-txt small{display:block; font-size:.76rem; color:#6B7280; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.barra-compra .btn{padding:12px 20px; font-size:.92rem; flex:none}
@media (max-width:820px){
  .barra-compra{display:flex}
  .barra-compra.visible{transform:none}
  body.con-barra .wa-float{opacity:0; pointer-events:none; transition:opacity .3s ease}
}

/* Vista previa del mensaje de WhatsApp */
.vista-msg{margin:18px 0 0; display:flex; flex-direction:column; gap:6px; max-width:420px}
.vista-msg-quien{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:.6}
.vista-msg-burbuja{
  position:relative; display:inline-block; background:#DCF8C6; color:#1a2a1a; font-size:.9rem; line-height:1.45;
  padding:10px 14px; border-radius:14px 14px 14px 4px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .25s cubic-bezier(.2,.8,.25,1);
}
.vista-msg-burbuja::after{content:""; position:absolute; left:-6px; bottom:0; border:6px solid transparent;
  border-right-color:#DCF8C6; border-bottom-color:#DCF8C6}
.anim .vista-msg-burbuja.cambia{animation:brincar .4s cubic-bezier(.2,.8,.25,1)}
@keyframes brincar{40%{transform:scale(1.03)}}

/* Pista de desplazamiento en la portada */
/* El «desliza» va justo encima del separador, no debajo de la ola */
.pista{
  position:absolute; left:50%; bottom:calc(16px + var(--sep-alto)); translate:-50% 0; z-index:4; display:flex; flex-direction:column;
  align-items:center; gap:6px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--navy); opacity:.55; text-decoration:none;
}
.pista i{display:block; width:22px; height:34px; border:2px solid currentColor; border-radius:14px; position:relative}
.pista i::after{content:""; position:absolute; left:50%; top:6px; width:4px; height:8px; margin-left:-2px;
  border-radius:2px; background:currentColor}
.anim .pista i::after{animation:pistaBaja 1.8s ease-in-out infinite}
@keyframes pistaBaja{0%{top:6px; opacity:1} 70%{top:18px; opacity:0} 100%{top:6px; opacity:0}}
@media (max-width:820px){.pista{display:none}}

/* Zoom lento y continuo en la foto de portada: la imagen respira */
.anim .respira img{animation:respirar 14s ease-in-out infinite alternate}
@keyframes respirar{from{transform:scale(1)} to{transform:scale(1.07)}}

/* Volver arriba */
.arriba{
  position:fixed; left:22px; bottom:22px; z-index:90; width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--navy); display:grid; place-items:center; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.14); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
}
.arriba.visible{opacity:1; pointer-events:auto; transform:none}
.arriba svg{width:18px; height:18px}
@media (max-width:820px){.arriba{display:none}}

/* Palabras del titular entrando una a una */
/* El desplazamiento era de .55em con dos grados de giro. En un titular de
   cuatro líneas eso mete cada palabra casi medio renglón dentro del de abajo, y
   mientras dura la entrada las palabras se ven chocando unas con otras. Con
   .22em el gesto se nota igual y no invade la línea siguiente. */
.anim .palabra{display:inline-block; opacity:0; transform:translateY(.22em) rotate(1deg);
  transition:opacity .5s cubic-bezier(.2,.8,.25,1), transform .5s cubic-bezier(.2,.8,.25,1)}
.anim .palabra.lista{opacity:1; transform:none}
/* Cuando la entrada llega tarde —pestaña abierta en segundo plano, por
   ejemplo— se planta el estado final sin animar: lo importante es que el
   titular esté ahí, no que se le vea entrar. */
.anim .palabra.ya{opacity:1 !important; transform:none !important; transition:none !important}

@media (prefers-reduced-motion:reduce){
  .anim .respira img, .anim .pista i::after, .anim .insignia::before{animation:none}
  .anim .palabra{opacity:1!important; transform:none!important}
}

/* Revelado: la foto entra sin color y lo gana al aparecer.
   Pensado para catálogos donde la pieza tiene que ganarse la mirada. */
.anim .revelado img{filter:saturate(.12) contrast(1.04); transition:filter 1.4s cubic-bezier(.2,.8,.25,1)}
.anim .revelado.visto img, .anim .revelado:hover img{filter:none}

/* Letras que se cierran: firma tipográfica para arquetipos editoriales */
.anim .cerrar-letras{letter-spacing:.5em; opacity:0;
  transition:letter-spacing 1.3s cubic-bezier(.2,.8,.25,1), opacity .9s ease}
.anim .cerrar-letras.visto{letter-spacing:.22em; opacity:1}

@media (prefers-reduced-motion:reduce){
  .anim .revelado img{filter:none!important}
  .anim .cerrar-letras{letter-spacing:.22em!important; opacity:1!important}
}

/* ===== Texto de ficha: párrafos, titulillos y viñetas ===== */
.rico > :first-child{margin-top:0}
.rico > :last-child{margin-bottom:0}
.rico p{margin:0 0 .85rem}
.rico-titulo{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  margin:1.3rem 0 .6rem; opacity:.72; font-weight:600}
.rico-lista{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.5rem}
.rico-lista li{position:relative; padding-left:1.05rem; line-height:1.6}
.rico-lista li::before{content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.42}
.rico-lista b{font-weight:600}