/* =========================================================
   Guentrow Design Studio — guentrow.com
   Estilo: minimalismo claro tipo Apple + secciones negras
   Tipografía: Geist (Google Fonts variable)
   Autor: Guentrow Design Studio · Cancún, Q. Roo
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#9a9a9f;
  --line:rgba(0,0,0,.09);
  --line-soft:rgba(0,0,0,.06);

  --dark:#050505;
  --dark-2:#0b0b0d;
  --dark-line:rgba(255,255,255,.1);

  --gold:#C9A84C;
  --gold-bright:#E8C96D;
  --gold-deep:#8B6914;

  --error:#e0665a;
  --error-soft:#f0a99e;

  --f:'Geist','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);

  --r-sm:12px;
  --r-md:20px;
  --r-lg:30px;
  --r-pill:999px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
svg{display:block;max-width:100%}
img{max-width:100%;height:auto}
samp,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
::selection{background:rgba(201,168,76,.28)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Grano global: solo en pseudo-elemento fijo, nunca en contenedores que escanean */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:45;
  pointer-events:none;
  opacity:.022;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.skip-link{
  position:absolute;left:16px;top:8px;z-index:80;
  transform:translateY(-180%);
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-pill);
  font-size:.875rem;transition:transform .3s var(--ease);
}
.skip-link:focus{transform:none}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.wrap--narrow{max-width:900px}

.section{padding-block:clamp(74px,10vw,150px)}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--dark);color:#fff}
section[id],span[id]{scroll-margin-top:104px}

.section__head{max-width:940px;margin-bottom:clamp(34px,5vw,64px)}
.section__head--left{max-width:820px}
.section__head .lead{margin-top:20px}

/* ---------- 4. Tipografía ---------- */
.display{
  font-size:clamp(2.3rem,5.5vw,3.75rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  margin-top:18px;
}
.h2{
  font-size:clamp(1.9rem,4.3vw,3.25rem);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.032em;
  margin-top:16px;
}
.lead{
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:62ch;
}
.lead--tight{max-width:58ch}
.lead--center{margin-inline:auto;text-align:center}
.eyebrow{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  flex:none;
}
.eyebrow--gold{color:var(--gold-bright)}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:13px 18px 13px 22px;
  border-radius:var(--r-pill);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn__move{display:inline-flex;align-items:center;gap:inherit}
.btn__icon{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.16);
  transition:transform .55s var(--ease),background-color .55s var(--ease);
}
.btn__icon svg{width:13px;height:13px}
.btn:hover .btn__icon{transform:translate(2px,-1px) scale(1.07)}

.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--dark .btn__icon{background:rgba(255,255,255,.15)}

.btn--gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#140f03;
  box-shadow:0 14px 34px -16px rgba(201,168,76,.75);
}
.btn--gold:hover{box-shadow:0 18px 40px -14px rgba(201,168,76,.85)}
.btn--gold .btn__icon{background:rgba(0,0,0,.11)}

.btn--ghost{color:var(--ink);border-color:var(--line);padding-right:22px}
.btn--ghost:hover{background:rgba(0,0,0,.035)}

