/* Tipografía del manual de marca: Familjen Grotesk sustituye a Stavok Grotesque
   (misma familia grotesca, "a" de un piso, disponible en Google Fonts) para
   titulares; Montserrat para todo lo demás. */
:root{
  --f-display:"Familjen Grotesk",Montserrat,"Helvetica Neue",Arial,sans-serif;
  --f-body:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --f-ui:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --f-label:Montserrat,"Helvetica Neue",Arial,sans-serif;
}

:root{
  --ground:#FAFAFD; --surface:#FFFFFF; --tint:#EEEFFC; --tint-2:#F5F5FC;
  --ink:#241E6A; --ink-soft:#57548A; --ink-faint:#8C89B4;
  --accent:#5E69F6; --accent-deep:#241E6A; --accent-pale:#D4D8FF;
  --on-deep:#FFFFFF;
  --line:#E7E7F4; --line-strong:#D2D2EA;
  --dot:rgba(36,30,106,.10);
  --wa:#1FA855; --wa-ink:#FFFFFF;
  --cta:#241E6A; --cta-ink:#FFFFFF; --cta-hover:#5E69F6;
  --ok-bg:#E7F6EC; --ok-ink:#1F6B3D; --ok-line:#B6E0C4;
  --warn-bg:#EDEFFF; --warn-ink:#3A3560; --warn-line:#B9BFFF;
  --shadow:0 2px 4px rgba(36,30,106,.04), 0 14px 40px rgba(36,30,106,.07);
  --scrim:rgba(24,20,60,.55);
  --net-a:36,30,106; --net-b:94,105,246;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D0B1B; --surface:#171429; --tint:#1F1B3C; --tint-2:#1A1731;
    --ink:#F0EFFA; --ink-soft:#B2AFD0; --ink-faint:#807DA5;
    --accent:#98A0FF; --accent-deep:#C6C9FF; --accent-pale:#2E2A5C;
    --on-deep:#0D0B1B;
    --line:#2A2550; --line-strong:#3B3570;
    --dot:rgba(240,239,250,.10);
    --wa:#25D366; --wa-ink:#08210F;
    --cta:#C6C9FF; --cta-ink:#0D0B1B; --cta-hover:#98A0FF;
    --ok-bg:#132A1D; --ok-ink:#8ED6A8; --ok-line:#2A5138;
    --warn-bg:#221F48; --warn-ink:#C6C7E4; --warn-line:#3A3780;
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.4);
    --scrim:rgba(4,3,12,.72);
    --net-a:198,201,255; --net-b:152,160,255;
  }
}
:root[data-theme="dark"]{
  --ground:#0D0B1B; --surface:#171429; --tint:#1F1B3C; --tint-2:#1A1731;
  --ink:#F0EFFA; --ink-soft:#B2AFD0; --ink-faint:#807DA5;
  --accent:#98A0FF; --accent-deep:#C6C9FF; --accent-pale:#2E2A5C;
  --on-deep:#0D0B1B;
  --line:#2A2550; --line-strong:#3B3570;
  --dot:rgba(240,239,250,.10);
  --wa:#25D366; --wa-ink:#08210F;
  --cta:#C6C9FF; --cta-ink:#0D0B1B; --cta-hover:#98A0FF;
  --ok-bg:#132A1D; --ok-ink:#8ED6A8; --ok-line:#2A5138;
  --warn-bg:#221F48; --warn-ink:#C6C7E4; --warn-line:#3A3780;
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.4);
  --scrim:rgba(4,3,12,.72);
  --net-a:198,201,255; --net-b:152,160,255;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-body);margin:0;
  text-wrap:balance;letter-spacing:-.02em;line-height:1.14}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
input,select,button{font-family:inherit}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.stack-lg{display:flex;flex-direction:column;gap:36px}

.mono{font-family:var(--f-label)}
.eyebrow{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0}
h2{font-size:clamp(25px,3.2vw,36px);font-weight:700;letter-spacing:-.03em}
.lede{font-size:17.5px;line-height:1.62;color:var(--ink-soft);max-width:56ch}
.small{font-size:15.5px;color:var(--ink-soft)}
.tiny{font-size:13.5px;color:var(--ink-faint)}

/* ---------- announcement + draft ---------- */
.annbar{background:var(--accent-deep);color:var(--on-deep);overflow:hidden;height:40px;position:relative}
.annbar ul{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  animation:annRoll 12s cubic-bezier(.7,0,.3,1) infinite}
.annbar li{height:40px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:0 18px}
@keyframes annRoll{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-40px)}
  66%,94%{transform:translateY(-80px)}100%{transform:translateY(-120px)}}
.draft{background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--warn-line);
  font-size:13px;padding:9px 0}
.draft .wrap{display:flex;gap:10px;align-items:flex-start}
.draft b{font-family:var(--f-ui);font-weight:700}

/* ---------- nav ---------- */
.mast{position:sticky;top:0;z-index:45;background:var(--ground);border-bottom:1px solid var(--line)}
.mast .bar{max-width:1160px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;cursor:pointer;background:none;border:0;padding:0}
.mark{display:grid;grid-template-columns:repeat(2,9px);gap:3px}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--accent-deep);display:block;transition:transform .3s}
.mark i:nth-child(2),.mark i:nth-child(3){background:var(--accent)}
.logo:hover .mark i{transform:scale(1.16)}
.wordmark{font-family:var(--f-ui);font-weight:700;letter-spacing:.14em;font-size:13px;line-height:1;text-align:left;color:var(--ink)}
.wordmark small{display:block;font-size:7.5px;letter-spacing:.22em;color:var(--ink-faint);margin-top:3px;font-weight:500}

.nav{display:none;gap:2px;margin-left:auto}
.nav :is(button,a){position:relative;font-family:var(--f-ui);font-weight:600;font-size:13.5px;
  background:none;border:0;color:var(--ink-soft);padding:9px 11px;border-radius:9px;cursor:pointer;transition:color .15s}
.nav :is(button,a)::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.nav :is(button,a):hover{color:var(--ink)}
.nav :is(button,a):hover::after,.nav :is(button,a).active::after{transform:scaleX(1)}
.nav :is(button,a).active{color:var(--ink)}
.navtools{display:flex;align-items:center;gap:9px;margin-left:auto}
@media(min-width:1140px){.nav{display:flex}.navtools{margin-left:0}}

.statechip{font-family:var(--f-label);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-soft);
  background:var(--surface);cursor:pointer;white-space:nowrap}
.statechip.on{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
/* ---------- la cabecera dice qué hacer, no cómo te llamas ----------
   Antes había una sola píldora que decía "INVITADO" (un estado, no una
   acción: no dice qué hacer con él) y que al tocarla, con sesión abierta,
   lanzaba un confirm() del navegador para cerrarla. Ahora son las dos
   acciones de siempre, y con sesión abierta pasan a ser dos también. */
.authnav{display:flex;align-items:center;gap:6px}
.btn-plain{background:transparent;border-color:transparent;color:var(--ink-soft);
  padding-left:10px;padding-right:10px}
.btn-plain:hover{color:var(--accent);border-color:transparent;box-shadow:none}
@media(max-width:1139px){ #btnEntrar,#btnSalir{display:none} }
.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;
  border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);cursor:pointer;align-items:center}
.burger span{width:16px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger.x span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
@media(min-width:1140px){.burger{display:none}}
.drawer{display:none;border-top:1px solid var(--line);background:var(--surface)}
.drawer.open{display:block;animation:fade .2s ease both}
.drawer .wrap{padding:8px 24px 16px;display:flex;flex-direction:column}
.drawer :is(button,a){font-family:var(--f-ui);font-weight:600;font-size:16px;background:none;border:0;
  text-align:left;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer}
.drawer :is(button,a):last-of-type{border-bottom:0}
@media(min-width:1140px){.drawer{display:none!important}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- screens ---------- */
.screen{display:none;padding:56px 0 90px;min-height:60vh}
.screen.active{display:block}
.screen.enter{animation:screenIn .45s cubic-bezier(.2,.8,.25,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.screen-head{margin-bottom:34px}
.crumbs{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.crumbs .n{font-family:var(--f-label);font-size:12.5px;color:var(--accent)}
.crumbs .l{flex:1;height:1px;background:var(--line-strong)}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-ui);font-weight:600;font-size:15px;border-radius:999px;padding:16px 28px;
  border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;cursor:pointer;transition:transform .12s,background .15s,color .15s,border-color .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent-deep);color:var(--on-deep)}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-wa{background:var(--cta);color:var(--cta-ink)}
.btn-wa:hover{background:var(--cta-hover)}
.btn-sm{padding:11px 18px;font-size:13.5px}
.btn-xs{padding:9px 14px;font-size:12.5px}
.btn-full{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ---------- home ---------- */
.hero{position:relative;padding:26px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:34px}}
.hero h1{font-size:clamp(34px,6.8vw,54px);font-weight:700}
.hero h1 em{font-style:normal;color:var(--accent)}
.net{width:100%;aspect-ratio:1/.82;border-radius:20px;display:block}
.netwrap{position:relative}
.netwrap figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center}
.h-el{opacity:0;transform:translateY(16px);animation:heroIn .7s cubic-bezier(.2,.8,.25,1) both}
.h-el:nth-child(1){animation-delay:.05s}.h-el:nth-child(2){animation-delay:.13s}
.h-el:nth-child(3){animation-delay:.21s}.h-el:nth-child(4){animation-delay:.29s}
.h-el:nth-child(5){animation-delay:.37s}
@keyframes heroIn{to{opacity:1;transform:none}}

.rail{display:none}
@media(min-width:1180px){
  .rail{display:flex;flex-direction:column;gap:26px;position:fixed;left:26px;top:52%;transform:translateY(-50%);z-index:20}
  .rail button{background:none;border:0;display:flex;align-items:center;gap:10px;cursor:pointer;
    font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);transition:color .2s}
  .rail button:hover,.rail button.on{color:var(--accent)}
  .rail .num{border:1px solid var(--line-strong);border-radius:999px;padding:3px 7px}
  .rail button.on .num{border-color:var(--accent)}
}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint-2);
  margin-top:26px}
.strip .row{display:flex;gap:18px;align-items:flex-start;padding:20px 0}
.strip .idx{font-family:var(--f-ui);font-weight:700;font-size:26px;color:var(--accent);line-height:1}
.strip .date{font-family:var(--f-label);font-size:11px;letter-spacing:.12em;color:var(--ink-faint);
  text-transform:uppercase;white-space:nowrap}
.strip h4{font-family:var(--f-ui);font-weight:700;font-size:16px;margin:4px 0 4px}
.strip .swipe{margin-left:auto;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;
  color:var(--ink-faint);text-transform:uppercase;white-space:nowrap;align-self:center}
.strip .dots{display:flex;gap:6px;padding-bottom:16px}
.strip .dots i{width:16px;height:2px;background:var(--line-strong);border-radius:2px;cursor:pointer;display:block}
.strip .dots i.on{background:var(--accent)}

.tiles{display:grid;grid-template-columns:1fr;gap:14px;margin-top:38px}
@media(min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;text-align:left;
  cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s,border-color .2s}
.tile:hover{transform:translateY(-4px);border-color:var(--accent-pale);
  box-shadow:0 8px 16px rgba(36,30,106,.07),0 26px 56px rgba(36,30,106,.12)}
