/* ============================================================
   YOGA HOME MADRID — sistema de diseño multi-page
   Paleta 60-30-10 · Cormorant Garamond + Manrope
   Dirección B "Mapa de energías" (bento grid #9)
   Extensiones: tokens · duotono dividido · banda-cifra ·
   mapa de energías · sticky rail · quiz "elige tu energía"
   ============================================================ */

:root{
  /* tokens 60-30-10 */
  --cream:#f5f0e7;      /* 60% aire / crema */
  --paper:#fbf8f2;      /* superficie clara */
  --ink:#3b3a30;        /* texto */
  --ink-2:#2c2b24;      /* texto fuerte */
  --sage:#7b8a6e;       /* 30% salvia (calma) */
  --sage-2:#93a184;     /* salvia clara */
  --sage-ink:#64705a;   /* salvia legible AA sobre claro */
  --clay:#c9784f;       /* 10% arcilla (energía) */
  --clay-2:#d88f63;     /* arcilla clara */
  --clay-ink:#b8633a;   /* arcilla display AA sobre claro */
  --clay-deep:#ad5c33;  /* arcilla botón (blanco AA) */
  --line:rgba(59,58,48,.14);
  --line-soft:rgba(59,58,48,.07);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--sage);color:var(--paper)}
a{color:inherit}
h1,h2,h3,h4,p,margin:0{margin:0}
img{max-width:100%;display:block}
.serif{font-family:var(--serif);letter-spacing:.01em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--clay-deep);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ============ NAV (sticky, compartida, relativa) ============ */
.hd{position:sticky;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(10px);background:rgba(251,248,242,.85);border-bottom:1px solid var(--line-soft)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.logo{font-family:var(--serif);font-size:1.6rem;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.logo .mark{color:var(--clay)}
.hd-nav{display:flex;gap:clamp(10px,2vw,26px);font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.hd-nav a{text-decoration:none;color:var(--ink-2);opacity:.82}
.hd-nav a:hover{opacity:1;color:var(--sage)}
.hd-nav a[aria-current="page"]{opacity:1;color:var(--clay)}
.hd .cta{font-size:.8rem;padding:.7rem 1.2rem;border-radius:999px;background:var(--clay-deep);color:var(--paper);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.hd .cta:hover{background:var(--clay-ink)}
.hd-nav .cta-nav{display:none}
.hd .toggle{display:none;border:0;background:transparent;color:var(--ink-2);font-size:1.5rem;line-height:1;cursor:pointer;padding:.4rem .5rem;min-width:44px;min-height:44px}
@media(max-width:900px){
  .hd-in{flex-wrap:wrap;height:auto;padding-top:.6rem;padding-bottom:.6rem;row-gap:.2rem;gap:.6rem}
  .hd .cta{display:none}
  .hd .toggle{display:inline-flex;margin-left:auto}
  .hd-nav{display:none;flex-basis:100%;order:9;flex-direction:column;gap:.4rem;padding:.4rem 0 .4rem}
  .hd.open .hd-nav{display:flex}
  .hd-nav a{padding:.8rem 0;border-top:1px solid var(--line-soft)}
  .hd-nav .cta-nav{display:inline-flex;justify-content:center;margin-top:.6rem;background:var(--clay-deep);color:var(--paper);border-radius:999px;padding:.85rem 1.2rem;font-weight:600;font-size:.9rem;letter-spacing:.02em;text-transform:none;border-top:0}
  .hd-nav .cta-nav:hover{background:var(--clay-ink)}
}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 82% 18%,rgba(147,161,132,.25),transparent 60%),radial-gradient(70% 60% at 12% 88%,rgba(201,120,79,.14),transparent 60%),linear-gradient(180deg,#faf7f0,#f2ede1 60%,#efe9dc)}
.hero-home{padding:clamp(3.5rem,8vw,6rem) 0}
.hero-home-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.hero-home-grid{grid-template-columns:1.05fr .95fr}}
.hero .eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--sage);font-weight:600}
.hero .h1{font-family:var(--serif);font-weight:300;line-height:1.03;font-size:clamp(3rem,8.5vw,6rem);margin-top:1rem}
.hero .h1 em{font-style:italic;color:var(--clay-ink)}
.hero .sub{max-width:46ch;margin-top:1.4rem;opacity:.88;font-size:clamp(1rem,2vw,1.15rem)}
.cta{display:flex;gap:14px;margin-top:2rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .15s,background .2s,border-color .2s,color .2s;min-height:44px}
.btn:hover{transform:translateY(-3px)}
.btn-solid{background:var(--clay-deep);color:var(--paper)}
.btn-solid:hover{background:var(--clay-ink)}
.btn-line{border:1px solid var(--line);color:var(--ink-2)}
.btn-line:hover{border-color:var(--sage);color:var(--sage-ink)}

/* hero visual house (image duotone) */
.hero-visual{position:relative}
.hero-visual .ph{border-radius:20px;overflow:hidden;position:relative;box-shadow:0 30px 60px -30px rgba(59,58,48,.45);aspect-ratio:4/5}
.hero-visual .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08)}
.hero-visual .ph::after{content:"";position:absolute;inset:0;background:var(--sage);mix-blend-mode:color;opacity:.42}
.hero-visual .ph .tag{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--serif);font-size:1.3rem;color:var(--paper);background:linear-gradient(180deg,transparent,rgba(44,43,36,.6));padding:10px 16px;border-radius:10px}

