/* 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;
  transition:opacity .85s cubic-bezier(.2,.8,.25,1), transform .85s cubic-bezier(.2,.8,.25,1)}
.anim [data-ap="izq"]{transform:translateX(-46px)}
.anim [data-ap="der"]{transform:translateX(46px)}
.anim [data-ap="abajo"]{transform:translateY(42px)}
.anim [data-ap="zoom"]{transform:scale(.92)}
.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.
   ============================================================ */
.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. */
  --sep-alto:clamp(26px,3.4vw,50px);
  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)}
/* Trazo fino que acompaña la curva: el detalle que la vuelve intencional */
.sep .linea{fill:none; stroke:var(--sep-linea, transparent); stroke-width:2.5;
  vector-effect:non-scaling-stroke; stroke-linecap:round}
.sep-espejo svg{transform:scaleX(-1)}
.sep-fino{--sep-alto:clamp(20px,2.4vw,34px)}
.sep-alto{--sep-alto:clamp(40px,5.4vw,84px)}
/* 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)}
.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;
}
.anim .marco-trazo::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%)}}

/* 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 */
.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){
  .anim .marco-trazo::before, .anim .aro-giro::before,
  .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 */
.pista{
  position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:3; 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}
}