.tile h3{font-size:19px;font-weight:700}
.tile .go{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:auto;padding-top:10px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.std{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.std{grid-template-columns:1fr 1fr;gap:30px 34px}}
.std h3{font-size:18px;font-weight:600;margin-bottom:6px}
.std p{font-size:15.5px;color:var(--ink-soft)}
.pull{border-left:3px solid var(--accent);padding-left:22px;font-family:var(--f-ui);font-weight:600;
  font-size:clamp(19px,3.6vw,23px);line-height:1.35;letter-spacing:-.01em}

/* ---------- home: embudo a los tres ---------- */
.top3wrap{padding:64px 0 10px;display:flex;flex-direction:column;gap:30px}
.top3{display:grid;grid-template-columns:1fr;gap:18px;perspective:1200px}
@media(min-width:780px){.top3{grid-template-columns:repeat(3,1fr)}}
.t3{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:left;padding:0;
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .3s ease, border-color .3s ease}
.t3:hover{border-color:var(--accent-pale);box-shadow:0 10px 20px rgba(36,30,106,.08),0 34px 70px rgba(36,30,106,.16)}
.t3 .shot{position:relative;background:#EDF0FB;aspect-ratio:4/5;overflow:hidden}
.t3 .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .28s ease}
.t3 .shot img.out{opacity:0}
.t3 .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.t3 .rank{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.t3 h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.t3 .say{font-size:15.5px;color:var(--ink-soft)}
.t3 .doses{display:flex;flex-wrap:wrap;gap:5px}
.t3 .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:7px}
.t3 .price .from{font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.t3 .price b{font-family:var(--f-ui);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.t3 .price b.ask{font-family:var(--f-label);font-size:11px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.t3 .buy{margin-top:14px;display:flex;flex-direction:column;gap:8px}

.bigline{font-family:var(--f-ui);font-weight:700;font-size:clamp(22px,4.4vw,30px);line-height:1.28;
  letter-spacing:-.025em;max-width:22ch;border-left:3px solid var(--accent);padding-left:24px;margin-top:12px}

.band{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:64px 0;margin-top:56px}
.split{display:grid;grid-template-columns:1fr;gap:44px;padding-top:64px;padding-bottom:8px}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.split h2{font-size:clamp(24px,4.4vw,30px);margin:8px 0 12px}
.closer{padding:64px 0 20px}
.closer h2{max-width:20ch}

/* palabra por palabra */
.w{display:inline-block;opacity:0;transform:translateY(.5em);
  animation:wIn .55s cubic-bezier(.2,.8,.25,1) both}
@keyframes wIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.w{opacity:1;transform:none;animation:none}}

/* ---------- catalogue ---------- */
.cat-filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--f-ui);font-weight:600;font-size:12.5px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .15s}
.chip[aria-pressed="true"]{background:var(--accent-deep);color:var(--on-deep);border-color:var(--accent-deep)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(36,30,106,.04);
  display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;
  opacity:0;transform:translateY(14px);
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s,border-color .22s,opacity .5s ease}
.pcard.in{opacity:1;transform:none}
.pcard.in:hover{border-color:var(--accent-pale);
  box-shadow:0 6px 14px rgba(36,30,106,.06),0 24px 50px rgba(36,30,106,.10)}
.pcard .shot{position:relative;background:#EDF0FB;aspect-ratio:4/5;overflow:hidden}
.pcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .28s ease,transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pcard.in:hover .shot img{transform:scale(1.045)}
.pcard .shot img.out{opacity:0}
.shot.nopic::after,.pd-shot.nopic::after{content:"Foto pendiente";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--f-label);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pcard .body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
.pcard .cat{font-family:var(--f-label);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}

/* presentaciones: cambian la foto y el precio sin abrir la ficha */
.doses{display:flex;flex-wrap:wrap;gap:5px}
.dose{font-family:var(--f-ui);font-weight:600;font-size:11.5px;background:var(--accent-pale);
  color:var(--accent-deep);padding:4px 10px;border-radius:999px}
button.dose{border:1px solid transparent;cursor:pointer;background:var(--tint);color:var(--ink-soft);
  transition:background .18s,color .18s,border-color .18s}
button.dose:hover{border-color:var(--accent-pale);color:var(--accent-deep)}
button.dose[aria-pressed="true"]{background:var(--accent-pale);color:var(--accent-deep);border-color:var(--accent-pale)}
button.dose:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pcard .pline{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px}
.pcard .pval{font-family:var(--f-ui);font-weight:700;font-size:19px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.pcard .pval.ask{font-family:var(--f-label);font-size:11px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.stock{font-family:var(--f-label);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid}
.stock.ok{background:var(--tint);color:var(--accent-deep);border-color:var(--accent-pale)}
.stock.low{background:var(--surface);color:var(--ink-soft);border-color:var(--line-strong)}
.stock.order{background:var(--surface);color:var(--ink-faint);border-color:var(--line-strong)}
.stock.out{background:var(--tint-2);color:var(--ink-faint);border-color:var(--line-strong)}
.pcard .go{font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.pcard .go:hover{text-decoration:underline}


/* insignias sobre la foto: COA (todas) y Más pedido (destacados) */
.badge-coa,.badge-hot{position:absolute;z-index:3;top:12px;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-ui);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px 6px 8px;border-radius:999px;line-height:1;pointer-events:none;white-space:nowrap}
.badge-coa{right:12px;background:rgba(255,255,255,.92);color:var(--accent);border:1px solid rgba(94,105,246,.28);
  box-shadow:0 4px 14px -4px rgba(36,30,106,.25);backdrop-filter:blur(6px)}
.badge-coa svg{width:14px;height:14px}
.badge-hot{left:12px;background:var(--ink);color:#fff;box-shadow:0 6px 18px -6px rgba(36,30,106,.6);overflow:hidden}
.badge-hot svg{width:13px;height:13px;fill:#FFD166;animation:hotStar 2.4s ease-in-out infinite}
.badge-hot::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);animation:hotShine 3.2s ease-in-out .8s infinite}
@keyframes hotStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(12deg)}}
@keyframes hotShine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.pd-shot .badge-coa{top:14px;right:14px}.pd-shot .badge-hot{top:14px;left:14px}
.vialbtn .badge-coa{top:14px;right:14px}.vialbtn .badge-hot{top:14px;left:14px}
.t3 .badge-hot{font-size:11px}
@media (prefers-reduced-motion: reduce){.badge-hot svg,.badge-hot::after{animation:none}}

/* ficha */
.pd-shot{position:relative;aspect-ratio:3/4;max-width:290px;margin:0 auto 18px;border-radius:20px;
  overflow:hidden;background:#EDF0FB;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -18px rgba(36,30,106,.35);
  transform-style:preserve-3d;perspective:900px;animation:pdShotIn .7s cubic-bezier(.2,.8,.2,1) both}
.pd-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1);will-change:transform;
  animation:pdFloat 6.5s ease-in-out 1s infinite}
.pd-shot img.out{opacity:0;transform:scale(.965)}
.pd-shot::before{content:"";position:absolute;inset:auto 12% -22% 12%;height:38%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(94,105,246,.35),rgba(94,105,246,0));filter:blur(14px);pointer-events:none;z-index:1}
.pd-shot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,0) 62%);
  transform:translateX(-130%);opacity:0}
.pd-shot.sweep::after{animation:pdSweep 1.1s cubic-bezier(.2,.7,.2,1) both}
.pd-shot.tilt img{animation:none}
@keyframes pdShotIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pdSweep{from{transform:translateX(-130%);opacity:1}to{transform:translateX(130%);opacity:1}}
@keyframes pdRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pdTick{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#pdSheet>.eyebrow,#pdSheet>h3,#pdSheet>p.small,#pdSheet>.pd-doses,#pdSheet>.pd-head,#pdSheet>.opts{animation:pdRise .55s cubic-bezier(.2,.8,.2,1) both}
#pdSheet>.eyebrow{animation-delay:.12s}#pdSheet>h3{animation-delay:.16s}#pdSheet>p.small{animation-delay:.2s}
#pdSheet>.pd-doses{animation-delay:.24s}#pdSheet>.pd-head{animation-delay:.28s}#pdSheet>.opts{animation-delay:.32s}
.pd-price.tick,.pd-head .stock.tick{animation:pdTick .38s cubic-bezier(.2,.8,.2,1) both}
.pd-doses button.dose{transition:background .22s,color .22s,border-color .22s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.pd-doses button.dose:active{transform:scale(.94)}
.pd-doses button.dose[aria-pressed="true"]{box-shadow:0 6px 16px -6px rgba(36,30,106,.45)}
@media (prefers-reduced-motion: reduce){
  .pd-shot,.pd-shot img,#pdSheet>*,.pd-price.tick,.pd-head .stock.tick{animation:none!important}
  .pd-shot.sweep::after{animation:none}.pcard.in:hover .shot img{transform:none}}
.pd-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.pd-price{font-family:var(--f-ui);font-weight:700;font-size:26px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.pd-price.ask{font-family:var(--f-label);font-size:12.5px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.pd-doses{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
.pd-doses button.dose{font-size:13px;padding:8px 15px}

.note{background:var(--tint);color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:12px;
  padding:14px 16px;font-size:14.5px}
.askprice{font-family:var(--f-label);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft)}

/* ---------- calculadora (réplica del bloque de código de Squarespace) ---------- */
.pcalc{
  --pk-ground:#F4F5FA; --pk-white:#FFFFFF; --pk-card:#F1F2FA;
  --pk-ink:#241E6A; --pk-ink2:#3A3560;
  --pk-accent:#5E69F6; --pk-accent2:#8E8CF5;
  --pk-lav:#D4D8FF; --pk-lavsoft:#EDEFFF;
  --pk-muted:#7A7C99; --pk-hair:#E4E6F2;
  --pk-wa:#127F3D; --pk-warn:#A8231A; --pk-warnbg:#FBEDEB;
  --pk-cta:#241E6A; --pk-cta-ink:#FFFFFF; --pk-cta-hover:#5E69F6;
  background:var(--pk-ground); color:var(--pk-ink2);
  font-family:var(--f-body);
  font-size:16px; line-height:1.55; margin:-56px 0 -90px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pcalc{
    --pk-ground:#0D0B1B; --pk-white:#171429; --pk-card:#1B1836;
    --pk-ink:#EDEEFC; --pk-ink2:#C6C7E4;
    --pk-accent:#8E96FF; --pk-accent2:#A6A2FF;
    --pk-lav:#3A3780; --pk-lavsoft:#221F48;
    --pk-muted:#9092BE; --pk-hair:#2B2755;
    --pk-wa:#2FA45F; --pk-warn:#FF9184; --pk-warnbg:#33191A;
    --pk-cta:#C6C9FF; --pk-cta-ink:#0D0B1B; --pk-cta-hover:#98A0FF;
  }
}
:root[data-theme="dark"] .pcalc{
  --pk-ground:#0D0B1B; --pk-white:#171429; --pk-card:#1B1836;
  --pk-ink:#EDEEFC; --pk-ink2:#C6C7E4;
  --pk-accent:#8E96FF; --pk-accent2:#A6A2FF;
  --pk-lav:#3A3780; --pk-lavsoft:#221F48;
  --pk-muted:#9092BE; --pk-hair:#2B2755;
  --pk-wa:#2FA45F; --pk-warn:#FF9184; --pk-warnbg:#33191A;
  --pk-cta:#C6C9FF; --pk-cta-ink:#0D0B1B; --pk-cta-hover:#98A0FF;
}
.pcalc h1,.pcalc h3{margin:0;color:var(--pk-ink);letter-spacing:-.03em;font-weight:800}
.pcalc p{margin:0}
.pcalc a{color:var(--pk-accent);text-decoration:none;font-weight:600}
.pcalc button,.pcalc input{font:inherit;color:inherit}
.pcalc .mono{font-family:var(--f-label)}
.pcalc .shell{max-width:580px;margin:0 auto;padding:22px 18px 60px}
.pcalc .top{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:24px}
.pcalc .top .mark{display:flex;align-items:center;gap:9px}
.pcalc .top .mark span{font-weight:800;font-size:14px;letter-spacing:.2em;color:var(--pk-ink)}
.pcalc .top .sub{font-size:16px;font-weight:600;color:var(--pk-ink)}
.pcalc .title{margin-bottom:18px}
.pcalc .title h1{font-size:clamp(34px,9vw,44px);line-height:1}
.pcalc .title .lead{font-size:clamp(18px,4.6vw,22px);color:var(--pk-muted);font-weight:500;letter-spacing:-.02em}
.pcalc .search{position:relative;margin-bottom:14px}
.pcalc .searchbox{display:flex;align-items:center;gap:10px;background:var(--pk-white);border-radius:16px;
  padding:14px 16px;border:1.5px solid var(--pk-hair)}
.pcalc .searchbox:focus-within{border-color:var(--pk-accent)}
.pcalc .searchbox svg{flex:none;color:var(--pk-muted)}
.pcalc .searchbox input{flex:1;border:0;background:transparent;font-size:15.5px;font-weight:500;min-width:0;outline:none;color:var(--pk-ink)}
.pcalc .searchbox input::placeholder{color:var(--pk-muted);font-weight:400}
.pcalc .searchbox .clr{color:var(--pk-muted);border:0;background:none;cursor:pointer;font-size:19px;line-height:1;padding:0 2px}
.pcalc .results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--pk-white);border-radius:16px;
  border:1.5px solid var(--pk-hair);overflow:hidden;z-index:20;max-height:290px;overflow-y:auto;display:none;
  box-shadow:0 12px 30px rgba(36,30,106,.10)}
.pcalc .results.on{display:block}
.pcalc .results button{display:flex;width:100%;align-items:center;gap:12px;padding:13px 16px;border:0;background:none;
  cursor:pointer;text-align:left;border-bottom:1px solid var(--pk-hair)}
.pcalc .results button:last-child{border-bottom:0}
.pcalc .results button:hover{background:var(--pk-lavsoft)}
.pcalc .results .nm{font-weight:700;color:var(--pk-ink);font-size:15px;letter-spacing:-.01em}
.pcalc .results .sz{font-family:var(--f-label);font-size:11px;color:var(--pk-muted);display:block;margin-top:2px}
.pcalc .results .pz{margin-left:auto;font-family:var(--f-label);font-size:13px;color:var(--pk-ink2);white-space:nowrap}
.pcalc .picked{background:var(--pk-lavsoft);border-radius:16px;padding:14px 16px;margin-bottom:16px;display:none}
.pcalc .picked.on{display:block}
.pcalc .picked .r1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pcalc .picked .r1 b{font-size:17px;color:var(--pk-ink);letter-spacing:-.02em}
.pcalc .picked .r1 span{margin-left:auto;font-family:var(--f-label);font-size:13.5px;color:var(--pk-ink2)}
.pcalc .picked .szs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pcalc .szbtn{border:1.5px solid var(--pk-lav);background:transparent;color:var(--pk-accent);border-radius:999px;
  padding:7px 14px;font-family:var(--f-label);font-size:12px;font-weight:600;cursor:pointer}
.pcalc .szbtn.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}
.pcalc .viz{margin:26px 0 4px}
.pcalc .syringe{width:100%;height:auto;display:block;overflow:visible}
.pcalc #liquid{transform-box:fill-box;transform-origin:right center;transform:scaleX(.4);
  transition:transform .5s cubic-bezier(.22,.75,.2,1)}
.pcalc .sy-tick{stroke:var(--pk-ink);stroke-width:1.6}
.pcalc .sy-lab{fill:var(--pk-ink);font-family:var(--f-label);font-size:9.5px;opacity:.75}
.pcalc .readout{text-align:center;margin-top:18px}
.pcalc .readout .lbl{font-size:14.5px;color:var(--pk-muted)}
.pcalc .readout .big{font-size:clamp(46px,13vw,62px);font-weight:800;color:var(--pk-ink);letter-spacing:-.045em;line-height:1.05}
.pcalc .readout .big em{font-style:normal;font-size:.40em;font-weight:600;color:var(--pk-muted);letter-spacing:-.02em;margin-left:8px}
.pcalc .readout .pair{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:8px}
.pcalc .readout .pair div{font-size:14px;color:var(--pk-muted)}
.pcalc .readout .pair b{font-family:var(--f-label);font-size:19px;color:var(--pk-ink);font-weight:600;letter-spacing:-.02em}
.pcalc .pillnote{display:inline-block;margin-top:14px;background:var(--pk-card);border-radius:999px;padding:9px 18px;
  font-size:14px;color:var(--pk-ink2);font-weight:500}