/* ============ QUIZ "ELIGE TU ENERGÍA" (signature moment) ============ */
.quiz{margin-top:2.2rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:1.6rem;max-width:520px}
.quiz .q-lbl{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-ink);font-weight:600}
.quiz .q{font-family:var(--serif);font-size:1.5rem;margin-top:.3rem}
.quiz .opts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.quiz .opt{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.7rem 1.1rem;font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--ink-2);cursor:pointer;min-height:44px;min-width:44px;transition:background .15s,color .15s,border-color .15s}
.quiz .opt:hover{border-color:var(--sage);color:var(--sage-ink)}
.quiz .opt[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.quiz .opt.c[aria-pressed="true"]{background:var(--sage);border-color:var(--sage)}
.quiz .opt.e[aria-pressed="true"]{background:var(--clay-deep);border-color:var(--clay-deep)}
.quiz .opt.f[aria-pressed="true"]{background:var(--sage-2);border-color:var(--sage-2);color:var(--ink-2)}
.quiz .result{margin-top:1.1rem;border-top:1px solid var(--line-soft);padding-top:1rem;display:none}
.quiz .result.show{display:block}
.quiz .result .r-name{font-family:var(--serif);font-size:1.35rem;color:var(--ink-2)}
.quiz .result .r-name em{font-style:italic;color:var(--clay-ink)}
.quiz .result p{font-size:.9rem;opacity:.8;margin-top:.2rem}
.quiz .result .r-cta{margin-top:.9rem}

/* ============ SECCIONES ============ */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.sec-label{font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:1.2rem}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,6vw,3.6rem);line-height:1.04;margin:0}
.h2 .em{color:var(--clay-ink);font-style:italic}
.body{opacity:.86;margin-top:1rem;max-width:60ch}
.lead{font-family:var(--serif);font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.25}
.lead em{color:var(--clay-ink);font-style:italic}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.15;color:var(--sage);border-left:2px solid var(--clay);padding-left:1.2rem;margin-top:2.4rem}
.cols{display:grid;gap:2.5rem}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr;gap:5rem}}

/* banda foto */
.band-photo{margin:0;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 30px 60px -30px rgba(59,58,48,.35)}
.band-photo img{width:100%;height:min(58vw,500px);object-fit:cover;display:block}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(123,138,110,.12),rgba(201,120,79,.12))}

/* ============ BANDA-CIFRA (numeros editoriales) ============ */
.cifras{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);text-align:center;border-block:1px solid var(--line-soft);padding:clamp(2.2rem,5vw,3.6rem) 0}
.cifras .cif .n{font-family:var(--serif);font-weight:300;font-size:clamp(3.2rem,9vw,5.4rem);line-height:1;color:var(--sage)}
.cifras .cif:nth-child(2) .n,.cifras .cif:nth-child(4) .n{color:var(--clay)}
.cifras .cif .l{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-ink);margin-top:.6rem;font-weight:600}
@media(min-width:820px){.cifras{grid-template-columns:repeat(4,1fr)}}

