/* ============================================================
   FORMA° — La ciencia de estar en forma.
   Sistema de diseño oficial · Manual de Marca 2026
   Fondo: Verde Carbón #0E1A16 (nunca negro puro)
   Primario: Verde FORMA #1DB89A
   ============================================================ */

:root{
  --bg:        #0E1A16;   /* Verde Carbón — fondo principal */
  --bg-deep:   #0A1310;   /* sombra del carbón para capas inferiores */
  --panel:     #12211B;   /* panel elevado */
  --panel-2:   #172820;   /* Verde Muy Oscuro — franjas y detalles */
  --line:      rgba(122,191,175,.14);
  --line-soft: rgba(122,191,175,.08);

  --brand:     #1DB89A;   /* Verde FORMA */
  --brand-ink: #06231C;   /* texto sobre botón brand */
  --deep:      #0F8A72;   /* Verde Profundo — subtítulos, iconos */
  --mint:      #7ABFAF;   /* Verde Texto Claro — secundario */
  --gray:      #7A9187;   /* Gris verdoso — legal, notas */
  --white:     #FFFFFF;

  /* Colores por Lab */
  --coral:     #E8604A;   /* Weight Lab — Retatrutide */
  --gold:      #C8A84B;   /* GH Stack — Ipamorelin / CJC-1295 */
  --violet:    #9B7FD4;   /* Skin Lab — GHK-Cu */
  --blue:      #2E7DB8;   /* Agua Bacteriostática */

  --lab: var(--brand);            /* acento de la página actual */
  --lab-soft: rgba(29,184,154,.14);

  --font-d: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --wrap: 1180px;
  --shadow-1: 0 10px 40px rgba(0,0,0,.35);
  --shadow-2: 0 24px 80px rgba(0,0,0,.5);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme: dark; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--font-d);
  background: var(--bg);
  color: rgba(255,255,255,.86);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Resplandor de fondo global */
