/* 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}
.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 */
.anim .palabra{display:inline-block; opacity:0; transform:translateY(.55em) rotate(2deg);
  transition:opacity .7s cubic-bezier(.2,.8,.25,1), transform .7s cubic-bezier(.2,.8,.25,1)}
.anim .palabra.lista{opacity:1; transform:none}

@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}