/* ============ CLAVES (grid) ============ */
.claves{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.claves{grid-template-columns:repeat(3,1fr)}}
.clave{border:1px solid var(--line-soft);border-radius:14px;padding:1.3rem;background:var(--paper)}
.clave .k{font-family:var(--serif);font-size:1.3rem}
.clave .s{font-size:.82rem;opacity:.72;margin-top:.2rem}

/* ============ MAPA DE ENERGÍAS (bento + sticky rail) ============ */
.lp{display:grid;gap:2.5rem}
@media(min-width:900px){.lp{grid-template-columns:230px 1fr;align-items:start}}
.rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:.4rem;padding-right:1rem;border-right:1px solid var(--line-soft)}
.rail a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sage-ink);text-decoration:none;padding:.55rem .5rem;border-radius:8px;transition:background .15s,color .15s}
.rail a:hover{background:var(--cream);color:var(--ink-2)}
.rail a .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.6rem}
.rail a .dot.d-sage{background:var(--sage)}
.rail a .dot.d-clay{background:var(--clay)}
.rail a .dot.d-flow{background:var(--sage-2)}
.rail a .dot.d-neu{background:var(--cream);border:1px solid var(--line)}
@media(max-width:900px){
  .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:.4rem;border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 .8rem}
  .rail a{padding:.4rem .7rem;background:var(--paper);border:1px solid var(--line-soft)}
}
.energy{margin-bottom:3rem}
.energy .e-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.energy .e-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,4vw,2.6rem)}
.energy .e-sub{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-ink);font-weight:600}
.bento{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(min-width:720px){.bento{grid-template-columns:repeat(6,1fr)}}
.cell{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);transition:transform .2s,box-shadow .2s;text-decoration:none}
.cell:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px rgba(20,20,16,.5)}
.cell img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08)}
.cell::after{content:"";position:absolute;inset:0;mix-blend-mode:color;opacity:.5}
.cell .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px;background:linear-gradient(180deg,transparent,rgba(44,43,36,.72))}
.cell .cap .nm{font-family:var(--serif);font-size:1.25rem;color:var(--paper);line-height:1.1;display:block}
.cell .cap .mt{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.92;margin-top:3px}
/* duotono dividido: salvia=calma · arcilla=energía · salvia clara=fluir · crema=recuperación */
.cell.duo-sage::after{background:var(--sage)}
.cell.duo-clay::after{background:var(--clay)}
.cell.duo-flow::after{background:var(--sage-2)}
.cell.duo-neu{aspect-ratio:auto;min-height:160px;background:var(--cream)}
.cell.duo-neu::after{display:none}
.cell.duo-neu img{display:none}
.cell.duo-neu .cap{position:relative;background:none;padding:1.4rem;display:flex;flex-direction:column;justify-content:flex-end}
.cell.duo-neu .cap .nm{color:var(--ink-2)}
.cell.duo-neu .cap .mt{color:var(--sage-ink);opacity:1}
/* spans para el feel bento */
@media(min-width:720px){
  .cell.span2{grid-column:span 2}
  .cell.span3{grid-column:span 3}
  .cell.span4{grid-column:span 4}
  .cell.span6{grid-column:span 6}
  .cell.tall{aspect-ratio:3/4}
}

/* ============ PROFESORES (duotono arcilla) ============ */
.prof{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.prof{grid-template-columns:repeat(3,1fr)}}
.teacher{aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line-soft)}
.teacher img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08)}
.teacher::after{content:"";position:absolute;inset:0;background:var(--clay);mix-blend-mode:color;opacity:.45}
.teacher span{position:absolute;left:12px;bottom:10px;z-index:2;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.95}