.bgfx{
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--lab) 13%, transparent), transparent 65%),
    radial-gradient(700px 500px at -10% 40%, rgba(15,138,114,.10), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(23,40,32,.85), transparent 70%);
}
/* Retícula molecular sutil */
.bgfx::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image: radial-gradient(rgba(122,191,175,.9) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

::selection{ background: var(--brand); color: var(--brand-ink); }

img{ max-width:100%; display:block; }
a{ color: var(--brand); text-decoration: none; }
a:hover{ color: #3fd3b6; }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

h1,h2,h3,h4{ color: var(--white); line-height:1.12; letter-spacing:-.02em; font-weight:800; }
strong{ color: var(--white); font-weight:700; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- tipos utilitarios ---------- */
.kicker{
  font-family: var(--font-m); font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color: var(--lab);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:1.5px; background: var(--lab); display:inline-block; }
.kicker.nobar::before{ display:none; }

.sec{ padding: 96px 0; position:relative; }
.sec-tight{ padding: 64px 0; }
.sec h2{ font-size: clamp(30px, 4.4vw, 46px); margin: 14px 0 14px; }
.sec .lead{ color: var(--mint); font-size: 18px; max-width: 640px; }

.mono{ font-family: var(--font-m); }
.muted{ color: var(--mint); }
.tiny{ font-size: 13px; color: var(--gray); }

/* ---------- header ---------- */
.nav{
  position: sticky; top:0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color: var(--line-soft); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.nav-in{
  max-width: var(--wrap); margin:0 auto; padding: 0 24px;
  display:flex; align-items:center; gap:28px; height: 74px;
}
.logo{
  font-weight: 900; font-size: 25px; letter-spacing: .06em; color: var(--white);
  display:flex; align-items:flex-start; gap:1px; text-transform: uppercase;
}
.logo .deg{ color: var(--brand); font-size: .72em; line-height: 1.15; }
.logo:hover{ color: var(--white); }
.nav-links{ display:flex; gap: 26px; margin-left:auto; align-items:center; }
.nav-links a{
  color: rgba(255,255,255,.78); font-size: 15px; font-weight: 500; position:relative; padding: 6px 0;
}
.nav-links a:hover{ color: var(--white); }
.nav-links a[aria-current="page"]{ color: var(--white); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background: var(--brand);
}
.burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius: 10px;
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; color: var(--white);
}
.burger svg{ width:22px; height:22px; }

/* menú móvil */
.mobilemenu{
  display:none; position: fixed; inset: 74px 0 0 0; z-index: 55;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 28px 24px; flex-direction: column; gap: 6px;
}
.mobilemenu.open{ display:flex; }
.mobilemenu a{
  color: var(--white); font-size: 21px; font-weight: 600; padding: 14px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.mobilemenu .mm-cta{ margin-top: 18px; border-bottom: none; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-d); font-weight: 700; font-size: 15.5px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor:pointer; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
  white-space: nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 8px 28px rgba(29,184,154,.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(29,184,154,.4); color: var(--brand-ink); }
.btn-ghost{
  background: transparent; color: var(--white); border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--mint); color: var(--white); transform: translateY(-2px); }
.btn-lab{
  background: var(--lab); color: #0B1512;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--lab) 30%, transparent);
}
.btn-lab:hover{ transform: translateY(-2px); color:#0B1512; box-shadow: 0 14px 38px color-mix(in srgb, var(--lab) 42%, transparent); }
.btn-lg{ padding: 18px 34px; font-size: 16.5px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------- hero (inicio) ---------- */
.hero{ padding: 84px 0 70px; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero h1{ font-size: clamp(40px, 5.6vw, 66px); letter-spacing:-.028em; margin: 20px 0 18px; }
.hero h1 .hl{ color: var(--brand); }
.hero .sub{ font-size: 19px; color: var(--mint); max-width: 560px; margin-bottom: 32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-badges{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
/* El kicker de la portada bajó: ya no es antetítulo, cierra el bloque. */
.hero-grid .kicker{ margin-top: 24px; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-m); font-size: 12.5px; font-weight:500; letter-spacing:.02em;
  color: var(--mint); background: var(--panel); border:1px solid var(--line);
  padding: 9px 14px; border-radius: 999px;
}
.chip svg{ width:15px; height:15px; color: var(--brand); flex:none; }
.chip b{ color: var(--white); font-weight:600; }

.hero-media{ position:relative; }
.media-card{
  border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow-2); position:relative; background: var(--panel-2);
}
.media-card img{ width:100%; height:100%; object-fit:cover; }
.media-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 55%, rgba(14,26,22,.55));
  pointer-events:none;
}
/* La portada va con foto de alta luz y fondo claro: el degradado oscuro que
   funde las fotos de estudio con la página sería una mancha sucia en la
   esquina, y el borde oscuro, un marco negro alrededor del blanco. */
.media-card.claro{ border-color: rgba(255,255,255,.14); background: #EFF3F4; }
.media-card.claro::after{ display:none; }
.hero-media .glow{
  position:absolute; inset:-8%; z-index:-1; filter: blur(60px); opacity:.5; border-radius: 40px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lab) 35%, transparent), transparent 70%);
}
.media-tag{
  position:absolute; left:18px; bottom:18px; z-index:2;
  font-family: var(--font-m); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background: rgba(14,26,22,.72); border:1px solid var(--line);
  padding: 9px 14px; border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---------- tarjetas de producto (catálogo) ---------- */
/* 6 columnas: 1 destacada (6) + 3 medianas (2 c/u) + 2 anchas (3 c/u). Sin filas huérfanas. */
.grid-prod{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 44px; }
.grid-prod > .pcard{ grid-column: span 2; }
.grid-prod > .pcard-half{ grid-column: span 3; }
.grid-prod > .pcard-half .pcard-media{ aspect-ratio: 16/9.4; }
.pcard{
  --lab: var(--brand);
  position:relative; display:flex; flex-direction:column;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.pcard:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--lab) 45%, var(--line));
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--lab) 25%, transparent) inset;
}
.pcard-media{ position:relative; aspect-ratio: 4 / 3.1; overflow:hidden; background: #101d18; }
.pcard-media img{ width:100%; height:100%; object-fit:cover; object-position:center 78%; transition: transform .6s ease; }
.pcard:hover .pcard-media img{ transform: scale(1.045); }
.pcard-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,26,22,.12), transparent 40%, rgba(14,26,22,.65) 92%);
}
.lab-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--font-m); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--lab); background: rgba(14,26,22,.8); border:1px solid color-mix(in srgb, var(--lab) 40%, transparent);
  padding: 7px 12px; border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pcard-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pcard-body h3{ font-size: 23px; letter-spacing:-.015em; }
