/* Primero Salud · sitio web
 * Tipografía: Montserrat (títulos) e Inter (texto). Dorado estructural; Rojo Vital solo en llamadas a la acción y errores.
 */

/* ---------- tokens ---------- */
:root{
  --color-paper: oklch(99.4% 0.003 85);
  --color-pearl: oklch(97.2% 0.005 85);
  --color-surface: oklch(100% 0 0);
  --color-ink: oklch(22% 0.012 60);
  --color-ink-2: oklch(38% 0.012 60);
  --color-muted: oklch(50% 0.01 70);
  --color-rule: oklch(90% 0.012 80);
  --color-gold: oklch(72% 0.095 80);
  --color-gold-text: oklch(50% 0.085 75);
  --color-gold-soft: oklch(95.5% 0.025 85);
  --color-accent: oklch(50% 0.165 27);
  --color-accent-hover: oklch(44% 0.155 27);
  --color-on-accent: oklch(99% 0.003 85);
  --color-focus: oklch(50% 0.085 75);
  --color-ok: oklch(48% 0.11 155);
  --color-error: oklch(50% 0.165 27);
  --color-teal: oklch(29% 0.035 215);
  --color-teal-2: oklch(35% 0.04 215);
  --color-forest: oklch(27% 0.04 165);
  --color-forest-2: oklch(35% 0.055 150);
  --color-on-teal: oklch(96% 0.01 85);
  --color-on-teal-muted: oklch(84% 0.02 200);
  --color-splash: oklch(20% 0.02 210);
  --color-scrim: oklch(20% 0.02 60 / 0.5);
  --shadow-card: 0 1px 2px oklch(22% 0.01 60 / 0.06), 0 12px 32px -16px oklch(22% 0.01 60 / 0.18);

  --font-display: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
  --text-display: clamp(2.125rem, 3.4vw + 1.1rem, 4.25rem);
  --text-stat: clamp(3rem, 5vw + 1rem, 5.5rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6.5rem;
  --gutter: clamp(16px, 4vw, 64px);
  --container: 104rem;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --rule-hair: 1px; --rule-gold: 2px;

  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms; --dur-med: 260ms; --dur-slow: 700ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-paper: oklch(17% 0.012 70); --color-pearl: oklch(20.5% 0.012 70); --color-surface: oklch(23% 0.013 70);
    --color-ink: oklch(95% 0.006 85); --color-ink-2: oklch(84% 0.008 85); --color-muted: oklch(70% 0.01 80);
    --color-rule: oklch(32% 0.014 75); --color-gold: oklch(74% 0.1 80); --color-gold-text: oklch(78% 0.1 82);
    --color-gold-soft: oklch(27% 0.03 80); --color-accent: oklch(55% 0.17 27); --color-accent-hover: oklch(46% 0.16 27);
    --color-focus: oklch(78% 0.1 82); --color-ok: oklch(72% 0.12 155); --color-error: oklch(70% 0.15 27);
    --color-teal: oklch(26% 0.03 215); --color-teal-2: oklch(31% 0.035 215);
    --color-scrim: oklch(5% 0 0 / 0.6);
    --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 16px 40px -18px oklch(0% 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --color-paper: oklch(17% 0.012 70); --color-pearl: oklch(20.5% 0.012 70); --color-surface: oklch(23% 0.013 70);
  --color-ink: oklch(95% 0.006 85); --color-ink-2: oklch(84% 0.008 85); --color-muted: oklch(70% 0.01 80);
  --color-rule: oklch(32% 0.014 75); --color-gold: oklch(74% 0.1 80); --color-gold-text: oklch(78% 0.1 82);
  --color-gold-soft: oklch(27% 0.03 80); --color-accent: oklch(55% 0.17 27); --color-accent-hover: oklch(46% 0.16 27);
  --color-focus: oklch(78% 0.1 82); --color-ok: oklch(72% 0.12 155); --color-error: oklch(70% 0.15 27);
  --color-teal: oklch(26% 0.03 215); --color-teal-2: oklch(31% 0.035 215);
  --color-scrim: oklch(5% 0 0 / 0.6);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.3), 0 16px 40px -18px oklch(0% 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color var(--dur-med) var(--ease-out),color var(--dur-med) var(--ease-out)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:45;background:var(--color-paper)}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-style:normal;line-height:1.12;letter-spacing:-0.02em;margin:0;overflow-wrap:anywhere;min-width:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-left:max(var(--gutter), env(safe-area-inset-left,0px));padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--space-md);top:var(--space-md);z-index:60;background:var(--color-surface);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm)}
