/* ============================================================================
   CalColores — Cinematic Experience
   Brand-faithful (navy + gold, Montserrat) elevated to an Awwwards-style,
   scroll-driven story. Tokens mirror colors_and_type.css.
   ============================================================================ */
:root{
  --cal-blue:#1A237E; --cal-blue-dark:#0D47A1; --cal-blue-deep:#0c123f;
  --cal-gold:#FBC02D; --cal-gold-dark:#F9A825; --cal-gold-pure:#F8C200;
  --ink:#0a0e2a; --night:#070a1f;
  --gray:#F5F5F7; --slate-500:#64748b; --slate-400:#94a3b8; --slate-700:#334155;
  --ok:#22c55e; --warn:#fbbf24; --danger:#ef4444;
  --font-h:'Montserrat',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.68,0,1.2); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--font-b); color:#fff; background:var(--night);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
section{position:relative}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.h-font{font-family:var(--font-h)}
.gold{color:var(--cal-gold)}

/* ── Scroll progress bar ─────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:10000;background:transparent}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--cal-gold),var(--cal-gold-dark));box-shadow:0 0 18px rgba(251,192,45,.6)}

/* ── Custom cursor (desktop) ─────────────────────────────────────────── */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:10001;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,opacity .3s}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor.is-hover{width:64px;height:64px;background:rgba(255,255,255,.12)}
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ── Nav (floating pill) ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  padding:16px 20px;pointer-events:none;
}
.nav__pill{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  max-width:1160px;margin:0 auto;
  padding:7px 7px 7px 18px;
  background:oklch(12% 0.05 265 / 0.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid oklch(80% 0.18 85 / 0.2);
  border-radius:999px;
  box-shadow:0 8px 36px oklch(5% 0.04 265 / 0.45),inset 0 1px 0 oklch(100% 0 0 / 0.06);
  pointer-events:all;
  transition:background .4s,box-shadow .4s,border-color .4s;
}
.nav.scrolled .nav__pill{
  background:oklch(11% 0.05 265 / 0.97);
  box-shadow:0 14px 52px oklch(5% 0.04 265 / 0.65),inset 0 1px 0 oklch(100% 0 0 / 0.08);
  border-color:oklch(80% 0.18 85 / 0.28);
}
/* Logo */
.nav__brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.nav__logo{height:52px;width:auto;max-width:220px;object-fit:contain;display:block}
/* Links — absolutely centered inside pill */
.nav__links{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;align-items:center;list-style:none;
}
.nav__link{
  display:inline-block;padding:8px 15px;border-radius:999px;
  font-family:var(--font-h);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:oklch(87% 0.02 265);text-decoration:none;
  transition:color .22s,background .22s;white-space:nowrap;
}
.nav__link:hover{color:oklch(97% 0.005 265);background:oklch(100% 0 0 / 0.08)}
.nav__link--accent{color:oklch(82% 0.18 85)}
.nav__link--accent:hover{color:oklch(90% 0.2 85);background:oklch(80% 0.18 85 / 0.12)}
/* Right side */
.nav__end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav__cta{
  font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.03em;
  background:oklch(82% 0.19 85);color:oklch(18% 0.06 265);
  padding:12px 22px;border-radius:999px;text-decoration:none;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background .22s,transform .3s var(--ease),box-shadow .25s;
  box-shadow:0 4px 18px oklch(80% 0.18 85 / 0.38);
}
.nav__cta:hover{
  background:oklch(76% 0.21 85);
  transform:translateY(-2px);
  box-shadow:0 8px 30px oklch(80% 0.18 85 / 0.55);
}
/* Hamburger */
.nav__ham{
  display:none;width:40px;height:40px;border-radius:50%;
  background:oklch(100% 0 0 / 0.08);border:1px solid oklch(100% 0 0 / 0.14);
  color:oklch(94% 0.01 265);cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .22s;flex-shrink:0;
}
.nav__ham:hover{background:oklch(100% 0 0 / 0.15)}
.ham-icon line{transition:transform .3s var(--ease-out),opacity .3s;transform-origin:12px 12px}
.nav__ham.is-open .ham-top{transform:rotate(45deg) translate(0,6px)}
.nav__ham.is-open .ham-mid{opacity:0;transform:scaleX(0)}
.nav__ham.is-open .ham-bot{transform:rotate(-45deg) translate(0,-6px)}
@media(max-width:860px){
  .nav{padding:10px 16px;display:flex;justify-content:center}
  .nav__pill{
    width:auto;
    max-width:none;
    padding:6px 6px 6px 14px;
    justify-content:flex-start;
    gap:10px;
    background:oklch(11% 0.055 265 / 0.95);
    margin:0;
  }
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__logo{height:42px;max-width:200px}
  .nav__ham{
    display:flex;width:44px;height:44px;border-radius:50%;
    background:oklch(24% 0.01 265);
    border:1px solid oklch(32% 0.01 265);
    color:oklch(92% 0.01 265);
  }
}

/* ── Mobile overlay menu ─────────────────────────────────────────────── */
.nav-mobile{
  position:fixed;inset:0;z-index:8999;
  background:oklch(10% 0.05 265);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  clip-path:circle(0% at calc(100% - 40px) 36px);
  transition:clip-path .6s cubic-bezier(.77,0,.175,1);
  pointer-events:none;
}
.nav-mobile.is-open{
  clip-path:circle(170% at calc(100% - 40px) 36px);
  pointer-events:all;
}
.nav-mobile__close{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;border-radius:50%;
  background:oklch(100% 0 0 / 0.07);border:1px solid oklch(100% 0 0 / 0.12);
  color:oklch(94% 0.01 265);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .22s,transform .3s var(--ease-out);
}
.nav-mobile__close:hover{background:oklch(100% 0 0 / 0.14);transform:rotate(90deg)}
.nav-mobile__links{display:flex;flex-direction:column;align-items:center;gap:0}
.nav-mobile__link{
  font-family:var(--font-h);font-weight:900;
  font-size:clamp(2rem,8vw,3.4rem);letter-spacing:-.02em;
  color:oklch(87% 0.02 265);text-decoration:none;
  padding:10px 28px;border-radius:14px;
  opacity:0;transform:translateY(20px);
  transition:opacity .32s,transform .32s var(--ease-out),color .2s,background .2s;
}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(1){opacity:1;transform:none;transition-delay:.08s}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(2){opacity:1;transform:none;transition-delay:.13s}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(3){opacity:1;transform:none;transition-delay:.18s}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(4){opacity:1;transform:none;transition-delay:.23s}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(5){opacity:1;transform:none;transition-delay:.28s}
.nav-mobile.is-open .nav-mobile__links .nav-mobile__link:nth-child(6){opacity:1;transform:none;transition-delay:.33s}
.nav-mobile__link:hover{color:oklch(82% 0.18 85);background:oklch(82% 0.18 85 / 0.08)}
.nav-mobile__link--accent{color:oklch(82% 0.18 85)}
.nav-mobile__cta{
  margin-top:32px;
  opacity:0;transform:translateY(16px);
  transition:opacity .32s .30s,transform .32s .30s var(--ease-out);
}
.nav-mobile.is-open .nav-mobile__cta{opacity:1;transform:none}

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero{height:100vh;min-height:640px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.hero__media{position:absolute;inset:-8% 0;width:100%;height:116%;z-index:0;will-change:transform}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 80% at 50% 30%,rgba(0,0,0,.35),rgba(7,10,31,.78) 70%,rgba(7,10,31,.96)),
  linear-gradient(180deg,rgba(7,10,31,.5),rgba(7,10,31,.2) 40%,rgba(7,10,31,.95))}