.pcard-body p{ color: var(--mint); font-size: 15px; line-height:1.55; flex:1; }
.pcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top: 14px; }
.price-from{ font-family: var(--font-m); font-size: 13px; color: var(--gray); }
.price-from b{ display:block; font-size: 21px; color: var(--white); font-weight:600; letter-spacing:-.01em; }
.pcard-link{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px; color: var(--lab);
}
.pcard-link svg{ width:16px; height:16px; transition: transform .2s; }
.pcard:hover .pcard-link svg{ transform: translateX(4px); }
.grid-prod > .pcard-wide{ grid-column: span 6; display:grid; grid-template-columns: 1.05fr 1fr; }
.pcard-wide .pcard-media{ aspect-ratio: 16/13.4; min-height: 0; }
.pcard-wide .pcard-media img{ object-position:center 70%; }
.pcard-wide .pcard-body{ padding: 38px; justify-content:center; }
.pcard-wide .pcard-body h3{ font-size: 34px; }
.pcard-wide .pcard-body p{ font-size: 16.5px; flex:none; }
.pcard-stretch{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.pcard{ color: inherit; }
a.pcard:hover{ color: inherit; }

/* ---------- selector por objetivo ---------- */
.goals{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:38px; }
.goal{
  --lab: var(--brand);
  text-align:left; cursor:pointer; font-family:var(--font-d);
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 22px; display:flex; flex-direction:column; gap:6px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.goal:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--lab) 50%, transparent); }
.goal.on{
  border-color: var(--lab);
  box-shadow: 0 0 0 1px var(--lab) inset, 0 16px 40px color-mix(in srgb, var(--lab) 18%, transparent);
}
.goal .gi{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--lab) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--lab) 32%, transparent); margin-bottom:10px;
}
.goal .gi svg{ width:21px; height:21px; color: var(--lab); }
a.goal, a.goal:hover{ color: inherit; text-decoration: none; }
.goal b{ color:var(--white); font-size:17px; font-weight:700; letter-spacing:-.01em; }
.goal span:not(.gi){ color: var(--mint); font-size:14.5px; line-height:1.5; }

.goalout{ margin-top: 22px; }
.goalcard{
  --lab: var(--brand);
  background: linear-gradient(120deg, color-mix(in srgb, var(--lab) 9%, var(--panel)), var(--panel-2));
  border:1px solid color-mix(in srgb, var(--lab) 34%, var(--line));
  border-radius: var(--r-lg); padding: 32px 34px;
  display:grid; grid-template-columns: 1fr auto; gap: 30px; align-items:center;
}
.goalcard .gl{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lab); margin-bottom:8px; display:block; }
.goalcard h3{ font-size: 27px; margin-bottom: 10px; }
.goalcard p{ color: rgba(255,255,255,.86); font-size: 16px; margin-bottom: 6px; }
.goalcard .gwhy{ color: var(--mint); font-size: 14.5px; }
.goalcard .gact{ display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width: 210px; }
.goalcard .gprice{ font-family:var(--font-m); font-size:13px; color:var(--gray); text-align:center; }
.goalcard .gprice b{ display:block; font-size:22px; color:var(--white); font-weight:600; }