.measure{max-width:44rem}

/* ---------- rejilla ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:start}
@media (min-width: 64rem){
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-2xl)}
  .c-3{grid-column:span 3}.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-9{grid-column:span 9}.c-12{grid-column:1/-1}
  .center{align-items:center}
}
.cards{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr)}
@media (min-width: 40rem){.cards--2,.cards--3,.cards--4,.cards--5,.cards--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 64rem){
  .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cards--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width: 90rem){.cards--6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:48px;max-width:100%;padding:0 var(--space-lg);border-radius:var(--radius-pill);font:600 var(--text-sm)/1 var(--font-display);letter-spacing:.01em;text-decoration:none;white-space:nowrap;border:var(--rule-hair) solid transparent;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn > span{overflow:hidden;text-overflow:ellipsis}
.btn svg{width:18px;height:18px;flex:none}
.btn--cta{background:var(--color-accent);color:var(--color-on-accent)}
.btn--cta:hover{background:var(--color-accent-hover)}
.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--color-gold)}
.btn--ghost:hover{background:var(--color-gold-soft)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--block{width:100%}
.btn--sm{min-height:40px;padding:0 var(--space-md)}
.link{display:inline-flex;align-items:center;gap:var(--space-2xs);font:600 var(--text-sm)/1.2 var(--font-display);color:var(--color-gold-text);text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link svg{width:16px;height:16px}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--color-splash);transition:opacity var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}
.splash.is-done{opacity:0;visibility:hidden}
.splash__inner{display:grid;justify-items:center;gap:var(--space-lg)}
.splash__mark{width:min(34vw,148px)}
.splash__mark img{width:100%;opacity:0;transform:scale(.92);animation:markIn 900ms var(--ease-out) 150ms forwards}
.splash__pulse{width:min(62vw,280px);height:44px}
.splash__pulse path{fill:none;stroke:var(--color-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:pulseDraw 1100ms var(--ease-in-out) 350ms forwards}
.splash__tag{font:600 var(--text-sm)/1 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--color-on-teal-muted);opacity:0;animation:fadeIn 600ms var(--ease-out) 1000ms forwards}
@keyframes markIn{to{opacity:1;transform:scale(1)}}
@keyframes pulseDraw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- navegación ---------- */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--space-sm));left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:var(--space-sm);width:max-content;max-width:calc(100% - 1rem);padding:0.4rem 0.45rem 0.4rem 0.9rem;background:color-mix(in oklch, var(--color-paper) 84%, transparent);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);box-shadow:0 8px 24px -12px oklch(0% 0 0 / .22)}
.nav__brand{display:flex;align-items:center;flex:none}
.nav__brand img{height:34px;width:auto}
.nav__links{display:none;gap:var(--space-2xs);list-style:none;margin:0;padding:0}
.nav__links a{display:block;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;text-decoration:none;color:var(--color-ink-2);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out)}
.nav__links a:hover{background:var(--color-gold-soft);color:var(--color-ink)}
.nav__links a[aria-current="page"]{color:var(--color-ink);background:var(--color-gold-soft)}
.nav__tools{display:flex;align-items:center;gap:var(--space-2xs);flex:none}
.tool{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 var(--space-xs);border-radius:var(--radius-pill);border:var(--rule-hair) solid var(--color-rule);background:transparent;color:var(--color-ink);font:600 var(--text-xs)/1 var(--font-display);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.tool:hover{background:var(--color-gold-soft)}
.tool svg{width:18px;height:18px}
.nav .btn{min-height:40px;padding:0 var(--space-md)}
.nav .btn .long{display:none}
.menuBtn{display:inline-grid}
.mmenu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 4.5rem);left:max(var(--space-sm), env(safe-area-inset-left,0px));right:max(var(--space-sm), env(safe-area-inset-right,0px));z-index:39;padding:var(--space-sm);border-radius:var(--radius-lg);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);box-shadow:var(--shadow-card)}
.mmenu ul{list-style:none;margin:0;padding:0;display:grid}
.mmenu a{display:block;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);text-decoration:none;font-weight:500;white-space:nowrap}
.mmenu a:hover,.mmenu a[aria-current="page"]{background:var(--color-gold-soft)}
@media (min-width: 64rem){.nav__links{display:flex}.nav .btn .long{display:inline}.nav .btn .short{display:none}.menuBtn,.mmenu{display:none!important}}
@media (max-width: 22rem){.nav__brand img{height:28px}.nav{gap:var(--space-2xs);padding-left:.6rem}.tool{min-width:36px;height:36px}.nav .btn{padding:0 var(--space-sm)}}