.hero__content{position:relative;z-index:2;text-align:center;padding:0 24px;max-width:1000px}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--cal-gold);color:var(--cal-blue);font-family:var(--font-h);font-weight:900;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:9px 22px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(251,192,45,.5)}
.hero__title{font-family:var(--font-h);font-weight:900;line-height:.95;letter-spacing:-.02em;margin:26px 0 22px;font-size:clamp(3rem,9vw,7.5rem)}
.hero__title .l1{color:#fff}
.hero__title .l2{color:var(--cal-gold)}
.hero__title .word{display:inline-block}
.hero__title .word .char{display:inline-block;will-change:transform,opacity}
.hero__sub{font-size:clamp(1rem,1.6vw,1.35rem);font-weight:500;color:rgba(255,255,255,.86);max-width:680px;margin:0 auto 38px;line-height:1.6}
.hero__sub strong{color:#fff}
.hero__cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--font-h);font-weight:800;font-size:clamp(.9rem,1.1vw,1.05rem);padding:18px 40px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.btn--primary{background:var(--cal-blue);color:var(--cal-gold);box-shadow:0 18px 40px -12px rgba(26,35,126,.8)}
.btn--primary:hover{background:var(--cal-blue-dark);transform:translateY(-4px);box-shadow:0 28px 56px -14px rgba(26,35,126,.9)}
.btn--ghost{background:rgba(255,255,255,.95);color:var(--cal-blue)}
.btn--ghost:hover{background:#fff;transform:translateY(-4px);box-shadow:0 24px 50px -16px rgba(0,0,0,.5)}
.btn--wa{background:var(--ok);color:#fff}
.btn--wa:hover{background:#16a34a;transform:translateY(-4px)}
.btn:active{transform:scale(.96)}
.scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.scrollcue__mouse{width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px;position:relative}
.scrollcue__mouse::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:8px;background:var(--cal-gold);border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s var(--ease-out) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,12px)}100%{opacity:0;transform:translate(-50%,16px)}}

/* ── MANIFESTO — "El Secreto de CalColores" (bespoke paint-brand scene) ── */
.manifesto{position:relative;background:var(--night);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:140px 0;overflow:hidden}
/* subtle painted-wall texture + ambient glows */
.manifesto__bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 50% at 14% 18%, rgba(26,35,126,.55), transparent 62%),
  radial-gradient(50% 46% at 88% 86%, rgba(251,192,45,.09), transparent 60%)}