@media (max-width: 1020px){ .goals{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){
  .goalcard{ grid-template-columns:1fr; gap:22px; padding: 26px 24px; }
  .goalcard .gact{ min-width:0; }
}
@media (max-width: 620px){ .goals{ grid-template-columns:1fr; gap:12px; } .goal{ padding:18px 18px; } }

/* ---------- callout ---------- */
.callout{
  display:flex; gap: 18px; align-items:flex-start;
  background: linear-gradient(120deg, color-mix(in srgb, var(--lab) 10%, var(--panel)), var(--panel-2));
  border:1px solid color-mix(in srgb, var(--lab) 30%, var(--line));
  border-radius: var(--r-md); padding: 22px 24px;
}
.callout svg{ width:26px; height:26px; color: var(--lab); flex:none; margin-top:2px; }
.callout .t{ font-family: var(--font-m); font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: var(--lab); margin-bottom:6px; font-weight:600; }
.callout p{ color: rgba(255,255,255,.88); font-size: 15.5px; }

/* ---------- pasos (cómo funciona) ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 46px; counter-reset: paso; }
.step{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 26px 24px; position:relative; overflow:hidden;
  transition: transform .22s, border-color .22s;
}
.step:hover{ transform: translateY(-4px); border-color: rgba(29,184,154,.4); }
.step .n{
  font-family: var(--font-m); font-weight:600; font-size: 13px; letter-spacing:.14em;
  color: var(--brand); display:inline-block; margin-bottom: 14px;
  border:1px solid rgba(29,184,154,.35); border-radius: 8px; padding: 6px 11px;
  background: rgba(29,184,154,.08);
}
.step h3{ font-size: 19px; margin-bottom: 8px; }
.step p{ color: var(--mint); font-size: 14.5px; line-height:1.6; }
.step::after{
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(29,184,154,.14), transparent);
}

/* ---------- diferenciales ---------- */
.feat{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top: 44px; }
.fcard{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md);
  padding: 28px 26px; transition: transform .22s, border-color .22s;
}
.fcard:hover{ transform: translateY(-4px); border-color: rgba(29,184,154,.4); }
.fcard .ic{
  width: 46px; height:46px; border-radius: 13px; display:flex; align-items:center; justify-content:center;
  background: rgba(29,184,154,.1); border:1px solid rgba(29,184,154,.3); margin-bottom: 18px;
}
.fcard .ic svg{ width:22px; height:22px; color: var(--brand); }
.fcard h3{ font-size: 19px; margin-bottom: 8px; }
.fcard p{ color: var(--mint); font-size: 15px; }

/* ---------- banda de cierre ---------- */
.band{
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(29,184,154,.16), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 64px 56px; text-align:center; position:relative; overflow:hidden;
}
.band h2{ font-size: clamp(26px, 3.6vw, 40px); max-width: 780px; margin: 0 auto 14px; }
.band p{ color: var(--mint); max-width: 620px; margin: 0 auto 30px; font-size: 17px; }
.band::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image: radial-gradient(rgba(122,191,175,.9) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---------- página de producto ---------- */
.crumbs{
  padding: 22px 0 0; font-family: var(--font-m); font-size: 13px; color: var(--gray);
  display:flex; gap:8px; align-items:center;
}
.crumbs a{ color: var(--mint); }
.crumbs a:hover{ color: var(--white); }
.crumbs svg{ width:13px; height:13px; opacity:.6; }

.phero{ padding: 40px 0 72px; }
.phero-grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items:center; }
.phero .q{ font-size: clamp(19px, 2.3vw, 24px); color: var(--mint); font-weight:500; margin: 18px 0 6px; }
.phero h1{ font-size: clamp(42px, 6vw, 72px); letter-spacing:-.03em; margin-bottom: 20px; }
.phero h1 .lab-c{ color: var(--lab); }
.plist{ list-style:none; display:flex; flex-direction:column; gap: 13px; margin: 6px 0 30px; }
.plist li{ display:flex; gap: 13px; align-items:flex-start; font-size: 16.5px; color: rgba(255,255,255,.88); }
.plist li svg{ width:20px; height:20px; color: var(--lab); flex:none; margin-top: 3px; }
.pfacts{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }

/* ---------- secciones de producto ---------- */
.pblock{ padding: 70px 0; border-top: 1px solid var(--line-soft); }
.pblock h2{ font-size: clamp(26px, 3.4vw, 36px); margin: 12px 0 18px; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.two-col .txt p{ margin-bottom: 16px; color: rgba(255,255,255,.85); font-size: 16.5px; }
.two-col .txt p:last-child{ margin-bottom:0; }

/* protocolo */
.proto{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; margin-top: 36px;
}
.proto-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
.proto-chips{ display:flex; flex-direction:column; gap: 14px; }
.proto-chip{
  display:flex; gap:15px; align-items:flex-start; background: var(--panel-2);
  border:1px solid var(--line-soft); border-radius: var(--r-sm); padding: 15px 17px;
}
.proto-chip svg{ width:21px; height:21px; color: var(--lab); flex:none; margin-top:2px; }
.proto-chip .l{ font-family: var(--font-m); font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--gray); display:block; margin-bottom: 3px; }
.proto-chip .v{ color: var(--white); font-weight:600; font-size: 15.5px; line-height: 1.45; }