/* ============ HORARIO + FILTRO ============ */
.hours{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:700px){.hours{grid-template-columns:1fr 1fr}}
.hour{border:1px solid var(--line-soft);border-radius:12px;padding:1.6rem;background:var(--paper)}
.hour .d{font-family:var(--serif);font-size:1.5rem}
.hour .t{font-size:1.1rem;opacity:.86;margin-top:.2rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.8rem 0}
.filters .flbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-ink);font-weight:600;margin-right:.4rem}
.chip{font-family:var(--sans);font-weight:600;font-size:.82rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;cursor:pointer;color:var(--ink-2);min-height:44px;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--sage);color:var(--sage-ink)}
.chip[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.chip.c[aria-pressed="true"]{background:var(--clay-deep);border-color:var(--clay-deep)}
.sched{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.slot{border:1px solid var(--line-soft);border-radius:12px;padding:1rem 1.2rem;background:var(--paper)}
.slot .nm{font-family:var(--serif);font-size:1.25rem;color:var(--ink-2)}
.slot .mt{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-ink);font-weight:600;margin-top:.2rem}
.slot.hidden{display:none}

/* ============ TESTIMONIOS ============ */
.tes{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.tes{grid-template-columns:repeat(3,1fr)}}
.t-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:1.5rem}
.t-card p{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.3}
.t-card cite{display:block;font-style:normal;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-top:1rem}

/* ============ RESERVA / NEWSLETTER / FORM ============ */
.news{background:var(--cream);border:1px solid var(--line-soft);border-radius:16px;padding:2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.news h3{font-family:var(--serif);font-size:1.6rem;margin:0}
.news input{flex:1;min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.8rem 1.2rem;font-family:var(--sans)}
.k{display:grid;gap:1.4rem;margin-top:1rem}
@media(min-width:760px){.k{grid-template-columns:1fr 1fr}}
.k .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:.4rem;font-weight:600}
.k .val{font-family:var(--serif);font-size:1.3rem}
.k .val a{text-decoration:none}
.f-in{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.7rem .8rem;font-family:var(--sans);min-height:44px}
.f-in:focus{outline:2px solid var(--clay-deep);outline-offset:2px;border-color:var(--clay-deep)}
textarea.f-in{min-height:110px;resize:vertical}
.f-cta{width:100%;margin-top:.9rem;padding:.9rem 1.2rem;border-radius:999px;background:var(--clay-deep);color:var(--paper);font-weight:600;border:0;cursor:pointer;min-height:48px}
.f-cta:hover{background:var(--clay-ink)}
.f-field{margin-bottom:.9rem}
.form-note{font-size:.72rem;opacity:.7;margin-top:.5rem}
.mapwrap{border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:16/10}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}

/* ============ FOOTER ============ */
.ft{border-top:1px solid var(--line);padding:2.6rem 0 2rem;background:var(--ink);color:var(--paper)}
.ft .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:center}
.ft .logo{color:var(--paper)}
.ft .logo .mark{color:var(--clay-2)}
.ft small{opacity:.78;font-size:.82rem}
.ft .links{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;min-width:0}
.ft .links a{margin-left:0;color:var(--sage-2);text-decoration:none}
.ft .links a:hover{color:var(--clay-2)}
.ft .addr{margin-top:1.2rem;display:grid;gap:.3rem;color:var(--paper)}

/* breadcrumb */
.crumb{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin-bottom:1rem}
.crumb a{color:var(--sage);text-decoration:none}
.crumb a:hover{color:var(--clay)}
.crumb span{color:var(--ink);opacity:.75}

/* ============ REVEAL (siempre visible sin JS) ============ */
.reveal{opacity:1;transform:none}

/* ============ MISC ============ */
.subpage-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem)}
.subpage-hero .h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,8vw,5.6rem);line-height:1.02;margin-top:.6rem}
.subpage-hero .h1 .em{color:var(--clay-ink);font-style:italic}
.subpage-hero .lede{max-width:62ch;opacity:.88;margin-top:1rem;font-size:clamp(1.02rem,2vw,1.15rem)}
.grid-2{display:grid;gap:2.5rem}@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr;gap:4rem}}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.note-box{background:var(--cream);border:1px solid var(--line-soft);border-radius:14px;padding:1.3rem 1.5rem;font-size:.92rem;opacity:.9}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .btn:hover,.cell:hover{transform:none}
}