.pcalc .pillnote.warn{background:var(--pk-warnbg);color:var(--pk-warn);font-weight:600}
.pcalc .rows{margin-top:28px;border-top:1px solid var(--pk-hair)}
.pcalc .row{padding:15px 2px;border-bottom:1px solid var(--pk-hair)}
.pcalc .row .line{display:flex;align-items:center;gap:12px}
.pcalc .row label{font-family:var(--f-label);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pk-ink2);font-weight:600}
.pcalc .numwrap{margin-left:auto;display:flex;align-items:center;gap:2px;background:var(--pk-card);border-radius:999px;
  padding:4px;border:1.5px solid transparent}
.pcalc .numwrap:focus-within{border-color:var(--pk-accent);background:var(--pk-white)}
.pcalc .row.hero .numwrap{background:var(--pk-lavsoft)}
.pcalc .numwrap button{width:32px;height:32px;border-radius:50%;border:0;background:none;cursor:pointer;
  color:var(--pk-ink);font-size:17px;line-height:1}
.pcalc .numwrap button:hover{background:var(--pk-white)}
.pcalc .numwrap input{width:64px;border:0;background:transparent;text-align:center;font-weight:700;font-size:16px;
  color:var(--pk-ink);letter-spacing:-.02em;outline:none;-moz-appearance:textfield;appearance:textfield}
.pcalc .numwrap input::-webkit-outer-spin-button,.pcalc .numwrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcalc .row.hero .numwrap input{color:var(--pk-accent)}
.pcalc .unit{font-family:var(--f-label);font-size:12px;color:var(--pk-muted);padding-right:10px;font-weight:500}
.pcalc .quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pcalc .qb{border:1px solid var(--pk-hair);background:transparent;color:var(--pk-muted);border-radius:999px;
  padding:5px 11px;font-family:var(--f-label);font-size:11px;cursor:pointer}
.pcalc .qb:hover{border-color:var(--pk-accent);color:var(--pk-accent)}
.pcalc .qb.on{background:var(--pk-ink);border-color:var(--pk-ink);color:var(--pk-ground)}
.pcalc .tile{background:var(--pk-card);border-radius:18px;padding:16px 18px;margin-top:16px}
.pcalc details.tile summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;font-weight:700;
  color:var(--pk-ink);font-size:15px}
.pcalc details.tile summary::-webkit-details-marker{display:none}
.pcalc details.tile summary .car{margin-left:auto;color:var(--pk-muted);transition:transform .2s}
.pcalc details.tile[open] summary .car{transform:rotate(180deg)}
.pcalc details.tile .body{padding-top:12px;font-size:14.5px;line-height:1.6}
.pcalc details.tile .body ol{margin:10px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:7px}
.pcalc .disc{margin-top:16px;font-size:14px;color:var(--pk-muted);line-height:1.5}
.pcalc .mix{background:var(--pk-card);border-radius:20px;padding:18px;margin-top:22px}
.pcalc .mix h3{font-family:var(--f-label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pk-accent);font-weight:600;margin-bottom:12px}
.pcalc .mix .r{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--pk-hair)}
.pcalc .mix .r:last-of-type{border-bottom:0}
.pcalc .mix .r span:first-child{font-family:var(--f-label);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pk-ink2);font-weight:600}
.pcalc .mix .r .v{margin-left:auto;color:var(--pk-muted);font-weight:600;font-size:15px}
.pcalc .mix .note{font-size:13.5px;color:var(--pk-muted);line-height:1.55;margin-top:12px}
.pcalc .cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.pcalc .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:16px 22px;
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;border:0;cursor:pointer}
.pcalc .btn.wa{background:var(--pk-cta);color:var(--pk-cta-ink)}
.pcalc .btn.wa:hover{background:var(--pk-cta-hover);filter:none}
.pcalc .btn.ghost{background:transparent;border:1.5px solid var(--pk-hair);color:var(--pk-ink)}
.pcalc .btn.ghost:hover{background:var(--pk-card)}
.pcalc .foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--pk-hair);font-size:12px;
  color:var(--pk-muted);line-height:1.6}
@media (prefers-reduced-motion: reduce){.pcalc #liquid{transition:none}}

/* ---------- steps / locked ---------- */
.step{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:6px}
.stepnum{font-family:var(--f-label);font-size:12.5px;color:var(--on-deep);background:var(--accent);
  border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:20px;font-weight:600;margin-bottom:6px}
.step p{font-size:16px;color:var(--ink-soft)}
.tag{display:inline-block;font-family:var(--f-label);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;background:var(--accent-pale);color:var(--accent-deep);padding:5px 10px;border-radius:999px}
.locked{border:1px dashed var(--line-strong);border-radius:18px;padding:26px;background:var(--tint-2)}
.locked h3{font-size:19px;font-weight:600;margin-bottom:6px}
.lockrow{display:flex;align-items:center;gap:9px;font-family:var(--f-label);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}

details{border-top:1px solid var(--line);padding:17px 0}
details:first-of-type{border-top:0}
summary{font-family:var(--f-ui);font-weight:600;font-size:17px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-weight:500;font-size:21px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--ink-soft);font-size:16px;max-width:62ch}

/* ---------- legal ---------- */
.legalnav{display:flex;flex-wrap:wrap;gap:8px}
.legalnav button{font-family:var(--f-label);font-size:11px;letter-spacing:.06em;padding:8px 13px;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .15s}
.legalnav button:hover{border-color:var(--accent);color:var(--accent)}
.legal{max-width:74ch}
.legal h3{font-size:20px;font-weight:700;margin:38px 0 12px;scroll-margin-top:96px;padding-top:22px;border-top:1px solid var(--line)}
.legal h3:first-of-type{margin-top:8px;border-top:0;padding-top:0}
.legal p{font-size:16px;color:var(--ink-soft);margin-bottom:12px}
.legal p strong{color:var(--ink)}
.legal a{color:var(--accent)}
.warnbox{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:14px 16px;
  color:var(--warn-ink)!important}
.warnbox strong{color:var(--warn-ink)!important}
.pend{color:var(--ink-soft);font-size:16px;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* ---------- footer ---------- */
footer{padding:52px 0 120px;background:var(--tint-2);border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px}
.fgrid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px}}
.fbrand .small{max-width:34ch}
.ruo{display:inline-block;margin-top:14px;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--accent-pale);color:var(--accent-deep);padding:6px 12px;border-radius:999px}
.fcol h4{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin-bottom:12px}
.fcol :is(button,a){display:block;background:none;border:0;padding:5px 0;color:var(--ink-soft);font-size:14.5px;
  text-align:left;cursor:pointer;transition:color .15s}
.fcol :is(button,a):hover{color:var(--accent)}
.fcontact{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:640px){.fcontact{grid-template-columns:repeat(3,1fr)}}
.flabel{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.flink{font-family:var(--f-ui);font-weight:600;font-size:16px;color:var(--ink);background:none;border:0;
  padding:0;text-align:left;cursor:pointer;text-decoration:none;display:inline-block}
button.flink:hover,a.flink:hover{color:var(--accent)}
.fid{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:82ch}
.fcopy :is(button,a){background:none;border:0;color:var(--ink-faint);text-decoration:underline;cursor:pointer;font-size:13.5px;padding:0}
.fcopy :is(button,a):hover{color:var(--accent)}

/* ---------- floating ---------- */
.dock{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wa-fab{display:flex;align-items:center;gap:10px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:999px;
  padding:15px 22px;font-family:var(--f-ui);font-weight:700;font-size:14.5px;cursor:pointer;
  box-shadow:0 12px 34px rgba(36,30,106,.26)}
.wa-fab:hover{background:var(--cta-hover)}
.ai-fab{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:999px;padding:11px 17px;font-family:var(--f-ui);font-weight:600;font-size:13px;cursor:pointer;box-shadow:var(--shadow)}
.ai-fab:hover{border-color:var(--accent);color:var(--accent)}
.ai-panel{width:min(330px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(36,30,106,.22);padding:20px;display:none}
.ai-panel.open{display:block;animation:rise .22s ease both}
.ai-panel h4{font-size:16px;font-weight:700;margin-bottom:6px}
.srcline{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);margin-top:10px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:70;background:var(--accent-deep);
  color:var(--on-deep);border-radius:14px;padding:14px 18px;max-width:min(460px,calc(100vw - 32px));font-size:14.5px;
  box-shadow:0 16px 44px rgba(36,30,106,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- sheets ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:60;background:var(--scrim);display:none;align-items:flex-end;justify-content:center}
.sheet-wrap.open{display:flex}
.sheet{background:var(--ground);width:100%;max-width:540px;border-radius:24px 24px 0 0;
  padding:24px 24px calc(26px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto;
  animation:sheetIn .3s cubic-bezier(.2,.8,.25,1) both}
@media(min-width:560px){.sheet-wrap{align-items:center;padding:24px}.sheet{border-radius:24px}}
@keyframes sheetIn{from{transform:translateY(20px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.sheet-close{background:none;border:0;color:var(--ink-faint);font-size:22px;cursor:pointer;line-height:1;padding:4px 6px;float:right}
.sheet{position:relative}
.obx{position:absolute;top:12px;right:12px;float:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-faint);background:transparent;border:0;cursor:pointer;transition:background .18s,color .18s;z-index:2}
.obx:hover{background:var(--line);color:var(--ink)}
.obx:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sheet .ob-bar{margin-right:40px}
.sheet>h3:first-child,.sheet>.countdown:first-child{padding-right:40px}
.ob-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:18px}
.ob-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .35s ease}
.sheet h3{font-size:23px;font-weight:700;margin-bottom:8px}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.opt{text-align:left;font-family:var(--f-body);font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;transition:all .15s}
.opt:hover{border-color:var(--accent);background:var(--accent-pale)}
.inp{width:100%;font-family:var(--f-body);font-size:16px;padding:15px 17px;border:1px solid var(--line-strong);
  border-radius:13px;background:var(--surface);color:var(--ink)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.inp::placeholder{color:var(--ink-faint);opacity:1}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);margin-top:14px;cursor:pointer}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.countdown{font-family:var(--f-label);font-size:12.5px;letter-spacing:.1em;background:var(--accent-pale);
  color:var(--accent-deep);padding:7px 13px;border-radius:999px;display:inline-block}
.legalitem{border-top:1px solid var(--line)}
.legalitem:first-of-type{border-top:0}
.legalitem>summary{display:flex;gap:12px;align-items:flex-start;padding:13px 0;cursor:pointer;list-style:none;
  transition:opacity .15s}
.legalitem>summary::-webkit-details-marker{display:none}
.legalitem>summary::marker{content:""}
.legalitem>summary:hover{opacity:.72}
.legalitem>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.legalitem .li-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.legalitem .li-h{font-family:var(--f-ui);font-size:15.5px;font-weight:600;color:var(--ink)}
.legalitem .li-t .small{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.legalitem .li-x{flex:none;display:flex;align-items:center;padding-top:3px}
.legalitem .li-read{font-family:var(--f-label);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.legalitem[open]>summary .li-read{display:none}
.legalitem>summary::after{align-self:flex-start;margin-top:-2px}
.legalitem[open]>summary{padding-bottom:6px}
.li-b{padding:2px 0 16px 34px;animation:liOpen .28s ease both}
@keyframes liOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.li-b p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin-bottom:10px}
.li-b p:last-child{margin-bottom:0}
.li-b strong{color:var(--ink)}
.li-b a{color:var(--accent)}
.legalacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.legalall{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--tint);border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;
  padding:9px 14px;cursor:pointer;transition:all .18s}
.legalall:hover{border-color:var(--accent);color:var(--accent)}
.legalall.ghost{background:none;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){ .li-b{animation:none} }
.legalitem .dot{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12px;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink);margin-top:2px}
.skiplink{background:none;border:0;color:var(--ink-faint);font-size:14.5px;text-decoration:underline;cursor:pointer;padding:10px 0;margin-top:6px}
.varrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.spec{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.spec span:first-child{color:var(--ink-faint)}

.rev{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .rev,.h-el,.pcard{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* El anillo de foco de arriba tambien imponia border-radius:4px, asi que
   cualquier campo enfocado perdia sus esquinas redondas y quedaba cuadrado al
   lado de los que no lo estaban. Se veia roto. Aqui se le devuelve el radio
   real a los campos y botones que ya tienen el suyo. */
.inp:focus-visible,.sel:focus-visible,.scanmeta:focus-visible{border-radius:13px}
.btn:focus-visible{border-radius:999px}
.opt:focus-visible{border-radius:13px}
.fecharow .sel:focus-visible{border-radius:13px}

/* ================= PULIDO: espaciado, hover y movimiento ================= */

/* el aire de arriba estaba de más */
.mast .bar{padding-top:11px;padding-bottom:11px}
.screen{padding:22px 0 100px}
.hero{padding:4px 0 46px}
.hero-grid{align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:40px}}
.hero h1{font-size:clamp(36px,5.4vw,60px);line-height:1.04;letter-spacing:-.035em}
.net{aspect-ratio:1/.92}
.top3wrap{padding-top:52px}

/* barra de progreso de lectura */
.prog{position:fixed;left:0;top:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  transition:width .12s linear;pointer-events:none}

/* --- todo lo que se toca, crece un poco --- */
.btn{transition:transform .26s cubic-bezier(.34,1.4,.64,1),box-shadow .26s ease,
  background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px) scale(1.035)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary:hover{box-shadow:0 12px 28px rgba(94,105,246,.34)}
.btn-wa:hover{box-shadow:0 12px 28px rgba(36,30,106,.28)}
.btn-ghost:hover{box-shadow:0 10px 22px rgba(36,30,106,.10)}
.pcalc .btn{transition:transform .26s cubic-bezier(.34,1.4,.64,1),box-shadow .26s,filter .18s}
.pcalc .btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 26px rgba(94,105,246,.32)}
.pcalc .btn.ghost:hover{box-shadow:0 10px 22px rgba(36,30,106,.10)}

.nav :is(button,a){transition:color .15s ease,transform .2s cubic-bezier(.34,1.4,.64,1)}
.nav :is(button,a):hover{transform:translateY(-1px)}
.statechip{transition:transform .22s cubic-bezier(.34,1.4,.64,1),background .15s,color .15s,border-color .15s}
.statechip:hover{transform:scale(1.05);border-color:var(--accent);color:var(--accent)}
.burger{transition:transform .2s cubic-bezier(.34,1.4,.64,1),border-color .15s}
.burger:hover{transform:scale(1.06);border-color:var(--accent)}

.chip{transition:all .2s cubic-bezier(.34,1.4,.64,1)}
.chip:hover{transform:translateY(-2px) scale(1.05);border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]:hover{color:var(--on-deep)}
.pcalc .qb,.pcalc .szbtn{transition:all .2s cubic-bezier(.34,1.4,.64,1)}
.pcalc .qb:hover,.pcalc .szbtn:hover{transform:translateY(-2px) scale(1.06)}
.pcalc .numwrap button{transition:transform .2s cubic-bezier(.34,1.4,.64,1),background .15s}
.pcalc .numwrap button:hover{transform:scale(1.14)}
.legalnav button{transition:all .2s cubic-bezier(.34,1.4,.64,1)}
.legalnav button:hover{transform:translateY(-2px) scale(1.04)}
.opt{transition:all .2s ease}
.opt:hover{transform:translateX(4px)}
.fcol :is(button,a){transition:color .15s ease,transform .2s ease}
.fcol :is(button,a):hover{transform:translateX(4px)}
.flink{transition:color .15s ease,transform .2s cubic-bezier(.34,1.4,.64,1)}
button.flink:hover,a.flink:hover{transform:translateX(3px)}
.wa-fab,.ai-fab{transition:transform .26s cubic-bezier(.34,1.4,.64,1),box-shadow .26s ease,filter .18s}
.wa-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 42px rgba(36,30,106,.35)}
.ai-fab:hover{transform:translateY(-2px) scale(1.05)}
.tile .go{display:inline-block;transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.tile:hover .go{transform:translateX(6px)}
.pcard .go{display:inline-block;transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.pcard:hover .go{transform:translateX(5px)}
.t3 .buy .btn:hover{transform:translateY(-2px) scale(1.04)}
summary{transition:color .15s ease}
summary:hover{color:var(--accent)}
details summary::after{transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
details:hover summary::after{transform:scale(1.25)}

/* --- movimiento al recorrer --- */
.screen.enter{animation:screenIn .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(20px) scale(.995)}to{opacity:1;transform:none}}

h2{position:relative}
.screen-head h2::after,.band h2::after{content:"";display:block;height:2px;width:0;margin-top:14px;
  background:var(--accent);border-radius:2px;transition:width .8s cubic-bezier(.2,.85,.25,1) .15s}
.screen-head.lit h2::after,.band .rev.in h2::after{width:56px}

.netwrap{will-change:transform}
.bigline{transition:transform .6s cubic-bezier(.2,.85,.25,1)}

@media (prefers-reduced-motion: reduce){
  .prog{display:none}
  .btn:hover,.chip:hover,.wa-fab:hover,.ai-fab:hover,.statechip:hover,
  .pcalc .btn:hover,.pcalc .qb:hover,.pcalc .szbtn:hover{transform:none!important}
  .screen.enter{animation:none}
  .screen-head h2::after,.band h2::after{transition:none;width:56px}
}


/* marquesina */
.ticker{background:var(--accent-deep);color:var(--on-deep);overflow:hidden;padding:14px 0;margin-top:10px}
.ticker-track{display:flex;gap:44px;width:max-content;animation:slide 30s linear infinite}
.ticker span{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}

/* el riel solo cuando de verdad hay margen */
@media(min-width:1180px) and (max-width:1439px){.rail{display:none}}
@media(min-width:1440px){.rail{display:flex;left:calc((100vw - 960px)/2 - 176px)}}

/* sello RUO: sello, no burbuja */
.ruo{display:inline-flex;align-items:flex-start;gap:10px;margin-top:18px;max-width:33ch;
  background:var(--tint);color:var(--ink-soft);
  border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:4px 12px 12px 4px;padding:11px 14px;
  font-family:var(--f-label);font-size:10px;letter-spacing:.11em;
  line-height:1.65;text-transform:uppercase;text-align:left}
.ruo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:5px}
.fbrand .small{max-width:32ch;font-size:15px}

/* sello RUO a lo ancho */
.ruo{display:block;margin-top:34px;max-width:none;width:100%;
  background:none;border:0;border-radius:0;padding:26px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--f-label);font-size:11px;letter-spacing:.12em;
  line-height:1.6;text-transform:uppercase;color:var(--ink-faint)}
.ruo .dot{display:none}
.ruo::before{content:none}
.fcontact{margin-top:22px}
@media(min-width:980px){.fgrid{grid-template-columns:1.7fr 1fr 1.15fr .95fr 1.15fr}}

@media(max-width:640px){
  .ruo{align-items:flex-start;font-size:9.5px;letter-spacing:.1em;margin-top:26px}
  .ruo .dot{margin-top:5px}
}

/* ================= escena 1: el frasco ================= */
.stage{position:relative;aspect-ratio:1/.98;min-height:340px;display:block;perspective:900px}
.stage .net{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
.stage .orbit{position:absolute;left:50%;top:46%;width:min(74%,360px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);border:1px dashed var(--line-strong);border-radius:50%;
  animation:spin 46s linear infinite;opacity:.7}
.stage .orbit::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-pale)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.stage .glow{position:absolute;left:50%;top:47%;width:min(66%,320px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,var(--accent-pale) 0%,transparent 68%);
  filter:blur(6px);animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.07)}}