.week{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week .d{
  aspect-ratio: 1/1.15; border-radius: 10px; border:1px solid var(--line-soft);
  background: var(--panel-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-family: var(--font-m); font-size: 11px; color: var(--gray); letter-spacing:.08em;
}
.week .d i{ width:9px; height:9px; border-radius:50%; background: rgba(122,145,135,.25); }
.week .d.on{ border-color: color-mix(in srgb, var(--lab) 55%, transparent); background: color-mix(in srgb, var(--lab) 12%, var(--panel-2)); color: var(--white); }
.week .d.on i{ background: var(--lab); box-shadow: 0 0 12px color-mix(in srgb, var(--lab) 60%, transparent); }
.week-cap{ font-family: var(--font-m); font-size: 12px; color: var(--gray); margin-top: 12px; letter-spacing:.06em; }

/* escalado (retatrutide) / ciclo (ghk) */
.scale{ display:flex; gap: 12px; align-items:flex-end; height: 150px; margin-top: 8px; }
.scale .bar{
  flex:1; border-radius: 10px 10px 4px 4px; position:relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lab) 75%, #fff0) , color-mix(in srgb, var(--lab) 25%, transparent));
  border:1px solid color-mix(in srgb, var(--lab) 45%, transparent);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px;
  font-family: var(--font-m); font-size: 11px; color: #0B1512; font-weight:600; letter-spacing:.06em;
}
.scale .bar span{ background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 6px; }
.cyclebar{ height: 14px; border-radius: 999px; background: var(--panel-2); border:1px solid var(--line-soft); overflow:hidden; margin: 16px 0 10px; }
.cyclebar i{ display:block; height:100%; width:100%; border-radius:999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lab) 30%, transparent), var(--lab)); }
.cycle-ends{ display:flex; justify-content:space-between; font-family: var(--font-m); font-size: 12px; color: var(--gray); }

/* qué esperar */
.expect{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 34px; }
.xcard{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px;
  display:flex; gap: 16px; align-items:flex-start;
}
.xcard svg{ width:22px; height:22px; color: var(--lab); flex:none; margin-top:2px; }
.xcard h4{ font-size: 16px; margin-bottom: 5px; }
.xcard p{ color: var(--mint); font-size: 14.5px; line-height: 1.6; }

/* precios */
.prices{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.prices.n2{ grid-template-columns: repeat(2, minmax(0,320px)); justify-content:center; }
.prices.n3{ grid-template-columns: repeat(3, 1fr); }
.price-card{
  position:relative; cursor:pointer; border-radius: var(--r-md);
  background: var(--panel); border:1.5px solid var(--line);
  padding: 26px 22px 22px; text-align:center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.price-card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--lab) 50%, transparent); }
.price-card input{ position:absolute; opacity:0; pointer-events:none; }
/* Los hijos son <span>: sin display:block los márgenes verticales no aplican y el texto se apelmaza. */
.price-card > span{ display:block; }
.price-card .mg{ font-family: var(--font-m); font-weight:600; font-size: 15px; letter-spacing:.08em; color: var(--white); }
.price-card .usd{ font-size: 38px; font-weight:800; color: var(--white); letter-spacing:-.02em; margin: 10px 0 4px; }
.price-card .usd sup{ font-size: .5em; font-weight:600; color: var(--mint); }
.price-card .permg{ font-family: var(--font-m); font-size: 12.5px; color: var(--lab); }
.price-card .note{ font-size: 12.5px; color: var(--gray); margin-top: 8px; line-height:1.45; }
.price-card .pick{
  margin-top: 16px; font-size: 13.5px; font-weight:700; color: var(--mint);
  border:1px solid var(--line); border-radius: 999px; padding: 8px 0; transition: all .2s;
}
.price-card.sel{
  border-color: var(--lab);
  box-shadow: 0 0 0 1px var(--lab) inset, 0 18px 44px color-mix(in srgb, var(--lab) 18%, transparent);
  transform: translateY(-4px);
}
.price-card.sel .pick{ background: var(--lab); border-color: var(--lab); color: #0B1512; }
.price-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family: var(--font-m); font-size: 10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background: var(--lab); color:#0B1512; border-radius: 6px; padding: 4px 10px; white-space:nowrap;
}
.includes{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 26px; justify-content:center; }

