@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..500&family=Familjen+Grotesk:wght@400;500;600;700&display=swap');

/* =============================================================================
   theme-botica.css — Dirección "Botica Heredada" (apotecario cálido, herencia 1919)
   Se enlaza DESPUÉS de base.css en mvp2-home.html → gana por cascada y re-piel
   todo el markup existente vía override de tokens. Crema/hueso + marino cálido +
   terracota + salvia. Fraunces (display) + Familjen Grotesk (cuerpo).
   ============================================================================= */

/* ---------- TOKENS — TEMA CLARO "Papel de botica" ---------- */
:root[data-theme="light"]{
  --bg:#F4EEE2; --bg-alt:#EFE7D6;
  --surface:#FCF9F2; --raised:#FFFDF8; --sunken:#E9DFCC; --surface-2:#E9DFCC; --surface-3:#E2D6BE;
  --line:#DFD3BC; --line-strong:#C9B896;
  --ink:#20304F; --ink-muted:#5A5240; --ink-soft:#5A5240; --ink-invert:#FCF9F2;
  --primary:#20304F; --primary-ink:#FCF9F2;
  --accent:#B4552D; --accent-tint:#F0DFCF; --sage:#5E7355; --gold:#A8823C; --accent-2:#A8823C;
  --accent-text:#9A4222;                     /* terracota OSCURECIDA para texto (AA sobre crema) */
  --navy-deep:#16233F;
  --success:#4C7A4E; --warning:#9A6A18; --error:#A9382A;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);
  --shadow-sm:0 1px 2px rgba(60,42,20,.10);
  --shadow-md:0 12px 30px -16px rgba(60,42,20,.28);
  --shadow-lg:0 28px 64px -30px rgba(60,42,20,.40);
  --shadow:0 28px 64px -30px rgba(60,42,20,.40);
  --logo-filter:none;
}

/* ---------- TOKENS — TEMA OSCURO "Botica de noche" ---------- */
:root[data-theme="dark"]{
  --bg:#1A1712; --bg-alt:#211C15;
  --surface:#252017; --raised:#2E271C; --sunken:#1F1A13; --surface-2:#1F1A13; --surface-3:#332B1F;
  --line:#3A3226; --line-strong:#4E4331;
  --ink:#EFE7D6; --ink-muted:#B7A98C; --ink-soft:#B7A98C; --ink-invert:#EFE7D6;
  --primary:#E08A54; --primary-ink:#1A1712;
  --accent:#E08A54; --accent-tint:#3A2A1D; --sage:#8FA582; --gold:#CBA35A; --accent-2:#CBA35A;
  --accent-text:#E08A54;                     /* en oscuro la terracota clara ya cumple AA */
  --navy-deep:#101A2E;
  --success:#7DB07E; --warning:#D6A24E; --error:#E0796B;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 14px 34px -16px rgba(0,0,0,.66);
  --shadow-lg:0 30px 66px -30px rgba(0,0,0,.76);
  --shadow:0 30px 66px -30px rgba(0,0,0,.76);
  --logo-filter:brightness(0) invert(1);
}