.vialbtn{position:absolute;left:50%;top:47%;width:min(70%,340px);transform:translate(-50%,-50%);
  background:none;border:0;padding:0;cursor:pointer;transform-style:preserve-3d;
  filter:drop-shadow(0 26px 34px rgba(36,30,106,.24));
  animation:float 6.5s ease-in-out infinite}
.vialbtn img{width:100%;height:auto;border-radius:18px;display:block;transition:transform .35s cubic-bezier(.2,.8,.25,1)}
.vialbtn:hover img{transform:scale(1.035)}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-14px}}

.hcard-wrap{position:absolute;right:0;bottom:6%;width:min(74%,244px);will-change:transform;
  transition:transform .35s cubic-bezier(.2,.8,.25,1)}
.hcard{position:relative;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:15px 16px;box-shadow:0 16px 44px rgba(36,30,106,.18);
  display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(16px) scale(.96)}
.hcard.in{animation:cardIn .7s cubic-bezier(.2,.9,.25,1) both, bob 7s ease-in-out 1s infinite}
@keyframes cardIn{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{margin-bottom:0}50%{margin-bottom:9px}}
.hc-top{display:flex;align-items:center;gap:7px;font-family:var(--f-label);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.hc-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-ink);flex:none;position:relative}
.hc-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ok-ink);
  opacity:.5;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}
.hc-stock{color:var(--ok-ink)}
.hc-lote{margin-left:auto}
.hc-name{font-family:var(--f-ui);font-weight:600;font-size:15.5px;color:var(--ink)}
.hc-name b{font-weight:700}
.hc-price{font-size:12.5px;color:var(--ink-faint);font-family:var(--f-label);letter-spacing:.04em}
.hc-price b{font-family:var(--f-ui);font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-left:4px}
.hc-cta{margin-top:4px;width:100%}
.stagecap{position:absolute;left:0;right:0;bottom:-6px;text-align:center}

@media(max-width:859px){
  .stage{aspect-ratio:1/.88;min-height:300px;margin-top:6px}
  .hcard-wrap{right:auto;left:0;bottom:2%;width:min(78%,228px)}
}
@media (prefers-reduced-motion: reduce){
  .stage .orbit,.stage .glow,.vialbtn,.hcard.in,.hc-dot::after{animation:none!important}
  .hcard{opacity:1;transform:none}
}

/* el frasco como foto enmarcada, no como recorte */
.vialbtn{width:min(58%,272px);top:45%}
.vialbtn img{aspect-ratio:4/5;object-fit:cover;object-position:50% 46%;border-radius:20px;
  border:1px solid var(--line);background:#EFEFF2;box-shadow:0 2px 0 rgba(255,255,255,.6) inset}
.vialbtn::after{content:"RETATRUTIDA · LOTE DOCUMENTADO";position:absolute;left:50%;top:-24px;
  transform:translateX(-50%);font-family:var(--f-label);font-size:10px;letter-spacing:.18em;
  color:var(--ink-faint);white-space:nowrap}
.hcard-wrap{bottom:2%;right:-2%}
@media(max-width:859px){.vialbtn{width:min(62%,240px)}.hcard-wrap{right:auto;left:-2%;bottom:0}}

/* ---------- el hero no debe poder arrastrarse en horizontal ----------
   Medido entre 860 y 1150 px: la página tenía 1066 px de ancho con 1024 de
   pantalla. Dos culpables: el lienzo de la red, que mide 142 % a propósito
   para sangrar, y la tarjeta de stock, que sobresale un 2 %. El lienzo es
   decorativo y se recorta contra el borde de la pantalla; la tarjeta lleva
   precio y botón, así que en vez de recortarla la meto dentro.
   overflow-x:clip y no hidden: clip no crea contenedor de scroll, así que
   no rompe ningún position:sticky de la página. */
#s-inicio{overflow-x:clip}
@media(min-width:860px) and (max-width:1000px){ .hcard-wrap{right:0} }

/* La disponibilidad del hero era el último verde que quedaba fuera de
   WhatsApp. En el catálogo "Disponible" ya va en índigo (.stock.ok);
   esto lo pone de acuerdo. */
.hc-dot{background:var(--accent-deep)}
.hc-dot::after{border-color:var(--accent-deep)}
.hc-stock{color:var(--accent-deep)}

/* ================= perfil ================= */
/* Sin verdes: el perfil vive en la paleta de marca. El verde queda solo
   para WhatsApp, que es de otra marca y por eso se distingue. */
.profile{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.pcol{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(min-width:1000px){
  .profile{grid-template-columns:1.06fr .94fr;gap:18px}
  .p-wide{grid-column:1 / -1}
}
.profile.locked-out{display:none}

/* cabecera */
.phead{grid-column:1 / -1;display:flex;align-items:center;gap:15px;padding:2px 2px 2px}
.pav{width:46px;height:46px;border-radius:14px;background:var(--accent-deep);color:var(--on-deep);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);
  font-weight:700;font-size:18px;flex:none}
.pmeta{min-width:0}
.pmeta h3{font-size:21px;font-weight:700;margin:2px 0 2px;letter-spacing:-.015em}
.pdemo{margin-left:auto;font-family:var(--f-label);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line-strong);
  border-radius:999px;padding:5px 11px;white-space:nowrap;flex:none}
.pstreak{text-align:right;display:none;flex:none;padding-left:6px}
.pstreak.on{display:block}
.pstreak b{display:block;font-family:var(--f-ui);font-weight:700;font-size:22px;color:var(--ink);line-height:1}
.pstreak span{font-family:var(--f-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* tarjetas del perfil: más contenidas que las del sitio */
.profile .card{padding:20px 20px 22px;border-radius:18px;box-shadow:0 1px 2px rgba(36,30,106,.04)}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cardhead h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cardhead .small{color:var(--ink-faint);font-size:13px}

/* próxima dosis */
.nextdose{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--surface) 0%,var(--tint-2) 100%)}
.nd-ring{position:relative;width:104px;height:104px;flex:none}
.nd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.nd-track{fill:none;stroke:var(--line);stroke-width:7}
.nd-fill{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.85,.25,1)}
.nd-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.nd-center b{font-family:var(--f-ui);font-weight:700;font-size:27px;letter-spacing:-.03em;line-height:1}
.nd-center span{font-family:var(--f-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.nd-body{flex:1;min-width:200px}
.nd-body h3{font-size:19px;font-weight:700;margin:3px 0 4px;letter-spacing:-.015em}
.logtick{width:0;height:0;overflow:hidden;display:inline-block}
.btn.done .logtick{width:15px;height:15px;overflow:visible;position:relative}
.btn.done .logtick::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;animation:tickIn .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tickIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.btn.done{background:var(--accent-deep)!important;color:var(--on-deep)!important}
.pulsering{position:absolute;inset:-6px;border-radius:999px;border:1.5px solid var(--accent);opacity:0;pointer-events:none}
.pulsering.go{animation:pulseOut .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes pulseOut{0%{transform:scale(.86);opacity:.6}100%{transform:scale(1.3);opacity:0}}

/* semana */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.wd .dot{width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden;position:relative;
  background:var(--surface);color:var(--ink-faint);
  transition:transform .35s cubic-bezier(.34,1.5,.64,1),border-color .2s,background .2s}
.wd .dot.spring{animation:springCell .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes springCell{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.wd.photo .dot{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-deep)}
.wd.done .dot{border-color:var(--accent-pale);background:var(--tint);color:var(--accent-deep)}
.wd.today .dot{border-color:var(--accent);border-style:dashed;color:var(--accent);background:var(--surface)}
.wd.missed .dot{border-color:var(--line-strong);border-style:dashed;background:var(--tint-2);color:var(--ink-faint)}
.wd.up .dot{opacity:.45}
.wd:hover .dot{border-color:var(--accent)}
.wd .lb{font-family:var(--f-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.wd .num{position:absolute;bottom:2px;right:4px;font-family:var(--f-label);font-size:10px;color:var(--ink-faint)}
#weekLegend{margin-top:12px;min-height:1.4em}

/* compuestos */
.plist{display:flex;flex-direction:column}
.prow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.prow:first-child{border-top:0;padding-top:0}
.prow:last-child{padding-bottom:0}
.prow .pn{font-family:var(--f-ui);font-weight:700;font-size:15px}
.prow .ps{font-size:13.5px;color:var(--ink-soft)}
.prow .pv{margin-left:auto;text-align:right}
.vialtag{font-family:var(--f-label);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line-strong);color:var(--ink-faint);white-space:nowrap}
.vialtag.warn{background:var(--tint);color:var(--accent-deep);border-color:var(--accent-pale)}

/* El atributo hidden pone display:none desde la hoja del navegador, que es la
   que menos manda de todas: cualquier regla nuestra con display la pisa. Por eso
   la caja de "elegir una foto" seguia visible con la vista previa debajo, en vez
   de desaparecer. Esta linea va aqui, una sola vez, para toda la pagina. */
[hidden]{display:none !important}

/* analisis con foto */
.fdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:26px 18px;border:1.5px dashed var(--line-strong);border-radius:16px;background:var(--tint-2);
  cursor:pointer;text-align:center;transition:border-color .18s,background .18s;
  -webkit-tap-highlight-color:transparent}
.fdrop:hover,.fdrop:focus-within{border-color:var(--accent);background:var(--tint)}
.fdrop.busy{opacity:.6;pointer-events:none}
.fdrop-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--accent-deep);
  font-size:21px;line-height:1;font-weight:600;margin-bottom:5px}
.fdrop-t{font-weight:600;font-size:15px;color:var(--ink)}
.fdrop-s{font-size:12.5px;color:var(--ink-faint)}

.fslot{position:relative}
.fprev{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);
  background:var(--tint-2);animation:fprevIn .22s cubic-bezier(.2,.8,.25,1) both}
@keyframes fprevIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.fprev img{display:block;width:100%;max-height:280px;object-fit:cover;object-position:center 25%}
.fprev-pie{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-top:1px solid var(--line);background:var(--surface);
  font-size:13.5px;color:var(--ink-faint)}
.fcambiar{margin-left:auto;background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:var(--f-body);font-size:13.5px;font-weight:600;color:var(--accent-deep);
  border-bottom:1px solid var(--accent-pale)}
.fcambiar:hover{border-bottom-color:var(--accent)}
.fdel{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(24,20,70,.55);color:#fff;backdrop-filter:blur(6px);
  font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.fdel:hover{background:rgba(24,20,70,.78)}
@media (prefers-reduced-motion:reduce){ .fprev{animation:none} }

.scanmeta{width:100%;font-size:15px;line-height:1.5;padding:12px 13px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:inherit;resize:vertical;margin-top:7px}
.scanmeta:focus{outline:none;border-color:var(--accent)}

.scanout{margin-top:4px}
.scanblock{margin-bottom:18px}
.scanblock .eyebrow{margin-bottom:6px}
.scanblock p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.scanrec{border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin-bottom:9px;
  background:var(--tint-2)}
.scanrec .rn{font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:3px}
.scanrec .rp{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.scanrec .re{display:inline-block;margin-top:8px;font-family:var(--f-label);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
  border:1px solid var(--line-strong);color:var(--ink-faint)}
.scanwarn{border-left:3px solid var(--accent);padding:2px 0 2px 13px;margin-bottom:18px}
.scanwarn p{font-size:14px;line-height:1.6;color:var(--ink-soft)}

.av-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;
  background:var(--tint);border:1px solid var(--accent-pale);color:var(--accent-deep);
  font-size:21px;font-weight:700;line-height:1;margin-bottom:14px}
#scanAviso .cta-row{margin-top:18px}
#scanAviso .tiny{margin-top:10px}

/* cierre en WhatsApp */
.pcierre{background:var(--tint);border-color:var(--line-strong)}
.pcierre h3{font-size:19px;font-weight:700;margin:5px 0 8px;letter-spacing:-.012em}

/* comparación de fotos */
.compare{position:relative;aspect-ratio:3/4;max-width:330px;max-height:400px;margin:0 auto;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  user-select:none;touch-action:none;cursor:ew-resize;background:var(--tint-2)}
.cmp-img{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:14px}
.cmp-a{background:var(--tint-2)}
.cmp-b{background:var(--tint)}
.cmp-a{justify-content:flex-start}
.cmp-b{justify-content:flex-end}
.cmp-img::after{content:"Sin foto";position:absolute;left:0;right:0;top:24%;text-align:center;
  font-family:var(--f-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.7}
.cmp-clip .cmp-img::after{width:330px}
.cmp-clip{position:absolute;inset:0;width:50%;overflow:hidden}
.cmp-clip .cmp-img{width:330px;max-width:none}
.cmp-tag{position:relative;z-index:1;font-family:var(--f-label);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;color:var(--ink-soft)}
.cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--surface);
  transform:translateX(-50%);box-shadow:0 0 0 1px var(--line-strong)}
.cmp-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.cmp-handle span::after{content:"⟷";font-size:13px;color:var(--ink-soft)}
.cmp-picks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;max-width:330px;
  margin-left:auto;margin-right:auto}