/* ---------- widget pedido → WhatsApp ---------- */
.order{
  margin-top: 46px; border-radius: var(--r-lg); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--lab) 35%, var(--line));
  background:
    radial-gradient(600px 300px at 90% -20%, color-mix(in srgb, var(--lab) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
}
.order-in{ padding: 44px; display:grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.order h3{ font-size: 27px; margin: 10px 0 10px; }
.order .sum{
  font-family: var(--font-m); font-size: 13.5px; color: var(--mint);
  border:1px dashed color-mix(in srgb, var(--lab) 40%, var(--line)); border-radius: var(--r-sm);
  padding: 14px 16px; margin-top: 18px; line-height: 1.7;
}
.order .sum b{ color: var(--white); font-weight:600; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-family: var(--font-m); font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--gray); margin-bottom: 8px; }
.field input{
  width:100%; background: var(--bg-deep); color: var(--white);
  border:1px solid var(--line); border-radius: 12px; padding: 15px 16px; font-size: 16px;
  font-family: var(--font-d); transition: border-color .2s;
}
.field input::placeholder{ color: rgba(122,145,135,.6); }
.field input:focus{ outline:none; border-color: var(--lab); }
.consent{
  display:flex; gap: 13px; align-items:flex-start; cursor:pointer;
  background: var(--bg-deep); border:1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px; margin: 6px 0 20px; transition: border-color .2s;
}
.consent:hover{ border-color: var(--mint); }
.consent input{ position:absolute; opacity:0; }
.consent .box{
  width: 22px; height: 22px; flex:none; border-radius: 6px; border: 1.5px solid var(--gray);
  display:flex; align-items:center; justify-content:center; margin-top:1px; transition: all .18s;
}
.consent .box svg{ width: 13px; height: 13px; color: #0B1512; opacity:0; }
.consent input:checked + .box{ background: var(--lab); border-color: var(--lab); }
.consent input:checked + .box svg{ opacity:1; }
.consent input:focus-visible + .box{ outline:2px solid var(--lab); outline-offset:2px; }
.consent p{ font-size: 13.5px; color: var(--mint); line-height: 1.6; }
.consent a{ text-decoration: underline; text-underline-offset: 3px; }
.order .btn{ width: 100%; }
.order .legalnote{ font-size: 12px; color: var(--gray); margin-top: 14px; text-align:center; }

/* cross-sell agua */
.cross{
  margin-top: 22px; display:flex; gap: 18px; align-items:center;
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px;
}
.cross img{ width: 92px; height: 68px; object-fit: cover; border-radius: 10px; flex:none; }
.cross .t{ flex:1; }
.cross .t b{ display:block; font-size: 15.5px; }
.cross .t span{ font-size: 13.5px; color: var(--mint); }
.cross a{ font-weight: 700; font-size: 14px; white-space:nowrap; }

/* ---------- FAQ / acordeones ---------- */
.acc{ border:1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow:hidden; margin-bottom: 12px; }
.acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap: 16px;
  padding: 21px 24px; font-weight: 700; font-size: 16.5px; color: var(--white);
  transition: background .2s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background: rgba(122,191,175,.05); }
.acc summary .pm{
  margin-left:auto; flex:none; width: 26px; height: 26px; border-radius: 8px;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color: var(--brand); font-weight: 500; font-size: 17px; transition: transform .25s;
}
.acc[open] summary .pm{ transform: rotate(45deg); }
.acc .acc-body{ padding: 0 24px 22px; color: var(--mint); font-size: 15.5px; line-height: 1.7; }
.acc .acc-body strong{ color: var(--white); }

/* listas de recomendaciones */
.reco-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.reco{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-md); padding: 26px;
}
.reco h3{ display:flex; align-items:center; gap: 12px; font-size: 18px; margin-bottom: 16px; }
.reco h3 svg{ width: 21px; height: 21px; color: var(--brand); flex:none; }
.reco ul{ list-style:none; display:flex; flex-direction:column; gap: 11px; }
.reco li{ display:flex; gap: 11px; font-size: 14.5px; color: var(--mint); line-height: 1.6; }
.reco li::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex:none; margin-top: 8px; }
.reco.warn li::before{ background: var(--coral); }
.reco.warn h3 svg{ color: var(--coral); }