.btn--outline{color:#fff;border-color:rgba(255,255,255,.24);padding-right:22px}
.btn--outline:hover{background:rgba(255,255,255,.07)}

.btn--lg{padding:16px 20px 16px 26px;font-size:1.0625rem}
.btn--lg .btn__icon{width:30px;height:30px}
.btn--pill{padding:11px 12px 11px 18px;font-size:.9rem}

/* ---------- 6. Navegación ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:14px clamp(14px,4vw,22px);
}
.nav__shell{
  position:relative;
  width:100%;max-width:1140px;
  display:flex;align-items:center;gap:12px;
  padding:8px 10px 8px 16px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:box-shadow .6s var(--ease),background-color .6s var(--ease);
}
.nav.is-scrolled .nav__shell{
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.035);
}
.nav__brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.03em;font-size:1.0625rem}
.nav__icon{width:30px;height:30px;object-fit:contain;flex:none}
.nav__links{display:none;margin-left:auto;gap:2px}
.nav__links a{
  padding:9px 13px;border-radius:var(--r-pill);
  font-size:.9375rem;color:#4b4b50;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.nav__links a:hover{background:rgba(0,0,0,.045);color:var(--ink)}
.nav__links a.is-active{color:var(--ink);font-weight:500}
.nav__cta{display:none}
.nav__lang{display:none;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4b4b50;transition:background-color .4s var(--ease),color .4s var(--ease)}
.nav__lang:hover{background:rgba(0,0,0,.045);color:var(--ink)}
.nav__toggle{
  margin-left:auto;
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);
  cursor:pointer;
}
.nav__bars{position:relative;display:block;width:16px;height:10px}
.nav__bars i{
  position:absolute;left:0;width:16px;height:1.5px;border-radius:2px;
  background:var(--ink);
  transition:transform .5s var(--ease),top .5s var(--ease),bottom .5s var(--ease);
}
.nav__bars i:first-child{top:0}
.nav__bars i:last-child{bottom:0}
.nav.is-open .nav__bars i:first-child{top:4px;transform:rotate(45deg)}
.nav.is-open .nav__bars i:last-child{bottom:4px;transform:rotate(-45deg)}

@media (min-width:640px){.nav__cta{display:inline-flex}}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav__lang{display:inline-flex}
}

/* Menú móvil */
.menu{
  position:fixed;inset:0;z-index:55;
  display:flex;align-items:center;justify-content:center;
  padding:104px clamp(20px,6vw,40px) 40px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;visibility:visible}
.menu__inner{width:100%;max-width:540px}
.menu__link{
  display:block;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem,7vw,2rem);
  font-weight:600;letter-spacing:-.035em;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
.menu.is-open .menu__link{opacity:1;transform:none}
.menu__foot{
  margin-top:28px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__foot p{margin-top:14px;font-size:.875rem;color:var(--ink-2)}
.menu__foot .nav__lang{display:inline-flex;margin-top:14px}

/* ---------- 7. Hero ---------- */
.hero{padding-top:clamp(118px,17vh,180px);padding-bottom:clamp(56px,7vw,96px)}
.hero__grid{display:grid;gap:clamp(48px,7vw,64px);align-items:center}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:30px;padding-top:24px;
  border-top:1px solid var(--line);
}
.hero__facts li{
  position:relative;padding-left:16px;
  font-size:.875rem;color:var(--ink-2);
}
.hero__facts li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}
.hero__visual{display:flex;justify-content:center}
@media (min-width:980px){
  .hero__grid{grid-template-columns:1.14fr .86fr}
}

/* Mockup: panel + teléfono (todo CSS, sin imágenes) */
.mock{position:relative;width:100%;max-width:600px;padding-bottom:44px}
.mock__browser{
  position:relative;
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 40px 70px -34px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.07);
}
.mock__bar{
  display:flex;align-items:center;gap:10px;
  height:40px;padding:0 14px;
  background:#fbfbfd;border-bottom:1px solid var(--line-soft);
}
.mock__dots{display:flex;gap:5px;flex:none}
.mock__dots i{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.13)}
.mock__url{
  margin-left:4px;
  font-size:11px;color:var(--ink-3);
  background:#f1f1f3;padding:4px 12px;border-radius:var(--r-pill);
}
.mock__body{display:grid;grid-template-columns:52px 1fr;min-height:296px}
.mock__rail{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-top:20px;background:#fcfcfd;border-right:1px solid var(--line-soft);
}
.mock__rail span{width:22px;height:22px;border-radius:8px;background:rgba(0,0,0,.06)}
.mock__rail span.is-on{background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.mock__dash{padding:clamp(16px,3vw,22px)}
.mock__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mock__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mock__value{margin-top:4px;font-size:clamp(1.55rem,3.4vw,2rem);font-weight:600;letter-spacing:-.035em}
.mock__value span{font-size:.55em;font-weight:500;color:var(--ink-3)}
.mock__delta{
  font-size:11px;font-weight:500;
  color:#0f7b46;background:rgba(15,123,70,.1);
  padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;
}
.mock__chart svg{width:100%;height:76px;margin-top:16px}
.mock__rows li{
  display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-top:1px solid var(--line-soft);
  font-size:13px;
}
.mock__row-name{color:var(--ink-2)}
.mock__row-amt{font-weight:500}

.mock__phone{
  position:absolute;right:-4px;bottom:0;
  width:172px;padding:16px 14px 18px;
  border-radius:26px;
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 54px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
}
.mock__notch{width:52px;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);margin:0 auto 14px}
.mock__phone-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mock__phone-total{margin-top:2px;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:#fff}
.mock__phone-total span{font-size:.55em;color:rgba(255,255,255,.45)}
.mock__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0}
.mock__keys i{height:26px;border-radius:8px;background:rgba(255,255,255,.08)}
.mock__pay{
  display:block;text-align:center;
  padding:9px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#140f03;font-size:12px;font-weight:600;
}
@media (max-width:600px){
  .mock{padding-bottom:0}
  .mock__phone{position:static;width:60%;max-width:196px;margin:-28px auto 0}
}

