/* ============================================================
   Kundala Yoga Studio — capa de sitio web
   Todo se construye sobre los tokens de kundala/tokens/*.css.
   Ningún hex literal: si un valor no existe como token, se deriva
   con color-mix() de uno que sí existe.
   Patrones NUEVOS respecto del sistema (la marca nunca diseñó web):
   header, nav, hero, footer, breakpoints, estados de link.
   ============================================================ */

/* ---------- reset acotado ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:target{scroll-margin-top:calc(var(--header-h) + var(--sp-6))}

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

/* ---------- variables de sitio ---------- */
:root{
  --header-h:72px;
  --page-max:1200px;
  --page-gutter:var(--sp-5);
  --z-header:100;
  --z-nav-panel:110;
  --z-skip:1000;
  /* acento único de la home: violeta profundo, el acento primario del sistema */
  --page-accent:var(--accent-primary);

  /* AJUSTE AL SISTEMA — el token --text-muted del sistema (ink 55% sobre crema)
     da 4.15:1 sobre la hoja crema y no llega al mínimo AA de 4.5:1 para texto
     normal. En impresión y en stories no era un problema; en web sí. Lo llevamos
     a ink 65%, que da 5.7:1 y mantiene el mismo carácter apagado.
     Conviene devolver este cambio al sistema de diseño. */
  --text-muted:color-mix(in srgb,var(--k-ink) 65%,var(--k-cream));
}
@media (min-width:768px){:root{--header-h:84px;--page-gutter:var(--sp-8)}}
@media (min-width:1024px){:root{--page-gutter:var(--sp-12)}}

/* ---------- utilidades ---------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter)}
.wrap--narrow{max-width:820px}
.stack>*+*{margin-top:var(--gap-stack)}
.measure{max-width:var(--measure-doc)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:var(--sp-4);top:calc(var(--sp-4) * -6);z-index:var(--z-skip);
  background:var(--surface-card);color:var(--text-strong);padding:var(--sp-3) var(--sp-5);
  border-radius:var(--radius-pill);font-weight:var(--fw-bold);
  transition:top var(--dur-base) var(--ease-standard)}
.skip-link:focus{top:var(--sp-4)}

/* foco visible y uniforme en todo el sitio */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.pill:focus-visible,.btn:focus-visible{border-radius:var(--radius-pill)}

/* ---------- etiqueta de versalitas (el único movimiento de tracking) ---------- */
.eyebrow{font-size:var(--type-label);font-weight:var(--fw-demibold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted);margin:0}
.eyebrow--accent{color:var(--page-accent)}

/* ---------- titulares ---------- */
.script{display:block;font-family:var(--font-script);font-weight:400;letter-spacing:var(--ls-script);
  line-height:var(--lh-snug);color:var(--page-accent);margin:0;text-wrap:balance}
.script--hero{font-size:clamp(52px,11vw,var(--type-script-hero))}
.script--title{font-size:clamp(38px,7vw,var(--type-script-title))}
.script--sub{font-size:clamp(28px,5vw,var(--fs-2xl))}

.h-display{display:block;font-family:var(--font-sans);font-weight:var(--fw-black);letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);color:var(--text-strong);font-size:clamp(30px,5vw,var(--type-display));
  margin:0;text-wrap:balance}
.h-section{font-family:var(--font-sans);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
  line-height:var(--lh-snug);color:var(--text-strong);font-size:clamp(24px,3.4vw,var(--type-heading));margin:0}

.lead{font-size:var(--type-body);line-height:var(--lh-body);font-weight:var(--fw-bold);color:var(--text-strong)}
.body{font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-body)}
.body--sm{font-size:var(--type-body-sm)}
.mark{color:var(--page-accent)}

