/* ===========================================================
   Tema "Bienestar" — TEMA GLOBAL del sitio (crema + verdes de
   salud + acento terracota). Se carga DESPUÉS de styles.css en
   TODAS las páginas y neutraliza el bloque "TEMA OSCURO" heredado.
   Antes estaba scoped a /glp1/; desde la unificación 2026-07-01
   aplica a home, /peptidos/, /guia/ y las fichas por igual.
   Paleta del research competitivo (Hers/Sprout) — contraste AA.
   =========================================================== */

:root {
  /* superficies — crema + menta neblina */
  --bg:        #F6F4EC;
  --surface:   #FFFFFF;
  --surface-2: #EAF3EC;
  --line:      #D8E2D7;
  --line-soft: #E4ECE3;

  /* tinta — verde-carbon sobre claro (AAA/AA) */
  --ink:    #16271F;
  --ink-2:  #2E4036;
  --muted:  #5C6E63;

  /* marca — verdes de bienestar + acento calido de accion */
  --brand:      #2E6B4F;   /* verde bosque/eucalipto (primario) */
  --brand-deep: #1F4D38;   /* verde profundo */
  --accent:     #E0734A;   /* terracota — UNICO color de accion (CTA) */
  --petrol:     #4E9E72;   /* verde salvia medio */
  --teal:       #4E9E72;
  --gold:       #C98A3C;   /* dorado calido (acento secundario) */
  --mint:       #DCEBE0;
  --mint-soft:  #EAF3EC;

  /* evidencia — sobrios sobre claro */
  --ev-establecido: #2E6B4F;
  --ev-clinico:     #3E7E8C;
  --ev-comunidad:   #C98A3C;
  --ev-especulativo:#5C6E63;

  /* sombras suaves verde-gris (no negro duro) */
  --shadow-sm: 0 1px 2px rgba(22,39,31,.07), 0 2px 8px rgba(22,39,31,.05);
  --shadow:    0 16px 40px rgba(22,39,31,.12);
  --shadow-lg: 0 28px 62px rgba(22,39,31,.16);
  --ring:      0 0 0 4px rgba(46,107,79,.22);
}

/* ---------- NAV: claro y aireado (estilo Hers/Ro), wordmark verde ---------- */
body .nav { background: rgba(246,244,236,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; }
body .nav.scrolled { border-color: var(--line); box-shadow: 0 8px 28px rgba(22,39,31,.10); }
body .nav-links a { color: var(--ink-2); }
body .nav-links a:hover { color: var(--brand); }
body .brand span { color: var(--ink); }
body .brand small { color: var(--muted); }
/* logo Brote Sagrado (Flor de la Vida) — full color sobre el nav claro; en el footer oscuro solo va el wordmark */
body .brand-mark.logo-img { display: inline-block; width: 52px; height: 52px; padding: 0; background: transparent; border-radius: 0; object-fit: contain; box-shadow: none; filter: none; }
body .footer .brand-mark.logo-img { display: none; }

/* ---------- BOTONES: CTA en terracota con texto tinta (AA 5.9:1) ---------- */
body .btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 10px 24px rgba(224,115,74,.26); }
body .btn-primary:hover { background: #D2643B; box-shadow: 0 16px 32px rgba(224,115,74,.34); }
body .nav-cta .btn-primary, body .price-card .btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 10px 24px rgba(224,115,74,.30); }
body .nav-cta .btn-primary:hover, body .price-card .btn-primary:hover { background: #D2643B; box-shadow: 0 16px 34px rgba(224,115,74,.40); }
body .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
body .btn-ghost:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
/* botones sobre la foto del hero: glass claro con texto blanco */
body .hero-banner .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.42); }
body .hero-banner .btn-ghost:hover { background: rgba(255,255,255,.26); }

