/* ============================================================
   Fresafit Lab — línea gráfica premium (misma familia que fresafit.com.mx)
   Crema cálido + tinta casi negra + bronce. Letra del sistema, la misma que usa Meta en web
   (Segoe UI / San Francisco / Roboto); pesos 600–700, poca redondez (6–8 px), botones negros.
   Los nombres de variables (--bg, --txt, --card…) se conservan para que
   los estilos en línea de las páginas sigan funcionando.
   ============================================================ */
:root{
  --ink:#141210; --ink2:#2b2723;
  --bg:#f8f5f0;      /* crema (fondo) */
  --bg2:#ffffff;     /* banda clara alterna */
  --card:#ffffff;
  --sand:#efede8;
  --line:#e3dcd1;
  --txt:#141210;
  --muted:#5c554c;
  --bronze:#8a6e4b;  /* decorativo */
  --accent:#76593a;  /* bronce para texto (contraste AA sobre crema) */
  --accent2:#5f4630;
  --ok:#15803d; --bad:#b42318; --warn:#8a5a00;
  --radius:8px; --max:none;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Historic","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,72px)}
section{padding:88px 0}
@media(max-width:700px){section{padding:64px 0}}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- tipografía ---------- */
h1,h2,h3{line-height:1.05;letter-spacing:-.02em;color:var(--txt)}
h1{font-size:clamp(34px,6vw,64px);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-.015em;margin-bottom:16px}
h3{font-size:19px;font-weight:700;line-height:1.25}
p{color:var(--muted);font-size:17px}
strong{color:var(--txt)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:14px}
.kicker:before{content:"";width:28px;height:1px;background:currentColor}
.hint,.note{font-size:14px;color:var(--muted)}