/* ---------- botones (cápsula, según core/Button.jsx) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:var(--sp-3) var(--sp-8);
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:var(--ls-caps-tight);
  border-radius:var(--radius-pill);border:var(--border-width-thick) solid transparent;
  cursor:pointer;text-decoration:none;touch-action:manipulation;
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{opacity:.82}
.btn:active{transform:scale(var(--press-scale))}
.btn--primary{background:var(--page-accent);color:var(--text-on-accent)}
.btn--outline{background:transparent;color:var(--text-strong);border-color:var(--border-hairline)}
.btn--on-photo{background:var(--surface-card);color:var(--text-strong)}
.btn--sm{min-height:44px;padding:var(--sp-2) var(--sp-6);font-size:var(--fs-2xs)}
.btn--full{width:100%}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface-page);
  border-bottom:var(--rule-width) solid var(--border-hairline)}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:var(--header-h)}
.header__logo{display:flex;align-items:center;padding:var(--sp-2) 0}
.header__logo img{height:40px;width:auto}
@media (min-width:768px){.header__logo img{height:48px}}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:var(--sp-6)}
.nav__link{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding-inline:var(--sp-1);
  font-size:var(--fs-xs);font-weight:var(--fw-demibold);color:var(--text-body);
  text-decoration:none;transition:opacity var(--dur-base) var(--ease-standard)}
.nav__link:hover{opacity:.82}
.nav__list li{position:relative}
.nav__link[aria-current="page"]{color:var(--text-strong);font-weight:var(--fw-bold)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;
  margin-inline:auto;width:var(--sp-5);height:var(--marker-width);
  border-radius:var(--radius-pill);background:var(--page-accent)}
.header__cta{display:none}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;min-width:44px;padding:var(--sp-2) var(--sp-4);
  background:transparent;border:var(--rule-width) solid var(--border-hairline);
  border-radius:var(--radius-pill);cursor:pointer;
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--ls-caps-tight);touch-action:manipulation;
  transition:opacity var(--dur-base) var(--ease-standard)}
.nav-toggle:hover{opacity:.82}
.nav-toggle svg{width:18px;height:18px}

@media (min-width:900px){
  .nav{display:block}
  .header__cta{display:inline-flex}
  .nav-toggle{display:none}
}

/* panel de navegación en mobile */
.nav-panel{position:fixed;inset:var(--header-h) 0 auto 0;z-index:var(--z-nav-panel);
  background:var(--surface-page);border-bottom:var(--rule-width) solid var(--border-hairline);
  padding:var(--sp-5) 0 var(--sp-8);
  opacity:0;visibility:hidden;transform:translateY(calc(var(--sp-2) * -1));
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),visibility var(--dur-base)}
.nav-panel[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.nav-panel__list{display:flex;flex-direction:column}
.nav-panel__link{display:flex;align-items:center;min-height:52px;
  font-size:var(--fs-lg);font-weight:var(--fw-demibold);color:var(--text-body);text-decoration:none;
  border-bottom:var(--rule-width) solid var(--border-hairline)}
.nav-panel__link[aria-current="page"]{color:var(--page-accent);font-weight:var(--fw-bold)}
.nav-panel .btn{margin-top:var(--sp-6)}
@media (min-width:900px){.nav-panel{display:none}}

/* ---------- secciones ---------- */
.section{padding-block:var(--sp-20)}
@media (min-width:768px){.section{padding-block:var(--sp-24)}}
.section__head{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-10)}
.section__head--center{align-items:center;text-align:center}

/* ---------- hero: hoja crema flotando sobre fotografía ---------- */
.hero{position:relative;isolation:isolate;padding-block:var(--sp-12) var(--sp-16);overflow:hidden}
@media (min-width:768px){.hero{padding-block:var(--sp-16) var(--sp-20)}}
.hero__photo{position:absolute;inset:0;z-index:-2}
.hero__photo img{width:100%;height:100%;object-fit:cover;filter:var(--blur-sheet)}
.hero__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--k-cream) 30%,transparent),transparent 40%)}
.hero__sheet{background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sheet);padding:var(--sp-10) var(--sp-6) var(--sp-12);text-align:center}
@media (min-width:768px){
  .hero__sheet{border-radius:var(--radius-sheet);padding:var(--sp-20) var(--sp-16)}
}
.hero__script{margin-bottom:var(--sp-2)}
.hero__lead{max-width:46ch;margin-inline:auto;margin-top:var(--sp-6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-10)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);justify-content:center;
  margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:var(--rule-width) solid var(--border-hairline)}