/* ---------- secciones ---------- */
.sec{padding-block:var(--space-3xl)}
@media (min-width: 64rem){.sec{padding-block:var(--space-4xl)}}
.sec--pearl{background:var(--color-pearl);border-block:var(--rule-hair) solid var(--color-rule)}
.sec--tight{padding-block:var(--space-2xl)}
.kicker{display:inline-flex;align-items:center;gap:var(--space-xs);font:600 var(--text-xs)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold-text)}
.kicker::before{content:"";width:28px;height:var(--rule-gold);background:var(--color-gold)}
.h2{font-size:var(--text-2xl);margin-top:var(--space-md)}
.h3{font-size:var(--text-lg)}
.lede{font-size:var(--text-md);color:var(--color-ink-2);margin-top:var(--space-md);max-width:44rem}
.gold{color:var(--color-gold-text)}
.head-row{display:grid;gap:var(--space-lg);margin-bottom:var(--space-2xl)}
@media (min-width: 64rem){.head-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}.head-row .lede{margin-top:0}}

/* página: héroe */
.hero{padding-top:calc(var(--space-4xl) + 1.5rem);padding-bottom:var(--space-3xl);background:radial-gradient(90% 70% at 100% 0%, var(--color-gold-soft), transparent 60%), var(--color-paper)}
.hero h1{font-size:var(--text-display);font-weight:800;margin-top:var(--space-md)}
.hero h1 .accent{color:var(--color-gold-text)}
.hero h1 .h1-sub{display:block;margin-top:var(--space-md);font-size:clamp(1.25rem, 1.2vw + 0.9rem, 1.875rem);font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--color-ink-2)}
.hero--sub{padding-bottom:var(--space-2xl)}
.hero--sub h1{font-size:clamp(2rem, 2.6vw + 1rem, 3.5rem)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.ctas .btn{flex:1 1 14rem}
@media (min-width: 40rem){.ctas .btn{flex:0 0 auto}}
.btn .narrow{display:none}
@media (max-width: 26rem){.btn .wide{display:none}.btn .narrow{display:inline}}
.trust{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}
.trust span{display:inline-flex;align-items:center;gap:var(--space-xs)}
.trust svg{width:16px;height:16px;color:var(--color-gold-text)}

/* collage del héroe */
.collage{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr)}
@media (min-width: 40rem){.collage{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.collage__side{display:grid;gap:var(--space-md)}
.card{background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-lg);min-width:0}
.card--lift{box-shadow:var(--shadow-card)}
.card__label{font-size:var(--text-xs);color:var(--color-muted)}
.amount{font:800 clamp(1.9rem, 2vw + 1rem, 2.6rem)/1 var(--font-display);letter-spacing:-.02em;margin-top:var(--space-2xs);font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.ring{width:74px;height:74px;flex:none}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:var(--color-rule)}
.ring .fg{stroke:var(--color-gold);stroke-linecap:round}
.ring text{font:700 15px var(--font-display);fill:var(--color-ink)}
.card hr{border:0;border-top:var(--rule-hair) solid var(--color-rule);margin:var(--space-md) 0}
.cuotas{display:grid;gap:var(--space-xs);list-style:none;padding:0;margin:var(--space-sm) 0 0}
.cuotas li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-pearl)}
.cuotas li > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuotas b{font:700 var(--text-sm) var(--font-display);font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 var(--space-sm);border-radius:var(--radius-pill);font:600 var(--text-xs)/1 var(--font-body);white-space:nowrap}
.chip--ok{background:color-mix(in oklch, var(--color-ok) 14%, transparent);color:var(--color-ok)}
.chip--next{background:transparent;border:var(--rule-hair) solid var(--color-gold);color:var(--color-gold-text)}
.chip--wait{background:var(--color-gold-soft);color:var(--color-gold-text)}
.note{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--color-muted)}
.club{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:var(--space-lg);background:linear-gradient(140deg,var(--color-teal),var(--color-teal-2));color:var(--color-on-teal);min-height:12.5rem}
.club::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 90% 15%, oklch(74% 0.1 80 / .3), transparent 60%);pointer-events:none}
.club__tag{position:relative;z-index:1;display:inline-flex;align-items:center;height:24px;padding:0 var(--space-sm);border-radius:var(--radius-pill);background:oklch(100% 0 0 / .12);font:600 var(--text-xs)/1 var(--font-body)}
.club__name{position:relative;z-index:1;font:800 var(--text-xl)/1 var(--font-display);margin-top:var(--space-md)}
.club__meta{position:relative;z-index:1;font-size:var(--text-xs);color:var(--color-on-teal-muted);margin-top:var(--space-2xs)}
.club img{position:absolute;right:-6px;bottom:-8px;height:68%;width:auto;filter:drop-shadow(0 8px 14px oklch(0% 0 0 / .35))}
.qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-md);align-items:center}
.qr__ico{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;border:var(--rule-hair) solid var(--color-gold);color:var(--color-gold-text)}
.qr__ico svg{width:26px;height:26px}
.qr b{font:700 var(--text-base)/1.25 var(--font-display);display:block}
.qr p{font-size:var(--text-xs);color:var(--color-muted);margin-top:2px}