/* efectos por compuesto */
.fx-item{ border-left: 3px solid var(--brand); padding: 4px 0 4px 18px; margin-bottom: 20px; }
.fx-item h4{ font-size: 16px; margin-bottom: 4px; }
.fx-item p{ color: var(--mint); font-size: 14.5px; }

/* ---------- legal ---------- */
.legal-card{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px; margin-top: 34px;
}
.legal-card ol{ counter-reset: cl; list-style:none; display:flex; flex-direction:column; gap: 24px; }
.legal-card ol li{ position:relative; padding-left: 58px; }
.legal-card ol li::before{
  counter-increment: cl; content: "0" counter(cl);
  position:absolute; left:0; top:1px;
  font-family: var(--font-m); font-weight:600; font-size: 13px; color: var(--brand);
  border:1px solid rgba(29,184,154,.35); background: rgba(29,184,154,.08);
  border-radius: 8px; padding: 6px 9px;
}
.legal-card ol h3{ font-size: 17px; margin-bottom: 6px; }
.legal-card ol p{ color: var(--mint); font-size: 15px; line-height: 1.7; }

/* ---------- página nosotros ---------- */
.manifesto{ font-size: clamp(22px, 3vw, 30px); line-height: 1.45; color: rgba(255,255,255,.92); font-weight: 600; max-width: 900px; letter-spacing:-.01em; }
.manifesto em{ color: var(--brand); font-style: normal; }

/* ---------- contacto ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.ccard{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r-lg); padding: 34px;
}
.ccard h3{ display:flex; gap: 13px; align-items:center; font-size: 20px; margin-bottom: 12px; }
.ccard h3 svg{ width: 23px; height: 23px; color: var(--brand); }
.ccard p{ color: var(--mint); font-size: 15.5px; margin-bottom: 8px; }

/* ---------- footer ---------- */
footer{
  margin-top: 80px; border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(10,19,16,.8));
  padding: 64px 0 40px;
}
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand .logo{ font-size: 27px; margin-bottom: 12px; }
.foot-brand p{ color: var(--mint); font-size: 14.5px; max-width: 280px; }
.foot-col h4{
  font-family: var(--font-m); font-size: 11.5px; font-weight:600; letter-spacing:.2em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 18px;
}
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap: 11px; }
.foot-col a{ color: rgba(255,255,255,.78); font-size: 14.5px; }
.foot-col a:hover{ color: var(--brand); }
.foot-col p{ color: var(--mint); font-size: 14px; line-height: 1.7; }
.foot-legal{
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  display:flex; flex-direction:column; gap: 10px;
}
.foot-legal p{ font-size: 12.5px; color: var(--gray); line-height: 1.7; }

/* ---------- botón flotante WhatsApp ---------- */
.fab-wa{
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display:flex; align-items:center; gap: 11px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: 999px; padding: 15px 22px 15px 17px;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 12px 36px rgba(29,184,154,.4);
  transition: transform .2s, box-shadow .2s;
}
.fab-wa:hover{ transform: translateY(-3px) scale(1.02); color: var(--brand-ink); box-shadow: 0 18px 48px rgba(29,184,154,.55); }
.fab-wa svg{ width: 24px; height: 24px; flex:none; }
.fab-wa::before{
  content:""; position:absolute; inset:-5px; border-radius: 999px; z-index:-1;
  border: 1.5px solid rgba(29,184,154,.5); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(.92); opacity:.9; } 70%{ transform: scale(1.14); opacity:0; } 100%{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .fab-wa::before{ animation:none; } }

/* ---------- reveal ----------
   REGLA DURA: el contenido NUNCA se oculta. La animación solo desplaza.
   Animar la opacidad hacía que bloques quedaran invisibles aunque tuvieran la clase .in
   (mismo fallo visto antes en este proyecto). Un sitio de venta no puede arriesgar eso. */