.sel{width:100%;font-size:14px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);color:var(--ink)}
.timeline{display:flex;gap:7px;overflow-x:auto;padding:14px 2px 2px;justify-content:center}
.tl{flex:none;width:44px;text-align:center;cursor:pointer;background:none;border:0;padding:0}
.tl .th{display:block;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--tint-2);transition:transform .2s,border-color .2s,background .2s}
.tl:hover .th{transform:translateY(-2px);border-color:var(--accent);background:var(--tint)}
.tl .tn{font-family:var(--f-label);font-size:10px;color:var(--ink-faint);margin-top:5px;display:block}

/* dónde vas */
.expect{background:var(--tint);border-color:var(--line-strong)}
.expect h3{font-size:17px;font-weight:700;margin:5px 0 7px;letter-spacing:-.01em}

/* ciclo */
.cyc{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.cyc-fill{height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width 1.2s cubic-bezier(.2,.85,.25,1)}
.cyc-marks{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--f-label);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* asistente */
.chat{display:flex;flex-direction:column;gap:10px;max-height:270px;overflow-y:auto;padding-right:4px}
.msg{max-width:84%;padding:12px 14px;border-radius:15px;font-size:14.5px;line-height:1.55}
.msg.me{align-self:flex-end;background:var(--accent-deep);color:var(--on-deep);border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:var(--tint);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg .src{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-strong);
  font-family:var(--f-label);font-size:11px;letter-spacing:.04em;color:var(--ink-soft)}
.msg .src a{color:var(--accent);text-decoration:none}
.msg .wa-ir{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  padding:9px 14px;border:0;border-radius:999px;background:var(--cta);color:var(--cta-ink);
  font-family:var(--f-ui);font-weight:600;font-size:13.5px;cursor:pointer;
  transition:filter .16s}
.msg .wa-ir:hover{filter:brightness(1.07)}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 16px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;
  color:#1f1f1f;font-family:var(--f-ui);font-weight:600;font-size:15px;cursor:pointer;
  transition:border-color .16s,box-shadow .16s}
/* Lo mismo para los botones normales: 'Crear mi cuenta' se pintaba
   entero aunque estuviera deshabilitado, asi que parecia que el sitio
   ignoraba el clic en vez de estar esperando el consentimiento. */
.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover,.btn:disabled:hover{transform:none;box-shadow:none}

/* Apagado hasta que acepte: un boton que se puede pulsar y luego no hace
   nada se lee como que la pagina esta rota. */
.btn-google[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.btn-google[disabled]:hover{border-color:var(--line-strong);box-shadow:none;transform:none}
.btn-google:hover{border-color:var(--ink-faint);box-shadow:0 2px 10px rgba(20,18,60,.07)}
.btn-google svg{flex:none}
.obsep{display:flex;align-items:center;gap:12px;margin:16px 0 14px;
  font-size:12.5px;color:var(--ink-faint);font-family:var(--f-label);letter-spacing:.04em}
.obsep::before,.obsep::after{content:"";flex:1;height:1px;background:var(--line)}
.obnote{margin-top:9px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.oblegal{margin-top:14px}
.oblegal>summary{cursor:pointer;font-size:13.5px;color:var(--accent);list-style:none}
.oblegal>summary::-webkit-details-marker{display:none}
.obskiprow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.msg.typing span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink-faint);margin-right:4px;
  animation:blink 1.2s infinite}
.msg.typing span:nth-child(2){animation-delay:.18s}
.msg.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chatbar{display:flex;gap:8px;margin-top:14px}
.chatbar input{flex:1;font-size:14.5px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:11px;
  background:var(--surface);color:var(--ink)}
.chatbar input:focus{outline:2px solid var(--accent);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chips button{font-family:var(--f-label);font-size:11px;padding:7px 11px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;
  transition:border-color .2s,color .2s}
.chips button:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:640px){
  .cmp-picks{grid-template-columns:1fr}
  .compare{max-width:100%}
  .cmp-clip .cmp-img{width:100vw}
  .timeline{justify-content:flex-start}
  .nextdose{gap:16px}
  .nd-ring{width:90px;height:90px}
  .phead{flex-wrap:wrap}
  .pdemo{order:3;margin-left:62px}
}
@media (prefers-reduced-motion: reduce){
  .wd .dot.spring,.pulsering.go,.msg.typing span{animation:none!important}
  .nd-fill,.cyc-fill{transition:none}
}

/* ---------- puerta del perfil: se ve, pero atenuado ---------- */
.pwrap{position:relative}
.gatecard{display:none}
.pwrap.gated .profile{filter:blur(2.6px) saturate(.7);opacity:.5;pointer-events:none;user-select:none}
.pwrap.gated .gatecard{display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55;
  width:min(430px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:26px 26px 24px;box-shadow:0 28px 70px rgba(36,30,106,.30);
  animation:gateIn .45s cubic-bezier(.2,.85,.25,1) both}
@keyframes gateIn{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.gc-lock{font-size:22px}
.gatecard h3{font-size:21px;font-weight:700;line-height:1.2}
@media(min-width:1020px){.split{grid-template-columns:repeat(3,1fr);gap:34px}.split h2{font-size:clamp(21px,2.4vw,25px)}}

/* ---------- estados sin amarillo: la marca hace el trabajo ---------- */
.stock.low{background:var(--tint-2);color:var(--ink-soft);border-color:var(--line-strong)}
.stock.order{background:transparent;color:var(--ink-faint);border-color:var(--line-strong)}
.vialtag.warn{background:var(--accent-deep);color:var(--on-deep);border-color:var(--accent-deep)}
.wd.missed .dot{border-color:var(--accent-deep);border-style:dashed;background:transparent;color:var(--accent-deep)}
.askprice{background:var(--surface);color:var(--ink-soft);border-color:var(--line-strong)}
.note{background:var(--accent-pale);color:var(--accent-deep);border:1px dashed var(--accent)}
.draft{background:var(--tint);color:var(--ink-soft);border-bottom:1px solid var(--line)}
.draft b{color:var(--ink)}
.warnbox{background:var(--accent-pale);border:1px solid var(--accent);color:var(--accent-deep)!important}
.warnbox strong{color:var(--accent-deep)!important}

/* ---------- barra: 3 secciones y un desplegable ---------- */
.nav{align-items:center}
.more{position:relative}
.morebtn{display:inline-flex;align-items:center;gap:7px}
.morebtn .car{transition:transform .25s cubic-bezier(.34,1.4,.64,1);font-size:10px}
.more.open .morebtn .car{transform:rotate(180deg)}
.moremenu{position:absolute;right:0;top:calc(100% + 10px);min-width:216px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(36,30,106,.18);
  padding:8px;display:none;flex-direction:column;z-index:60}
.more.open .moremenu{display:flex;animation:rise .2s ease both}
.moremenu :is(button,a){text-align:left;font-family:var(--f-ui);font-weight:600;font-size:14px;
  background:none;border:0;color:var(--ink-soft);padding:11px 13px;border-radius:11px;cursor:pointer;
  transition:background .15s,color .15s,transform .18s}
.moremenu :is(button,a):hover{background:var(--accent-pale);color:var(--accent-deep);transform:translateX(3px)}
.moremenu .sep{height:1px;background:var(--line);margin:6px 8px}
@media(min-width:940px){.nav{display:flex}.navtools{margin-left:0}.burger{display:none}.drawer{display:none!important}}
@media(max-width:939px){.nav{display:none}}

.gc-lock{color:var(--accent-deep);display:inline-flex}
.wa-fab svg{flex:none}
.dbullet{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}

/* ---------- marca real ---------- */
.mark{
  display:inline-block;width:17px;height:26px;flex:none;
  background-color:var(--accent-deep);
  -webkit-mask-image:url("/img/logo-mark.png");mask-image:url("/img/logo-mark.png");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), background-color .2s}
.logo:hover .mark{transform:translateY(-1px) scale(1.06)}
.mark i{display:none}
.pcalc .mark.pk-mark{width:14px;height:21px;background-color:var(--pk-ink)}
.wordmark{margin-left:1px}

/* ================= pasada móvil ================= */
@media(max-width:640px){
  .mast .bar{padding-left:18px;padding-right:18px;gap:10px}
  .authnav{display:none}
  .navtools{gap:8px}
  .draft{padding:8px 0;font-size:12.5px}
  .draft .wrap{padding-left:18px;padding-right:18px}
  .annbar,.annbar li{height:36px}
  .annbar li{font-size:10.5px;letter-spacing:.08em}
  .wrap{padding-left:18px;padding-right:18px}
  .screen{padding-top:14px}
  .hero{padding-top:0}
  .hero h1{font-size:clamp(26px,7.1vw,32px);line-height:1.14}
  .hero .lede{font-size:16.5px}
  .hero-grid{gap:18px}
  /* el producto antes que el texto largo */
  .hero-grid .stack{display:contents}
  .hero-grid{display:flex;flex-direction:column}
  .hero-grid .eyebrow{order:1}
  .hero-grid h1{order:2}
  .stage{order:3;width:100%;margin:4px 0 2px}
  .hero-grid .lede{order:4}
  .hero-grid .cta-row{order:5;width:100%}
  .hero-grid .tiny{order:6}
  .cta-row .btn{flex:1 1 100%}
  .dock{right:12px;bottom:12px;gap:8px}
  .wa-fab{padding:13px 17px;font-size:13.5px}
  .ai-fab{padding:9px 11px;font-size:0;gap:0}
  .ai-fab span{font-size:15px}
}
@media(max-width:420px){
  .navtools .btn-wa{font-size:0;padding:11px 13px;gap:0}
  .navtools .btn-wa::after{content:"WA";font-size:12.5px}
}
.lede,.small,p{text-wrap:pretty}

@media(max-width:640px){
  .hero-grid{align-items:stretch;text-align:left}
  .hero-grid > *{text-align:left}
  .stage{margin-top:26px;min-height:270px;aspect-ratio:1/.86}
  .vialbtn::after{top:-20px;font-size:8.5px;letter-spacing:.14em}
  .hcard-wrap{left:0;bottom:-2%;width:min(72%,215px)}
}

.hc-ship{font-size:11.5px;color:var(--ink-faint);line-height:1.4}
#heroSub{font-size:18px}
@media(max-width:640px){ .hero-grid #heroSub{order:4} }

/* ---------- prueba arriba ---------- */
.proofstrip{display:grid;grid-template-columns:1fr;gap:14px;padding:26px 24px;margin-top:26px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
@media(min-width:820px){.proofstrip{grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:26px}}
.ps-k{display:block;font-family:var(--f-label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.ps-v{font-size:15px;color:var(--ink-soft)}
.vgrid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:880px){.vgrid{grid-template-columns:1fr .92fr;gap:38px;align-items:start}}
.coacard{background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;padding:20px;
  font-family:var(--f-label);font-size:12.5px;box-shadow:var(--shadow)}
.coa-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line-strong);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.coa-row{display:grid;grid-template-columns:1fr;gap:3px;padding:13px 0;border-top:1px solid var(--line)}
@media(min-width:520px){.coa-row{grid-template-columns:150px 1fr;gap:14px}}
.coa-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.coa-v{color:var(--ink)}

/* ---------- un solo botón flotante en el teléfono ---------- */
@media(max-width:860px){ .ai-fab,.ai-panel{display:none!important} }

/* ---------- mayoristas: pedir el catálogo ---------- */
.mgrid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:960px){.mgrid{grid-template-columns:.92fr 1.08fr;gap:22px}}
.mside{display:flex;flex-direction:column;gap:16px}
.mwho{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.mwho li{padding:11px 0;border-top:1px solid var(--line);font-family:var(--f-ui);
  font-weight:600;font-size:15.5px;display:flex;align-items:center;gap:11px}
.mwho li:first-child{border-top:0;padding-top:4px}
.mwho li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

.mform{padding:26px 26px 24px}
.mform h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.frow{grid-template-columns:1fr}}
.mform label{display:block;margin-bottom:13px}
.mform .flabel{display:block;margin-bottom:6px}
.mform input,.mform textarea{width:100%;font-family:var(--f-body);font-size:15.5px;
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:11px;
  background:var(--surface);color:var(--ink);transition:border-color .18s,box-shadow .18s}
.mform textarea{resize:vertical;min-height:96px;line-height:1.55}
.mform input:focus,.mform textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-pale)}
.mform input.bad,.mform textarea.bad{border-color:var(--accent-deep);background:var(--tint-2)}
.ferr{min-height:1.2em;margin:2px 0 12px;font-size:13.5px;color:var(--accent-deep)}

