/*
Theme Name: Morning Focus
Theme URI: https://morningfocus.local
Author: Morning Focus
Description: Tema a medida para Morning Focus — entrenamiento personal online y nutricion a medida. Incluye area de cliente, formulario de contacto funcional y precios editables desde el personalizador.
Version: 1.29.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: morning-focus
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --cream:#FAF7F2;
  --sand:#EFE7DC;
  --sand-2:#E3D7C7;
  --clay:#B5674A;
  --clay-dark:#96513A;
  --clay-darker:#7A4330;
  --sage:#7E8F77;
  --ink:#22201D;
  --ink-2:#3B3733;
  --muted:#6B625A;
  --line:#E0D6C9;
  --white:#fff;
  --ok:#456B48;
  --warn:#B08234;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(34,32,29,.04),0 8px 28px rgba(34,32,29,.06);
  --shadow-lg:0 2px 4px rgba(34,32,29,.04),0 20px 50px rgba(34,32,29,.10);
  --t:.25s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay-dark);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--clay-darker)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.1rem;font-family:var(--sans);font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.5em}
strong{font-weight:650;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
::selection{background:var(--clay);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.bg-sand{background:var(--sand)}
.bg-white{background:var(--white)}
.bg-ink{background:var(--ink);color:#EDE7E0}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}
.center{text-align:center}
.mt0{margin-top:0}

.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-dark);margin:0 0 1rem;font-family:var(--sans);
}
.bg-ink .eyebrow{color:var(--sand-2)}
.lead{font-size:1.2rem;line-height:1.65;color:var(--ink-2)}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:15px 30px;border-radius:100px;border:1.5px solid transparent;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:all var(--t);text-align:center;
}
.btn-primary{background:var(--clay-dark);color:#fff;border-color:var(--clay-dark)}
.btn-primary:hover{background:var(--clay-darker);border-color:var(--clay-darker);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(150,81,58,.28)}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.bg-ink .btn-outline,.cta-band .btn-outline{color:#fff;border-color:rgba(255,255,255,.55)}
.bg-ink .btn-outline:hover,.cta-band .btn-outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{color:var(--clay);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:.87rem}
.btn-block{display:flex;width:100%;justify-content:center}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(250,247,242,.9);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:78px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-logo img{max-height:52px;width:auto;display:block}
.brand-name{font-family:var(--serif);font-size:1.42rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.brand-tag{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{color:var(--ink-2);font-size:.93rem;font-weight:500;position:relative}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px;
  background:var(--clay);transition:width var(--t);
}
.nav a:hover::after,.nav a.current::after{width:100%}
.header-cta{display:flex;align-items:center;gap:.85rem}
.ig-link{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-2);transition:all var(--t);
}
.ig-link:hover{background:var(--clay);border-color:var(--clay);color:#fff;transform:translateY(-2px)}
.ig-link svg{width:17px;height:17px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}

/* Selector de idioma ES / EN */
.lang-switch{
  display:flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;color:var(--ink-2);
}
.lang-switch a{color:var(--ink-2);text-decoration:none;padding:2px 3px;border-radius:4px;transition:color var(--t)}
.lang-switch a:hover{color:var(--clay)}
.lang-switch a.current{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-switch span{opacity:.45}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{padding:104px 0 96px;position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;top:-180px;right:-160px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(181,103,74,.10),transparent 68%);
  border-radius:50%;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center;position:relative;z-index:1}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:italic;color:var(--clay)}
.hero .lead{max-width:34rem;margin-bottom:2.2rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2.6rem}
.hero-proof{display:flex;gap:2.4rem;flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid var(--line)}
.proof-n{font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1}
.proof-l{font-size:.8rem;color:var(--muted);margin-top:.35rem;letter-spacing:.03em}

.hero-visual{position:relative}
.hero-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow-lg);
}
.hero-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.hero-card-head h4{margin:0}
.week-row{display:flex;align-items:center;gap:14px;padding:11px 0}
.week-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--sand-2)}
.week-dot.on{background:var(--clay)}
.week-label{flex:1;font-size:.92rem}
.week-tag{font-size:.72rem;padding:4px 11px;border-radius:100px;background:var(--sand);color:var(--muted);font-weight:600;letter-spacing:.04em}
.week-tag.on{background:var(--clay-dark);color:#fff}

/* ============================================================
   6. CARDS / GRIDS
   ============================================================ */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px;transition:all var(--t);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--sand-2)}
.card h3{margin-bottom:.6rem}
.card p:last-child{margin-bottom:0}
.card-icon{
  width:50px;height:50px;border-radius:14px;background:var(--sand);
  display:grid;place-items:center;margin-bottom:1.4rem;color:var(--clay);
}
.card-icon svg{width:24px;height:24px}

.price-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px 38px;display:flex;flex-direction:column;position:relative;transition:all var(--t);
}
.price-card.featured{border-color:var(--clay);border-width:2px;box-shadow:var(--shadow-lg)}
.price-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--clay-dark);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 18px;border-radius:100px;white-space:nowrap;
}
.price{font-family:var(--serif);font-size:2.7rem;font-weight:600;line-height:1;margin:.5rem 0}
.price span{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--muted)}
.price-list{list-style:none;padding:0;margin:1.8rem 0;flex:1}
.price-list li{position:relative;padding-left:29px;margin-bottom:.85rem;font-size:.94rem;line-height:1.55}
.price-list li::before{
  content:'';position:absolute;left:0;top:.5em;width:16px;height:9px;
  border-left:2px solid var(--clay);border-bottom:2px solid var(--clay);
  transform:rotate(-45deg);
}