html.js .rv{ transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .rv.in{ transform: none; }
@media (prefers-reduced-motion:reduce){ html.js .rv{ transform:none; transition:none; } }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .grid-prod{ grid-template-columns: repeat(2, 1fr); }
  .grid-prod > .pcard, .grid-prod > .pcard-half{ grid-column: span 1; }
  .grid-prod > .pcard-wide{ grid-column: span 2; grid-template-columns: 1fr; }
  .grid-prod > .pcard-half .pcard-media{ aspect-ratio: 4/3.1; }
  .pcard-wide .pcard-media{ aspect-ratio: 16/10; min-height:0; }
  .steps{ grid-template-columns: 1fr 1fr; }
  .feat{ grid-template-columns: 1fr; }
  .prices{ grid-template-columns: 1fr 1fr; }
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .hero{ padding: 56px 0 48px; }
  .hero-grid, .phero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .hero-media{ order: -1; }
  .phero-grid .hero-media{ order: 0; }

  /* Portada en celular: la foto va DESPUÉS del párrafo, no arriba de todo.
     Como la foto y el texto son dos columnas hermanas, la única forma de
     meterla entre el párrafo y los botones es disolver la columna de texto
     con display:contents — así sus hijos pasan a ser items de la misma
     grilla y se pueden ordenar uno por uno. Con gap:0 el espaciado vuelve a
     los márgenes de cada bloque, que es lo que ya estaba afinado.
     Ojo: al disolver la caja, el .rv de esa columna deja de aplicar. No pasa
     nada — ese reveal sólo anima transform, nunca opacidad, así que no hay
     riesgo de que algo quede invisible. */
  .hero-grid{ gap: 0; }
  .hero-grid > .hero-copy{ display: contents; }
  .hero-grid h1{ order: 1; }
  .hero-grid .sub{ order: 2; margin-bottom: 30px; }
  .hero-grid .hero-media{ order: 3; margin-bottom: 32px; }
  .hero-grid .hero-ctas{ order: 4; }
  .hero-grid .hero-badges{ order: 5; }
  .hero-grid .kicker{ order: 6; margin-top: 26px; }
  .two-col{ grid-template-columns: 1fr; gap: 30px; }
  .proto-grid{ grid-template-columns: 1fr; gap: 30px; }
  .order-in{ grid-template-columns: 1fr; padding: 30px 24px; gap: 30px; }
  .reco-grid{ grid-template-columns: 1fr; }
  .expect{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .sec{ padding: 70px 0; }
  .band{ padding: 48px 26px; }
}
@media (max-width: 620px){
  body{ font-size: 15.5px; }
  /* Kicker más compacto: evita que la barrita quede huérfana al hacer wrap */
  .kicker{ font-size: 11.5px; letter-spacing: .15em; gap: 8px; }
  .kicker::before{ width: 18px; }
  .grid-prod{ grid-template-columns: 1fr; }
  .grid-prod > .pcard, .grid-prod > .pcard-half, .grid-prod > .pcard-wide{ grid-column: span 1; }
  .steps{ grid-template-columns: 1fr; }
  .prices{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .prices.n2{ grid-template-columns: 1fr 1fr; }
  .price-card .usd{ font-size: 30px; }
  .foot-grid{ grid-template-columns: 1fr; gap: 32px; }
  .fab-wa span{ display:none; }
  .fab-wa{ padding: 16px; right: 16px; bottom: 16px; }
  .hero-ctas .btn{ width: 100%; }
  .legal-card{ padding: 28px 20px; }
  .legal-card ol li{ padding-left: 0; padding-top: 40px; }
  .legal-card ol li::before{ top: 0; }
  .week{ gap: 5px; }
  .cross{ flex-wrap: wrap; }
  /* En el celular la foto del hero mide 250px de alto y el rotulo, que ahi
     llega a dos lineas, se comia los ultimos 28px del frasco: justo la base,
     la etiqueta de abajo y el reflejo. Debajo de la foto no tapa nada. */
  .hero-media .media-tag{
    position: static; display: block; margin: 0; border: 0; border-top: 1px solid var(--line);
    border-radius: 0; padding: 12px 16px 13px; background: var(--panel-2); backdrop-filter: none;
  }
}