/* ---------- cita ---------- */
.quote{text-align:center;padding-block:var(--sp-16)}
.quote__text{font-family:var(--font-sans);font-weight:var(--fw-light);font-style:italic;
  font-size:clamp(22px,3.2vw,var(--fs-xl));line-height:var(--lh-snug);color:var(--text-strong);
  max-width:24ch;margin-inline:auto;text-wrap:balance}
.quote__cite{display:block;margin-top:var(--sp-5);font-style:normal;
  font-size:var(--type-label);font-weight:var(--fw-demibold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted)}

/* ---------- grilla de prácticas ---------- */
.practices{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:640px){.practices{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}
@media (min-width:1024px){.practices{grid-template-columns:repeat(3,1fr)}}

.practice{display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-lg);padding:var(--pad-card);text-decoration:none;color:inherit;
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.practice:hover{opacity:.82}
.practice:active{transform:scale(var(--press-scale))}
.practice__name{display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--ls-caps-tight);color:var(--text-strong)}
.practice__name::before{content:"";flex:0 0 auto;width:var(--marker-width);height:1.15em;
  border-radius:var(--radius-pill);background:var(--marker,var(--page-accent))}
.practice__blurb{font-size:var(--type-body-sm);line-height:var(--lh-body);color:var(--text-body);
  max-width:40ch}
.practice__times{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-2)}
.chip{display:inline-flex;align-items:center;background:var(--surface-pill);
  border-radius:var(--radius-pill);padding:6px var(--sp-4);
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);white-space:nowrap;color:var(--text-strong)}
.chip--quiet{background:transparent;border:var(--rule-width) solid var(--border-hairline);
  color:var(--text-muted)}

/* ---------- cronograma ---------- */
.schedule{background:var(--surface-card);border-radius:var(--radius-lg);padding:var(--sp-5)}
@media (min-width:768px){.schedule{border-radius:var(--radius-xl);padding:var(--sp-10)}}

/* vista tabla — desde 768px */
.schedule__table{display:none}
@media (min-width:768px){
  .schedule__table{display:table;width:100%;border-collapse:collapse;font-family:var(--font-sans)}
}
.schedule__table th,.schedule__table td{border:var(--rule-width) solid var(--border-hairline);
  padding:var(--sp-4) var(--sp-3);text-align:center;vertical-align:middle}
.schedule__table thead th{font-size:var(--fs-sm);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--text-strong);border-top:0}
.schedule__table th:first-child,.schedule__table td:first-child{border-left:0}
.schedule__table th:last-child,.schedule__table td:last-child{border-right:0}
.schedule__table tbody tr:last-child td{border-bottom:0}
.schedule__hour{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-strong);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* la banda tenue que separa la mañana de la tarde, como en el cronograma publicado */
.schedule__table tr[data-band="tarde"] td,
.schedule__table tr[data-band="tarde"] th{background:var(--surface-row-alt)}
.slot{display:inline-flex;align-items:center;gap:var(--sp-2);text-align:left;
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--ls-caps-tight);color:var(--text-strong);line-height:1.15}
.slot::before{content:"";flex:0 0 auto;width:var(--marker-width);height:2.1em;
  border-radius:var(--radius-pill);background:var(--marker,var(--page-accent))}
.slot--note{color:var(--text-muted);font-weight:var(--fw-demibold);text-transform:uppercase;
  font-size:var(--fs-3xs);letter-spacing:var(--ls-caps-tight)}
.slot--note::before{display:none}

/* vista lista por día — hasta 767px */
.schedule__days{display:flex;flex-direction:column;gap:var(--sp-6)}
@media (min-width:768px){.schedule__days{display:none}}
.day__name{font-size:var(--type-label);font-weight:var(--fw-demibold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted);padding-bottom:var(--sp-2);
  border-bottom:var(--rule-width) solid var(--border-hairline)}
.day__list{display:flex;flex-direction:column}
.day__row{display:flex;align-items:center;gap:var(--sp-4);padding-block:var(--sp-3);
  border-bottom:var(--rule-width) solid var(--border-hairline)}
.day__row:last-child{border-bottom:0}
.day__time{flex:0 0 auto;min-width:5.5em;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;color:var(--text-strong)}

.schedule__foot{margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:var(--rule-width) solid var(--border-hairline);text-align:center}

