:root{
  --ink:#1c2116;--ink-soft:#4a5240;--paper:#f4f1e8;--olive-900:#2b3420;--olive-700:#46552f;--olive-500:#6b7a4a;--olive-300:#a9b48a;
  --bg:var(--paper);--accent:var(--olive-700);--accent-soft:#e3e6d6;
  --serif:"DM Serif Display",Georgia,serif;--sans:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
body[data-tema="epoxi"]{--bg:#eef0e8;--accent:#46552f;--accent-soft:#dde3cf}
body[data-tema="cera"]{--bg:#f6ecdd;--accent:#9a6b2f;--accent-soft:#efdcc0}
body[data-tema="uv"]{--bg:#efebf3;--accent:#6a5a8c;--accent-soft:#dfd8ea}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);transition:background-color .9s var(--ease);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.salto{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}
.salto:focus{left:8px}
/* navegación */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,48px);transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s}
.nav.solida{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav .marca{font-family:var(--serif);font-weight:400;letter-spacing:.18em;font-size:1.05rem;text-decoration:none}
.nav ul{display:flex;gap:clamp(12px,2.4vw,32px);list-style:none}
.nav ul a{text-decoration:none;font-size:.88rem;font-weight:500;opacity:.8;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav:not(.solida){color:#fff}
@media (max-width:640px){.nav ul li:not(:last-child){display:none}}
/* portada */
.portada{position:relative;min-height:100svh;display:grid;place-items:end start;color:#fff;overflow:hidden}
.portada .fondo{position:absolute;inset:-6% 0 0 0;will-change:transform}
.portada .capa{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:fundido 21s infinite}
.portada .c1{background-image:url(img/escena-epoxi.webp)}.portada .c2{background-image:url(img/escena-cera.webp)}.portada .c3{background-image:url(img/escena-uv.webp)}
.portada .capa:nth-child(1){animation-delay:0s}.portada .capa:nth-child(2){animation-delay:7s}.portada .capa:nth-child(3){animation-delay:14s}
@keyframes fundido{0%{opacity:0;transform:scale(1.08)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1)}100%{opacity:0}}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,33,22,.15) 0%,rgba(28,33,22,.25) 45%,rgba(28,33,22,.82) 100%)}
.portada .texto{position:relative;z-index:1;padding:0 clamp(16px,6vw,96px) clamp(56px,10vh,120px);max-width:980px}
.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.85}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.portada h1{font-size:clamp(2.6rem,7.4vw,6.2rem);margin:.25em 0 .3em;max-width:11ch;min-height:2.1em}
.frase{display:inline-block;transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.frase.fuera{opacity:0;filter:blur(14px);transform:translateY(-10px)}
.portada p.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:560px;opacity:.92}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.boton{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.boton:hover{transform:translateY(-2px)}
.boton.lleno{background:var(--accent);color:#fff;box-shadow:0 10px 30px -12px var(--accent)}
.boton.claro{background:#fff;color:var(--ink)}
.boton.borde{border:1.5px solid currentColor;color:inherit}
.boton .flecha{transition:transform .25s var(--ease)}
.boton:hover .flecha{transform:translateX(3px)}
.indicador{position:absolute;right:clamp(16px,4vw,48px);bottom:28px;z-index:1;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;writing-mode:vertical-rl}
/* manifiesto */
.manifiesto{padding:clamp(80px,14vh,160px) clamp(16px,6vw,96px);max-width:1100px;margin:0 auto;text-align:center}
.manifiesto p{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.25;color:var(--ink)}
.manifiesto p em{font-style:italic;color:var(--accent)}
/* producto */
.producto{position:relative;padding:clamp(40px,8vh,96px) 0 clamp(80px,12vh,140px)}
.escena{position:relative;margin:0 auto;width:calc(100% - 2*clamp(12px,3vw,40px));border-radius:28px;overflow:hidden;aspect-ratio:16/9;max-height:82vh}
.escena img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.escena.visto img{transform:scale(1.0)}
.escena .sello{position:absolute;left:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,36px);color:#fff;font-family:var(--serif);font-size:clamp(1.6rem,4.4vw,3.6rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ficha{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);padding:clamp(40px,7vh,80px) clamp(16px,6vw,96px) 0;max-width:1320px;margin:0 auto;align-items:start}
.ficha h2{font-size:clamp(2.1rem,4.6vw,3.8rem);margin:.2em 0 .35em}
.ficha .eyebrow{color:var(--accent)}
.ficha p.desc{font-size:1.08rem;color:var(--ink-soft);max-width:540px}
.datos{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 32px}
.datos li{background:var(--accent-soft);border-radius:16px;padding:16px 18px;transition:background .9s var(--ease)}
.datos b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2}
.datos span{font-size:.86rem;color:var(--ink-soft)}
.nota{font-size:.82rem;color:var(--ink-soft);margin-top:14px}
.galeria{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.galeria figure{flex:0 0 78%;scroll-snap-align:start;border-radius:20px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.galeria img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.galeria figure:hover img{transform:scale(1.04)}
.pista{font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em}
@media (max-width:860px){.ficha{grid-template-columns:1fr}.escena{aspect-ratio:4/5;max-height:none}.galeria figure{flex-basis:86%}}
/* videos */
.videos{padding:clamp(70px,12vh,140px) clamp(16px,6vw,96px);max-width:1320px;margin:0 auto}
.videos h2{font-size:clamp(2.1rem,4.6vw,3.8rem);margin:.2em 0 .2em}
.videos .eyebrow{color:var(--olive-700)}
.videos p.desc{color:var(--ink-soft);max-width:560px;margin-bottom:32px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.clip{position:relative;border-radius:22px;overflow:hidden;background:#111;aspect-ratio:9/16}
.clip video{width:100%;height:100%;object-fit:cover;display:block}
.clip figcaption{position:absolute;left:0;right:0;top:0;padding:16px 16px 28px;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);color:#fff;display:flex;justify-content:space-between;align-items:start;gap:10px;pointer-events:none}
.clip figcaption span{font-family:var(--serif);font-size:1.25rem}
.clip figcaption a{pointer-events:auto;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.92);color:var(--ink);padding:8px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.clip.horizontal{aspect-ratio:16/9;grid-column:span 2}
@media (max-width:640px){.clip.horizontal{grid-column:auto}}
/* mayoristas */
.mayor{background:var(--olive-900);color:#f1f0e6;padding:clamp(90px,16vh,180px) clamp(16px,6vw,96px);text-align:center}
.mayor h2{font-size:clamp(2.2rem,5.4vw,4.4rem);margin:.3em 0}
.mayor p{max-width:620px;margin:0 auto;opacity:.85;font-size:1.08rem}
.mayor .correo{display:block;margin-top:18px;font-size:.95rem;opacity:.75;word-break:break-all}
.mayor .botones{justify-content:center}
.mayor .boton.lleno{background:#e9e4cf;color:var(--olive-900);box-shadow:none}
footer{background:#1c2116;color:#c9cbbd;padding:40px clamp(16px,6vw,96px);font-size:.85rem;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
footer .marca{font-family:var(--serif);letter-spacing:.18em;color:#fff}
/* revelado al hacer scroll */
.revela{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.revela.visto{opacity:1;transform:none}
.revela.d1{transition-delay:.12s}.revela.d2{transition-delay:.24s}.revela.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.portada .capa:nth-child(1){opacity:1}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.revela{opacity:1;transform:none}.escena img{transform:none}}