/* --- campos que validan de verdad (fecha, ciudad, telefono) --- */
.opts .sel{font-family:var(--f-body);font-size:16px;padding:14px 15px;border-radius:13px}
.fecharow{display:grid;grid-template-columns:.8fr 1.3fr .9fr;gap:8px}
.fecharow .sel{padding:14px 10px}

.acwrap{position:relative}
.aclist{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
  box-shadow:var(--shadow);overflow:hidden;max-height:246px;overflow-y:auto}
.aclist.on{display:block}
.acitem{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);padding:12px 15px;cursor:pointer;
  font-family:var(--f-body);font-size:15.5px;color:var(--ink)}
.acitem:last-child{border-bottom:0}
.acitem:hover,.acitem.on{background:var(--tint)}
.acitem b{font-weight:600}
.acitem span{font-size:12.5px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}

.telrow{display:flex;align-items:stretch;gap:8px;margin-top:9px}
.telcod{flex:none;display:flex;align-items:center;padding:0 14px;border-radius:13px;
  border:1px solid var(--line-strong);background:var(--tint-2);color:var(--ink-soft);
  font-family:var(--f-label);font-size:12.5px;white-space:nowrap}
.telcod.libre{color:var(--ink-faint)}
.telrow .inp{flex:1;min-width:0}

/* --- ajustes --- */
.ajbtn{margin-left:auto;flex:none;display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:11px;padding:9px 13px;cursor:pointer;
  color:var(--ink-soft);font-family:var(--f-body);font-size:14px;transition:all .15s}
.ajbtn:hover{border-color:var(--accent);color:var(--accent-deep)}
@media(max-width:520px){ .ajbtn span{display:none} .ajbtn{padding:9px 10px} }

.ajsec{padding:20px 0;border-bottom:1px solid var(--line)}
.ajsec:last-child{border-bottom:0;padding-bottom:4px}
.ajsec .eyebrow{margin-bottom:12px}
.ajrow{display:flex;align-items:baseline;gap:12px;padding:7px 0;font-size:14.5px}
.ajk{color:var(--ink-faint);flex:none}
.ajv{color:var(--ink);margin-left:auto;text-align:right;word-break:break-all}
.ajsec .btn{margin-top:4px}
.ajsec .tiny{margin-top:10px}
.ajdanger{background:var(--tint-2);margin:0 -24px;padding:20px 24px calc(8px + env(safe-area-inset-bottom));
  border-radius:16px}
.btn-peligro{background:var(--surface);border:1px solid #d8b4b4;color:#9d2f2f}
.btn-peligro:hover{background:#fdf3f3;border-color:#c98a8a}
.ajcampo{margin-bottom:12px}
.ajcampo .flabel{margin-bottom:5px}
.ajcampo .sel,.ajcampo .inp{font-size:15px;padding:12px 14px;border-radius:11px}
.linkish{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:2px}

.mdone{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0 4px;
  animation:mIn .4s cubic-bezier(.2,.85,.25,1) both}
.mdone[hidden]{display:none}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mtick{width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:2px}
.mdone h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
@media (prefers-reduced-motion: reduce){ .mdone{animation:none} }

/* ---------- acompañamiento: a qué hora hay alguien ---------- */
.sup{display:flex;flex-direction:column;gap:22px;padding:52px 0 6px}
.supcard{padding:22px 24px 20px}
.suphead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.supnow{font-family:var(--f-ui);font-weight:700;font-size:19px;letter-spacing:-.015em;margin-top:5px}
.supnow small{display:block;font-family:var(--f-body);font-weight:400;font-size:14px;
  letter-spacing:0;color:var(--ink-soft);margin-top:3px}
.supdot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none;margin-top:7px;position:relative}
.supdot.on{background:var(--wa)}
.supdot.on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--wa);
  animation:supPulse 2.4s ease-out infinite}
@keyframes supPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.35);opacity:0}}

.daybar{margin-top:2px}
.daytrack{position:relative;height:10px;border-radius:999px;background:var(--tint);
  border:1px solid var(--line);overflow:hidden}
.dayfill{position:absolute;top:0;bottom:0;left:29.17%;right:20.83%;background:var(--accent);border-radius:999px}
.daynow{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:2px;
  left:0;transition:left .6s cubic-bezier(.2,.85,.25,1)}
.daynow::after{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--ink)}
.daymarks{position:relative;height:14px;margin-top:9px;
  font-family:var(--f-label);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.daymarks span{position:absolute;top:0;white-space:nowrap}
.daymarks span:nth-child(1){left:0}
.daymarks span:nth-child(2){left:29.17%;transform:translateX(-50%);color:var(--accent)}
.daymarks span:nth-child(3){left:79.17%;transform:translateX(-50%);color:var(--accent)}
.daymarks span:nth-child(4){right:0}
@media(max-width:520px){
  .daymarks span:nth-child(1),.daymarks span:nth-child(4){display:none}
}
.supnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.supgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.supgrid{grid-template-columns:repeat(3,1fr);gap:18px}}
.supitem{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px}
.supico{width:38px;height:38px;border-radius:11px;background:var(--tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.supico svg{width:19px;height:19px}
.supitem h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em}
.suphour{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--f-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

@media (prefers-reduced-motion: reduce){ .supdot.on::after{animation:none} .daynow{transition:none} }

/* ---------- las tres cosas ---------- */
.tres{padding:64px 0 6px;display:flex;flex-direction:column;gap:34px}
.tresgrid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.tresgrid{grid-template-columns:repeat(3,1fr);gap:22px}}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(36,30,106,.04);display:flex;flex-direction:column;
  transition:box-shadow .3s ease,border-color .3s ease}
.tcard:hover{border-color:var(--accent-pale);box-shadow:0 6px 14px rgba(36,30,106,.06),0 22px 46px rgba(36,30,106,.09)}
/* estos tres no se deslizan: solo aparecen */
.tcard.rev{transform:none}

.tart{position:relative;height:238px;padding:24px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--surface) 0%, var(--tint) 78%);
  border-bottom:1px solid var(--line)}
.tart::after{content:none}
.tart>*{position:relative;z-index:1;width:100%;max-width:250px}

.tbody{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;align-items:flex-start}
.tnum{font-family:var(--f-label);font-size:10px;letter-spacing:.2em;color:var(--accent)}
.tcard h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.tbody .small{color:var(--ink-soft)}
.tbody .btn{margin-top:auto}

/* ---- 01 · certificado ---- */
.mcoa{position:relative;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:11px;padding:14px 15px 12px;font-family:var(--f-label);font-size:10px;
  box-shadow:0 1px 2px rgba(36,30,106,.05),0 10px 22px rgba(36,30,106,.06);overflow:hidden}
.mcoa-stamp{position:absolute;right:-26px;bottom:-24px;width:92px;height:92px;border-radius:50%;
  border:6px double var(--accent);opacity:.09;pointer-events:none}
.mcoa-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:9px;margin-bottom:2px;border-bottom:1px solid var(--line-strong);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:8.5px}
.mcoa-h .ej{color:var(--accent);letter-spacing:.14em}
.mcoa-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-top:1px solid var(--line)}
.mcoa-r:nth-of-type(1){border-top:0}
.mcoa-r span{color:var(--ink-faint);letter-spacing:.07em;text-transform:uppercase;font-size:8.5px;flex:none}
.mcoa-r b{color:var(--ink);font-weight:500;text-align:right;font-size:10px}
.mcoa-f{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line-strong);color:var(--ink-soft);
  letter-spacing:.07em;text-transform:uppercase;font-size:8.5px}
.mcoa-f i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9px;flex:none}