/* leyenda de colores — el color nunca es el único portador de significado:
   cada práctica lleva su nombre escrito al lado del marcador */
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:center;
  margin-top:var(--sp-6)}
.legend__item{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-3xs);font-weight:var(--fw-demibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps-tight);color:var(--text-body)}
.legend__item::before{content:"";width:var(--marker-width);height:1em;
  border-radius:var(--radius-pill);background:var(--marker,var(--page-accent))}

/* ---------- el espacio ---------- */
.split{display:grid;gap:var(--sp-10);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-16)}}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10}
@media (min-width:768px){.split__media{border-radius:var(--radius-xl)}}
.split__media img{width:100%;height:100%;object-fit:cover}

.notes{display:grid;gap:var(--sp-4);grid-template-columns:1fr;margin-top:var(--sp-10)}
@media (min-width:768px){.notes{grid-template-columns:repeat(3,1fr)}}
.note{background:var(--surface-card-alt);border-radius:var(--radius-md);padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-2)}
.note__num{font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--page-accent)}
.note__title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-strong)}
.note__text{font-size:var(--type-body-sm);line-height:var(--lh-body);color:var(--text-body)}

/* ---------- llamada final sobre fotografía ---------- */
.calltoaction{position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-xl);padding:var(--sp-16) var(--sp-6);text-align:center}
@media (min-width:768px){.calltoaction{border-radius:var(--radius-sheet);padding:var(--sp-24) var(--sp-16)}}
.calltoaction__photo{position:absolute;inset:0;z-index:-2;background:var(--surface-inverse)}
.calltoaction__photo img{width:100%;height:100%;object-fit:cover}
/* protección: scrim anclado abajo, como en toda la marca, sobre fotografía de clave baja */
.calltoaction__photo::after{content:"";position:absolute;inset:0;background:var(--scrim-bottom)}
.calltoaction .script,.calltoaction .h-section,.calltoaction .body{color:var(--text-on-photo)}
/* blanco pleno: en la parte alta del bloque el scrim está en su punto más débil
   y un blanco al 82% no llega a 4.5:1 sobre una foto de clave media */
.calltoaction .eyebrow{color:var(--text-on-photo)}
.calltoaction .placeholder{background:color-mix(in srgb,var(--k-white) 22%,transparent)}

/* ---------- footer ---------- */
.footer{background:var(--surface-inverse);color:var(--text-on-photo);padding-block:var(--sp-16)}
.footer__grid{display:grid;gap:var(--sp-10)}
@media (min-width:768px){.footer__grid{grid-template-columns:1.2fr 1fr 1fr}}
.footer__logo img{height:56px;width:auto}
.footer__title{font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:color-mix(in srgb,var(--k-white) 62%,transparent);
  margin-bottom:var(--sp-4)}
.footer a{color:var(--text-on-photo);text-decoration:none}
.footer a:hover{opacity:.82}
.footer__list li+li{margin-top:var(--sp-1)}
.footer__list a,.footer__contact li{display:flex;align-items:center;gap:var(--sp-3);
  min-height:44px;font-size:var(--type-body-sm)}
.footer__contact li+li{margin-top:var(--sp-1)}
.footer__contact a{display:inline-flex;align-items:center;min-height:44px}
.footer__contact svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-quiet)}
.footer__bottom{margin-top:var(--sp-16);padding-top:var(--sp-8);
  border-top:var(--rule-width) solid color-mix(in srgb,var(--k-white) 16%,transparent);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}
.footer__om{display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:color-mix(in srgb,var(--k-white) 70%,transparent)}
.footer__om span[aria-hidden]{font-size:var(--fs-lg);letter-spacing:0}
.footer__legal{font-size:var(--fs-3xs);color:color-mix(in srgb,var(--k-white) 55%,transparent)}

/* ---------- marca de material pendiente (solo en el mockup) ---------- */
.placeholder{position:absolute;left:var(--sp-4);bottom:var(--sp-4);z-index:1;
  background:color-mix(in srgb,var(--k-ink) 62%,transparent);color:var(--k-white);
  border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-4);
  font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps-tight);
  text-transform:uppercase}