/* Confianza */
.trust{
  margin-top:clamp(56px,7vw,86px);
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line);
}
.trust__label{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;
}
.trust__track{
  display:flex;overflow:clip;margin-top:24px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.trust__list{
  display:flex;flex:none;align-items:center;
  gap:56px;padding-right:56px;
  animation:marquee 38s linear infinite;
}
.trust__track:hover .trust__list{animation-play-state:paused}
.trust__list li{
  font-size:clamp(.9375rem,1.7vw,1.0625rem);
  font-weight:500;letter-spacing:-.02em;
  color:var(--ink-2);
  white-space:nowrap;
}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- 8. Declaración (sección negra) ---------- */
.claim{
  position:relative;
  background:var(--dark);
  color:#fff;
  padding-block:clamp(88px,12vw,168px);
  overflow:hidden;
}
.claim::before{
  content:'';position:absolute;left:50%;top:-40%;
  width:min(1100px,120vw);height:min(1100px,120vw);
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,168,76,.16),transparent 62%);
  pointer-events:none;
}
.claim__inner{position:relative;max-width:1000px}
.claim__title{
  margin-top:18px;
  font-size:clamp(2rem,5.2vw,3.9rem);
  font-weight:600;line-height:1.05;letter-spacing:-.035em;
  color:#fff;
}
.has-motion .claim__title .lw{opacity:.18;transition:opacity .35s var(--ease-soft),color .35s var(--ease-soft)}
.has-motion .claim__title .lw.is-lit{opacity:1}
.claim__title .lw.is-gold.is-lit{color:var(--gold-bright)}
.claim__text{
  margin-top:24px;max-width:64ch;
  font-size:clamp(1.0625rem,2vw,1.1875rem);line-height:1.6;
  color:rgba(255,255,255,.62);
}
.claim__stats{
  display:grid;gap:0;
  margin-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--dark-line);
}
.claim__stats li{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 0;
  border-bottom:1px solid var(--dark-line);
}
.claim__stats strong{
  font-size:clamp(1.75rem,3.4vw,2.4rem);
  font-weight:600;letter-spacing:-.04em;
  color:var(--gold-bright);
}
.claim__stats span{font-size:.875rem;color:rgba(255,255,255,.55)}
@media (min-width:760px){
  .claim__stats{grid-template-columns:repeat(3,1fr)}
  .claim__stats li{padding:26px 26px 0 0;border-bottom:0}
  .claim__stats li + li{border-left:1px solid var(--dark-line);padding-left:26px}
}

/* ---------- 9. Doble bisel (tarjetas) ---------- */
.card__shell{
  height:100%;
  padding:9px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#fafafb);
  border:1px solid var(--line-soft);
  box-shadow:0 28px 55px -40px rgba(0,0,0,.4);
}
.card__core{
  height:100%;
  padding:clamp(22px,3.2vw,32px);
  border-radius:calc(var(--r-lg) - 9px);
  background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.04);
}
.card__title{font-size:clamp(1.125rem,2.2vw,1.35rem);font-weight:600;letter-spacing:-.025em}
.card__text{margin-top:10px;font-size:.9688rem;line-height:1.6;color:var(--ink-2);max-width:54ch}