/* ---- 02 · cromatograma ---- */
.mpur{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.mchrom{display:block;width:100%;height:auto}
.mchrom .cfill{fill:var(--accent);opacity:.10}
.mchrom .cline{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mchrom .cbase{stroke:var(--line-strong);stroke-width:1}
.mchrom .ctick{stroke:var(--line-strong);stroke-width:1}
.mpur-l{font-family:var(--f-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
.mpur-l b{color:var(--accent);font-weight:400}
.mpur-m{font-size:11.5px;color:var(--ink-soft);max-width:27ch;line-height:1.5}

/* ---- 03 · conversación ---- */
.mchat{display:flex;flex-direction:column;gap:8px}
.mb{max-width:88%;padding:9px 12px;border-radius:14px;font-size:11.5px;line-height:1.45}
.mb.them{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(36,30,106,.04)}
.mb.us{align-self:flex-end;background:var(--accent-deep);color:var(--on-deep);border-bottom-right-radius:5px}
.mtime{align-self:center;margin-top:4px;display:flex;align-items:center;gap:7px;
  font-family:var(--f-label);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.mtime i{width:5px;height:5px;border-radius:50%;background:var(--wa);flex:none;font-style:normal}

@media(max-width:899px){
  /* apiladas: no hace falta igualar alturas, y el documento no se debe recortar */
  .tart{height:auto;min-height:212px;padding:26px 24px}
  .tart>*{max-width:330px}
}

/* ---------- ficha tecnica dentro del cajon de producto ---------- */
.ft{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.ft-lead{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.ft-sub{margin-top:6px;font-family:var(--f-label);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.ft-secs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ft-sec{background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.ft-sec[open]{border-color:var(--line-strong)}
.ft-sec>summary{padding:13px 16px;font-size:14.5px;line-height:1.35;color:var(--ink);
  align-items:center}
.ft-sec>summary::after{align-self:center}
.ft-sec>summary:hover{background:var(--tint-2)}
.ft-body{padding:0 16px 16px}
.ft-body p{font-size:15px;line-height:1.62;color:var(--ink-soft);margin:0 0 11px}
.ft-body p:last-child{margin-bottom:0}
.ft-lines{background:var(--tint-2);border-radius:11px;padding:13px 15px;margin:0 0 11px}
.ft-lines span{display:block;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.ft-lines span+span{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.ft-sec.key{background:var(--tint);border-color:var(--accent-pale)}
.ft-sec.key>summary{color:var(--accent-deep)}
.ft-sec.refs .ft-body p{font-size:13px;line-height:1.5;color:var(--ink-faint);
  padding-left:13px;text-indent:-13px;margin-bottom:8px}
.ft-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.ft-all{margin-top:12px;font-family:var(--f-ui);font-weight:600;font-size:12.5px;
  color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 0}
.ft-all:hover{text-decoration:underline}

/* ---------- aviso discreto ---------- */
.note.quiet{background:none;border:0;border-left:2px solid var(--line-strong);border-radius:0;
  padding:3px 0 3px 13px;font-size:13.5px;line-height:1.5;color:var(--ink-faint);max-width:74ch}

/* ---------- buscador de peptidos ---------- */
.psearch{position:relative;margin-top:16px;max-width:460px}
.psearch .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);pointer-events:none}
.psearch input{width:100%;font-family:var(--f-body);font-size:15.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:13px 44px 13px 44px;outline:none;transition:border-color .15s,box-shadow .15s}
.psearch input::placeholder{color:var(--ink-faint)}
.psearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.psearch input::-webkit-search-cancel-button{display:none}
.psearch .clr{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--ink-faint);font-size:17px;line-height:1;padding:6px}
.psearch .clr:hover{color:var(--ink)}
.psugg{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 7px);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:15px;box-shadow:var(--shadow);
  overflow:hidden;max-height:330px;overflow-y:auto}
.psugg button{display:flex;width:100%;align-items:baseline;gap:10px;text-align:left;background:none;
  border:0;cursor:pointer;padding:11px 16px;font-family:var(--f-body);font-size:15px;color:var(--ink)}
.psugg button+button{border-top:1px solid var(--line)}
.psugg button:hover,.psugg button.on{background:var(--tint-2)}
.psugg button b{font-weight:600}
.psugg button i{margin-left:auto;font-style:normal;font-family:var(--f-label);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.psugg .none{padding:13px 16px;font-size:14.5px;color:var(--ink-faint)}
.cat-grid .nores{grid-column:1/-1;padding:34px 0;color:var(--ink-faint);font-size:15.5px}

/* ---------- asistente publico: panel de chat ---------- */
/* Ojo: .ai-panel se oculta con display:none y se muestra con .open. No poner
   display aqui, o el panel queda visible al cargar la pagina. */
.ai-panel.achat{width:min(380px,calc(100vw - 32px));padding:0;overflow:hidden;
  max-height:min(560px,calc(100vh - 140px))}
.ai-panel.achat.open{display:flex;flex-direction:column}
.ac-head{display:flex;align-items:center;gap:9px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.ac-head b{font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:-.01em}
.ac-head .sub{font-family:var(--f-label);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.ac-dot{width:8px;height:8px;border-radius:50%;background:var(--wa);flex:0 0 auto}
.ac-x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-faint);
  font-size:17px;line-height:1;padding:4px 6px}
.ac-x:hover{color:var(--ink)}
.ac-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.ac-b{max-width:88%;font-size:14.5px;line-height:1.55;border-radius:15px;padding:10px 13px;white-space:pre-wrap;word-wrap:break-word}
.ac-b.ai{background:var(--tint-2);color:var(--ink);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.ac-b.yo{background:var(--accent-deep);color:var(--on-deep);align-self:flex-end;border-bottom-right-radius:5px}
.ac-b.err{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line);align-self:flex-start}
.ac-esc{display:flex;gap:4px;align-self:flex-start;padding:12px 14px;background:var(--tint-2);
  border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px}
.ac-esc i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);display:block;
  animation:acsalto 1.1s infinite}
.ac-esc i:nth-child(2){animation-delay:.16s}
.ac-esc i:nth-child(3){animation-delay:.32s}
@keyframes acsalto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ac-acc{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;margin-top:-2px}
.ac-acc button{font-family:var(--f-ui);font-weight:600;font-size:12.5px;border-radius:999px;
  padding:9px 15px;cursor:pointer;border:1px solid transparent}
.ac-acc .cuenta{background:var(--accent-deep);color:var(--on-deep)}
.ac-acc .wapp{background:var(--cta);color:var(--cta-ink)}
.ac-chips{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:none}
.ac-chips::-webkit-scrollbar{display:none}
.ac-chips button{white-space:nowrap;font-size:12.5px;font-family:var(--f-ui);font-weight:600;
  color:var(--ink-soft);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 13px;cursor:pointer}
.ac-chips button:hover{border-color:var(--accent);color:var(--ink)}
.ac-bar{display:flex;gap:8px;align-items:center;padding:11px 12px;border-top:1px solid var(--line)}
.ac-bar input{flex:1;min-width:0;font-family:var(--f-body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:11px 15px;outline:none}
.ac-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.ac-bar button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent-deep);color:var(--on-deep);font-size:16px;line-height:1}
.ac-bar button:disabled{opacity:.45;cursor:default}
.ac-legal{padding:0 14px 12px;font-size:11px;line-height:1.45;color:var(--ink-faint)}


/* ---------- medica aliada ---------- */
/* .tres anula el padding lateral del wrap; aqui se hace igual para que el
   panel blanco mida exactamente lo mismo que la fila de tarjetas de arriba. */
.dra-wrap{padding:10px 0 6px}
.dra-panel{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:28px;padding:clamp(24px,3.4vw,50px);overflow:hidden;box-shadow:var(--shadow)}
.dra{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.12fr);
  gap:clamp(24px,4vw,54px);align-items:center;position:relative;z-index:1}

.dra-media{position:relative;isolation:isolate}
/* halo de marca detras de la foto */
.dra-media::before{content:"";position:absolute;z-index:-1;inset:-16% -14% -14% -14%;
  background:
    radial-gradient(56% 48% at 24% 18%, var(--accent) 0%, transparent 72%),
    radial-gradient(52% 46% at 82% 86%, var(--accent) 0%, transparent 74%),
    radial-gradient(86% 74% at 50% 50%, var(--accent-pale) 0%, transparent 78%);
  filter:blur(74px);opacity:.42}
.dra-foto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 22px 60px rgba(36,30,106,.20)}
.dra-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.dra-foto::after{content:"";position:absolute;inset:0;border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);pointer-events:none}

/* tarjetita de credencial sobre la foto */
.dra-sello{position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);
  text-decoration:none;transition:transform .15s,box-shadow .15s;
  background:rgba(255,255,255,.90);backdrop-filter:saturate(1.4) blur(8px);
  border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 20px rgba(36,30,106,.16)}
a.dra-sello{cursor:pointer}
a.dra-sello:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,30,106,.26)}
a.dra-sello:active{transform:translateY(-1px)}
.dra-sello .fl{margin-left:2px;color:var(--accent);font-size:14px;line-height:1;flex:0 0 auto;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
a.dra-sello:hover .fl{transform:translate(3px,-3px)}
/* el punto respira, para que el ojo lo encuentre */
.dra-sello .pt{position:relative}
.dra-sello .pt::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--wa);opacity:0;animation:draPulso 2.6s ease-out infinite}
@keyframes draPulso{0%{transform:scale(.7);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dra-sello .pt::after{animation:none}}
.dra-sello .pt{width:7px;height:7px;border-radius:50%;background:var(--wa);flex:0 0 auto}
.dra-sello b{font-family:var(--f-ui);font-weight:700;font-size:12.5px;color:#241E6A;line-height:1.25}
.dra-sello span{font-family:var(--f-label);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:#6B6BA0;display:block;margin-top:2px}

.dra-nombre{margin-top:14px;font-family:var(--f-ui);font-weight:700;
  font-size:clamp(17px,1.7vw,20px);letter-spacing:-.01em;color:var(--ink)}
.dra-rol{margin-top:5px;font-family:var(--f-label);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);line-height:1.5}
.dra-txt h2{margin-top:12px}
.dra-txt p.cuerpo{margin-top:14px;font-size:16.5px;line-height:1.62;color:var(--ink-soft);max-width:62ch}
.dra-txt p.cuerpo:first-of-type{margin-top:20px}
.dra-cred{list-style:none;margin:24px 0 0;padding:0}
.dra-cred li{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;
  padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.dra-cred li b{font-weight:600;color:var(--ink-faint)}
.dra-cred li span{color:var(--ink);text-align:right}
.dra-ver{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--f-ui);font-weight:600;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:999px;padding:11px 18px;
  text-decoration:none;transition:border-color .15s,color .15s}
.dra-ver:hover{border-color:var(--accent);color:var(--accent)}
.dra-ver svg{flex:0 0 auto}
.dra-guia{margin-top:14px;background:var(--tint-2);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px}
.dra-guia .t{font-family:var(--f-label);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.dra-guia ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dra-guia li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  justify-content:space-between;font-size:14.5px}
.dra-guia .campo{color:var(--ink-faint)}
.dra-guia em{font-style:normal;color:var(--ink-soft);font-size:13.5px}
.cp{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:9px;padding:6px 10px;cursor:pointer;
  font-family:var(--f-label);font-size:12.5px;color:var(--ink);
  transition:border-color .15s,background .15s}
.cp:hover{border-color:var(--accent);background:var(--tint)}
.cp .et{font-family:var(--f-ui);font-weight:600;font-size:11px;color:var(--accent)}
.cp.ok{border-color:var(--wa)}
.cp.ok .et{color:var(--wa)}
.dra-nota{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-faint);max-width:70ch}
@media(max-width:860px){
  .dra{grid-template-columns:1fr;gap:26px}
  .dra-media{max-width:360px;margin:0 auto;width:100%}
  .dra-cred li span{text-align:left}
}

/* ---------- nuestros medicos ---------- */
.medgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.medcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:border-color .35s,transform .35s}
.medcard:hover{border-color:var(--accent-pale);transform:translateY(-2px)}
.medcard .mshot{position:relative;background:var(--tint-2);aspect-ratio:4/5;overflow:hidden}
.medcard .mshot img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.03)}
.medcard .mph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:22px;color:var(--ink-faint)}
.medcard .mph i{width:44px;height:44px;border-radius:50%;border:1px dashed var(--line-strong);display:block}
.medcard .mph b{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.medcard .mph span{font-size:12.5px;max-width:24ch;line-height:1.5}
.medbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.medbody h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 5px}
.medrol{font-family:var(--f-label);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:0}
.medchips{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 2px}
.medchips span{font-size:11.5px;background:var(--tint);color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.medspecs{margin-top:10px}
.medrethus{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:12.5px;
  color:var(--accent);text-decoration:none;font-weight:600}
.medrethus:hover{text-decoration:underline}
.medcta{margin-top:auto;padding-top:17px}
.medcard.pend{border-style:dashed;border-color:var(--line-strong);box-shadow:none}
.medcard.pend:hover{transform:none}
.medbook{margin-top:6px}
.bk{display:grid;grid-template-columns:1.05fr .95fr;gap:38px}
@media(max-width:860px){.bk{grid-template-columns:1fr;gap:26px}}
.bk .step{padding:20px 0}
.medlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.medlist li{position:relative;padding-left:23px;font-size:15px;color:var(--ink-soft);line-height:1.6}
.medlist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--accent-pale);border:1px solid var(--accent)}

/* ---------- certificados de analisis (COA) ---------- */
.coagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:22px}
.coaitem{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);text-align:left;padding:0;cursor:pointer;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s}
.coaitem:hover{border-color:var(--accent-pale);transform:translateY(-2px)}
.coaitem .doc{background:var(--tint-2);border-bottom:1px solid var(--line);height:132px;overflow:hidden;position:relative}
.coaitem .doc img{width:100%;display:block;filter:contrast(1.02)}
.coaitem .meta{padding:13px 15px 15px}
.coaitem .meta b{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.coaitem .meta span{display:block;font-family:var(--f-label);font-size:11px;
  letter-spacing:.06em;color:var(--ink-faint);margin-top:4px}
.coaitem .meta em{display:inline-block;font-style:normal;font-size:11px;margin-top:9px;
  background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line);border-radius:999px;padding:2px 9px}
.coa-doc{margin:18px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--tint-2)}
.coa-doc img{width:100%;display:block}
.btn-coa{display:inline-flex;align-items:center;gap:8px}
.coa-verify{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;
  color:var(--accent);text-decoration:none;font-weight:600;word-break:break-word}
.coa-verify:hover{text-decoration:underline}

/* ---------- tiras compactas del inicio ---------- */
.drastrip-wrap{padding:44px 0 6px}
.drastrip{display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:20px 24px;box-shadow:var(--shadow)}
.drastrip .dra-foto{aspect-ratio:1;border-radius:50%;width:96px;height:96px}
.drastrip .dra-foto::after{border-radius:50%}
.drastrip .dra-foto img{object-position:50% 18%}
.drastrip h3{font-family:var(--f-ui);font-size:21px;font-weight:700;
  letter-spacing:-.025em;margin:6px 0 6px;line-height:1.2}