/* tiras de hechos */
.facts{display:grid;gap:var(--space-md);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width: 64rem){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{display:flex;gap:var(--space-sm);align-items:center;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);border:var(--rule-hair) solid var(--color-rule);background:var(--color-surface);min-width:0}
.fact svg{width:24px;height:24px;flex:none;color:var(--color-gold-text);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fact b{font:700 var(--text-sm)/1.25 var(--font-display);min-width:0}
@media (max-width: 24rem){.facts{grid-template-columns:minmax(0,1fr)}}

/* pasos */
.steps{display:grid;gap:var(--space-md);list-style:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr)}
@media (min-width: 48rem){.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 72rem){.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{position:relative;padding:var(--space-lg);border-radius:var(--radius-md);border:var(--rule-hair) solid var(--color-rule);background:var(--color-surface);min-width:0}
.ico{width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;border:var(--rule-hair) solid var(--color-gold);color:var(--color-gold-text);flex:none}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step__n{position:absolute;top:var(--space-lg);right:var(--space-lg);font:700 var(--text-lg)/1 var(--font-display);color:var(--color-gold);font-variant-numeric:tabular-nums}
.step h3{font-size:var(--text-lg);margin-top:var(--space-md)}
.step p,.feat p{color:var(--color-ink-2);margin-top:var(--space-xs)}

/* niveles del Club */
.levels{display:grid;gap:var(--space-sm);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width: 48rem){.levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width: 80rem){.levels{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width: 48rem){.levels--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lvgroup + .lvgroup{margin-top:var(--space-xl)}
.lvgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-sm);margin-bottom:var(--space-md)}
.lvgroup__head h3{font:700 var(--text-lg)/1.2 var(--font-display)}
.lvgroup__head p{color:var(--color-muted);font-size:var(--text-sm)}
.level{position:relative;overflow:hidden;border-radius:var(--radius-md);background:linear-gradient(160deg,var(--color-teal),var(--color-teal-2));color:var(--color-on-teal);padding:var(--space-md);min-height:11rem;display:flex;flex-direction:column;justify-content:space-between}
.level img{height:6.5rem;width:auto;align-self:flex-end;filter:drop-shadow(0 6px 10px oklch(0% 0 0 / .35))}
.level b{font:700 var(--text-md)/1 var(--font-display)}
.level small{display:block;color:var(--color-on-teal-muted);font-size:var(--text-xs);margin-top:2px}
.level--tree{background:linear-gradient(160deg,var(--color-forest),var(--color-forest-2));min-height:13rem}
.level--tree img{height:10rem;max-width:70%;object-fit:contain}
@media (max-width: 47.99rem){
  .levels--3{grid-template-columns:minmax(0,1fr)}
  .level--tree{flex-direction:row;align-items:flex-end;min-height:9rem}
  .level--tree > div{align-self:flex-start}
  .level--tree img{height:7.5rem;max-width:60%}
}

/* tarjetas de público / beneficio */
.feat{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);border-radius:var(--radius-md);border:var(--rule-hair) solid var(--color-rule);background:var(--color-surface);min-width:0}
.feat h3,.feat h2{font-size:var(--text-lg);margin-top:var(--space-xs)}
.feat .link{margin-top:auto;padding-top:var(--space-sm)}
.feat--gold{border-top:var(--rule-gold) solid var(--color-gold)}

