/* Capa de movimiento de la propuesta Export. Lenta, suave y sin rebotes: una sola curva para todo. */
:root{ --curva:cubic-bezier(.22,.61,.36,1); --lento:1.1s; }

/* Barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--oro);transform-origin:0 50%;transform:scaleX(0);z-index:50}

/* Cabecera que se recoge al bajar */
header{transition:box-shadow .4s var(--curva),background .4s var(--curva)}
header .caja{transition:height .4s var(--curva)}
header .logo{transition:height .4s var(--curva)}
header.recogida{box-shadow:0 8px 30px rgba(0,0,0,.25);background:rgba(92,77,77,.96);backdrop-filter:blur(8px)}
header.recogida .caja{height:66px}
header.recogida .logo{height:48px}

/* Apariciones al entrar en pantalla (solo con JS activo) */
.js [data-reveal]{opacity:0;transform:translateY(32px);filter:blur(6px);transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva),filter var(--lento) var(--curva)}
.js [data-reveal="zoom"]{transform:scale(.94)}
.js [data-stagger]>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--curva),transform .9s var(--curva)}
.js .visto[data-reveal],.js [data-stagger].visto>*,.js [data-stagger]>.visto{opacity:1;transform:none;filter:none}

/* Titulares que suben palabra a palabra */
.palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.palabra>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--curva);transition-delay:calc(var(--i,0)*70ms + 150ms)}
.visto .palabra>span,.visto.palabra>span{transform:none}

/* Comparador antes / después */
.comparar{position:relative;overflow:hidden;aspect-ratio:3/4;background:#1d1717;cursor:ew-resize;user-select:none;touch-action:pan-y;--pos:50%}
.comparar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comparar .despues{clip-path:inset(0 0 0 var(--pos))}
.comparar .linea{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--oro);box-shadow:0 0 18px rgba(234,190,63,.6)}
.comparar .tirador{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--oro);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .3s var(--curva)}
.comparar:hover .tirador{transform:scale(1.08)}
.comparar .tirador::before{content:"‹ ›";font-weight:700;font-size:18px;letter-spacing:4px;color:var(--cacao);margin-left:4px}
.comparar .etq{top:14px;z-index:2}
.comparar .ea{left:14px} .comparar .ed{right:14px}
.comparar .pie{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);z-index:2}

/* Comparador grande de la portada */
.foto-portada .comparar{position:absolute;inset:48px 0 0 0;aspect-ratio:auto}
.foto-portada .comparar img{transform:scale(1.12);transition:transform 2.6s var(--curva)}
.foto-portada .comparar.visto img{transform:scale(1)}
.foto-portada .pista-arrastre{position:absolute;right:16px;bottom:16px;z-index:3;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(46,36,36,.65);padding:8px 12px;backdrop-filter:blur(4px);opacity:0;transition:opacity .8s var(--curva) 2.8s}
.foto-portada .comparar.visto~.pista-arrastre{opacity:1}

/* Sellos: el trazo se dibuja */
.js .sello svg *{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.6s var(--curva);transition-delay:calc(var(--i,0)*150ms + 300ms)}
.js .visto .sello svg *{stroke-dashoffset:0}

/* Tarjetas y botones */
.trat .img,.paso-m .img{overflow:hidden}
.trat .img img,.paso-m .img img{transition:transform 1.2s var(--curva)}
.trat:hover .img img,.paso-m:hover .img img{transform:scale(1.06) translateY(-4px)}
.trat{transition:box-shadow .5s var(--curva),transform .5s var(--curva)}
.trat:hover{transform:translateY(-4px)}
.trat .ver{transition:color .3s,letter-spacing .4s var(--curva)}
.trat:hover .ver{color:var(--oro-texto);letter-spacing:.04em}
.btn{position:relative;overflow:hidden}
.btn-oro::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .8s var(--curva)}
.btn-oro:hover::after{left:130%}

/* Producto que flota */
[data-flota]{animation:flota 6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Marquesina dorada */
.marquesina{background:var(--cacao);border-top:1px solid rgba(234,190,63,.25);border-bottom:1px solid rgba(234,190,63,.25);overflow:hidden;padding:22px 0}
.marquesina .pista{display:flex;gap:64px;width:max-content;animation:marquesina 38s linear infinite}
.marquesina span{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--oro);white-space:nowrap;display:flex;align-items:center;gap:64px}
.marquesina span::after{content:"";width:8px;height:8px;background:var(--oro);transform:rotate(45deg);opacity:.6}
@keyframes marquesina{to{transform:translateX(-50%)}}

/* Parallax suave */
[data-parallax]{will-change:transform}

/* Respeto a quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-stagger]>*{opacity:1!important;transform:none!important;filter:none!important}
  .palabra>span{transform:none!important}
  .foto-portada .comparar img{transform:none!important}
  .js .sello svg *{stroke-dashoffset:0!important}
}

@media (max-width:900px){
  .foto-portada .comparar{inset:0}
  .marquesina span{font-size:22px}
}

.foto-portada .comparar .pie{display:none}

/* Móvil: apariciones más cortas y sin desenfoque, para que al hacer scroll rápido todo se vea nítido */
@media (max-width:900px){
  .js [data-reveal]{filter:none;transform:translateY(20px);transition-duration:.75s}
  .js [data-reveal="zoom"]{transform:scale(.97)}
  .js [data-stagger]>*{transform:translateY(18px);transition-duration:.7s}
}