/* ============================================================
   7. STEPS
   ============================================================ */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:76px 1fr;gap:28px;
  padding:34px 0;border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-size:2.1rem;color:var(--sand-2);font-weight:600;line-height:1;
}
.step h3{margin-bottom:.4rem}
.step p:last-child{margin-bottom:0}

/* ============================================================
   8. TABLES
   ============================================================ */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
table.mf{width:100%;border-collapse:collapse;font-size:.91rem;min-width:620px}
table.mf th{
  background:var(--ink);color:#fff;text-align:left;padding:14px 16px;
  font-weight:600;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
table.mf td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.mf tr:last-child td{border-bottom:0}
table.mf tbody tr:hover{background:var(--cream)}
.pill{
  display:inline-block;padding:3px 11px;border-radius:100px;font-size:.76rem;
  font-weight:650;background:var(--sand);color:var(--ink-2);white-space:nowrap;
}
.pill-clay{background:rgba(181,103,74,.14);color:var(--clay-dark)}
.pill-sage{background:rgba(126,143,119,.18);color:#4F6349}
.pill-ok{background:rgba(79,122,82,.14);color:var(--ok)}

/* ============================================================
   9. FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:24px 40px 24px 0;cursor:pointer;list-style:none;position:relative;
  font-weight:600;font-size:1.04rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 40px 24px 0;margin:0;color:var(--ink-2)}

/* ============================================================
   10. QUOTE / CTA
   ============================================================ */
.quote{
  border-left:3px solid var(--clay);padding:8px 0 8px 32px;margin:2.4rem 0;
  font-family:var(--serif);font-size:1.35rem;line-height:1.5;font-style:italic;color:var(--ink-2);
}
.cta-band{background:var(--ink);color:#EDE7E0;padding:88px 0;text-align:center}
.cta-band h2{color:#fff;margin-bottom:1rem}
.cta-band p{max-width:38rem;margin:0 auto 2rem;color:rgba(237,231,224,.82);font-size:1.1rem}
.cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   11. PAGE HEADER
   ============================================================ */
.page-hero{padding:76px 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::after{
  content:'';position:absolute;top:-200px;right:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(181,103,74,.08),transparent 70%);border-radius:50%;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{margin-bottom:1rem;max-width:20ch}
.page-hero .lead{max-width:44rem}

/* ============================================================
   12. FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:rgba(237,231,224,.72);padding:72px 0 34px;font-size:.93rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.11)}
.site-footer h4{color:#fff;font-size:.77rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.2rem;font-family:var(--sans);font-weight:650}
.site-footer a{color:rgba(237,231,224,.72);display:block;margin-bottom:.65rem}
.site-footer a:hover{color:#fff}
.footer-brand .brand-name{color:#fff;font-size:1.5rem}
.footer-brand p{margin-top:1rem;max-width:26rem;line-height:1.65}
.footer-social{display:flex;gap:11px;margin-top:1.4rem}
.footer-social a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);margin:0;
}
.footer-social a:hover{background:var(--clay);border-color:var(--clay)}
.footer-social svg{width:17px;height:17px}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem;color:rgba(237,231,224,.66)}
.footer-bottom a{display:inline;margin:0}

/* ============================================================
   13. AREA DE CLIENTE
   ============================================================ */
.app{display:grid;grid-template-columns:262px 1fr;min-height:78vh;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.app-side{background:var(--ink);padding:30px 20px;color:rgba(237,231,224,.72)}
.app-user{display:flex;align-items:center;gap:12px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.11)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--clay-dark);color:#fff;display:grid;place-items:center;font-weight:650;font-size:1.02rem;flex-shrink:0}
.app-user-name{color:#fff;font-weight:600;font-size:.96rem;line-height:1.3}
.app-user-plan{font-size:.75rem;color:rgba(237,231,224,.55)}
.app-nav{display:flex;flex-direction:column;gap:3px}
.app-nav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 14px;border:0;border-radius:10px;background:transparent;
  color:rgba(237,231,224,.72);font-family:var(--sans);font-size:.9rem;font-weight:500;
  cursor:pointer;transition:all var(--t);
}
.app-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.app-nav button.active{background:var(--clay-dark);color:#fff;font-weight:600}
.app-nav .ico{width:17px;height:17px;flex-shrink:0;opacity:.85}
.app-main{padding:38px 40px;background:var(--cream);overflow-x:hidden}
.app-panel{display:none;animation:fade .3s ease}
.app-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.app-h h2{font-size:1.75rem;margin:0}
.app-h p{margin:.3rem 0 0;color:var(--muted);font-size:.93rem}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:2rem}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.stat-l{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat-v{font-family:var(--serif);font-size:1.85rem;font-weight:600;margin:.35rem 0 .1rem;line-height:1}
.stat-d{font-size:.79rem;color:var(--ok);font-weight:600}
.stat-d.flat{color:var(--muted)}

.box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:20px}
.box-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.box-h h3{margin:0;font-size:1.15rem}
.box-h .pill{flex-shrink:0}

.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:.6rem}
.prog-w{border:1px solid var(--line);border-radius:12px;padding:15px;text-align:center;background:var(--cream);transition:all var(--t)}
.prog-w.done{background:rgba(126,143,119,.13);border-color:rgba(126,143,119,.35)}
.prog-w.now{background:var(--clay-dark);border-color:var(--clay-dark);color:#fff;box-shadow:0 6px 18px rgba(150,81,58,.24)}
.prog-w .n{font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;font-weight:650;opacity:.72}
.prog-w .t{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-top:.3rem}

.hab{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.hab:last-child{border-bottom:0}
.hab-box{
  appearance:none;-webkit-appearance:none;margin:0;
  width:23px;height:23px;border-radius:7px;border:2px solid var(--line);
  flex-shrink:0;cursor:pointer;display:grid;place-items:center;transition:all var(--t);background:#fff;
}
.hab-box:checked{background:var(--sage);border-color:var(--sage)}
.hab-box:checked::after{content:'';width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.hab-t{flex:1;font-size:.94rem}
.hab-t.done{color:var(--muted);text-decoration:line-through}
.hab-s{font-size:.8rem;color:var(--muted)}

.msg{display:flex;gap:13px;margin-bottom:18px}
.msg-b{background:var(--white);border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:14px 18px;max-width:75%;font-size:.93rem;line-height:1.6}
.msg.me{flex-direction:row-reverse}
.msg.me .msg-b{background:var(--clay-dark);color:#fff;border-color:var(--clay-dark);border-top-left-radius:14px;border-top-right-radius:4px}
.msg-t{font-size:.72rem;color:var(--muted);margin-top:.4rem}
.msg.me .msg-t{color:rgba(255,255,255,.7);text-align:right}

.up{border:2px dashed var(--line);border-radius:var(--r);padding:38px;text-align:center;color:var(--muted);background:var(--cream);transition:all var(--t)}
.up:hover{border-color:var(--clay-dark);color:var(--clay-dark)}

.dl{display:flex;align-items:center;gap:15px;padding:15px;border:1px solid var(--line);border-radius:12px;margin-bottom:11px;background:var(--white);transition:all var(--t)}
.dl:hover{border-color:var(--clay);transform:translateX(3px)}
.dl-i{width:42px;height:42px;border-radius:10px;background:var(--sand);display:grid;place-items:center;color:var(--clay-dark);flex-shrink:0;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.dl-n{font-weight:600;font-size:.94rem}
.dl-m{font-size:.79rem;color:var(--muted)}

.inp{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:.93rem;background:var(--white);color:var(--ink);transition:border-color var(--t)}
.inp:focus{outline:0;border-color:var(--clay)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.83rem;font-weight:650;margin-bottom:.4rem;color:var(--ink-2)}
.scale{display:flex;gap:7px}
.scale button{
  flex:1;padding:11px 0;border:1px solid var(--line);border-radius:9px;background:var(--white);
  font-family:var(--sans);font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-2);transition:all var(--t);
}
.scale button:hover{border-color:var(--clay);color:var(--clay)}
.scale button.on{background:var(--clay-dark);border-color:var(--clay-dark);color:#fff}

.note{background:rgba(181,103,74,.07);border-left:3px solid var(--clay);border-radius:0 10px 10px 0;padding:16px 20px;font-size:.9rem;line-height:1.6;margin-bottom:20px}
.note strong{color:var(--clay-dark)}

.demo-flag{
  background:var(--warn);color:#fff;text-align:center;padding:11px 20px;font-size:.86rem;font-weight:600;
  border-radius:10px;margin-bottom:24px;
}

/* ============================================================
   14. FORM (contacto)
   ============================================================ */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* ============================================================
   15. ACCESIBILIDAD Y ESTADOS DE FORMULARIO
   ============================================================ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-weight:600;font-size:.9rem;
}
.skip-link:focus{left:0;color:#fff}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

:focus-visible{outline:2px solid var(--clay-dark);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;opacity:0;pointer-events:none;height:0;overflow:hidden}

.form-alert{
  padding:15px 19px;border-radius:11px;margin-bottom:1.5rem;
  font-size:.94rem;font-weight:500;line-height:1.55;
}
.form-alert-ok{background:rgba(79,122,82,.12);color:var(--ok);border:1px solid rgba(79,122,82,.32)}
.form-alert-err{background:rgba(181,103,74,.1);color:var(--clay-dark);border:1px solid rgba(181,103,74,.32)}

.footer-legal a{display:inline;margin:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   16. CATÁLOGOS, BLOG Y COMUNIDAD
   ============================================================ */

/* Filtros por pastillas */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:2.2rem}
.filtros-material{margin-top:-1.2rem}
.filtros .pill{padding:8px 18px;font-size:.86rem;transition:all var(--t)}
.filtros .pill:hover{background:var(--sand-2);color:var(--ink)}
.filtros .pill-activo{background:var(--ink);color:#fff}
.filtros .pill-activo:hover{background:var(--ink);color:#fff}

/* Tarjetas de vídeo */
.video-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:all var(--t)}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--sand);overflow:hidden}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-play{
  position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;color:#fff;
  background:rgba(34,32,29,.28);transition:background var(--t);
}
.video-card:hover .video-play{background:rgba(34,32,29,.45)}
.video-body{padding:22px 24px 26px}
.video-body h3 a{color:var(--ink)}
.video-body h3 a:hover{color:var(--clay-dark)}

/* Reproductor embebido */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-lg)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-pendiente{
  aspect-ratio:16/9;border:2px dashed var(--line);border-radius:var(--r-lg);
  display:grid;place-content:center;text-align:center;padding:24px;background:var(--sand);
}

/* Tarjetas de comida */
.comida-card{display:flex;flex-direction:column}
.comida-foto{display:block;margin:-36px -36px 1.2rem;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--sand)}
.comida-foto img{width:100%;height:100%;object-fit:cover}
.comida-card h3 a{color:var(--ink)}
.comida-card h3 a:hover{color:var(--clay-dark)}
.macros-fila{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:.8rem}
.comida-foto-grande{border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.6rem}
.comida-mini{display:flex;flex-direction:column;gap:.3rem;padding:18px 20px}
.comida-mini strong{color:var(--ink)}

/* Calculadora de macros */
.calc-box{margin-bottom:0}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Lista de la compra */
.lista-compra{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.lista-compra li{
  position:relative;padding:7px 0 7px 26px;border-bottom:1px dashed var(--line);
  font-size:.93rem;break-inside:avoid;margin:0;
}
.lista-compra li::before{
  content:'';position:absolute;left:2px;top:.9em;width:12px;height:7px;
  border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg);
}
/* Mi entrenamiento: hoy primero, el resto recogido */
.entreno{margin-bottom:26px}
.entreno-titulo{margin:2.4rem 0 1.1rem;color:var(--muted);font-family:var(--sans);
  font-weight:650;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
.entreno-titulo:first-child{margin-top:0}
.entreno-pills{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.entreno-hoy{border-color:var(--clay);box-shadow:0 0 0 3px rgba(181,103,74,.10)}
.entreno-detalle summary{
  cursor:pointer;list-style:none;font-size:.9rem;color:var(--muted);
  padding:10px 0 2px;display:flex;align-items:center;gap:.5rem;
}
.entreno-detalle summary::-webkit-details-marker{display:none}
.entreno-detalle summary::after{
  content:'';width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform var(--t);
}
.entreno-detalle[open] summary::after{transform:rotate(-135deg)}
.entreno-detalle summary:hover{color:var(--ink)}
/* Cuestionario de objetivo en la web */
.cuestionario-web > summary{cursor:pointer;list-style:none;font-weight:650;font-size:1.05rem;padding:14px 20px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--white)}
.cuestionario-web > summary::-webkit-details-marker{display:none}
.cuestionario-web[open] > summary{border-color:var(--clay);border-bottom-left-radius:0;border-bottom-right-radius:0}
.obj-opciones{display:grid;gap:12px;margin-top:.4rem}
.obj-opcion{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:border-color var(--t)}
.obj-opcion:hover{border-color:var(--clay)}
.obj-opcion input{margin-top:4px}
.obj-opcion:has(input:checked){border-color:var(--clay-dark);background:var(--cream)}
.obj-opcion small{display:block;color:var(--muted)}

/* Mapa muscular clicable */
.mapa-muscular{display:flex;gap:36px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:0 0 3rem}
.mapa-muscular figure{margin:0;text-align:center}
.mapa-muscular svg{width:150px;height:auto;display:block}
.mapa-muscular figcaption{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.mapa-silueta :is(circle,ellipse,path){fill:var(--sand);stroke:var(--line);stroke-width:1.5}
.mapa-region :is(circle,rect,ellipse,path){fill:var(--sand-2);stroke:var(--white);stroke-width:2;transition:fill var(--t);cursor:pointer}
.mapa-region:hover :is(circle,rect,ellipse,path),.mapa-region:focus :is(circle,rect,ellipse,path){fill:var(--clay)}
.mapa-region.activo :is(circle,rect,ellipse,path){fill:var(--clay-dark)}
.mapa-ayuda{flex-basis:100%;text-align:center;margin:0}

/* Estado del plan en Mi entrenamiento */
.plan-estado{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.8rem;align-items:center;
  border:1.5px solid var(--clay);border-radius:var(--r);background:var(--white);
  padding:18px 24px;margin-bottom:2.4rem;
}
.plan-estado-l{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.plan-estado-item strong{font-size:1.05rem}
.plan-estado-nota{margin-left:auto;font-size:.85rem;color:var(--muted);max-width:22rem}
@media(max-width:780px){.plan-estado{gap:1rem 1.8rem}.plan-estado-nota{margin-left:0}}

.plan-tabla td{vertical-align:middle}
.plan-tabla .plan-hoy{background:rgba(181,103,74,.06)}
.plan-tabla .plan-hoy td:first-child{box-shadow:inset 3px 0 0 var(--clay)}
.entrenos-pasados{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
.entrenos-pasados > summary{
  cursor:pointer;list-style:none;font-weight:600;color:var(--muted);font-size:.9rem;
}
.entrenos-pasados > summary::-webkit-details-marker{display:none}
.entrenos-pasados > summary:hover{color:var(--ink)}

.lista-detalle{margin-top:1.2rem;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;background:var(--cream)}
.lista-detalle summary{cursor:pointer;font-weight:600;list-style:none}
.lista-detalle summary::-webkit-details-marker{display:none}
.lista-detalle[open] summary{margin-bottom:.4rem}

/* Progreso de la comunidad */
.prog-card{display:flex;flex-direction:column}
.prog-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prog-fotos figure{margin:0;position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--sand)}
.prog-fotos img{width:100%;height:100%;object-fit:cover}
.prog-fotos figcaption{
  position:absolute;left:10px;bottom:10px;background:rgba(34,32,29,.78);color:#fff;
  font-size:.72rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;
}
.prog-vacio{display:grid;place-items:center;height:100%;color:var(--muted);font-size:.85rem}
.prog-pie{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:.6rem}
.voto-btn{
  display:inline-flex;align-items:center;gap:.5em;padding:9px 18px;border-radius:100px;
  border:1.5px solid var(--line);background:var(--white);font-family:var(--sans);
  font-size:.95rem;font-weight:650;color:var(--ink);cursor:pointer;transition:all var(--t);
}
.voto-btn:hover:not(:disabled){border-color:var(--clay-dark);color:var(--clay-dark);transform:translateY(-2px)}
.voto-btn.votado{background:var(--sand);border-color:var(--sand-2);cursor:default}
.voto-btn:disabled{opacity:.85}
.podio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.podio-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;text-align:center;display:flex;flex-direction:column;gap:.35rem;align-items:center;
}
.podio-oro{border-color:var(--warn);box-shadow:var(--shadow-lg)}
.podio-medalla{font-size:2rem;line-height:1}

/* Blog */
.blog-card{display:flex;flex-direction:column}
.blog-foto{display:block;margin:-36px -36px 1.2rem;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--sand)}
.blog-foto img{width:100%;height:100%;object-fit:cover}
.blog-card h3 a{color:var(--ink)}
.blog-card h3 a:hover{color:var(--clay-dark)}
.entrada-foto{border-radius:var(--r-lg);overflow:hidden;margin-bottom:2rem}
.entrada h2{font-size:1.6rem;margin-top:2.2rem}
.entrada h3{margin-top:1.8rem}
.entrada img{border-radius:var(--r)}
.entrada-nav{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.entrada-nav-sig{margin-left:auto;text-align:right}
.paginacion{margin-top:3rem;text-align:center}
.paginacion .nav-links{display:inline-flex;gap:8px;align-items:center}
.paginacion .page-numbers{
  display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:100px;font-size:.9rem;font-weight:600;color:var(--ink-2);
}
.paginacion .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.paginacion a.page-numbers:hover{border-color:var(--clay-dark);color:var(--clay-dark)}

/* Login de clienta */
.login-card #loginform p{margin-bottom:1.1rem}
.login-card #loginform label{display:block;font-size:.83rem;font-weight:650;margin-bottom:.4rem;color:var(--ink-2)}
.login-card #loginform input[type=text],
.login-card #loginform input[type=password]{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:.93rem;background:var(--white);color:var(--ink);
}
.login-card #loginform input[type=text]:focus,
.login-card #loginform input[type=password]:focus{outline:0;border-color:var(--clay-dark)}
.login-card .login-remember label{display:flex;align-items:center;gap:.5rem;font-weight:500}
.login-card #wp-submit{
  width:100%;padding:15px 30px;border-radius:100px;border:1.5px solid var(--clay-dark);
  background:var(--clay-dark);color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:600;
  cursor:pointer;transition:all var(--t);
}
.login-card #wp-submit:hover{background:var(--clay-darker);border-color:var(--clay-darker)}

@media(max-width:780px){
  .lista-compra{columns:1}
  .podio{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media(max-width:1200px){
  .nav{
    display:none;position:absolute;top:78px;left:0;right:0;background:var(--cream);
    flex-direction:column;gap:0;padding:14px 28px 24px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block}
}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:1fr}
  .app-side,.app-main{min-width:0}
  .app-side{padding:20px}
  .app-nav{flex-direction:row;overflow-x:auto;gap:7px;padding-bottom:6px}
  .app-nav button{white-space:nowrap;padding:9px 15px}
  .app-nav .ico{display:none}
  .app-main{padding:26px 20px}
}
@media(max-width:780px){
  body{font-size:16px}
  .section{padding:64px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .prog{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:52px 1fr;gap:18px}
  .step::before{font-size:1.6rem}
  .hero{padding:64px 0}
  .card,.price-card,.form-card{padding:28px}
  .header-cta .btn{display:none}
  .lang-switch{font-size:.78rem}
  /* Filtros en una sola línea deslizable: que no coman la pantalla */
  .filtros{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:1.1rem;scrollbar-width:none}
  .filtros::-webkit-scrollbar{display:none}
  .filtros .pill{white-space:nowrap;flex-shrink:0}
  .filtros-material{margin-top:0}
  .mapa-muscular{gap:20px;margin-bottom:2rem}
  .mapa-muscular svg{width:112px}
}
@media(max-width:480px){
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px 16px}
  .stat-v{font-size:1.35rem}
  .hero-proof{gap:1.6rem}
  .calc-grid{grid-template-columns:1fr}
}

/* ============ Calendario del panel ============ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-h{padding:.2rem 0}
.cal-d{display:block;padding:.4rem .1rem .3rem;border-radius:10px;color:inherit;text-decoration:none;border:1px solid transparent;line-height:1.1;font-size:.9rem}
.cal-d:hover{border-color:var(--line)}
.cal-d.sel{border-color:var(--clay);background:rgba(181,103,74,.08)}
.cal-d.vacio{opacity:.35}
.cal-dots{display:flex;gap:2px;justify-content:center;margin-top:2px;min-height:5px}
.cal-dot{width:5px;height:5px;border-radius:50%}
.cal-dot--e{background:var(--ok)}
.cal-dot--d{background:var(--clay)}
.cal-dot--h{background:var(--warn)}
.cal-dot--p{background:var(--muted)}

/* Campos de las tarjetas del panel (hábitos, diario, peso) */
.box input[type=text],.box input[type=number],.box textarea{
  font-family:var(--sans);font-size:.93rem;color:var(--ink);
  padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;
  background:var(--white);
}
.box input[type=text]:focus,.box input[type=number]:focus,.box textarea:focus{outline:0;border-color:var(--clay-dark)}

/* Tracker semanal apretado en el móvil: que quepan los 7 días */
@media(max-width:780px){
  #tracker table{font-size:.76rem}
  #tracker th,#tracker td{padding:.28rem .12rem}
  #tracker td:first-child{
    max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding-left:.3rem;
  }
  .cal{gap:2px}
  .cal-d{font-size:.84rem;padding:.32rem .05rem .26rem}
}

/* Tarjetas plegables del panel: cerradas por defecto, un toque y se abren */
.plegable > summary{cursor:pointer;list-style:none}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::after{content:'▸';color:var(--muted);font-size:.95rem;margin-left:.6rem;transition:transform var(--t)}
.plegable[open] > summary::after{content:'▾'}
.plegable > summary h3{margin:0}

/* Desplegable Ideas */
.nav-ideas{position:relative}
.nav-ideas-toggle{
  display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;
  cursor:pointer;font-family:inherit;color:var(--ink-2);font-size:.93rem;font-weight:500;
  line-height:inherit;position:relative;transition:color var(--t);
}
.nav-ideas-toggle::after{
  content:'';width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--t);
}
.nav-ideas:hover .nav-ideas-toggle::after,
.nav-ideas:focus-within .nav-ideas-toggle::after{transform:rotate(225deg);margin-top:3px}
.nav-ideas-toggle::before{
  content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px;
  background:var(--clay);transition:width var(--t);
}
.nav-ideas:hover .nav-ideas-toggle::before,
.nav-ideas:focus-within .nav-ideas-toggle::before,
.nav-ideas-toggle.current::before{width:calc(100% - 12px)}
.nav-ideas-sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:196px;display:flex;flex-direction:column;padding:8px;z-index:20;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.nav-ideas-sub::before{
  /* Puente invisible: mantiene el hover al cruzar el hueco hasta la tarjeta. */
  content:'';position:absolute;left:0;right:0;top:-15px;height:15px;
}
.nav-ideas:hover .nav-ideas-sub,
.nav-ideas:focus-within .nav-ideas-sub{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav .nav-ideas-sub a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap}
.nav .nav-ideas-sub a::after{display:none}
.nav .nav-ideas-sub a:hover,
.nav .nav-ideas-sub a.current{background:var(--sand);color:var(--ink)}
@media(max-width:1200px){
  /* En el panel movil los dos enlaces salen como elementos normales del listado. */
  .nav-ideas{display:contents}
  .nav-ideas-toggle{display:none}
  .nav-ideas-sub{display:contents;opacity:1;visibility:visible}
  .nav-ideas-sub::before{display:none}
  .nav .nav-ideas-sub a{
    padding:13px 0;width:100%;border-bottom:1px solid var(--line);
    border-radius:0;white-space:normal;background:none;
  }
  .nav .nav-ideas-sub a:hover,
  .nav .nav-ideas-sub a.current{background:none;color:var(--ink)}
}

/* Reseñas */
.resenas{background:var(--sand);overflow:hidden}
.resenas-carrusel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.resenas-pista{
  display:flex;gap:26px;width:max-content;padding:6px 13px;
  animation:resenas-marquee 40s linear infinite;
}
.resenas-carrusel:hover .resenas-pista{animation-play-state:paused}
@keyframes resenas-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 13px))} /* la mitad de la pista + medio hueco: bucle exacto */
}
.resena-card{
  display:flex;flex-direction:column;gap:14px;margin:0;
  width:min(360px,78vw);flex-shrink:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 30px;box-shadow:var(--shadow);
}
.resena-estrellas{color:var(--clay);font-size:1.05rem;letter-spacing:3px}
.resena-card blockquote{
  margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink-2);
}
.resena-card blockquote::before{content:'\201C'}
.resena-card blockquote::after{content:'\201D'}
.resena-card figcaption{
  margin-top:auto;font-size:.85rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.resena-card figcaption::before{content:'— '}
@media(max-width:640px){
  .resena-card{padding:22px 22px;width:min(300px,80vw)}
}
@media(prefers-reduced-motion:reduce){
  .resenas-pista{animation:none}
  .resenas-carrusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* Deja tu reseña */
.resena-invita{background:var(--sand)}
.resena-invita-sigue{padding-top:0}   /* va pegada al carrusel: una sola franja */
.resena-invita-wrap{max-width:660px}
.resena-invita h2{margin-bottom:.6rem}
.resena-invita .lead{margin-bottom:1.8rem}

.resena-details{border-top:1px solid var(--line);padding-top:1.4rem}
.resena-summary{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-weight:650;font-size:.95rem;color:var(--clay-dark);
  padding:11px 22px;border:1px solid var(--clay);border-radius:999px;background:var(--white);
  transition:all var(--t);
}
.resena-summary::-webkit-details-marker{display:none}
.resena-summary::before{content:'✍️';font-size:1rem}
.resena-summary:hover{background:var(--clay-dark);border-color:var(--clay-dark);color:#fff}
.resena-details[open] .resena-summary{margin-bottom:1.5rem}
.resena-form{padding:32px}
.resena-form .btn-block{margin-top:.4rem}

.estrellas-campo{border:0;padding:0;margin:0 0 1.1rem}
.estrellas-campo legend{
  padding:0;font-size:.83rem;font-weight:650;margin-bottom:.4rem;color:var(--ink-2);
}
/* Las estrellas van del 5 al 1 en el HTML y se le da la vuelta con flex:
   así, al marcar una, el selector ~ pinta también las de su izquierda. */
.estrellas-radios{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.estrellas-radios input{position:absolute;opacity:0;width:1px;height:1px}
.estrellas-radios label{
  cursor:pointer;font-size:1.7rem;line-height:1;color:var(--line);
  padding:2px 3px;border-radius:8px;transition:color var(--t),transform var(--t);
}
.estrellas-radios label:hover,
.estrellas-radios label:hover ~ label,
.estrellas-radios input:checked ~ label{color:var(--clay)}
.estrellas-radios label:hover{transform:scale(1.12)}
.estrellas-radios input:focus-visible + label{outline:2px solid var(--clay-dark);outline-offset:2px}

@media(max-width:640px){
  .resena-form{padding:24px}
}

/* ============================================================
   Fotos de portada
   ============================================================ */
/* Tarjetas de servicios con foto de cabecera */
.card-con-foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-con-foto .card-foto{
  /* Cabecera alta: la foto es protagonista y se ve entera, no una franja. */
  display:block;width:100%;height:300px;object-fit:cover;object-position:center 32%;
  background:var(--sand);
}
.card-con-foto .card-cuerpo{padding:36px;flex:1}
.card-con-foto .card-cuerpo > :last-child{margin-bottom:0}

/* Foto ambiental dentro de una columna (sección del método) */
.foto-bloque{
  margin:2.8rem 0 0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--sand);
}
.foto-bloque img{display:block;width:100%;height:auto}

/* Foto ambiental a lo ancho, en banda baja */
.foto-banda{
  margin:3.4rem 0 0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--sand);
}
.foto-banda img{
  display:block;width:100%;height:clamp(210px,26vw,320px);
  object-fit:cover;object-position:center 22%;
}

@media(max-width:860px){
  .card-con-foto .card-foto{height:230px}
  .card-con-foto .card-cuerpo{padding:30px}
  .foto-bloque{margin-top:2.2rem}
}

/* ============================================================
   Fotos de nutrición
   ============================================================ */
/* Tarjetas de «Qué incluye»: la cabecera respeta el encuadre 9:4 de las fotos,
   así se ven enteras y no un recorte central. */
.card-foto-nut .card-foto{height:auto;aspect-ratio:9/4;object-position:center}
@media(max-width:860px){
  .card-foto-nut .card-foto{height:auto}
}

/* Tabla de desayunos con macros: columnas numéricas estrechas */
.tabla-macros .num{text-align:right;white-space:nowrap}
.tabla-macros th.num{width:64px}
.tabla-macros thead th abbr{text-decoration:none;border-bottom:0;cursor:help}
.tabla-leyenda{
  margin:.9rem 0 0;font-size:.82rem;line-height:1.5;color:var(--muted);
}
@media(max-width:640px){
  .tabla-macros{font-size:.84rem;min-width:540px}
  .tabla-macros th,.tabla-macros td{padding:11px 8px}
  .tabla-macros th:first-child,.tabla-macros td:first-child{padding-left:14px}
  .tabla-macros th:last-child,.tabla-macros td:last-child{padding-right:14px}
  .tabla-macros th.num{width:48px}
  .tabla-macros .pill{padding:3px 8px;font-size:.74rem}
}

/* Ideas de entrenos: muestra del catálogo en la página de entrenamiento */
.ideas-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.idea-chip{
  display:flex;flex-direction:column;gap:.2rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;color:var(--ink);transition:all var(--t);
}
.idea-chip:hover{border-color:var(--clay);transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.idea-chip strong{font-weight:650;line-height:1.3}

/* Macros en cuadro dentro de la tarjeta de comida (ejemplo de desayunos) */
.macros-cuadro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:.9rem}
.macros-cuadro > div{
  background:var(--cream);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;display:flex;flex-direction:column;gap:.1rem;
}
.macro-n{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.1}
.macro-l{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Retrato de Ana en Sobre mí */
.retrato-ana{margin:0 0 20px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.retrato-ana img{width:100%;height:auto;display:block}

/* Receta desplegable dentro de la tarjeta de comida */
.receta{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem}
.receta > summary{
  cursor:pointer;list-style:none;font-size:.88rem;font-weight:600;color:var(--clay-dark);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.receta > summary::-webkit-details-marker{display:none}
.receta > summary::after{content:'▾';transition:transform var(--t)}
.receta[open] > summary::after{transform:rotate(180deg)}
.receta-cuerpo{padding-top:.8rem}
.receta-cuerpo h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.receta-cuerpo h4 + p,.receta-cuerpo ul{margin-bottom:1rem}
.receta-ing{list-style:none;padding:0;margin:0 0 1rem;font-size:.9rem}
.receta-ing li{padding:.28rem 0;border-bottom:1px dashed var(--line);margin:0}
.receta-ing li:last-child{border-bottom:0}
.receta-cuerpo p{color:var(--ink-2);white-space:pre-line}

/* Carrusel de platos en Nutrición */
.platos-carrusel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.platos-pista{
  display:flex;gap:20px;width:max-content;padding:6px 10px;
  animation:resenas-marquee 55s linear infinite;
}
.platos-carrusel:hover .platos-pista{animation-play-state:paused}
.plato-card{
  position:relative;display:block;flex-shrink:0;
  width:min(300px,72vw);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);color:#fff;
}
.plato-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--t)}
.plato-card:hover img{transform:scale(1.04)}
.plato-card:hover{color:#fff}
.plato-info{
  position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:.15rem;
  padding:44px 18px 16px;background:linear-gradient(transparent,rgba(20,16,12,.82));
}
.plato-tipo{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-2)}
.plato-info strong{font-family:var(--serif);font-size:1.08rem;line-height:1.25}
.plato-macros{font-size:.8rem;opacity:.85}
@media(max-width:640px){.plato-card{width:min(240px,70vw)}}
@media(prefers-reduced-motion:reduce){
  .platos-pista{animation:none}
  .platos-carrusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* Míralo en acción */
.en-accion{margin-bottom:3.6rem}
.en-accion-titulo{text-align:center;margin-bottom:2rem}
.en-accion-fila{display:flex;justify-content:center;align-items:flex-start;gap:44px;flex-wrap:wrap}
.movil{margin:0;width:230px;display:flex;flex-direction:column;gap:1.1rem}
.movil-marco{
  width:100%;aspect-ratio:9/16;border-radius:34px;overflow:hidden;
  border:9px solid #221e1a;background:#221e1a;
  box-shadow:0 20px 44px rgba(31,26,20,.24);
}
.movil-marco video{width:100%;height:100%;object-fit:cover;display:block}
.movil figcaption{text-align:center}
.movil figcaption h4{font-size:1.05rem;font-weight:650;margin:0 0 .35rem;line-height:1.3}
.movil figcaption p{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:720px){
  .en-accion-fila{flex-direction:column;align-items:center}
}

/* Home visual */

/* Hero: tarjeta «hoy», sin nombres de semanas */
.hoy-etiqueta{font-size:.72rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--clay-dark);margin:0 0 .35rem}
.hoy-sesion{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.2;margin:0 0 .35rem}
.hoy-sub{font-size:.87rem;color:var(--muted);margin:0 0 1.35rem}
.hoy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hoy-stat{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.hoy-n{font-family:var(--serif);font-size:1.22rem;font-weight:600;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hoy-l{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.35}
@media(max-width:480px){
  .hoy-stats{gap:7px}
  .hoy-stat{padding:10px 10px}
  .hoy-n{font-size:1.05rem}
}

/* Mock de la lista de la compra (tarjeta de Nutrición) */
.mock-compra{margin:0 0 1.6rem;background:var(--cream);border:1px dashed var(--sand-2);border-radius:var(--r);padding:18px 20px}
.mock-compra-titulo{font-weight:650;font-size:.93rem;color:var(--ink);margin:0 0 .6rem}
.mock-compra-lineas{list-style:none;margin:0;padding:0;font-size:.85rem}
.mock-compra-lineas li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;padding:6px 0 6px 24px;border-bottom:1px dashed var(--line);position:relative}
.mock-compra-lineas li:last-child{border-bottom:0}
.mock-compra-lineas li::before{content:'';position:absolute;left:1px;top:.72em;width:11px;height:11px;border:1.5px solid var(--sand-2);border-radius:4px;background:var(--white)}
.mock-compra-lineas .cant{color:var(--muted);white-space:nowrap;flex-shrink:0;font-size:.78rem}
.mock-compra-lineas .hecho{color:var(--muted)}
.mock-compra-lineas .hecho > span:first-child{text-decoration:line-through}
.mock-compra-lineas .hecho::before{content:'✓';border-color:var(--sage);background:var(--sage);color:#fff;font-size:.62rem;line-height:11px;text-align:center;font-weight:700}
.mock-compra-pie{margin:.75rem 0 0;font-size:.78rem;color:var(--muted);font-style:italic}

/* Pasos desplegables (sección del método) */
/* El numero pasa del details al summary: Chrome envuelve el contenido del
   details en ::details-content y rompia la rejilla original. */
details.step{display:block}
details.step::before{content:none}
details.step > summary{
  display:grid;grid-template-columns:76px 1fr;gap:0 28px;
  cursor:pointer;list-style:none;
}
details.step > summary::before{
  content:counter(s,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--serif);font-size:2.1rem;color:var(--sand-2);font-weight:600;line-height:1;
}
details.step > summary h3,
details.step > summary p{grid-column:2}
details.step > summary::-webkit-details-marker{display:none}
details.step > summary h3::after{
  content:'▸';font-family:var(--sans);font-size:1rem;color:var(--clay);
  margin-left:.55rem;display:inline-block;transition:transform var(--t);
}
details.step[open] > summary h3::after{transform:rotate(90deg)}
details.step > summary p{margin-bottom:0}
.step-mas{margin-left:104px;padding-top:.7rem}
.step-mas p{margin-bottom:.5rem;color:var(--ink-2)}
.step-mas a{font-weight:600;font-size:.93rem}
@media(max-width:780px){
  details.step > summary{grid-template-columns:52px 1fr;gap:18px}
  details.step > summary::before{font-size:1.6rem}
  .step-mas{margin-left:70px}
}

/* Vídeos del área de cliente sobre fondo oscuro */
.area-videos{display:flex;justify-content:center;align-items:flex-start;gap:44px;flex-wrap:wrap;margin-bottom:3.2rem}
.area-videos .movil-marco{border-color:#3B3733;background:#3B3733;box-shadow:0 20px 44px rgba(0,0,0,.45)}
.area-videos .movil figcaption p{color:rgba(237,231,224,.72)}
@media(max-width:720px){
  .area-videos{gap:28px}
  .area-videos .movil{width:min(210px,44vw)}
}

/* Micro-vídeos de las 4 columnas del área (solo si existen) */
.mini-demo{
  width:100%;max-width:210px;aspect-ratio:4/5;margin:0 0 1.1rem;
  border-radius:16px;overflow:hidden;background:#3B3733;
  border:1px solid rgba(255,255,255,.14);
}
.mini-demo video{width:100%;height:100%;object-fit:cover;display:block}

/* Banda final: semana de prueba */
.cta-band .cta-prueba{
  display:inline-block;max-width:none;margin:0 0 1.6rem;
  padding:10px 22px;border:1px solid rgba(255,255,255,.3);border-radius:100px;
  background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.98rem;
}

/* La letra sobre las fotos de los platos siempre en blanco: la regla global
   de strong{color:ink} pisaba el color del overlay y se leía fatal. */
.plato-info strong,.plato-info,.plato-card:hover .plato-info strong{color:#fff}
.plato-macros{color:rgba(255,255,255,.88)}