/* big soft brush stroke sweeping behind the headline, drawn on scroll */
.manifesto__brush{position:absolute;z-index:0;left:50%;top:50%;width:min(1400px,150vw);transform:translate(-50%,-52%);pointer-events:none}
.manifesto__brush path{fill:none;stroke:var(--cal-gold);stroke-width:120;stroke-linecap:round;opacity:.07}

/* real paint-drop shapes (teardrop via rotated squircle) drifting in the scene */
.manifesto__chips{position:absolute;inset:0;z-index:0;pointer-events:none}
.mchip{position:absolute;opacity:0;border-radius:0 52% 52% 52%;transform:rotate(45deg);box-shadow:0 18px 34px -14px rgba(0,0,0,.65),inset 3px 3px 8px rgba(255,255,255,.28),inset -4px -4px 10px rgba(0,0,0,.22);will-change:transform,opacity;animation:mfloat var(--fd,9s) var(--ease-out) infinite;animation-delay:var(--dl,0s)}
.mchip::after{content:"";position:absolute;top:14%;left:18%;width:32%;height:24%;border-radius:50%;background:rgba(255,255,255,.4);filter:blur(1px)}
@keyframes mfloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(49deg) translateY(-18px)}}

/* fan of physical paint-chip swatch cards (like the in-store carta de colores) */
.manifesto__fan{position:absolute;z-index:1;pointer-events:none}
.manifesto__fan.left{left:2%;top:50%;transform:translateY(-50%)}
.manifesto__fan.right{right:4.5%;top:50%;transform:translateY(-50%)}
.swcard{position:absolute;width:96px;background:#fff;border-radius:12px;box-shadow:0 22px 42px -16px rgba(0,0,0,.55);opacity:0;overflow:hidden;transform-origin:bottom center}
.swcard__color{height:60px}
.swcard__foot{padding:8px 10px 10px}
.swcard__name{font-family:var(--font-h);font-weight:800;font-size:9px;color:var(--cal-blue);line-height:1.15}
.swcard__hex{font-family:ui-monospace,Menlo,monospace;font-size:7.5px;color:#94a3b8;margin-top:2px;display:block}

.manifesto__inner{position:relative;z-index:2;max-width:1100px;padding:0 32px;text-align:center}
.manifesto__eyebrow{font-family:var(--font-h);font-weight:900;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--cal-gold);margin-bottom:38px;opacity:0;display:inline-flex;align-items:center;gap:18px}
.manifesto__eyebrow::before,.manifesto__eyebrow::after{content:"";width:34px;height:2px;background:linear-gradient(90deg,transparent,var(--cal-gold));border-radius:2px}
.manifesto__eyebrow::after{background:linear-gradient(90deg,var(--cal-gold),transparent)}
.manifesto__text{font-family:var(--font-h);font-weight:800;line-height:1.18;letter-spacing:-.01em;font-size:clamp(1.7rem,4.4vw,3.6rem);color:#3a4170}
.manifesto__text .rv{color:#3a4170;transition:color .4s}
.manifesto__text .key{position:relative;white-space:nowrap}
.manifesto__draw{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.5em;overflow:visible}
.manifesto__draw path{fill:none;stroke:var(--cal-gold);stroke-width:7;stroke-linecap:round}
.manifesto__creds{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:46px}
.mcred{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-h);font-weight:700;font-size:clamp(.72rem,1.1vw,.9rem);letter-spacing:.02em;color:#dfe4ff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:11px 20px;border-radius:999px;opacity:0;transform:translateY(16px)}
.mcred i{color:var(--cal-gold);font-size:1.05em}
@media(max-width:1100px){
  .manifesto{padding:80px 0}
  .manifesto__fan.left{left:-4px;transform:translateY(-50%) scale(.52);transform-origin:left center}
  .manifesto__fan.right{right:-4px;transform:translateY(-50%) scale(.52);transform-origin:right center}
}
@media(max-width:860px){
  .manifesto{padding:60px 0}
  .manifesto__fan.left{left:-8px;transform:translateY(-50%) scale(.42);transform-origin:left center}
  .manifesto__fan.right{right:-8px;transform:translateY(-50%) scale(.42);transform-origin:right center}
}
@media(max-width:600px){
  .manifesto{padding:48px 0}
  .manifesto__fan.left{left:-4px;top:78%;transform:translateY(-50%) scale(.34);transform-origin:left center}
  .manifesto__fan.right{right:-4px;top:78%;transform:translateY(-50%) scale(.34);transform-origin:right center}
}

/* ── SECRETO / FORMULA (pinned, paint bucket fill) ──────────────────── */
@media(max-width:860px){
  .secret{padding:96px 0 32px}
  .secret__head{margin-bottom:12px}
  .secret__grid{gap:12px}
  .bucket{width:126px;height:144px}
  .bucket__body{top:22px;border-radius:14px 14px 20px 20px}
  .bucket__rim{top:14px;height:22px}
  .bucket__rim-in{top:19px;height:13px}
  .bucket__handle{top:-3px;left:16%;right:16%;height:66px;border-width:5px;border-radius:66px 66px 0 0}
  .bucket__label{bottom:18px}
  .bucket__label .c{font-size:10px}
  .bucket__label .t{font-size:6.5px}
  .fact{padding:12px 14px}
  .fact__ico{width:32px;height:32px;font-size:13px;margin-bottom:5px}
  .fact__t{font-size:.84rem}
  .fact__d{font-size:.74rem;line-height:1.35}
  .secret__title{font-size:1.75rem}
}
@media(max-width:820px){
  .present{padding:78px 0 24px}
  .present .sec-head h2{font-size:1.65rem}
  .present .sec-head p{font-size:.82rem;margin-top:8px;line-height:1.45}
  .present .divisa-note{padding:7px 14px;font-size:.76rem;margin-top:8px}
  .choice{gap:12px}
  .choice__card{min-height:0;padding:14px 16px}
  .choice__name{font-size:1.2rem}
  .choice__desc{font-size:.76rem;margin-top:4px;line-height:1.4}
  .choice__ico{width:38px;height:38px;font-size:17px;margin:4px 0 3px}
  .choice__tag{font-size:10px;padding:5px 11px}
  .choice__save{font-size:10px;padding:5px 10px}
  .choice__price b{font-size:1.2rem}
  .choice__foot{padding-top:6px}
}
.secret{background:linear-gradient(180deg,var(--night),var(--cal-blue-deep) 55%,var(--cal-blue));padding:56px 0;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}
.secret > .wrap{width:100%}
.secret__head{text-align:center;max-width:760px;margin:0 auto 30px}
.eyebrow{display:inline-block;background:var(--cal-gold);color:var(--cal-blue-dark);font-family:var(--font-h);font-weight:900;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:22px}
.secret__title{font-family:var(--font-h);font-weight:900;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.02em}
.secret__grid{display:grid;grid-template-columns:1fr 360px 1fr;gap:40px;align-items:center}
@media(max-width:980px){.secret__grid{grid-template-columns:1fr;gap:30px}}
.fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:22px;padding:22px;transition:background .4s,transform .4s var(--ease),box-shadow .4s}
.fact:hover{background:rgba(255,255,255,.13);box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.fact__ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.fact__t{font-family:var(--font-h);font-weight:800;font-size:1.15rem;color:var(--cal-gold);margin-bottom:6px}
.fact__d{font-size:.88rem;line-height:1.5;color:#c9d2f5}
.fact__d strong{color:#fff}
/* paint bucket */
.bucket-stage{display:flex;align-items:center;justify-content:center;perspective:900px}
.bucket{position:relative;width:180px;height:200px;transform-style:preserve-3d}
.bucket__body{position:absolute;inset:0;top:34px;border-radius:18px 18px 26px 26px;background:linear-gradient(100deg,#101010,#2a2a2a 40%,#101010);clip-path:polygon(6% 0,94% 0,86% 100%,14% 100%);overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 40px 70px -30px rgba(0,0,0,.8)}
.bucket__fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,var(--cal-gold),var(--cal-gold-dark));box-shadow:0 -6px 30px rgba(251,192,45,.5)}
.bucket__fill::before{content:"";position:absolute;top:-9px;left:0;right:0;height:18px;border-radius:50%;background:var(--cal-gold);filter:brightness(1.12)}
.bucket__rim{position:absolute;top:24px;left:2%;right:2%;height:30px;border-radius:50%;background:linear-gradient(180deg,#3a3a3a,#161616);box-shadow:inset 0 4px 10px rgba(0,0,0,.7)}
.bucket__rim-in{position:absolute;top:30px;left:9%;right:9%;height:18px;border-radius:50%;background:#0a0a0a}
.bucket__handle{position:absolute;top:-4px;left:14%;right:14%;height:90px;border:7px solid #2a2a2a;border-bottom:0;border-radius:90px 90px 0 0;z-index:-1}
.bucket__label{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);text-align:center;width:78%}
.bucket__label .c{font-family:var(--font-h);font-weight:900;font-size:13px;color:var(--cal-blue);letter-spacing:.04em;line-height:1}
.bucket__label .t{font-size:8px;font-weight:800;letter-spacing:.16em;color:var(--cal-blue-dark);text-transform:uppercase;margin-top:3px}
.bucket__drip{position:absolute;width:14px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,var(--cal-gold),var(--cal-gold-dark))}

/* ── PRESENTACIÓN (Bolsa vs Cuñete tilt cards) ──────────────────────── */
.present{background:var(--cal-blue);padding:56px 0 20px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.present > .wrap{width:100%}
.sec-head{text-align:center;max-width:720px;margin:0 auto 24px}
.sec-head h2{font-family:var(--font-h);font-weight:900;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;letter-spacing:-.02em}
.sec-head p{margin-top:16px;color:#c2cbf0;font-size:1.05rem;line-height:1.6}
.sec-head.dark h2{color:var(--cal-blue)}
.sec-head.dark p{color:var(--slate-500)}
.bar{width:64px;height:4px;background:var(--cal-gold);border-radius:999px;margin:18px auto 0}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:0 auto;perspective:1400px}
@media(max-width:820px){.choice{grid-template-columns:1fr}}
.tilt{transform-style:preserve-3d;will-change:transform}
.choice__card{position:relative;border-radius:24px;padding:24px 26px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;transform-style:preserve-3d;box-shadow:0 40px 80px -34px rgba(0,0,0,.7)}
.choice__card .lift{transform:translateZ(46px)}
.choice__card.is-bolsa{background:linear-gradient(160deg,#fffdf6,#fff5d6);color:var(--cal-blue)}
.choice__card.is-pote{background:linear-gradient(160deg,#1c2560,#10153f);color:#fff;border:1px solid rgba(255,255,255,.1)}
.choice__shine{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.choice__tag{align-self:flex-start;font-family:var(--font-h);font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:999px}
.is-bolsa .choice__tag{background:var(--cal-blue);color:var(--cal-gold)}
.is-pote .choice__tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.2)}
.choice__ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;margin:8px 0 5px;box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}
.is-bolsa .choice__ico{background:var(--cal-blue);color:var(--cal-gold)}
.is-pote .choice__ico{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
.choice__name{font-family:var(--font-h);font-weight:900;font-size:1.6rem;letter-spacing:-.02em}
.choice__desc{font-size:.85rem;line-height:1.45;margin-top:6px;opacity:.85;max-width:330px}
.is-bolsa .choice__desc{color:var(--slate-500)}
.choice__foot{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between}
.choice__price small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.choice__price b{font-family:var(--font-h);font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.choice__save{font-family:var(--font-h);font-weight:900;font-size:12px;color:var(--cal-gold-dark);background:#fff6da;padding:8px 14px;border-radius:999px}

/* ── CATALOG (color-first tilt cards) ───────────────────────────────── */
.catalog{background:var(--gray);padding:120px 0;color:var(--cal-blue)}
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1000px;margin:0 auto;perspective:1600px}
@media(max-width:860px){.prods{grid-template-columns:1fr;max-width:460px}}
.pcard{position:relative;background:#fff;border-radius:24px;overflow:hidden;transform-style:preserve-3d;will-change:transform;box-shadow:0 16px 40px -22px rgba(26,35,126,.35);cursor:pointer}
.pcard__hero{position:relative;height:132px;display:flex;align-items:flex-end;padding:18px;overflow:hidden}
.pcard__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45))}
.pcard__sheen{position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);z-index:2}
.pcard__tier{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--font-h);font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--cal-blue);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.pcard__hex{position:absolute;top:16px;right:14px;z-index:3;font-family:ui-monospace,monospace;font-size:9px;font-weight:600;color:#fff;background:rgba(0,0,0,.3);padding:4px 9px;border-radius:999px}
.pcard__name{position:relative;z-index:3}
.pcard__name .k{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:3px}
.pcard__name .n{font-family:var(--font-h);font-weight:900;font-size:1.5rem;line-height:1;color:#fff}
.pcard__body{padding:16px 18px 20px}
.pcard__preslabel{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-400);margin-bottom:12px}
.pcard__preslabel::after{content:"";flex:1;height:1px;background:#eef0f4}
/* one presentation (size × pack) */
.pres{border:1px solid;border-radius:14px;padding:11px 13px 12px;margin-bottom:10px}
.pres:last-child{margin-bottom:0}
.pres.bolsa{background:linear-gradient(180deg,#fffdf6,#fff9ea);border-color:#f4e3ad}
.pres.pote{background:#fafafd;border-color:#ececf4}
.pres__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pres__id{display:flex;align-items:center;gap:9px;min-width:0}
.pres__emoji{font-size:17px;line-height:1;flex-shrink:0}
.pres__ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.pres.bolsa .pres__ico{background:#fbe7bd;color:var(--cal-gold-dark)}
.pres.pote .pres__ico{background:#e9e8f3;color:#5b3b9c}
.pres__name{font-family:var(--font-h);font-weight:800;font-size:12.5px;color:var(--slate-700);line-height:1.1}
.pres__best{display:block;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cal-gold-dark);margin-top:2px}
.pres__price{text-align:right;white-space:nowrap;flex-shrink:0}
.pres__cop{font-family:var(--font-h);font-weight:900;font-size:15px;color:#15803d;letter-spacing:-.01em}
.pres__cop small,.pres__usd small{font-size:8.5px;font-weight:800;margin-right:3px;opacity:.7}
.pres__usd{font-size:11px;font-weight:700;color:#1e40af;margin-top:1px}
.pres__sedes{display:flex;gap:8px;margin-top:10px}
.schip{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;border-radius:11px;border:1px solid rgba(10,14,42,.06);background:rgba(255,255,255,.7)}
.schip__name{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--slate-600);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schip__name i{font-size:11px;flex-shrink:0}
.schip__qty{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;flex-shrink:0}
.schip__qty.ok{background:#f0fdf4;color:#15803d}
.schip__qty.no{background:#fef2f2;color:#b91c1c}
.schip__qty .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.catalog__cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:48px}
/* Single-product featured layout */
.prods--single{grid-template-columns:1fr;max-width:520px}
/* Multi-card featured layout (2 cols) */
.prods--featured{grid-template-columns:repeat(2,1fr);max-width:900px}
@media(max-width:680px){.prods--featured{grid-template-columns:1fr;max-width:460px}}
/* Clickable card */
.pcard[role="link"]{cursor:pointer;outline:none}
/* Hover / focus overlay: "Explorar catálogo →" */
.pcard__goto{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-h);font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;background:rgba(26,35,126,0);color:transparent;transition:background .35s,color .35s;pointer-events:none;border-radius:24px}
.pcard[role="link"]:hover .pcard__goto,.pcard[role="link"]:focus .pcard__goto{background:rgba(26,35,126,.58);color:#fff}
/* Color count hint */
.catalog__hint{text-align:center;margin-top:22px;font-size:13px;font-weight:600;color:var(--slate-500);letter-spacing:.02em}
.catalog__hint strong{color:var(--cal-blue)}

/* ── Catalog loading skeleton ────────────────────────────────────────── */
.pcard-skel{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px -22px rgba(26,35,126,.12)}
.pcard-skel .skel-hero{height:132px;background:#eef0f6}
.pcard-skel .pcard__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.skel-line{height:13px;background:#eef0f6;border-radius:99px}
.skel-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skel-box{height:50px;background:#eef0f6;border-radius:12px}
.skel-block{height:72px;background:#eef0f6;border-radius:12px}
.pcard-skel .skel-hero,.skel-line,.skel-box,.skel-block{animation:skelPulse 1.6s ease-in-out infinite}
@keyframes skelPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* Catalog empty / error state */
.catalog-empty{grid-column:1/-1;text-align:center;padding:60px 24px;color:var(--slate-500);font-family:var(--font-h);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px}

/* ── MOBILE CATALOG (mcat) — horizontal shelves, mobile-only ─────── */
.mcat{display:block;background:oklch(9.5% 0.04 265);padding:56px 0 48px;max-width:100vw;overflow-x:clip}
#catalogo{display:none}
.mcat__head{padding:0 20px 28px;border-bottom:1px solid oklch(18% 0.04 265);margin-bottom:28px}
.mcat__head h2{font-family:var(--font-h);font-weight:900;font-size:1.7rem;line-height:1.08;letter-spacing:-.02em;color:#fff;margin-top:12px}
.mcat__head p{font-size:.82rem;color:oklch(58% 0.02 265);margin-top:8px;line-height:1.45}

/* mcat search */
.mcat__search{position:relative;margin-top:20px}
.mcat__search-ico{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:oklch(50% 0.04 265);font-size:13px;pointer-events:none;z-index:1}
.mcat__search-inp{width:100%;padding:13px 44px 13px 44px;border-radius:999px;border:1.5px solid oklch(20% 0.05 265);background:oklch(13% 0.045 265);color:oklch(92% 0.01 265);font-family:var(--font-b);font-size:14px;outline:none;transition:border-color .22s,background .22s;-webkit-appearance:none;appearance:none}
.mcat__search-inp::placeholder{color:oklch(40% 0.03 265)}
.mcat__search-inp::-webkit-search-cancel-button{display:none}
.mcat__search-inp:focus{border-color:oklch(56% 0.16 85 / 0.7);background:oklch(15% 0.05 265)}
.mcat__search-clr{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:oklch(22% 0.05 265);color:oklch(64% 0.03 265);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .15s,color .15s}
.mcat__search-clr:hover{background:oklch(28% 0.05 265);color:oklch(90% 0.01 265)}
.mcat__search-meta{padding:8px 0 0;font-family:var(--font-h);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:oklch(60% 0.12 85)}
.mcat__search-meta--empty{color:oklch(58% 0.15 20)}

@keyframes mcat-shelf-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.mcat__shelf{margin-bottom:28px}
.mcat__shelf--anim{animation:mcat-shelf-in .55s cubic-bezier(0.22,1,0.36,1) both}
.mcat__bar{display:flex;align-items:center;gap:8px;padding:0 20px 10px}
.mcat__label{font-family:var(--font-h);font-weight:800;font-size:.86rem;letter-spacing:.01em;color:#fff;flex:1;min-width:0}
.mcat__badge{font-family:var(--font-h);font-weight:900;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;flex-shrink:0;white-space:nowrap}
.mcat__more{font-family:var(--font-h);font-weight:700;font-size:.72rem;color:oklch(78% 0.16 85);white-space:nowrap;display:flex;align-items:center;gap:4px;text-decoration:none;flex-shrink:0;opacity:.85}
.mcat__more:hover{opacity:1}
.mcat__trackwrap{position:relative}
.mcat__trackwrap::after{content:'';position:absolute;right:0;top:0;bottom:12px;width:44px;background:linear-gradient(to left,oklch(9.5% 0.04 265) 0%,transparent 100%);pointer-events:none;z-index:2}
.mcat__track{display:flex;gap:14px;padding:0 20px 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-left:20px;touch-action:pan-x}
.mcat__track::-webkit-scrollbar{display:none}
.mpcard{flex:0 0 190px;scroll-snap-align:start;border-radius:16px;overflow:hidden;background:oklch(14% 0.05 265);border:1px solid oklch(22% 0.05 265);cursor:pointer;transition:border-color .22s,transform .18s,box-shadow .22s;-webkit-tap-highlight-color:transparent;text-decoration:none;display:block}
.mpcard:hover{border-color:oklch(78% 0.17 85 / 0.5);box-shadow:0 8px 28px oklch(5% 0.04 265 / 0.5);transform:translateY(-2px)}
.mpcard:active{transform:scale(.97)}
.mpcard__swatch{height:100px;background:var(--sw);display:flex;align-items:flex-end;padding:10px 12px;position:relative}
.mpcard__swatch::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.45));pointer-events:none}
.mpcard__swname{font-family:var(--font-h);font-weight:900;font-size:11.5px;letter-spacing:.01em;line-height:1.15;position:relative;z-index:1;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mpcard__body{padding:10px 12px 13px;display:flex;flex-direction:column;gap:0}
.mpcard__row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px;padding:5px 0;border-bottom:1px solid oklch(22% 0.04 265 / 0.7)}
.mpcard__row:last-child{border-bottom:none}
.mpcard__sz{font-size:9px;color:oklch(52% 0.03 265);font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.mpcard__pr{font-family:var(--font-h);font-weight:900;font-size:.98rem;color:oklch(84% 0.18 85);white-space:nowrap;line-height:1;text-align:right}
.mpcard__pr--ask{font-size:.72rem;color:oklch(44% 0.02 265);font-weight:600;text-align:right}
.mcat__cta{padding:0 20px;margin-top:8px}

/* ── CARTA DE COLORES ───────────────────────────────────────────────── */
.colors{background:#fff;padding:120px 0;color:var(--cal-blue)}
.tabs{display:flex;justify-content:center;gap:8px;margin:32px 0 50px}
.tab{font-family:var(--font-h);font-weight:800;font-size:.85rem;padding:11px 24px;border-radius:999px;border:1px solid #e6e8ef;background:#fff;color:var(--slate-500);cursor:pointer;transition:all .3s var(--ease)}
.tab.on{background:var(--cal-blue);color:#fff;border-color:var(--cal-blue);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(26,35,126,.6)}
.tab .ct{font-size:.7rem;margin-left:7px;opacity:.6}
.swgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:16px;max-width:1080px;margin:0 auto}
@media(max-width:900px){.swgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.swgrid{grid-template-columns:repeat(3,1fr)}}
.sw{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;will-change:transform}
.sw__chip{width:100%;aspect-ratio:1;border-radius:18px;box-shadow:0 10px 22px -10px rgba(10,14,42,.3);position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .45s var(--ease),box-shadow .45s,border-radius .45s;border:1px solid rgba(10,14,42,.06)}
.sw__hex{font-family:ui-monospace,monospace;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.25);backdrop-filter:blur(3px);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.sw:hover .sw__chip{transform:translateY(-12px) scale(1.12);box-shadow:0 26px 40px -14px rgba(10,14,42,.4);border-radius:24px}
.sw:hover .sw__hex{opacity:1;transform:translateY(0)}
.sw__name{font-size:12px;font-weight:700;color:var(--slate-700);text-align:center;line-height:1.2}
.colors__note{text-align:center;margin-top:48px;color:var(--slate-400);font-size:.85rem}

/* ── CONTACT ────────────────────────────────────────────────────────── */
.contact{background:var(--cal-blue);padding:130px 0;overflow:hidden;position:relative}
.blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:0}
.blob--1{width:420px;height:420px;background:rgba(255,255,255,.07);top:-120px;right:-100px}
.blob--2{width:420px;height:420px;background:rgba(251,192,45,.14);bottom:-140px;left:-120px}
.contact .wrap{position:relative;z-index:1}
.sedes{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:920px;margin:0 auto;perspective:1200px}
@media(max-width:760px){.sedes{grid-template-columns:1fr}}
.sede{display:flex;gap:22px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:30px;text-decoration:none;color:#fff;transition:background .4s,transform .4s var(--ease),box-shadow .4s;transform-style:preserve-3d}
.sede:hover{background:#fff;color:var(--cal-blue);box-shadow:0 40px 70px -28px rgba(0,0,0,.6)}
.sede__ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;transition:transform .4s var(--ease)}
.sede:hover .sede__ico{transform:rotate(7deg) scale(1.08)}
.sede.f .sede__ico{background:var(--cal-gold);color:var(--cal-blue-dark)}
.sede.s .sede__ico{background:#fff;color:var(--cal-blue)}
.sede:hover.s .sede__ico{background:var(--cal-gold);color:var(--cal-blue-dark)}
.sede__n{font-family:var(--font-h);font-weight:800;font-size:1.4rem;margin-bottom:5px}
.sede__sub{font-size:.85rem;opacity:.7;margin-bottom:12px}
.sede__pin{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);padding:6px 13px;border-radius:999px;transition:background .3s,color .3s}
.sede:hover .sede__pin{background:var(--cal-gold);color:var(--cal-blue-dark)}
.wa-wrap{text-align:center;margin-top:64px}
.wa-pulse{animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 22px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.footer{background:#04061a;color:#8089b3;padding:70px 0 40px;text-align:center}
.footer__plate{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:22px;padding:20px 32px;margin:0 auto 30px;box-shadow:0 24px 50px -22px rgba(0,0,0,.7)}
.footer__logo{height:64px;width:auto;display:block}
.footer__links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:.9rem;font-weight:500;margin-bottom:30px}
.footer__links a{color:#aab2dd;text-decoration:none;transition:color .3s;display:inline-flex;align-items:center;gap:8px}
.footer__links a:hover{color:var(--cal-gold)}
.footer__copy{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;font-size:.72rem;opacity:.5}

/* ── reveal helper ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px)}

/* ── divisa note (price disclaimer) ─────────────────────────────────── */
.divisa-note{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 18px;border-radius:999px;color:var(--cal-gold-dark);background:rgba(251,192,45,.16);border:1px solid rgba(251,192,45,.45)}
.divisa-note i{font-size:.95em}
.present .divisa-note,.contact .divisa-note{color:var(--cal-gold);background:rgba(251,192,45,.14);border-color:rgba(251,192,45,.34)}
.pcard__divisa{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cal-gold-dark)}
.pcard__divisa i{font-size:.9em}

/* ── reveal helper ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(40px)}

/* ── catalog card color drips (under the color hero) ────────────────── */

/* ── contact falling droplets ──────────────────────────────────────── */
.dropfall{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dropfall .fd{position:absolute;top:-40px;width:9px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--cal-gold);opacity:0}