/* banda de descarga */
.band{display:grid;gap:var(--space-xl);align-items:center;padding:var(--space-2xl) var(--space-xl);border-radius:var(--radius-lg);border:var(--rule-gold) solid var(--color-gold);background:var(--color-gold-soft)}
@media (min-width: 64rem){.band{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-2xl) var(--space-3xl)}}
.band h2{font-size:var(--text-2xl)}
.band p{color:var(--color-ink-2);margin-top:var(--space-xs)}

/* estadísticas */
.stat{padding:var(--space-lg);border-radius:var(--radius-md);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-top:var(--rule-gold) solid var(--color-gold);min-width:0}
.stat__num{font:800 var(--text-stat)/1 var(--font-display);letter-spacing:-.03em;color:var(--color-gold-text);font-variant-numeric:tabular-nums}
.stat__num--tbc{font-size:var(--text-xl);color:var(--color-muted)}
.stat__big{font:700 var(--text-xl)/1.15 var(--font-display);color:var(--color-gold-text)}
.stat__txt{font-weight:500;margin-top:var(--space-xs)}
.stat__src{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xs)}
.placeholder{display:inline-block;margin-top:var(--space-xs);font-size:var(--text-xs);padding:2px var(--space-xs);border-radius:4px;background:var(--color-pearl);border:1px dashed var(--color-rule);color:var(--color-muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg)}
.chips span{height:30px;display:inline-flex;align-items:center;padding:0 var(--space-sm);border-radius:var(--radius-pill);border:var(--rule-hair) solid var(--color-gold);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.ticks{display:grid;gap:var(--space-sm);list-style:none;padding:0;margin:var(--space-lg) 0 0}
.ticks li{display:flex;gap:var(--space-sm);align-items:flex-start;color:var(--color-ink-2)}
.ticks svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--color-gold-text);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo-slot{display:grid;place-items:center;height:84px;border-radius:var(--radius-sm);border:1px dashed var(--color-rule);background:var(--color-surface);color:var(--color-muted);font-size:var(--text-xs);text-align:center;padding:var(--space-xs)}
.logos{display:grid;gap:var(--space-sm);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width: 40rem){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* tipos de centro */
.kind{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);padding:var(--space-lg);border-radius:var(--radius-md);background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);min-width:0}
.kind b{font:700 var(--text-md)/1.2 var(--font-display)}
.kind p{font-size:var(--text-sm);color:var(--color-muted)}

/* formularios */
.form{background:var(--color-surface);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-xl) var(--space-lg);min-width:0}
@media (min-width: 40rem){.form{padding:var(--space-xl)}}
.form h2,.form h3{font-size:var(--text-lg)}
.form > p{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-2xs)}
.fields{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
@media (min-width: 40rem){.fields--2{grid-template-columns:repeat(2,minmax(0,1fr))}.fields--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.field{display:grid;gap:var(--space-2xs);min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-size:var(--text-sm);font-weight:500}
.field .req{color:var(--color-accent)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:var(--rule-hair) solid var(--color-rule);background:var(--color-paper);color:var(--color-ink);font:inherit;transition:border-color var(--dur-fast) var(--ease-out)}
.field textarea{min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-gold)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-gold)}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:var(--color-error)}
.field .err{font-size:var(--text-xs);color:var(--color-error);min-height:1em}
.form .btn{margin-top:var(--space-lg)}
.fine{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-sm)}
.done{margin-top:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-md);background:color-mix(in oklch, var(--color-ok) 10%, transparent);border:var(--rule-hair) solid color-mix(in oklch, var(--color-ok) 35%, transparent)}
.done b{font-family:var(--font-display)}
.done pre{margin:var(--space-sm) 0 0;padding:var(--space-sm);border-radius:var(--radius-sm);background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);white-space:pre-wrap;overflow-wrap:anywhere;font:var(--text-xs)/1.5 var(--font-body);max-height:12rem;overflow:auto}
.done__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-sm)}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-sm)}
.copyline code{font:600 var(--text-sm) var(--font-body);padding:var(--space-2xs) var(--space-xs);border-radius:6px;background:var(--color-pearl);border:var(--rule-hair) solid var(--color-rule);user-select:all;overflow-wrap:anywhere}