/* ---------- ESCALAS ---------- */
:root{
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-pill:999px;
  /* Re-apunta el navy de marca a versiones CÁLIDAS (announcement, heritage, footer usan navy-800/900) */
  --navy-800:#16233F; --navy-900:#101A2E;
}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:600; letter-spacing:-.015em; line-height:1.06; }
body{ font-family:var(--font-body); }
.eyebrow{ font-family:var(--font-body); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.sec-head h2{ font-size:clamp(28px,3.6vw,46px); }

/* ---------- BOTONES (hover independiente del navy-800 base) ---------- */
.btn-primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }
.btn-primary:hover{ background:color-mix(in srgb, var(--primary) 84%, #000); }
.btn-accent{ background:var(--accent); color:#fff; border-color:transparent; }
.btn-accent:hover{ background:color-mix(in srgb, var(--accent) 86%, #000); }

/* ---------- CARDS: fondo propio + sombra, CERO líneas de acento ---------- */
.pcard, .sucrow, .post, .panel, .fbt, .kit, .review, .doc{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.card--featured{ box-shadow:var(--shadow-md), inset 0 2px 0 color-mix(in srgb,var(--gold) 45%,transparent); }

/* Ritmo de fondos por banda (sin líneas divisorias) */
.band-alt{ background:var(--bg-alt); }
.band-deep{ background:var(--navy-deep); color:var(--ink-invert); }
.band-deep .muted, .band-deep .eyebrow{ color:color-mix(in srgb, var(--ink-invert) 74%, transparent); }
.band-deep .eyebrow{ color:var(--gold); }

/* =============================================================================
   HERO SLIDER (3 slides · wipe diagonal clip-path + Ken Burns + texto escalonado)
   ============================================================================= */
.hero-slider{ position:relative; min-height:88vh; overflow:hidden; isolation:isolate; background:var(--navy-deep); }
.hslide{ position:absolute; inset:0; opacity:0; pointer-events:none;
  clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition:clip-path .9s cubic-bezier(.76,0,.24,1), opacity .01s linear; }
.hslide.active{ opacity:1; pointer-events:auto; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.hbg{ position:absolute; inset:0; overflow:hidden; }
.hbg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); }
.hslide.active .hbg img{ animation:ken 7.5s ease-out forwards; }
@keyframes ken{ from{ transform:scale(1.03) } to{ transform:scale(1.12) } }
.hscrim{ position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(22,35,63,.80) 0%, rgba(22,35,63,.42) 44%, rgba(22,35,63,.20) 100%); }
.hinner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; height:100%;
  min-height:88vh; padding:0 var(--s6) 12vh; display:flex; flex-direction:column; justify-content:flex-end; gap:16px; }
.hinner .heyebrow{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); }
.htitle{ font-family:var(--font-display); font-weight:600; color:var(--ink-invert);
  font-size:clamp(44px,7vw,88px); line-height:1.0; letter-spacing:-.02em; max-width:16ch; }
.hsub{ color:color-mix(in srgb, var(--ink-invert) 88%, transparent); font-size:clamp(15px,1.5vw,19px); max-width:46ch; }
.hcta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
/* Texto escalonado */
.hslide .hinner > *{ opacity:0; transform:translateY(26px); }
.hslide.active .heyebrow{ animation:hrise .6s .30s cubic-bezier(.2,.8,.2,1) forwards; }
.hslide.active .htitle{ animation:hrise .7s .42s cubic-bezier(.2,.8,.2,1) forwards; }
.hslide.active .hsub{ animation:hrise .6s .56s cubic-bezier(.2,.8,.2,1) forwards; }
.hslide.active .hcta{ animation:hrise .6s .70s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hrise{ to{ opacity:1; transform:none } }

/* Controles */
.harrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:52px; height:52px;
  border-radius:50%; border:1px solid rgba(252,249,242,.35); background:rgba(252,249,242,.12);
  backdrop-filter:blur(6px); color:var(--ink-invert); display:grid; place-items:center; cursor:pointer;
  transition:background .18s, border-color .18s; }
.harrow:hover{ background:var(--accent); border-color:var(--accent); }
.harrow.prev{ left:24px; } .harrow.next{ right:24px; }
.harrow svg{ width:22px; height:22px; }
.hdots{ position:absolute; left:var(--s6); bottom:5vh; z-index:4; display:flex; gap:8px; }
.hdot{ width:9px; height:9px; border-radius:999px; border:none; background:rgba(252,249,242,.45); cursor:pointer;
  transition:width .3s, background .3s; }
.hdot.on{ width:30px; background:var(--accent); }
.hprog{ position:absolute; left:0; bottom:0; z-index:4; height:3px; background:var(--gold); transform-origin:left; transform:scaleX(0); }
.hprog.run{ animation:hprog 6s linear forwards; }
@keyframes hprog{ to{ transform:scaleX(1) } }
.hpause{ position:absolute; right:var(--s6); bottom:5vh; z-index:4; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(252,249,242,.35); background:rgba(252,249,242,.12); color:var(--ink-invert); cursor:pointer; display:grid; place-items:center; }
@media(max-width:820px){ .harrow{ width:44px; height:44px; } .htitle{ font-size:clamp(34px,10vw,52px) } .hinner{ padding-bottom:16vh } }

/* =============================================================================
   SECCIONES DENSAS NUEVAS
   ============================================================================= */

/* Contador animado (banda navy-deep) */
.countband{ padding:var(--s8) 0; }
.countgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); text-align:center; }
.countitem{ display:flex; flex-direction:column; gap:4px; }
.bignum{ font-family:var(--font-display); font-weight:600; line-height:.9; font-size:clamp(40px,6vw,72px); color:var(--ink-invert); }
.bignum .suf{ color:var(--gold); }
.countlbl{ font-family:var(--font-body); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--ink-invert) 66%, transparent); }
@media(max-width:720px){ .countgrid{ grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s4); } }

/* Compra por síntoma */
.symchips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s5); }
.symchip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line-strong);
  color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:background .16s, border-color .16s, color .16s, transform .16s; }
.symchip .ic{ width:18px; height:18px; color:var(--sage); }
.symchip:hover{ transform:translateY(-2px); border-color:var(--accent); }
.symchip.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }
.symchip.on .ic{ color:var(--accent); }