/* ---------- 10. Plataformas ---------- */
.story__steps{display:grid;gap:16px}
.platform__num{
  display:block;
  font-size:.75rem;font-weight:500;letter-spacing:.2em;
  color:var(--gold-deep);
}
.platform__title{
  margin-top:12px;
  font-size:clamp(1.35rem,2.8vw,1.85rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.12;
}
.platform__text{margin-top:12px;color:var(--ink-2);font-size:.9688rem;line-height:1.6;max-width:56ch}
.ticks{display:grid;gap:10px;margin-top:20px}
.ticks li{
  position:relative;
  padding-left:26px;
  font-size:.9375rem;color:var(--ink-2);line-height:1.5;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.15em;
  width:17px;height:17px;border-radius:50%;
  background:rgba(201,168,76,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3l2.3 2.3 4.9-5.1' fill='none' stroke='%238B6914' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat;
}
.platform__price{
  margin-top:24px;
  font-size:.875rem;color:var(--ink-2);
}
.platform__price strong{font-size:1.0625rem;color:var(--ink);letter-spacing:-.02em}
.platform__split{display:grid;gap:26px}
@media (min-width:700px){
  .platform--wide .platform__split{grid-template-columns:1.25fr .75fr;align-items:center;gap:38px}
}

/* Variante oscura de tarjeta */
.platform--dark .card__shell{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);box-shadow:none}
.platform--dark .card__core{background:var(--dark-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05)}
.platform--dark .platform__title{color:#fff}
.platform--dark .platform__num,.platform--dark .platform__price{color:var(--gold-bright)}
.platform--dark .platform__text,.platform--dark .ticks li{color:rgba(255,255,255,.62)}
.platform--dark .platform__price strong{color:#fff}
.platform--dark .ticks li::before{
  background:rgba(232,201,109,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.4 6.3l2.3 2.3 4.9-5.1' fill='none' stroke='%23E8C96D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat;
}

/* Mini interfaces decorativas */
.mini{
  width:100%;max-width:330px;
  padding:16px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 45px -34px rgba(0,0,0,.5);
}
.mini__row{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mini__pill{background:rgba(201,168,76,.18);color:var(--gold-deep);padding:4px 9px;border-radius:var(--r-pill);font-size:10px;letter-spacing:.08em}
.mini__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.mini__grid i{height:30px;border-radius:8px;background:rgba(0,0,0,.05)}
.mini__grid i.is-taken{background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.mini__rows{margin:12px 0}
.mini__rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-2)}
.mini__rows strong{color:var(--ink);font-weight:500}
.mini__foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-2)}
.mini__foot strong{font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.mini--dark{background:var(--dark-2);border-color:rgba(255,255,255,.09)}
.mini--dark .mini__row{color:rgba(255,255,255,.5)}
.mini--dark .mini__pill{background:rgba(232,201,109,.16);color:var(--gold-bright)}
.mini--dark .mini__rows div{border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.mini--dark .mini__rows strong{color:#fff}
.mini--dark .mini__foot{border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.mini--dark .mini__foot strong{color:#fff}

/* ---------- 11. Bento de capacidades ---------- */
.bento{display:grid;gap:16px}
.bento .card__core{display:flex;flex-direction:column}
@media (min-width:880px){
  .bento{grid-template-columns:repeat(12,1fr);gap:18px}
  .bento__a{grid-column:span 7}
  .bento__b{grid-column:span 5}
  .bento__c{grid-column:span 5}
  .bento__d{grid-column:span 7}
  .bento__e{grid-column:span 6}
  .bento__f{grid-column:span 6}
}
.devices{display:flex;align-items:flex-end;gap:14px;margin-top:auto;padding-top:26px}
.devices__phone{
  width:104px;height:178px;padding:8px;
  border-radius:20px;background:var(--ink);
  display:grid;align-content:start;gap:8px;
  box-shadow:0 22px 40px -26px rgba(0,0,0,.6);
}
.devices__phone i{display:block;height:16px;border-radius:6px;background:rgba(255,255,255,.14)}
.devices__phone i:first-child{height:50px;background:linear-gradient(140deg,var(--gold-bright),var(--gold-deep))}
.devices__phone--sm{width:78px;height:130px;border-radius:16px;opacity:.88}

.vitals{margin-top:auto;padding-top:28px;display:grid;gap:13px}
.vitals__row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px}
.vitals__row em{font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.vitals__row strong{font-size:.8125rem;font-weight:500;letter-spacing:-.01em;min-width:54px;text-align:right}
.vitals__track{display:block;height:6px;border-radius:var(--r-pill);background:rgba(0,0,0,.07);overflow:hidden}
.vitals__track i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(var(--v,.9));transform-origin:left center;
}
.has-motion .vitals__track i{transform:scaleX(0);transition:transform 1.4s var(--ease-soft)}
.has-motion .vitals__row:nth-child(2) i{transition-delay:.12s}
.has-motion .vitals__row:nth-child(3) i{transition-delay:.24s}
.has-motion .bento__b.is-play .vitals__track i{transform:scaleX(var(--v,.9))}
.vitals__note{margin-top:2px;font-size:11px;color:var(--ink-3)}

.panel{margin-top:auto;padding-top:26px;display:grid;gap:8px;max-width:290px;width:100%}
.panel__field{
  display:grid;gap:3px;
  padding:9px 12px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);
}
.panel__field em{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.panel__field i{font-style:normal;font-size:13px}
.panel__price{position:relative}
.caret{display:inline-block;width:1px;height:1em;margin-left:1px;background:var(--ink);vertical-align:-.15em;opacity:0}
.has-motion .caret.is-on{animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.panel__save{position:relative;justify-self:start;padding:7px 15px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:11px;overflow:hidden}
.panel__save::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--gold-bright),var(--gold));opacity:0}
.has-motion .panel__save::before{transition:opacity .4s var(--ease-soft)}
.panel__save.is-done{color:#140f03}
.panel__save.is-done::before{opacity:1}

.answer{
  margin-top:auto;
  padding:18px;
  border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 45px -36px rgba(0,0,0,.5);
}
.answer__q{font-size:12px;color:var(--ink-3)}
.answer__dots{display:none;align-items:center;gap:4px;margin-top:10px}
.answer__dots.is-on{display:inline-flex}
.has-motion .answer__dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.3;animation:dotPulse 1s var(--ease-soft) infinite}
.answer__dots i:nth-child(2){animation-delay:.15s}
.answer__dots i:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.answer__a{margin-top:10px;font-size:.9375rem;line-height:1.55;color:#3a3a3f}
.answer__a strong{color:var(--ink);font-weight:600}
.answer__src{display:block;margin-top:14px;height:8px;width:124px;border-radius:var(--r-pill);background:rgba(0,0,0,.08)}
.has-motion .answer__src{opacity:0;transition:opacity .5s var(--ease-soft)}
.has-motion .answer__src.is-shown{opacity:1}

.chips-wrap{position:relative;margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 10px}
.chips__hub{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);
  font-size:11px;font-weight:500;color:var(--gold-deep);white-space:nowrap;
}
.chips__hub::before{content:'';width:7px;height:7px;border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));flex:none}
.chips__wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.chips__wire path{stroke:var(--gold);stroke-width:1;fill:none}
.has-motion .chips__wire path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1s var(--ease-soft)}
.has-motion .chips__wire.is-drawn path{stroke-dashoffset:0}
.chips__wire circle{fill:var(--gold-bright)}
.has-motion .chips__wire circle{animation:chipsDot 2.6s linear infinite}
@keyframes chipsDot{from{offset-distance:0%}to{offset-distance:100%}}
.chips-wrap .chips{position:relative;z-index:1;margin-top:0;padding-top:0;flex:1 1 auto}

/* ---------- 12. Proceso ---------- */
.section--dark .h2{color:#fff}
.section--dark .lead{color:rgba(255,255,255,.62)}
.steps-wrap{position:relative}
.steps__line{position:absolute;left:0;top:0;width:1px;height:0;background:var(--dark-line);pointer-events:none}
.steps__line i{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));transform:scaleY(var(--sp,0));transform-origin:top}
.steps{margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--dark-line)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:6px 20px;
  padding:clamp(24px,4vw,36px) 0;
  border-bottom:1px solid var(--dark-line);
}
.step__num{position:relative;font-size:.75rem;font-weight:500;letter-spacing:.2em;color:var(--gold-bright)}
.step__num::before{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(232,201,109,.16);box-shadow:0 0 16px 2px rgba(232,201,109,.35);opacity:0;z-index:-1}
.has-motion .step__num::before{transition:opacity .5s var(--ease-soft)}
.step.is-reached .step__num::before{opacity:1}
.step__title{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.025em;color:#fff;margin-bottom:8px}
.step p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:62ch}
.step__time{
  grid-column:2;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
@media (min-width:820px){
  .step{grid-template-columns:88px 1fr 200px;align-items:start;gap:0 24px}
  .step__num{padding-top:6px}
  .step__time{grid-column:3;text-align:right;padding-top:8px}
}

/* ---------- 13. Trabajo ---------- */
.work{display:grid;gap:16px}
.work .card__core{padding:9px;display:flex;flex-direction:column}
.work__tag--plain{
  display:inline-block;margin-bottom:14px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(201,168,76,.14);
  border:1px solid rgba(201,168,76,.3);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);
}
.work__item.platform--dark .card__title{color:#fff}
.work__item.platform--dark .card__text{color:rgba(255,255,255,.62)}
.work__item.platform--dark .work__tag--plain{background:rgba(232,201,109,.16);border-color:rgba(232,201,109,.3);color:var(--gold-bright)}
.work__frame{
  position:relative;aspect-ratio:16/11;overflow:clip;
  border-radius:calc(var(--r-lg) - 9px);
  background:linear-gradient(160deg,var(--bg-soft),#e9e9ee);
}
.work__laptop{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:86%;aspect-ratio:16/10;border-radius:12px;overflow:clip;
  background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);
  mask-image:linear-gradient(#000 78%,transparent);
  -webkit-mask-image:linear-gradient(#000 78%,transparent);
}
.work__laptop .mock__bar{position:absolute;top:0;left:0;right:0;z-index:1;height:22px;padding:0 8px}
.work__laptop .mock__dots i{width:5px;height:5px}
.work__laptop img{position:absolute;top:0;left:0;display:block;width:100%;height:auto}
.work__phone{
  position:absolute;right:6%;bottom:0;width:24%;
  border:6px solid #0b0b0d;border-radius:26px;overflow:clip;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.4);
  mask-image:linear-gradient(#000 78%,transparent);
  -webkit-mask-image:linear-gradient(#000 78%,transparent);
}
.work__phone img{display:block;width:100%;height:auto}
.work__body{padding:22px 18px 18px}
.work__link{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  font-size:.9375rem;font-weight:500;color:var(--gold-deep);
  text-decoration:none;
}
.work__link svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.work__link:hover svg{transform:translate(2px,-2px)}
@media (min-width:900px){
  .work{grid-template-columns:repeat(2,1fr);gap:18px}
}
@supports (animation-timeline: view()){
  .has-motion .work__laptop img{
    height:auto;
    animation:work-pan linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .has-motion .work__phone img{
    animation:work-float linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
}
@keyframes work-pan{from{transform:translateY(0)}to{transform:translateY(-18%)}}
@keyframes work-float{from{transform:translateY(24px)}to{transform:translateY(-24px)}}
.has-fine .work__item{perspective:900px}
.has-fine .work__frame{will-change:transform}

/* ---------- 14. Inversión ---------- */
.prices{margin-top:clamp(28px,4vw,44px);border-top:1px solid rgba(0,0,0,.12)}
.price{
  display:grid;gap:12px;
  padding:clamp(20px,3vw,28px) 0;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.price__info h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.price__info p{margin-top:5px;font-size:.9375rem;color:var(--ink-2)}
.price__amount{font-size:.9375rem;color:var(--ink-2);white-space:nowrap}
.price__amount strong{font-size:1.5rem;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.price__amount span{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:760px){
  .price{grid-template-columns:1fr auto;align-items:center;gap:32px}
  .price__amount{text-align:right}
}
.notes{
  display:grid;gap:22px;
  margin-top:clamp(30px,4vw,46px);
}
.notes p{
  padding-left:18px;
  border-left:1px solid rgba(0,0,0,.14);
  font-size:.9375rem;line-height:1.6;color:var(--ink-2);
}
.notes strong{color:var(--ink);font-weight:600}
@media (min-width:880px){
  .notes{grid-template-columns:repeat(3,1fr);gap:28px}
}

/* ---------- 15. Preguntas ---------- */
.faq{margin-top:clamp(24px,3vw,38px);border-top:1px solid rgba(0,0,0,.12)}
.faq details{border-bottom:1px solid rgba(0,0,0,.1)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;
  cursor:pointer;list-style:none;
  font-size:clamp(1.02rem,2vw,1.1875rem);
  font-weight:500;letter-spacing:-.02em;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-deep)}
.faq summary i{
  position:relative;flex:none;
  width:16px;height:16px;
}
.faq summary i::before,
.faq summary i::after{
  content:'';position:absolute;left:0;top:50%;
  width:16px;height:1.5px;border-radius:2px;background:var(--ink-2);
  transition:transform .5s var(--ease),background-color .4s var(--ease);
}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::before{background:var(--gold-deep)}
.faq details[open] summary i::after{transform:rotate(90deg) scaleX(0);background:var(--gold-deep)}
.faq__body{padding:0 0 26px;max-width:74ch;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.faq__body strong{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq__body{animation:fadeUp .5s var(--ease) both}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 16. CTA final ---------- */
.cta{position:relative;overflow:clip}
.cta__grid{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.cta__inner{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:22px}
.cta__title{max-width:24ch}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.cta__note{font-size:.8125rem;color:rgba(255,255,255,.45)}
.cta__mail{margin-top:2px;font-size:.875rem;color:rgba(255,255,255,.6)}
.cta__mail a{
  color:var(--gold-bright);
  border-bottom:1px solid rgba(232,201,109,.35);
  padding-bottom:1px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.cta__mail a:hover{color:#fff;border-color:#fff}

/* ---------- 17. Footer ---------- */
.foot{background:var(--dark);color:rgba(255,255,255,.62);padding-top:clamp(56px,7vw,92px)}
.foot__grid{display:grid;gap:38px}
.foot__word{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:#fff}
.foot__tag{margin-top:8px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.foot__about{margin-top:18px;max-width:42ch;font-size:.9rem;line-height:1.65}
.foot__title{margin-bottom:14px;font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.foot__col ul{display:grid;gap:10px;font-size:.9375rem}
.foot__col a{color:rgba(255,255,255,.72);transition:color .4s var(--ease)}
.foot__col a:hover{color:var(--gold-bright)}
.foot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:clamp(38px,5vw,62px);
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8125rem;color:rgba(255,255,255,.4);
}
@media (min-width:880px){
  .foot__grid{grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:44px}
}

/* ---------- 18. Reveals ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
html:not(.js) [data-reveal]{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .vitals__track i{transform:scaleX(var(--v,.9))}
  .trust__list{animation:none;flex-wrap:wrap;justify-content:center}
  .trust__list[aria-hidden]{display:none}
}

/* ---------- 19. Extras: logo, chips, "también hacemos" ---------- */
.foot__logo{display:block;width:220px;max-width:64%;height:auto;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.chips__item{
  padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--ink-2);
}
.chips--dark{justify-content:center;padding-top:0;margin-bottom:14px}
.chips--dark .chips__item{
  background:rgba(232,201,109,.1);border-color:rgba(232,201,109,.28);
  color:var(--gold-bright);
}
.section--also{background:#fff;border-top:1px solid var(--line-soft)}
.also{display:grid;gap:26px}
.also__title{margin-top:14px}
.also__link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding-bottom:4px;
  border-bottom:1px solid rgba(0,0,0,.16);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  transition:color .4s var(--ease),border-color .4s var(--ease),gap .4s var(--ease);
}
.also__link svg{width:14px;height:14px}
.also__link:hover{color:var(--gold-deep);border-color:var(--gold);gap:12px}
@media (min-width:880px){
  .also{grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
  .also__title{margin-top:0}
}

/* ---------- 20. Motion global ---------- */
/* capa del tamaño del shell que recorta con su radio: la línea nunca sale de la curva */
.nav__progress{
  position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.nav__progress::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
}
.nav.is-scrolled .nav__progress{opacity:1}

.has-fine [data-magnetic]{transition:transform .5s var(--ease-soft)}
.has-fine [data-magnetic] .btn__move{transition:transform .5s var(--ease-soft)}
.has-fine [data-magnetic] .btn__icon{transition:transform .5s var(--ease-soft)}

.has-fine .spot{position:relative}
.has-fine .spot::before{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;pointer-events:none;z-index:2;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(232,201,109,.6),transparent 60%);
  -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 var(--ease-soft);
}
.has-fine .spot:hover::before{opacity:1}

/* ---------- 21. Hero vivo ---------- */
.has-motion .hero .w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em}
.has-motion .hero .w__i{display:inline-block;transform:translateY(105%);opacity:0;filter:blur(6px);transition:transform 1s var(--ease-soft),opacity 1s var(--ease-soft),filter 1s var(--ease-soft);transition-delay:calc(var(--wi)*55ms + 120ms)}
.has-motion .hero.is-live .w__i{transform:none;opacity:1;filter:none}

.has-fine .hero__visual{perspective:1400px}
/* sin preserve-3d el translate3d(...,40px) de .mock__phone se aplana y pierde la profundidad al rotar junto con .mock */
.has-fine .mock{transform-style:preserve-3d}

.mock__glare{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);
  mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;
}
.hero:hover .mock__glare{opacity:1}

.mock__toast{
  position:absolute;top:-16px;right:20px;z-index:3;
  display:flex;align-items:center;gap:10px;
  max-width:260px;padding:10px 14px;border-radius:var(--r-md);
  background:#fff;box-shadow:0 18px 34px -16px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);
  opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft);
  pointer-events:none;
}
.mock__toast.is-on{opacity:1;transform:none}
.mock__toast-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:rgba(201,168,76,.14);color:var(--gold-deep);
}
.mock__toast-ico svg{width:14px;height:14px}
.mock__toast-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mock__toast-txt strong{font-size:12px;font-weight:600;color:var(--ink)}
.mock__toast-txt em{
  font-style:normal;font-size:11px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock__toast-amt{font-size:13px;font-weight:600;color:var(--ink)}
@media (max-width:600px){
  .mock__toast{right:12px;max-width:calc(100% - 24px)}
}

.mock__rows li{transition:transform .6s var(--ease-soft),opacity .6s var(--ease-soft)}
.mock__rows li.is-new{transform:translateY(-100%);opacity:0}
.mock__rows li.is-out{transform:translateY(6px);opacity:0;transition:transform .4s var(--ease-soft),opacity .4s var(--ease-soft)}

.mock__bar-live{transform-box:fill-box;transform-origin:bottom;transition:transform .2s var(--ease-soft)}
.mock__bar-live.is-pulse{transform:scaleY(1.06)}

/* ---------- 22. Scroll narrativo ---------- */
.story__stage{display:none}
.story__steps .platform{transition:opacity .5s var(--ease-soft)}
@media (min-width:980px){
  .story{display:grid;grid-template-columns:1fr 1.05fr;gap:38px;align-items:start}
  .story__stage{display:block;position:sticky;top:calc(50vh - 230px);height:460px}
  .story__steps .platform{min-height:70vh;display:flex;align-items:center}
  .js .story__steps .platform{opacity:.35}
  .story__steps .platform.is-active{opacity:1}
  .story .platform .mini{display:none}
}

.story__device{
  height:100%;border-radius:var(--r-md);overflow:clip;
  background:#fff;box-shadow:0 40px 70px -34px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.07);
}
.story__bar{
  display:flex;align-items:center;gap:10px;
  height:40px;padding:0 14px;
  background:#fbfbfd;border-bottom:1px solid var(--line-soft);
}
.story__url{
  margin-left:4px;font-size:11px;color:var(--ink-3);
  background:#f1f1f3;padding:4px 12px;border-radius:var(--r-pill);
}
.story__screens{position:relative;height:420px}
.story__screen{
  position:absolute;inset:0;padding:clamp(18px,3vw,26px);
  opacity:0;transform:translateY(16px);filter:blur(4px);pointer-events:none;
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft),filter .5s var(--ease-soft);
}
.story__screen.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.story__screen.is-leaving{transform:translateY(-12px)}
.story__screen .mini{max-width:none}

/* Pantalla 0: landing falsa */
.story__lines{display:grid;gap:10px;margin-bottom:18px}
.story__line{height:14px;border-radius:8px;background:rgba(0,0,0,.07)}
.story__line--lg{width:70%;height:20px}
.story__line--sm{width:45%}
.story__cta{
  display:inline-block;padding:9px 18px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#140f03;font-size:12px;font-weight:600;
}
.story__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.story__thumbs i{height:52px;border-radius:10px;background:rgba(0,0,0,.05)}

/* Pantalla 1: panel */
.story__fields{margin-bottom:18px}
.story__fields div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.story__fields span{width:40%;height:10px;border-radius:6px;background:rgba(0,0,0,.06)}
.story__fields strong{width:20%;height:10px;border-radius:6px;background:rgba(0,0,0,.1)}
.story__chart{display:flex;align-items:flex-end;gap:6px;height:76px}
.story__chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.story__chart i:nth-child(1){height:40%}
.story__chart i:nth-child(2){height:65%}
.story__chart i:nth-child(3){height:50%}
.story__chart i:nth-child(4){height:80%}
.story__chart i:nth-child(5){height:60%}
.story__chart i:nth-child(6){height:92%}

/* ---------- 23. Micro-animaciones ---------- */
.cta__grid{opacity:0}
.has-motion .cta__grid{opacity:1}

/* ---------- 24. Giros y diagnóstico ---------- */
.giros{display:grid;gap:16px}
@media (min-width:640px){.giros{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.giros{grid-template-columns:repeat(3,1fr)}}
.giro__icon{width:42px;height:42px;display:grid;place-items:center;margin-left:-8px;color:var(--gold-deep);transition:transform .4s var(--ease-soft),color .4s var(--ease-soft)}
.giro__icon svg{width:26px;height:26px}
.giro .card__title{margin-top:16px}
.has-fine .giro:hover .giro__icon{color:var(--gold-bright);transform:translateY(-2px)}

.diag{width:100%;max-width:960px;margin-inline:auto;display:grid;gap:12px;text-align:left}
@media (min-width:900px){.diag{grid-template-columns:1fr 1fr 1.3fr 1fr auto;align-items:end;gap:10px}}
.diag__field{display:grid;gap:6px;font-size:.8125rem;color:rgba(255,255,255,.55)}
.diag__field em{font-style:normal}
.diag__field select,.diag__field input{
  width:100%;padding:12px 34px 12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--dark-line);
  color:#fff;font-size:.9375rem;font-family:inherit;
  appearance:none;-webkit-appearance:none;
  transition:border-color .35s var(--ease);
}
.diag__field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}
.diag__field select option{color:#1d1d1f}
.diag__field select:focus,.diag__field input:focus{outline:none;border-color:var(--gold)}
.diag__field select[aria-invalid="true"]{border-color:var(--error)}
.diag button[type=submit]{justify-self:start}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.diag__error{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--error-soft)}
.diag__error[hidden]{display:none}