/* documentos legales */
.doc{display:grid;gap:var(--space-2xl);grid-template-columns:minmax(0,1fr)}
@media (min-width: 64rem){.doc{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}}
.toc{align-self:start;padding:var(--space-lg);border-radius:var(--radius-md);border:var(--rule-hair) solid var(--color-rule);background:var(--color-surface)}
@media (min-width: 64rem){.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6rem)}}
.toc ol{margin:var(--space-sm) 0 0;padding-left:1.25rem;display:grid;gap:var(--space-xs);font-size:var(--text-sm)}
.toc a{text-decoration:none;color:var(--color-ink-2)}
.toc a:hover{color:var(--color-ink);text-decoration:underline}
.doc__body{display:grid;gap:var(--space-xl);max-width:52rem}
.doc__body h2{font-size:var(--text-xl);scroll-margin-top:6rem}
.doc__body p{color:var(--color-ink-2);margin-top:var(--space-sm)}
.notice{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--color-gold-soft);border:var(--rule-hair) solid color-mix(in oklch, var(--color-gold) 50%, transparent)}
.notice svg{width:22px;height:22px;flex:none;color:var(--color-gold-text)}

/* mapa */
.map{border-radius:var(--radius-md);overflow:hidden;border:var(--rule-hair) solid var(--color-rule);background:var(--color-surface)}
.map__frame{position:relative;height:300px;background:linear-gradient(135deg,var(--color-pearl),var(--color-gold-soft))}
.map__frame iframe{display:block;width:100%;height:100%;border:0}
.map__pin{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--space-xs);text-align:center;padding:var(--space-md)}
.map__pin svg{width:40px;height:40px;color:var(--color-gold-text)}
.map__pin b{font:700 var(--text-md) var(--font-display)}
.map__pin span{font-size:var(--text-sm);color:var(--color-ink-2)}
.map > a{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:600;border-top:var(--rule-hair) solid var(--color-rule);text-decoration:none;white-space:nowrap}
.map > a:hover{background:var(--color-gold-soft)}
.map > a svg{width:16px;height:16px;flex:none}
.map--tall .map__frame{height:min(60vh,460px)}

/* pie */
.foot{padding-block:var(--space-3xl) var(--space-xl);background:var(--color-pearl);border-top:var(--rule-gold) solid var(--color-gold)}
.foot__grid{display:grid;gap:var(--space-2xl);grid-template-columns:minmax(0,1fr)}
@media (min-width: 48rem){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 80rem){.foot__grid{grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,2fr) minmax(0,4fr)}}
.foot__logo{height:60px;width:auto}
.foot__slogan{font:700 var(--text-lg) var(--font-display);margin-top:var(--space-md)}
.foot__addr{font-size:var(--text-sm);color:var(--color-ink-2);margin-top:var(--space-sm);font-style:normal}
.stores{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.store{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:52px;padding:0 var(--space-md);border-radius:var(--radius-sm);border:var(--rule-hair) solid var(--color-ink);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out)}
.store:hover{background:var(--color-gold-soft)}
.store svg{width:22px;height:22px}
.store small{display:block;font-size:11px;color:var(--color-muted);line-height:1.1}
.store b{display:block;font:700 var(--text-sm)/1.1 var(--font-display)}
.store[aria-disabled="true"]{opacity:.55;pointer-events:none}
.foot .foot__h{font:700 var(--text-sm) var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--color-gold-text);margin:0 0 var(--space-sm)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.foot ul a{font-size:var(--text-sm);text-decoration:none;color:var(--color-ink-2);white-space:nowrap}
.foot ul a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}
.social{display:flex;gap:var(--space-xs);margin-top:var(--space-md)}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:var(--rule-hair) solid var(--color-rule);transition:background-color var(--dur-fast) var(--ease-out)}
.social a:hover{background:var(--color-gold-soft)}
.social svg{width:18px;height:18px}
.foot__legal{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule);display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);justify-content:space-between;font-size:var(--text-xs);color:var(--color-muted)}

/* aparición */
.reveal{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .reveal:not(.is-in){opacity:0;transform:translateY(12px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:120ms!important;scroll-behavior:auto!important}
  .js .reveal:not(.is-in){transform:none}
  .splash__pulse path{stroke-dashoffset:0}
  .splash__mark img,.splash__tag{opacity:1;transform:none}
}