/* Gliser — marca propia (banda destacada) */
.gliser{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7); align-items:center; }
.gliser-media{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gliser-media .imgwrap{ border-radius:var(--radius); aspect-ratio:4/5; border:1px solid var(--line-strong); background:var(--surface); box-shadow:var(--shadow-sm); }
.gliser-media .imgwrap img{ object-fit:contain; padding:12%; }
.seal{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--gold) 16%, var(--surface)); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  color:var(--gold); font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.04em; }
@media(max-width:820px){ .gliser{ grid-template-columns:1fr; gap:var(--s6); } }

/* Bundles / Kit-protocolo */
.kits{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.kit{ padding:var(--s5); display:flex; flex-direction:column; gap:12px; }
.kit-photos{ display:flex; gap:8px; }
.kit-photos .imgwrap{ flex:1; aspect-ratio:1; border-radius:10px; border:1px solid var(--line); background:var(--sunken); }
.kit-photos .imgwrap img{ object-fit:contain; padding:14%; }
.kit h4{ font-size:19px; }
.kit-price{ display:flex; align-items:baseline; gap:10px; margin-top:auto; }
.kit-price .now{ font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); }
.kit-price .was{ color:var(--ink-muted); text-decoration:line-through; font-size:14px; }
.kit-save{ font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--accent); background:var(--accent-tint);
  padding:4px 9px; border-radius:var(--radius-pill); }
@media(max-width:820px){ .kits{ grid-template-columns:1fr; } }

/* Reseñas con foto */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.review{ padding:var(--s5); display:flex; flex-direction:column; gap:12px; }
.rv-stars{ color:var(--gold); letter-spacing:2px; font-size:15px; }
.rv-quote{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:18px; line-height:1.4; color:var(--ink); }
.rv-top{ display:flex; align-items:center; gap:12px; }
.rv-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--surface); box-shadow:var(--shadow-sm); }
.rv-name{ font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink); }
.rv-meta{ font-size:12px; color:var(--ink-muted); }
@media(max-width:820px){ .reviews{ grid-template-columns:1fr; } }

/* Médicos / Agendar */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.doc{ overflow:hidden; display:flex; flex-direction:column; }
.doc .imgwrap{ aspect-ratio:4/3; }
.doc .imgwrap img{ object-fit:cover; }
.doc-body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.doc-body h4{ font-size:18px; }
.doc-spec{ font-size:12.5px; color:var(--sage); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
@media(max-width:820px){ .docs{ grid-template-columns:1fr; } }

/* Marquee de marcas */
.brandmarquee{ overflow:hidden; border-block:1px solid var(--line-strong); background:var(--bg-alt); }
.bm-track{ display:inline-flex; align-items:center; gap:64px; padding:22px 32px; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--ink-muted);
  animation:bm 26s linear infinite; }
.bm-track .dot{ color:var(--accent); }
.brandmarquee:hover .bm-track{ animation-play-state:paused; }
@keyframes bm{ to{ transform:translateX(-50%) } }

/* Chochito loyalty */
.loyalty{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); align-items:center;
  background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--radius-lg); padding:var(--s6) var(--s7); }
.loyalty h3{ font-size:clamp(24px,3vw,34px); color:var(--ink); }
@media(max-width:820px){ .loyalty{ grid-template-columns:1fr; padding:var(--s6); } }

/* Instagram / lifestyle grid */
.iggrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.igcell{ aspect-ratio:1; border-radius:12px; overflow:hidden; position:relative; border:1px solid var(--line); }
.igcell img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.igcell:hover img{ transform:scale(1.08); }
@media(max-width:820px){ .iggrid{ grid-template-columns:repeat(3,1fr); } }

/* =============================================================================
   MOTION — scroll reveal (JS añade .in)
   ============================================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hslide{ transition:opacity .3s; clip-path:none !important; }
  .hslide:not(.active){ opacity:0; } .hslide.active{ opacity:1; }
  .hslide.active .hbg img{ animation:none; }
  .hslide.active .hinner > *{ animation:none; opacity:1; transform:none; }
  .bm-track{ animation:none; }
  .hprog.run{ animation:none; }
}

/* ---------- CORRECCIONES DE CONTRASTE (revisión F7) ---------- */
/* Terracota como TEXTO usa la variante oscurecida (AA sobre crema). Los rellenos/bordes siguen con --accent. */
.eyebrow, .linkmore, .symchip.on, .kit-save, .btn-text{ color:var(--accent-text); }
/* Sello dorado: oscurecer el texto para AA (mantiene identidad dorada) */
.seal{ color:color-mix(in srgb, var(--gold) 72%, #000); }
/* CTA sobre foto: cálido, no azul-frío */
.btn-onimg{ color:var(--navy-deep); }
.btn-onimg:hover{ background:#F4EEE2; }