.drastrip .ds-cta{display:flex;flex-direction:column;align-items:flex-end;gap:11px;text-align:right}
.ds-sello{display:inline-flex;align-items:center;gap:8px;background:var(--ok-bg);color:var(--ok-ink);
  border:1px solid var(--ok-line);border-radius:999px;padding:5px 13px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ds-sello i{width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none}
@media(max-width:860px){
  .drastrip{grid-template-columns:72px 1fr;gap:16px;padding:18px}
  .drastrip .dra-foto{width:72px;height:72px}
  .drastrip .ds-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
}
.supstrip-wrap{padding:34px 0 4px}
.supstrip{display:flex;align-items:center;gap:16px;background:var(--tint-2);
  border:1px solid var(--line);border-radius:18px;padding:18px 24px}
.supstrip .supdot{margin-top:0}
.supstrip .supnow{margin-top:0;flex:1;font-size:17px}
.supstrip .supnow small{margin-top:2px}
@media(max-width:640px){
  .supstrip{flex-wrap:wrap;gap:12px}
  .supstrip .supnow{flex:1 1 100%}
}

/* ---------- hero: el vial manda, la ficha solo roza la esquina ---------- */
@media(min-width:1020px){
  .hero-grid{grid-template-columns:1fr 1.02fr}
  .stage{aspect-ratio:1/1.12}
  .vialbtn{width:min(76%,344px);top:44%}
  .vialbtn img{object-position:50% 38%}
  .hcard-wrap{width:min(56%,214px);right:-6%;bottom:-1%}
  .hcard{padding:15px 16px 16px}
  .hc-name{font-size:15px}
  .hc-price b{font-size:18px}
}
/* prueba verificable en la primera pantalla, sin caja */
.heroline{font-family:var(--f-label);font-size:11px;letter-spacing:.05em;
  line-height:1.7;color:var(--ink-faint);max-width:62ch}
.heroline b{color:var(--ink-soft);font-weight:500}
.hl-ver{font:inherit;margin-top:3px;display:inline-block;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s}
.hl-ver:hover{border-bottom-color:var(--accent)}

/* ---------- catálogo: más vida al recorrerlo ---------- */
.pcard{transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease,
  border-color .25s ease,opacity .55s ease}
.pcard.in:hover{transform:translateY(-5px)}
.pcard.in:active{transform:translateY(-1px) scale(.994);transition-duration:.09s}
.pcard .shot{background:#EFEFF2}
.pcard .shot img{transition:opacity .28s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
.pcard.in:hover .shot img{transform:scale(1.05)}
/* un brillo que cruza la foto al pasar por encima */
.pcard .shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-60%);transition:opacity .2s ease}
.pcard.in:hover .shot::before{opacity:1;animation:brilloCard .85s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes brilloCard{to{transform:translateX(60%)}}
.pcard .pval{transition:color .25s ease}
.pcard.in:hover .pval{color:var(--accent)}

/* la ventana del producto entra con más cuerpo */
.sheet{animation:sheetIn .36s cubic-bezier(.2,.9,.25,1) both}
.sheet-wrap.open{animation:scrimIn .26s ease both}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .pcard,.pcard.in:hover,.pcard.in:active{transform:none!important;transition:none}
  .pcard.in:hover .shot img{transform:none}
  .pcard .shot::before{display:none}
  .sheet,.sheet-wrap.open{animation:none}
}

/* ---------- la red molecular envuelve al vial ----------
   Sin filter:blur() ni drop-shadows apilados: estos elementos se animan,
   y desenfocar una capa animada obliga a rerasterizarla en cada fotograma
   (medido: hundía la escena de 39 a 6 fps). El difuminado va en el propio
   degradado, que el compositor resuelve una sola vez. */
@media(min-width:1020px){
  .stage .net{left:-26%;top:-20%;right:auto;bottom:auto;width:142%;height:134%;opacity:1}
  .stage .glow{width:min(104%,520px);filter:none;
    background:radial-gradient(circle,
      rgba(212,216,255,.85) 0%,
      rgba(212,216,255,.55) 26%,
      rgba(212,216,255,.24) 48%,
      rgba(212,216,255,.08) 66%,
      transparent 80%)}
  .stage .orbit{width:min(92%,452px);opacity:.5}
  .vialbtn img{border-radius:22px;
    box-shadow:0 30px 52px rgba(36,30,106,.18),0 6px 16px rgba(36,30,106,.10)}
  .vialbtn{filter:none}
}
@media (prefers-reduced-motion: reduce){
  .stage .orbit,.stage .glow{animation:none}
}

/* ---------- cabecera del catálogo: un solo ritmo ----------
   Antes: huecos de 70/52/36 px y tres anchos distintos apilados
   (912 la cabecera, 556 la nota, 460 el buscador). Ahora la cabecera
   es un bloque, el buscador y los filtros son una barra, y la rejilla
   arranca con una separación clara. */
#s-productos .stack-lg{gap:0}
#s-productos .screen-head{margin-bottom:0}
#s-productos .lede{max-width:68ch}
#s-productos .note.quiet{
  border:0;padding:0;margin:10px 0 0;max-width:68ch;background:none;
  color:var(--ink-faint);font-size:14.5px;line-height:1.6}
#s-productos .psearch{width:100%;max-width:none;margin-top:38px}
#s-productos .cat-filters{margin-top:14px;gap:7px}
#s-productos .cat-grid{margin-top:34px}
#s-productos .cat-grid + .card{margin-top:36px}
#s-productos .card + .tiny{margin-top:22px;display:block}
@media(max-width:720px){
  #s-productos .psearch{margin-top:28px}
  #s-productos .cat-grid{margin-top:26px}
}

/* ---------- perfil: el mismo ritmo del catálogo y de médicos ----------
   La entradilla ocupaba cinco líneas y decía casi palabra por palabra lo
   mismo que la tarjeta de la izquierda. Ahora la cabecera es un bloque
   (título, entradilla, nota pegada) y las advertencias van en la nota.
   Las dos columnas medían 473.8 y 420.2 px, así que las tarjetas caían
   desparejas (621 y 581 px de alto): las igualo y dejo que el panel de
   chat crezca hasta la altura de su vecina en vez de dejar un escalón. */
#s-cuenta .screen-head{margin-bottom:0}
#s-cuenta .lede{max-width:68ch}
#s-cuenta .note.quiet{
  border:0;padding:0;margin:10px 0 0;max-width:68ch;background:none;
  color:var(--ink-faint);font-size:14.5px;line-height:1.6}
#s-cuenta .pwrap{margin-top:38px}
@media(min-width:1000px){
  #s-cuenta .profile{grid-template-columns:1fr 1fr;align-items:stretch}
  #s-cuenta .pcol > .card{flex:1 1 auto}
  #s-cuenta .card.ai{display:flex;flex-direction:column}
  #s-cuenta .card.ai .chat{flex:1 1 auto;max-height:none;min-height:220px}
}
@media(max-width:720px){ #s-cuenta .pwrap{margin-top:28px} }

/* Las preguntas de ejemplo eran cuatro píldoras de 176, 276, 342 y 203 px,
   cada una en su fila: cuatro escalones. Como filas completas quedan
   alineadas y se leen como lo que son. */
#s-cuenta .card.ai .chips{display:grid;grid-template-columns:1fr;gap:6px;margin-top:12px}
#s-cuenta .card.ai .chips button{
  width:100%;display:flex;align-items:center;gap:9px;text-align:left;
  border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.35}
#s-cuenta .card.ai .chips button::before{
  content:"\203A";color:var(--ink-faint);font-size:15px;line-height:1;flex:none;
  transition:color .2s ease,transform .2s ease}
#s-cuenta .card.ai .chips button:hover::before{color:var(--accent);transform:translateX(2px)}

/* ---------- mayoristas: la seccion tenia 193 palabras y ni una cifra ----------
   Ahora la columna izquierda son condiciones y respaldo, y el formulario
   pregunta lo que decide si un pedido es viable: que eres, de donde y
   cuanto mueves. El correo deja de ser obligatorio porque el canal real
   es WhatsApp; pedir un correo que nadie usa era friccion sin retorno. */
#s-mayoristas .stack-lg{gap:0}
#s-mayoristas .screen-head{margin-bottom:0}
#s-mayoristas .lede{max-width:68ch}
#s-mayoristas .note.quiet{
  border:0;padding:0;margin:10px 0 0;max-width:68ch;background:none;
  color:var(--ink-faint);font-size:14.5px;line-height:1.6}
#s-mayoristas .mgrid{margin-top:38px}
@media(max-width:720px){ #s-mayoristas .mgrid{margin-top:28px} }

/* Las condiciones se leen en pares etiqueta/valor: la etiqueta se queda
   atras y el dato manda. */
#s-mayoristas .spec{align-items:baseline}
#s-mayoristas .spec>span:first-child{color:var(--ink-faint);flex:none}
#s-mayoristas .spec>span:last-child{text-align:right;font-weight:600}
#s-mayoristas .spec[hidden]{display:none}

#s-mayoristas .mproof .small{margin:10px 0 0;color:var(--ink-soft)}
#s-mayoristas .mproof .cta-row{margin-top:14px}

/* Los select del formulario no heredaban el estilo de los input: quedaban
   dos alturas distintas en la misma fila. */
#s-mayoristas .mform select{
  width:100%;font-family:var(--f-body);font-size:15.5px;
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:11px;
  background:var(--surface);color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6790' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px}
#s-mayoristas .mform select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-pale)}
#s-mayoristas .mform select.bad{border-color:var(--accent-deep);background-color:var(--tint-2)}

/* Si una etiqueta se parte en dos lineas y la de al lado no, los dos campos
   de la fila arrancan a alturas distintas. Alineando por abajo, los campos
   quedan a nivel pase lo que pase con las etiquetas. */
/* El indicativo, el codigo y el numero son un solo campo: el select manda
   los digitos que se aceptan y el chip solo muestra el prefijo. */
#s-mayoristas .telrow{margin-top:0;gap:8px}
#s-mayoristas .telrow select{flex:0 1 150px;min-width:0;padding-right:34px}
#s-mayoristas .telcod{flex:none;align-self:stretch;border-radius:11px;font-size:13px}
#s-mayoristas .telrow input{flex:1 1 130px;min-width:0}
@media(max-width:560px){
  /* El pais se lleva su propia linea; el prefijo y el numero se quedan
     juntos abajo, que es como se lee un telefono. */
  #s-mayoristas .telrow{flex-wrap:wrap}
  #s-mayoristas .telrow select{flex:1 1 100%}
  #s-mayoristas .telrow input{flex:1 1 0}
}
#s-mayoristas .acwrap .aclist{border-radius:11px}
#s-mayoristas .acitem{font-size:15px;padding:11px 14px}

#s-mayoristas .frow{align-items:end}
#s-mayoristas .mform select{line-height:18px}

/* La columna izquierda medía 726 px y el formulario 816: el escalon se veia
   justo en el borde inferior de la seccion. La tarjeta de respaldo estira y
   centra su contenido, asi que las dos columnas cierran a la misma altura. */
@media(min-width:960px){
  #s-mayoristas .mgrid{align-items:stretch}
  #s-mayoristas .mside{height:100%}
  #s-mayoristas .mproof{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
}

/* "opcional" en la etiqueta ahorra al visitante calcular que puede saltarse. */
.fopt{font-family:var(--f-body);font-size:11px;letter-spacing:0;
  text-transform:none;color:var(--ink-faint);font-weight:400}

/* Un titular de dos lineas que deja una palabra sola arriba ("Confirmamos" /
   "profesional, fecha y valor") se lee como un error. balance reparte. */
.step h3{text-wrap:balance}
/* Virtual primero y presencial debajo: no compiten por el mismo renglon. */
.bkcta{flex-direction:column;gap:9px}

/* ---------- sección médicos: ritmo, ancho y reacción al puntero ---------- */
#s-medicos .stack-lg{gap:0}
#s-medicos .screen-head{margin-bottom:0}
#s-medicos .lede{max-width:68ch}
#s-medicos .note.quiet{
  border:0;padding:0;margin:10px 0 0;max-width:68ch;background:none;
  color:var(--ink-faint);font-size:14.5px;line-height:1.6}
#s-medicos .medgrid{margin-top:38px}
#s-medicos .medbook{margin-top:40px}
#s-medicos .medgrid + .medbook + .tiny{margin-top:22px;display:block}

/* auto-fit en vez de auto-fill: con dos fichas ya no queda una columna vacía */
.medgrid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* la ficha entera es el objetivo */
.medcard{cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease,border-color .25s ease}
.medcard:hover{transform:translateY(-5px);border-color:var(--accent-pale);
  box-shadow:0 8px 18px rgba(36,30,106,.07),0 28px 56px rgba(36,30,106,.12)}
.medcard:active{transform:translateY(-1px) scale(.995);transition-duration:.09s}
/* El retrato reacciona al puntero: sube contraste y brillo y hace un zoom
   suave. Se mantiene en blanco y negro para que los tres retratos se vean
   iguales entre si. */
.medcard .mshot img{filter:grayscale(1) contrast(1.03) brightness(1);
  transition:filter .5s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
.medcard:hover .mshot img{filter:grayscale(1) contrast(1.08) brightness(1.06);transform:scale(1.04)}
.medcard .medver{margin-top:auto;padding-top:14px;font-family:var(--f-label);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:7px;transition:color .25s}
.medcard:hover .medver{color:var(--accent)}
.medcard .medver span{transition:transform .3s cubic-bezier(.34,1.4,.64,1);display:inline-block}
.medcard:hover .medver span{transform:translateX(4px)}
.medcard.pend{cursor:default}
.medcard.pend:hover{transform:none;box-shadow:none}

@media (prefers-reduced-motion: reduce){
  .medcard,.medcard:hover,.medcard:active{transform:none!important;transition:none}
  .medcard:hover .mshot img{transform:none}
}

.med-shot{width:132px;height:132px;border-radius:50%;overflow:hidden;margin:0 auto 18px;
  border:1px solid var(--line)}
.med-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
#medSheet .eyebrow,#medSheet h3{text-align:center}

/* índice de compuestos en el pie: enlaces reales para buscadores */
.fcol a.flinkbtn{display:block;padding:5px 0;color:var(--ink-soft);font-size:14.5px;text-decoration:none}.fcol a.flinkbtn:hover{color:var(--accent)}
.fidx{margin:0 0 18px;font-size:12.5px;color:var(--ink-faint)}
.fidx summary{cursor:pointer;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:8px 0}
.fidx nav{padding:6px 0 4px;line-height:2}
.fidx a{color:var(--ink-soft);text-decoration:none}.fidx a:hover{color:var(--accent)}
/* --- titulares en la fuente de display del manual --- */
h1,h2,h3,h4,.pull,.bigline,.wordmark,.hc-name,.drastrip h3,.dra-nombre,.strip h4,
.legalitem .li-h,.pcalc .title h1,.t3 h3,.medcard h3,.medbody h3,.pcard h3,.pd-sheet h3,.sheet h3{font-family:var(--f-display)}
h1{letter-spacing:-.025em}
h2{letter-spacing:-.02em}
/* etiquetas que antes iban en monoespaciada: mismo tracking, cifras tabulares */
.mono,.pcalc .mono,.pcalc .readout .pair b,.stock,.hc-price,.coacard,.telcod,.countdown{font-variant-numeric:tabular-nums}

/* Match the mobile hero photograph to the full-width product cards below. */
@media(max-width:779px){
  .hero .stage{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;
    width:100%;border:1px solid var(--line);border-radius:22px;overflow:hidden;
    background:var(--surface);box-shadow:var(--shadow);perspective:none}
  .hero .stage .net,.hero .stage .orbit,.hero .stage .glow{display:none}
  .hero .vialbtn{position:relative;left:auto;top:auto;width:100%;max-width:none;
    transform:none;animation:none;filter:none;flex:none}
  .hero .vialbtn img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    border-radius:0;border:0;box-shadow:none;transform:none!important;transition:none}
  .hero .vialbtn::after{display:none}
  .hero .hcard-wrap{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;max-width:none;transform:none!important;will-change:auto}
  .hero .hcard{width:100%;padding:20px 22px 22px;border:0;border-radius:0;
    box-shadow:none;opacity:1;transform:none;animation:none;gap:9px}
  .hero .hc-name{font-size:22px}
  .hero .hc-price b{font-size:23px}
  .hero .hc-ship{font-size:14px}
}