/* ---------- botones (como fresafit.com.mx: negros, rectos, mayúsculas) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:6px;font-weight:600;font-size:16px;letter-spacing:normal;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .1s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink2)}
.btn-ghost{border-color:var(--ink);color:var(--txt);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn svg{width:18px;height:18px}

/* ---------- barra de aviso + navegación negra ---------- */
.aviso-top{background:#000;color:#fff;font-size:13px;font-weight:500;letter-spacing:.01em;text-align:center;padding:9px 12px;border-bottom:1px solid #1f1c19}
.aviso-top span{opacity:.9}
nav{position:sticky;top:0;z-index:50;background:#000;color:#fff}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:20px;letter-spacing:-.01em;color:#fff;text-transform:uppercase}
.logo .dot{display:none}
.logo span em{font-style:normal;font-weight:600;font-size:12px;letter-spacing:.12em;color:#c9b08a;margin-left:2px}
nav ul{display:none;gap:26px;list-style:none;margin-left:auto;font-size:15px;font-weight:600;color:#d8d2c8}
nav ul a{transition:color .15s}
nav ul a:hover{color:#fff}
nav ul a[style]{color:#fff!important}
@media(min-width:880px){nav ul{display:flex}}
nav .btn-ghost{border-color:#fff;color:#fff;padding:8px 14px!important;font-size:14px!important}
nav .btn-ghost:hover{background:#fff;color:#000}

/* ---------- hero ---------- */
.hero{padding:96px 0 64px;position:relative;overflow:hidden;background:var(--bg)}
.hero:before{display:none}
.hero .wrap{position:relative}
.hero h1{max-width:980px}
.hero p.lead{font-size:clamp(17px,2.1vw,21px);max-width:660px;margin:26px 0 34px;color:var(--muted)}
.hero p.lead strong{color:var(--txt)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}
.hero .note{margin-top:18px}

/* ---------- números ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:64px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 22px}
.stat b{display:block;font-size:clamp(24px,5.5vw,36px);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--txt)}
.stat span{font-size:14px;color:var(--muted)}

/* ---------- tarjetas ---------- */
.grid{display:grid;gap:16px;margin-top:40px}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid-3{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:30px 26px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:#cfc5b6;box-shadow:0 14px 40px -24px rgba(20,18,16,.35)}
.card .ico{width:44px;height:44px;border-radius:6px;background:var(--sand);display:grid;place-items:center;color:var(--ink);font-size:20px;flex-shrink:0}
.card .ico svg{width:22px;height:22px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:15px}
.card ul li:before{content:"— ";color:var(--bronze);font-weight:700}
.card .tag{align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:normal;padding:0;background:none;color:var(--accent)}
.card .more{margin-top:auto;padding-top:10px;font-size:15px;font-weight:600;color:var(--txt);border-top:1px solid var(--line)}
.card .more:hover{color:var(--accent)}

/* ---------- pasos ---------- */
.steps{display:grid;gap:0;margin-top:40px;counter-reset:s;border-top:1px solid var(--line)}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line)}}
.step{background:transparent;border-bottom:1px solid var(--line);padding:28px 24px 30px 0}
@media(min-width:820px){.step{border-right:1px solid var(--line);padding:30px 24px}}
.step:before{counter-increment:s;content:"0" counter(s);display:block;font-size:36px;font-weight:700;color:var(--bronze);line-height:1;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:15px}

/* ---------- ¿es para ti? ---------- */
.fit{display:grid;gap:16px;margin-top:40px}
@media(min-width:820px){.fit{grid-template-columns:1fr 1fr}}
.fit .card ul li:before{content:"✓  ";color:var(--ok)}
.fit .card.no ul li:before{content:"✕  ";color:var(--bad)}

/* ---------- banda oscura (como las franjas negras de fresafit.com.mx) ---------- */
.oscuro,.coach{--bg:#141210;--bg2:#1b1815;--card:#1d1a17;--sand:#2a2622;--line:#2f2a25;--txt:#f6f2ec;--muted:#b9b0a4;--accent:#c9a87c;--bronze:#c9a87c;background:#141210;color:var(--txt)}
.oscuro .btn-primary,.coach .btn-primary{background:#f6f2ec;color:#141210}
.oscuro .btn-primary:hover,.coach .btn-primary:hover{background:#fff}
.oscuro .btn-ghost,.coach .btn-ghost{border-color:#f6f2ec;color:#f6f2ec}
.oscuro .btn-ghost:hover,.coach .btn-ghost:hover{background:#f6f2ec;color:#141210}
.coach .top{display:grid;gap:28px;align-items:end}
@media(min-width:900px){.coach .top{grid-template-columns:1.1fr 1fr}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;padding:4px;gap:4px;background:transparent}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:15px;padding:9px 16px;border-radius:4px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--txt);color:var(--bg)}
.vista{display:grid;gap:28px;margin-top:36px}
@media(min-width:900px){.vista{grid-template-columns:1fr 1.1fr;align-items:center}}
.vista[hidden]{display:none}
.vista ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.vista ul li{display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:16px}
.vista ul li b{color:var(--txt);display:block;font-size:16px}
.vista ul li .ic{width:36px;height:36px;border-radius:6px;background:var(--sand);display:grid;place-items:center;flex-shrink:0;font-size:16px}
.coach .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px}

/* ---------- teléfono de muestra (con el look nuevo de la app) ---------- */
.phone{width:300px;max-width:100%;margin:0 auto;background:#000;border:7px solid #232019;border-radius:40px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden}
.phone .scr{background:#f8f5f0;padding:16px 14px 20px;min-height:560px;color:#141210;font-size:12px}
.phone .sb{display:flex;justify-content:space-between;font-size:11px;color:#5c554c;margin-bottom:12px}
.phone h4{font-size:16px;font-weight:700;margin-bottom:2px;color:#141210}
.phone .sub{color:#5c554c;font-size:11px;margin-bottom:12px}
.phone .box{background:#fff;border:1px solid #e3dcd1;border-radius:6px;padding:10px 12px;margin-bottom:9px}
.phone .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.phone .chk{width:16px;height:16px;border-radius:4px;border:2px solid #cfc5b6;display:inline-block;flex-shrink:0;vertical-align:-3px}
.phone .chk.ok{background:#15803d;border-color:#15803d}
.phone .ok-t{text-decoration:line-through;color:#5c554c}
.phone .k{font-size:10px;color:#5c554c;text-transform:uppercase;letter-spacing:.1em}
.phone .big{font-size:19px;font-weight:700}
.phone .bar{height:5px;border-radius:3px;background:#efede8;margin-top:6px;overflow:hidden}
.phone .bar i{display:block;height:100%;background:#141210}
.phone .pill{font-size:10px;padding:2px 7px;border-radius:999px;background:#efede8;color:#5c554c;white-space:nowrap}
.phone .pill.g{background:#e7f3ea;color:#166534}
.phone .pill.r{background:#fbe9e7;color:#9f1d14}
.phone .pill.y{background:#f8efd9;color:#7a4f00}
.phone .btnp{display:block;text-align:center;background:#141210;color:#fff;font-weight:600;border-radius:6px;padding:10px;margin-top:6px;font-size:12px}
.phone .ava{width:26px;height:26px;border-radius:50%;background:#efede8;display:inline-grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0}
.phone .sp{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:6px}
.phone .sp i{flex:1;background:#e3dcd1;border-radius:2px 2px 0 0}
.phone .sp i.a{background:#141210}
.phone .fotos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.phone .fotos div{aspect-ratio:3/4;border-radius:4px;background:linear-gradient(160deg,#e3dcd1,#efede8);display:grid;place-items:end center;padding-bottom:6px;color:#5c554c;font-size:10px}
.phone .rojo{color:#b42318!important}.phone .ambar{color:#8a5a00!important}

/* ---------- contacto / formulario ---------- */
.contact{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact .wrap{display:grid;gap:48px}
@media(min-width:900px){.contact .wrap{grid-template-columns:1fr 1fr;align-items:start}}
form{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:30px;display:flex;flex-direction:column;gap:16px}
label{font-size:14px;font-weight:600;letter-spacing:normal;display:flex;flex-direction:column;gap:8px;color:var(--txt)}
input,select,textarea{font:inherit;font-size:16px;letter-spacing:normal;text-transform:none;font-weight:400;color:var(--txt);background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
textarea{min-height:110px;resize:vertical}
.alt{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
form .ok{display:none;background:#e7f3ea;border:1px solid #b9dcc2;color:#14532d;padding:12px 14px;border-radius:2px;font-size:15px}

/* ---------- footer ---------- */
footer{--txt:#fff;padding:44px 0;font-size:13px;color:#b9b0a4;background:#000}
footer strong{color:#fff}
footer a{color:#fff!important}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}

/* ---------- WhatsApp flotante ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.fab svg{width:28px;height:28px;fill:#fff}

/* ---------- páginas Coach / Cliente ---------- */
.hero2{padding:72px 0 56px}
.hero2 .wrap{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero2 .wrap{grid-template-columns:1.1fr .9fr}}
.hero2 h1{font-size:clamp(34px,6vw,62px)}
.hero2 .lead{font-size:clamp(17px,2vw,20px);margin-top:22px}
.hero2 .cta{display:flex;flex-wrap:wrap;gap:12px}
.hero2 .note{margin-top:16px}
.bene{display:grid;gap:16px;margin-top:36px}
@media(min-width:700px){.bene{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.bene{grid-template-columns:repeat(3,1fr)}}
.bene .card h3{display:flex;align-items:center;gap:12px}
.bene .card p{font-size:15px}
.faq{display:flex;flex-direction:column;gap:0;margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--accent);font-weight:400;font-size:26px;line-height:.8}
.faq details[open] summary:after{content:"–"}
.faq p{padding:0 0 22px;font-size:16px;max-width:760px}
.trust{display:grid;gap:16px;margin-top:36px}
@media(min-width:700px){.trust{grid-template-columns:1fr 1fr}}
.trust .card{flex-direction:row;align-items:flex-start;gap:18px}
.trust .card .n{font-size:32px;font-weight:700;color:var(--bronze);min-width:70px;line-height:1}
.ctafin{border-radius:8px!important;--bg:#141210;--line:#2f2a25;--txt:#f6f2ec;--muted:#b9b0a4;--accent:#c9a87c;--bronze:#c9a87c;background:#141210;color:#f6f2ec;border-radius:var(--radius);padding:56px 26px;text-align:center}
.ctafin h2{margin-bottom:10px}
.ctafin .kicker{justify-content:center}
.ctafin .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.ctafin .btn-primary{background:#f6f2ec;color:#141210}
.ctafin .btn-ghost{border-color:#f6f2ec;color:#f6f2ec}
.ctafin .btn-ghost:hover{background:#f6f2ec;color:#141210}
.crumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumb a:hover{color:var(--txt)}
.phone{margin-top:8px}

/* ---------- textos legales / 404 ---------- */
.legal{max-width:760px;margin:0 auto;padding:56px 20px 88px}
.legal h1{font-size:clamp(34px,6vw,52px);margin:18px 0 10px}
.legal h2{font-size:22px;font-stretch:100%;margin:36px 0 10px}
.legal p,.legal li{font-size:16px}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.legal a{text-decoration:underline}
.legal .meta{font-size:13px;color:var(--muted)}
.legal .box{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:18px;margin-top:28px;font-size:14px;color:var(--muted)}
.solo-grande{display:none}
@media(min-width:700px){.solo-grande{display:inline}}

/* ---------- Se estira y se acomoda en cualquier pantalla ----------
   El contenido llena el monitor (hasta 1920 px, con márgenes que crecen) y las cuadrículas
   meten tantas columnas como quepan. Los párrafos conservan un ancho cómodo de lectura. */
section .wrap > p, .hero p.lead, .hero2 .lead { max-width: 760px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important; }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
.bene { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
.trust { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important; }
.fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important; }
@media (min-width: 1600px) { body { font-size: 17px; } h1 { font-size: clamp(56px, 3.6vw, 76px); } .phone { width: 320px; } }
/* celulares muy chicos (320 px) */
@media (max-width: 360px) { .btn { padding: 12px 16px; font-size: 15px; } .hero .cta .btn, .ctafin .btns .btn { width: 100%; } h1 { font-size: 32px; } }

/* ---------- 2-oct-2026: misma línea que la landing nueva (oscura, Geist + Instrument Serif) ---------- */
:root{ --ink:#f5f3f0; --ink2:#d6d1ca; --bg:#0a0a0b; --bg2:#111113; --card:#151517; --sand:#1c1c1f; --line:#26262a; --txt:#f5f3f0; --muted:#a19c95; --bronze:#c9a87c; --accent:#c9a87c; --accent2:#e6cfa8; --radius:14px; }
body{ font-family:Geist,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.01em; }
h1,h2,h3{ letter-spacing:-.03em; }
.btn, a.btn, button.btn{ border-radius:999px; }
.btn-primary{ background:#f5f3f0; color:#0a0a0b; }
.btn-ghost:hover{ background:#f5f3f0; color:#0a0a0b; }

/* ===== IDENTIDAD v1.2 (2-oct-2026) — capa final: privacidad, 404 y celular (tema claro).
   Valores en marca.css; la versión anterior sigue en Git (rama main). ===== */
:root{--ink:var(--ff-text);--ink2:var(--ff-text);--bg:var(--ff-background);--bg2:var(--ff-surface);--card:var(--ff-surface);--sand:var(--ff-surface-raised);--line:var(--ff-line);--txt:var(--ff-text);--muted:var(--ff-text-secondary);--bronze:var(--ff-brand-text);--accent:var(--ff-brand-text);--accent2:var(--ff-brand-text);--ok:var(--ff-success);--bad:var(--ff-error);--warn:var(--ff-warning);--radius:var(--ff-radius-card)}
body{font-family:var(--ff-font-body)}
h1,h2{font-family:var(--ff-font-display);letter-spacing:0}
.btn,button{border-radius:var(--ff-radius-control)}
::selection{background:color-mix(in srgb,var(--ff-brand) 40%,transparent);color:var(--ff-text)}
.btn-primary{background:var(--ff-brand);color:var(--ff-on-brand)}
.btn-primary:hover{background:color-mix(in srgb,var(--ff-brand) 88%,var(--ff-charcoal))}