/* ---------- HERO (foto + velo): texto blanco legible sobre la imagen ---------- */
body .hero-veil {
  background:
    linear-gradient(90deg, rgba(13,28,22,.86) 0%, rgba(13,28,22,.62) 34%, rgba(13,28,22,.20) 62%, rgba(13,28,22,0) 100%),
    linear-gradient(0deg, rgba(13,28,22,.40) 0%, transparent 42%);
}
body .hero-banner h1,
body .hero-banner .hero-content > .eyebrow { color: #fff; }
body .hero-banner .lead { color: rgba(255,255,255,.92); }
body .hero-banner .hero-trust { color: rgba(255,255,255,.86); }
body .hero-banner .hero-trust b { color: #BFE3CC; }
body .hero-banner .hero-content > .eyebrow::before { background: var(--accent); }
body .hero h1 span { background: linear-gradient(120deg, #C9EBD5, #FFFFFF 42%, #F4B79B); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 920px) {
  body .hero-veil { background: linear-gradient(180deg, rgba(13,28,22,.32), rgba(13,28,22,.82) 58%, rgba(13,28,22,.90)); }
}

/* ---------- EYEBROW / acentos verdes (secciones claras) ---------- */
body .eyebrow::before { background: var(--accent); }

/* ---------- BADGES de evidencia sobre claro ---------- */
body .ev-establecido { color: var(--ev-establecido); background: rgba(46,107,79,.12); }
body .ev-clinico     { color: var(--ev-clinico);     background: rgba(62,126,140,.12); }
body .ev-comunidad   { color: var(--ev-comunidad);   background: rgba(201,138,60,.14); }
body .ev-especulativo{ color: var(--ev-especulativo);background: rgba(92,110,99,.14); }

/* ---------- TARJETAS: glints verdes en vez de azules + bordes destacados ---------- */
/* stat-card tenia fondo navy hardcodeado -> superficie clara */
body .stat-card { background: var(--surface); }
body .stat-card::before { background: radial-gradient(circle, rgba(46,107,79,.08), transparent 70%); }
body .stat-card:hover,
body .compare-card:hover { border-color: rgba(46,107,79,.40); }
body .faq-item[open] { border-color: rgba(46,107,79,.40); }
body .stat-card.is-feature,
body .compare-card.is-hero { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
body .compare-card.is-hero { background: linear-gradient(170deg, var(--mint-soft), var(--surface)); }

/* ---------- CTA Guia: banda verde profunda, texto blanco ---------- */
body .cta-wrap { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; }

/* ---------- FOOTER: verde-carbon profundo (no negro azulado) ---------- */
body .footer { background: var(--ink); color: rgba(255,255,255,.75); }

/* ---------- viales: más grandes + fondo neutro cálido detrás del producto ---------- */
body .three-vials { max-width: 920px; gap: 28px; }
body .vial-fig { padding: 24px 18px; }
body .vial-fig img { background: #F2F5EF; max-width: 210px; }
body .vial-fig figcaption strong { font-size: 1.1rem; }

/* ---------- HERO: pens flotando + gráfica descendente (estilo Ro/Hers) ---------- */
.hero-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-graph { position: absolute; top: 12%; right: 3.5%; width: 232px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 44px rgba(22,39,31,.24); animation: floaty 8s ease-in-out infinite; }
.hg-label { font-family: "Sora", sans-serif; font-size: .7rem; font-weight: 600; color: #1F4D38; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 9px; }
.hg-svg { width: 100%; height: 70px; display: block; }
.hg-line { fill: none; stroke: #E0734A; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hg-area { fill: rgba(224,115,74,.15); stroke: none; }
.hg-dot { fill: #E0734A; }
.hg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: .66rem; color: #5C6E63; }
.hg-foot strong { color: #C2592F; font-size: .82rem; font-family: "Sora", sans-serif; }
.pen { position: absolute; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(22,39,31,.34)); }
.pen-a { right: 27%; top: 6%;  height: 122px; transform: rotate(6deg);  animation: floaty 7s ease-in-out infinite; }
.pen-b { right: 9%;  top: 44%; height: 150px; transform: rotate(-4deg); animation: floaty 7.6s ease-in-out infinite .4s; }
.pen-c { right: 22%; top: 62%; height: 116px; transform: rotate(-12deg); animation: floaty 8.3s ease-in-out infinite .8s; }
@media (max-width: 980px) { .hero-floats { display: none; } }

/* ---------- microcopy bajo los CTA del hero ---------- */
.hero-microcopy { color: rgba(255,255,255,.82); font-size: .88rem; margin: 14px 0 24px; letter-spacing: .01em; }

/* ---------- antes/después: 4 fotos (frente + perfil) por grupo ---------- */
body .ba-grid { max-width: 1000px; align-items: start; }
body .ba-group { display: flex; flex-direction: column; gap: 14px; }
body .ba-group .ba-tag { position: static; align-self: flex-start; box-shadow: var(--shadow-sm); }
body .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body .ba-pair .ba-fig { margin: 0; }
body .ba-pair .ba-fig img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
body .ba-pair figcaption { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 7px; font-family: "Sora", sans-serif; letter-spacing: .02em; }
body .ba-arrow { align-self: center; }
@media (max-width: 820px) {
  body .ba-grid { grid-template-columns: 1fr; }
  body .ba-arrow { margin: 4px auto; }
}

/* ---------- bloque de referencia de resultados (no promesa) ---------- */
.result-ref { max-width: 760px; margin: 26px auto 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm); }
.result-ref h3 { margin: 0 0 8px; font-size: 1.06rem; font-family: "Sora", sans-serif; }
.result-ref p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.7; }
.result-ref strong { color: var(--ink); }

/* ===========================================================
   UNIFICACIÓN 2026-07-01 — componentes que el tema oscuro dejaba
   con fondos/acentos hardcodeados y que ahora viven en tema claro
   (home: .feature / menú móvil · fichas: .detail-hero · chips).
   =========================================================== */

/* tarjetas "feature" (home: Cómo funciona + Sistema) — de navy a superficie clara */
body .feature { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
body .feature::before { background: radial-gradient(circle, rgba(46,107,79,.10), transparent 70%); }
body .feature:hover { border-color: rgba(46,107,79,.40); box-shadow: var(--shadow); }
body .feature .ic {
  background: linear-gradient(135deg, rgba(46,107,79,.16), rgba(78,158,114,.10));
  border: 1px solid rgba(46,107,79,.26);
  box-shadow: 0 0 24px rgba(46,107,79,.12);
}
body .feature .text-ic { color: var(--brand-deep); }
body .system-features .feature { border-top: 3px solid var(--brand); }
body .insight-band { background: var(--surface); border-top: 1px solid var(--line-soft); }

/* chips activos (biblioteca /peptidos/) — texto blanco legible sobre verde */
body .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
body .chip:hover { border-color: var(--brand); color: var(--brand); }

/* hero de detalle (fichas de péptido) — tinte verde en vez de azul */
body .detail-hero { background: linear-gradient(180deg, rgba(46,107,79,.08), var(--bg)); border-bottom: 1px solid var(--line); }

/* menú móvil desplegable — panel claro (antes navy #0b1a36) */
@media (max-width: 640px) {
  body .nav-links { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(22,39,31,.14); }
  body .nav-links a { color: var(--ink); border-bottom: 1px solid var(--line-soft); }
  body .nav-toggle { color: var(--ink); }
}

/* representación molecular en la ficha: lienzo crema que se funde con el render 3D */
body .mol-image, body .mol-image img { background: #F6F4EC; }