/* PULSE STUDIO — Design System
 * apps/public/src/assets/pulse-design.css
 *
 * Source of truth visual del sitio público.
 * Estructura:
 *   1. :root tokens (paleta forest, fuentes, --s1..--s11, easings)
 *   2. Reset global
 *   3. Por implementar en fases siguientes (ver mapa al final)
 *
 * Cambios deben pasar por el plan de migración aprobado.
 * Voz de marca: Fraunces 300 + Inter Tight, paleta forest,
 * easings Bézier custom, spacing escala no-lineal --s1..--s11.
 *
 * Referencia: design_handoff_pulse_studio/README.md
 * ============================================================ */


/* ============================================================
   1) :root — Tokens (Fase 1)
   ============================================================ */
:root {
  /* --- Paleta forest (modo light default, marca real) --- */
  --bg:        #F4F0E6;  /* ivory cálido — fondo principal */
  --bg-warm:   #ECE4D2;  /* arena suave — secciones alternadas */
  --bg-deep:   #0F1A14;  /* verde casi negro — testimonios/footer */
  --ink:       #1B2A20;  /* verde bosque profundísimo — texto */
  --ink-soft:  #3B4A3F;  /* musgo sombrío — body text */
  --ink-mute:  #7A8579;  /* salvia gris — captions/metas */
  --line:      #C7BFAA;  /* línea cálida — divisores */
  --ink-eyebrow: #5C6657; /* salvia profundo — eyebrows 11px sobre fondos claros (AA 5.28:1 sobre bg, 4.75:1 sobre bg-warm). Fase 10 ajuste. */
  --accent:    #2F4A38;  /* verde bosque — CTAs y feats */
  --sand:      #B8A98A;  /* madera de arce — placeholders */
  --paper:     #FBF7EC;  /* papel cremoso — cards */

  /* --- Tipografía --- */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter Tight", "Inter", system-ui, sans-serif;

  /* --- Spacing scale (pasos no-lineales — respetar) --- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;
  --s11: 160px;

  /* --- Easings (Bézier custom — la "voz" de la marca; no simplificar) --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-breath: cubic-bezier(0.4, 0, 0.6, 1);
}


/* ============================================================
   2) Reset global (Fase 0)
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === Skip link (Fase 10) ===
   Primer focusable de la página. Oculto visualmente hasta foco.
   Cuando recibe focus salta a la izquierda superior con fondo
   --ink y texto --paper para alto contraste. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10000;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* === Focus-visible global (Fase 10) ===
   Fallback para cualquier elemento interactivo sin override
   específico. Override anula este si está definido (ej. .btn). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  transition: background-color 600ms var(--ease-out), color 600ms var(--ease-out);
}

img,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   3) Container + section padding (Fase 1)
   ============================================================ */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s7);
}
@media (max-width: 720px) {
  .wrap { padding: 0 var(--s5); }
}

section {
  padding: var(--s10) 0;
  position: relative;
}
@media (max-width: 720px) {
  section { padding: var(--s9) 0; }
}


/* ============================================================
   4) Type scale (Fase 1)
   ------------------------------------------------------------
   Headings serif siempre font-weight: 300 — característica
   de marca (Fraunces light editorial). NO subir el peso.

   Fraunces variable axis:
     opsz 144 + SOFT 30  → display estándar
     opsz 144 + SOFT 100 → itálica más suave (.italic-soft)
   ============================================================ */
.serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.italic-soft {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.h-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 156px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.h-1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}

.h-2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h-3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);  /* Fase 10 · AA sobre bg y bg-warm */
  font-weight: 500;
}

.body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.body-lg {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}


/* ============================================================
   5) Buttons (Fase 1)
   ------------------------------------------------------------
   .btn-primary  → fondo accent, sobre fondos claros
   .btn-ghost    → outline ink, sobre fondos claros
   .btn-light    → outline bg, sobre fondos oscuros
   .btn-link-light → link subrayado, sobre fondos oscuros

   Estados :hover y .is-hover comparten reglas — la clase
   .is-hover permite previsualizar el hover sin pointer
   (útil para QA y para el HTML de check).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: var(--sans);
  transition:
    transform 400ms var(--ease-out),
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}

.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover,
.btn-primary.is-hover { background: var(--ink); }

.btn-ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn-ghost:hover,
.btn-ghost.is-hover { background: var(--ink); color: var(--bg); }

.btn-light { color: var(--bg); border-color: var(--bg); background: transparent; }
.btn-light:hover,
.btn-light.is-hover { background: var(--bg); color: var(--ink); }

.btn-link-light {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  padding: 4px 0;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.btn-link-light:hover,
.btn-link-light.is-hover {
  color: #fff;
  text-decoration-color: #fff;
}

.btn .arrow {
  display: inline-block;
  transition: transform 400ms var(--ease-out);
}
.btn:hover .arrow,
.btn.is-hover .arrow { transform: translateX(4px); }


/* ============================================================
   6) Reveal primitives (Fase 1)
   ------------------------------------------------------------
   .reveal:        opacity + translateY transición de 1200ms.
                   Pasa a estado final agregando clase .in.
   .mask-line:     wrapper con overflow hidden.
                   Hijo <span> entra desde translateY(110%) → 0,
                   con delay var(--d) configurable por item para
                   stagger por palabra/línea.
                   Activa al heredar .in del ancestro O al recibir
                   .in directamente en el .mask-line.

   El JS que añade .in vive en pulse-app.js (Fase 2):
   PulseApp.Reveal.observe() — IntersectionObserver threshold 0.18.

   prefers-reduced-motion: contenido visible sin transición.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1200ms var(--ease-out),
    transform 1200ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.mask-line {
  display: block;
  overflow: hidden;
}
/* Variante inline: para titulares donde varias palabras conviven en
   la misma línea (hero, marquee). Cada mask se trata como inline-block
   con margen derecho para preservar el spacing entre palabras. */
.mask-line.inline {
  display: inline-block;
  margin-right: 0.28em;
}
.mask-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.in .mask-line > span,
.mask-line.in > span {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .mask-line > span {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   7) Loader (Fase 2)
   ------------------------------------------------------------
   Full-viewport fijo. "Pulse" en serif gigante con animación
   breath (2 iteraciones de 1400ms ≈ 2.8s; el JS aplica .gone
   a 1000ms, así que el loader desaparece durante la 2a iter).
   .gone usa la transition definida abajo (800ms).
   En prefers-reduced-motion: display: none directo (defensa
   doble junto al check de JS).
   ============================================================ */
#pulse-loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: opacity 800ms var(--ease-out), visibility 800ms;
}
#pulse-loader.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-mark {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  animation: breath 1400ms var(--ease-breath) 2;
}

@keyframes breath {
  0%   { transform: scale(0.96); opacity: 0.5; letter-spacing: -0.05em; }
  50%  { transform: scale(1);    opacity: 1;   letter-spacing: -0.03em; }
  100% { transform: scale(0.96); opacity: 0.5; letter-spacing: -0.05em; }
}

@media (prefers-reduced-motion: reduce) {
  #pulse-loader { display: none !important; }
}


/* ============================================================
   8) Scroll progress line (Fase 2)
   ============================================================ */
#pulse-line {
  position: fixed;
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: var(--ink);
  z-index: 100;
  transform-origin: left center;
  will-change: width;
  pointer-events: none;
  mix-blend-mode: multiply;
}


/* ============================================================
   9) Nav (Fase 2)
   ------------------------------------------------------------
   Transparente sobre hero (mix-blend-mode difference invierte
   el color del texto contra la foto); solid al scrollY > 60
   (gestionado por pulse-app.js Nav.init).

   Mobile <920px: links centrales y carrito ocultos.
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: 22px var(--s7);
  color: #fff;
  mix-blend-mode: difference;
  transition: background-color 500ms var(--ease-out), padding 400ms var(--ease-out);
}
.nav.solid {
  background: var(--bg);
  color: var(--ink);
  padding: 16px var(--s7);
  border-bottom: 1px solid var(--line);
  mix-blend-mode: normal;
}

.nav-mark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-mark em {
  font-style: italic;
  opacity: 0.6;
  font-size: 14px;
  margin-left: 2px;
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links a { transition: opacity 200ms ease; }
.nav-links a:hover { opacity: 0.65; }
.nav-links a[aria-current="true"] { opacity: 0.65; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 500;
  transition: background-color 300ms ease, color 300ms ease;
}
.nav.solid .nav-cta:hover { background: var(--ink); color: var(--bg); }
.nav:not(.solid) .nav-cta:hover { background: #fff; color: #000; }

.nav-cart {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  transition: opacity 200ms ease;
}
.nav-cart:hover { opacity: 0.65; }
.nav-cart .nav-cart-count {
  font-size: 10px;
  letter-spacing: 0.1em;
  vertical-align: super;
  opacity: 0.7;
}

@media (max-width: 920px) {
  .nav,
  .nav.solid { padding-left: var(--s5); padding-right: var(--s5); }
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .nav-cart { display: none; }
  .nav-mark em { display: none; }
}

/* Más respiración en desktop ancho */
@media (min-width: 1200px) {
  .nav,
  .nav.solid { padding-left: var(--s8); padding-right: var(--s8); }
}

/* Oculta el trigger flotante creado por public-cart.js — nuestro
   nav tiene su propio botón #openCartBtn que dispara la apertura. */
#pulseCartTrigger { display: none !important; }


/* ============================================================
   10) Sticky CTA mobile (Fase 2)
   ------------------------------------------------------------
   Visible cuando scroll progress está entre 25% y 92%.
   Sólo aparece en max-width: 720px.
   ============================================================ */
#sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
#sticky-cta.show {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 720px) {
  #sticky-cta { display: flex; }
}


/* ============================================================
   11) Footer (Fase 2)
   ------------------------------------------------------------
   Mark "Pulse." gigante + grid 4 columnas (Studio / Visítanos /
   Contacto / Navegar) + bottom legal.

   En Fase 2 sólo lo usa index.html (markup inline). En Fase 8
   public-legal-footer.js se actualiza para emitir esta misma
   estructura, y entonces el resto de páginas también la usan.
   ============================================================ */
.footer {
  background: var(--bg-deep);
  color: var(--bg);
  padding: var(--s10) 0 var(--s7);
}
.footer-mark {
  font-family: var(--serif);
  font-size: clamp(64px, 16vw, 220px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin-bottom: var(--s8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-col h5 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s4);
  font-weight: 500;
}
.footer-col p,
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 0;
  line-height: 1.45;
  font-family: var(--sans);
}
.footer-col a { transition: color 200ms ease; }
.footer-col a:hover { color: var(--bg); }
.footer-col p .muted {
  color: rgba(255, 255, 255, 0.55);
}

/* key/value compacto (WhatsApp, Correo, Instagram) */
.footer-kv {
  display: grid !important;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0 !important;
}
.footer-kv-k {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.footer-kv a {
  display: inline !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: border-color 200ms ease, color 200ms ease;
}
.footer-kv a:hover { border-bottom-color: var(--bg); color: var(--bg); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s6);
  margin-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--sans);
}
.footer-bottom a {
  display: inline;
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 200ms ease, border-color 200ms ease;
}
.footer-bottom a:hover { color: var(--bg); border-bottom-color: var(--bg); }

@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Fase 9 · mobile: 1 col (4 → 2 → 1) */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}


/* ============================================================
   12) Hero (Fase 3)
   ------------------------------------------------------------
   Full-viewport. Imagen de fondo con overlay gradient para
   garantizar legibilidad del texto blanco. Parallax aplicado
   vía PulseApp.HeroParallax.bind (translate3d + scale por scrollY).
   Meta lateral rotada 90° (no en mobile).
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--bg-deep); /* fallback mientras carga la imagen */
}
.hero-media {
  position: absolute;
  inset: 0;
  background-color: var(--sand);
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hero-media.has-photo {
  background-image:
    linear-gradient(180deg, rgba(15, 26, 20, 0.15) 0%, rgba(15, 26, 20, 0.40) 70%, rgba(15, 26, 20, 0.70) 100%),
    url("studio-hero.webp");
}
.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s9);
  padding: 0 var(--s7);
  color: #fff;
  z-index: 2;
}
@media (max-width: 720px) {
  .hero-content {
    padding: 0 var(--s5);
    bottom: var(--s8);
  }
}
.hero-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.hero-display {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 13vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  max-width: 1200px;
  color: #fff;
}
.hero-sub {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 16px;
  max-width: 520px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-meta {
  position: absolute;
  right: var(--s7);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  white-space: nowrap;
}
@media (max-width: 920px) {
  .hero-meta { display: none; }
}

/* CTA secundario sobre fondo oscuro (variante específica del hero) */
.hero-cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.hero-cta-secondary:hover,
.hero-cta-secondary.is-hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Reduced-motion: anula transform inline del parallax. */
@media (prefers-reduced-motion: reduce) {
  .hero-media { transform: none !important; }
}


/* ============================================================
   13) Marquee (Fase 3)
   ------------------------------------------------------------
   Banda horizontal con loop infinito. Track duplicado: 6 items
   originales + 6 duplicados. Animación translate 0 → -50%
   = exactamente la mitad del track, así el segundo set queda
   donde estaba el primero (loop sin saltos).
   ============================================================ */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
  background: var(--bg-warm);
}
.marquee-track {
  display: flex;
  gap: var(--s8);
  white-space: nowrap;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-item {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.marquee-dot {
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  font-size: 18px;
  margin: 0 8px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}


/* ============================================================
   14) Manifesto (Fase 3)
   ------------------------------------------------------------
   Quote centrado en 6 líneas, cada línea como mask-line con
   stagger 80ms. <em> dentro del quote pinta el énfasis en
   color mute (ej. "Bienestar real.").
   ============================================================ */
.manifesto {
  background: var(--bg);
}
.manifesto-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--s5);
}
.manifesto-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.manifesto-quote em {
  font-style: italic;
  color: var(--ink-mute);
}


/* ============================================================
   15) Método (Fase 4)
   ------------------------------------------------------------
   Grid 2 columnas: izquierda eyebrow + H1 + body, derecha
   acordeón de 5 items con número itálico mute, título serif
   y toggle "+" → "×" (rotación 45° + fondo accent al abrir).

   Acordeón con markup semántico WAI-ARIA accordion:
     - <button data-accordion-trigger aria-expanded aria-controls>
     - <div data-accordion-panel id aria-hidden>
   Comportamiento gestionado por PulseApp.Accordion.bind.
   ============================================================ */
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s9);
  align-items: start;
}
@media (max-width: 920px) {
  .method-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

.method-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.method-item {
  border-bottom: 1px solid var(--line);
}

.method-row {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: var(--s6) 0;
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: var(--s5);
  align-items: start;
}
.method-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.method-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1.4;
}

.method-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.method-toggle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  transition:
    transform 500ms var(--ease-out),
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}
.method-item.open .method-toggle {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.method-desc {
  /* Alinear con la columna 2 del .method-row (56px + gap 24px = 80px) */
  padding-left: calc(56px + var(--s5));
  padding-right: calc(28px + var(--s5));
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 600ms var(--ease-out),
    opacity 500ms ease,
    padding-bottom 400ms ease;
}
.method-item.open .method-desc {
  max-height: 240px;
  opacity: 1;
  padding-bottom: var(--s6);
}
.method-desc p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .method-row { grid-template-columns: 44px 1fr 28px; gap: var(--s4); padding: var(--s5) 0; }
  .method-title { font-size: 22px; }
  .method-desc { padding-left: calc(44px + var(--s4)); padding-right: 0; }
}


/* ============================================================
   16) Estudio (Fase 4)
   ------------------------------------------------------------
   Fondo --bg-warm. Grid 5fr/7fr: izquierda foto vertical
   (aspect 4/5) + texto, derecha foto grande (5/4). Strip de
   6 fotos en grid 3×2 (responsive 2×3 → 1×6).

   Las fotos son <img loading="lazy" decoding="async"> dentro
   de <figure class="studio-photo">. El slot que no tiene foto
   definitiva usa el placeholder editorial (.studio-ph) con
   rayas 135° + borde dashed + label uppercase.
   ============================================================ */
.section-studio { background: var(--bg-warm); }

.studio-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s7);
  align-items: end;
}
@media (max-width: 920px) {
  .studio-grid { grid-template-columns: 1fr; gap: var(--s6); }
}

.studio-photo {
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 4 / 5;
}
.studio-photo--wide { aspect-ratio: 5 / 4; }
.studio-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-top: var(--s7);
}
@media (max-width: 920px) { .studio-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .studio-strip { grid-template-columns: 1fr; } }

/* Placeholder editorial · rayas diagonales + borde discontinuo +
   label uppercase. Se usa cuando no hay foto definitiva todavía. */
.studio-ph {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
    var(--sand);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.studio-ph::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  pointer-events: none;
}
.studio-ph-label {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}
.studio-ph-label span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   17) Semana / Schedule (Fase 4)
   ------------------------------------------------------------
   Fondo --bg-warm (continúa después de Estudio). Header dos
   columnas. Grid 6 días con pulse wave SVG inline por día
   (paths exactos del handoff: lower/upper/core/full).

   Hover: --paper (#FBF7EC) — no --bg-warm porque chocaría con
   el bg de la sección.
   ============================================================ */
.section-schedule { background: var(--bg-warm); }

.schedule-header {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s5);
  align-items: end;
  margin-bottom: var(--s7);
}
@media (max-width: 920px) {
  .schedule-header { grid-template-columns: 1fr; }
}
.schedule-header h2 { max-width: 720px; }
.schedule-header h2 em {
  font-style: italic;
  color: var(--ink-mute);
}
.schedule-header > p {
  max-width: 360px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
}
/* Fase 9 · paso intermedio 3 cols en tablet (920-1099) */
@media (max-width: 1100px) {
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .schedule-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .schedule-grid { grid-template-columns: 1fr; }
}

.schedule-day {
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 220px;
  transition: background-color 400ms ease;
}
.schedule-day:last-child { border-right: 0; }
@media (max-width: 920px) {
  .schedule-day { border-right: 1px solid var(--line); }
  .schedule-day:nth-child(2n) { border-right: 0; }
}
@media (max-width: 480px) {
  .schedule-day { border-right: 0; }
}
.schedule-day:hover { background: var(--paper); }

.day-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
}
.day-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.day-focus {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.day-pulse {
  margin-top: 16px;
  height: 24px;
  opacity: 0.55;
  color: var(--ink);
}
.day-hours {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
}

/* SVG pulse wave (paths exactos del PULSE_PATHS en sections-1.jsx). */
.pulse-wave {
  width: 100%;
  height: 20px;
  display: block;
}
.pulse-wave path {
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   18) Equipo · Camila + 3 instructoras (Fase 5)
   ------------------------------------------------------------
   TODOS los retratos son placeholders editoriales — la sesión
   fotográfica está pendiente. Camila usa el placeholder vertical
   con tag "Retrato pendiente" + brief detallado de la toma.
   Las 3 instructoras usan placeholders con 3 variantes de tono:
   sand / warm / deep, para diferenciar editorialmente.
   ============================================================ */
.camila { background: var(--bg); }

.camila-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--s8);
  align-items: center;
}
@media (max-width: 920px) {
  .camila-grid { grid-template-columns: 1fr; gap: var(--s6); }
}

.camila-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
}

.portrait-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, var(--sand) 0%, #8B7355 100%);
}
.portrait-ph::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.portrait-ph-tag {
  position: relative;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 10px;
  border-radius: 999px;
}
.portrait-ph-brief {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
.portrait-caption {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.camila-meta-row {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s7);
  flex-wrap: wrap;
}


/* === Team block (3 instructoras) === */
.team-block {
  margin-top: var(--s10);
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}
@media (max-width: 920px) {
  .team-block { margin-top: var(--s8); padding-top: var(--s7); }
}

.team-header {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s7);
  align-items: end;
  margin-bottom: var(--s7);
}
@media (max-width: 920px) {
  .team-header { grid-template-columns: 1fr; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
/* Fase 9 · paso intermedio 2 cols en 720-919 (la 3a card queda sola) */
@media (max-width: 920px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .team-grid { grid-template-columns: 1fr; }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  display: grid;
  place-items: end start;
  padding: 18px;
  margin-bottom: 8px;
  overflow: hidden;
}
.team-portrait::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.team-portrait .portrait-ph-tag {
  position: relative;
  align-self: flex-start;
}

/* Variantes editoriales de tono — diferencian las 3 tarjetas */
.team-portrait--sand {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, var(--sand) 0%, #8B7355 100%);
}
.team-portrait--warm {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #C9B896 0%, #6F5D44 100%);
}
.team-portrait--deep {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #4F6755 0%, #1B2A20 100%);
}

.team-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-top: 4px;
}
.team-role {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.team-since {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}


/* ============================================================
   19) Trial band (Fase 5)
   ------------------------------------------------------------
   Banda corta antes de Referidos. Fondo --accent (verde bosque)
   con texto --paper. CTA primary .btn-light (outline blanco) +
   link .btn-link-light a WhatsApp con texto template.
   ============================================================ */
.trial {
  background: var(--accent);
  color: var(--paper);
}
.trial-band { padding: var(--s9) 0; }

.trial-band-inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--s7);
  align-items: center;
}
@media (max-width: 920px) {
  .trial-band-inner { grid-template-columns: 1fr; }
}

.trial-band .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.trial-display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.trial-band-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}


/* ============================================================
   20) Inversión · Pricing (Fase 5)
   ------------------------------------------------------------
   Pill segmentado de tabs (Reformer / Mat / Privadas 1:1 / Dúo)
   + grids responsive de cards.

   Tablist WAI-ARIA:
     - role="tablist" / role="tab" / role="tabpanel"
     - aria-selected + aria-controls + aria-labelledby
     - sólo el tab activo tiene tabindex="0" (resto -1)
     - panels colapsados con attribute [hidden]

   Cambio de tab "instantáneo" (no animado) por decisión del
   handoff. Estética hereda --paper para cards, --accent para
   .feat ("más elegido").
   ============================================================ */
.pricing { background: var(--bg); }

.pricing-tabs {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: var(--s7);
}
.pricing-tab {
  padding: 10px 22px;
  border-radius: 999px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease;
}
.pricing-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--paper);
}
.pricing-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Grid columns por modalidad — Reformer 5, Mat/Privadas 4, Dúo 3.
   Responsive (Fase 9 ajuste · spec del cliente):
     Ref:      5 (≥1100) → 3 (920-1099) → 2 (720-919) → 1 (<720)
     Mat/Priv: 4 (≥1100) → 2 (720-1099) → 1 (<720)
     Dúo:      3 (≥920)  → 2 (720-919)  → 1 (<720)
   Nota: el breakpoint anterior 1280 para --5 → 3 cols se borró
   (no estaba en el spec del cliente). Justificación checkpoint Fase 9. */
.pricing-grid { display: grid; gap: var(--s5); }
.pricing-grid--5 { grid-template-columns: repeat(5, 1fr); }
.pricing-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pricing-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  .pricing-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .pricing-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pricing-grid--5,
  .pricing-grid--4,
  .pricing-grid--3 { grid-template-columns: 1fr; }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  min-height: 360px;
  transition:
    transform 500ms var(--ease-out),
    border-color 300ms ease,
    background-color 300ms ease;
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}
.price-card.feat {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.price-tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
}
.price-card.feat .price-tag { color: rgba(244, 240, 230, 0.65); }

.price-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.price-desc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.price-card.feat .price-desc { color: rgba(244, 240, 230, 0.78); }

.price-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
}
.price-card.feat .price-meta { color: rgba(244, 240, 230, 0.78); }

.price-amount {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: auto;
}
.price-amount sup {
  font-size: 18px;
  vertical-align: super;
  margin-right: 4px;
  opacity: 0.6;
}
.price-amount-suffix {
  font-size: 18px;
  margin-left: 6px;
  opacity: 0.6;
}

.price-per {
  margin-top: -8px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.price-per strong {
  color: var(--ink);
  font-weight: 500;
}
.price-card.feat .price-per { color: rgba(244, 240, 230, 0.75); }
.price-card.feat .price-per strong { color: var(--paper); }

.price-cta {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  transition: opacity 200ms ease;
}
.price-cta:hover { opacity: 0.7; }
.price-cta .arrow {
  display: inline-block;
  transition: transform 400ms var(--ease-out);
}
.price-cta:hover .arrow { transform: translateX(4px); }
.price-card.feat .price-cta { border-color: rgba(255, 255, 255, 0.2); }


/* ============================================================
   21) Referidos (Fase 6)
   ------------------------------------------------------------
   Fondo --bg-warm. Grid 5fr/7fr: copy izq + 3 cards mech der.
   La 3a card ocupa el ancho completo (gridColumn 1/-1) con
   layout flex interno: descripción + CTA "Compartir por
   WhatsApp" pre-armado con texto template SIN número (alumna
   elige destinatario).
   ============================================================ */
.referral { background: var(--bg-warm); }

.referral-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s9);
  align-items: center;
}
@media (max-width: 920px) {
  .referral-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

.referral-mech {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
@media (max-width: 720px) {
  .referral-mech { grid-template-columns: 1fr; }
}

.mech-card {
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.mech-card--full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.mech-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
}
.mech-pct {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 14px 0 6px;
}
.mech-text {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}


/* ============================================================
   22) Testimonios (Fase 6)
   ------------------------------------------------------------
   Fondo --bg-deep, color --paper. Grid 2×2 (2 cols × 2 rows).
   Cada item con border-top y quote serif clamp(22, 30).
   ============================================================ */
.testimonials {
  background: var(--bg-deep);
  color: var(--paper);
}
.testimonials .eyebrow {
  color: rgba(244, 240, 230, 0.5);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8) var(--s9);
}
@media (max-width: 920px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

.testimonial {
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.testimonial-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--bg);
}
.testimonial-attr {
  margin-top: var(--s5);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   23) Convenios (Fase 6)
   ------------------------------------------------------------
   Banda corta fondo --bg-warm. Eyebrow + lista horizontal de
   convenios en serif italic separados por ·.
   ============================================================ */
.convenios {
  background: var(--bg-warm);
  padding: var(--s7) 0;
}
.convenios-row {
  display: flex;
  gap: var(--s7);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.convenio {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s7);
}
.convenio-sep {
  color: var(--ink-mute);
  opacity: 0.5;
  font-style: normal;
}


/* ============================================================
   24) FAQ (Fase 6)
   ------------------------------------------------------------
   Mismo patrón semántico que Método (data-accordion-*),
   gestionado por PulseApp.Accordion.bind('.faq-list', …).
   Markup difiere visualmente: layout flex (pregunta + toggle
   en una línea), no grid de 3 columnas como Método.
   ============================================================ */
.faq { background: var(--bg); }

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-row {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: var(--s5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
}
.faq-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-question {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition:
    transform 500ms var(--ease-out),
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  transition:
    max-height 600ms var(--ease-out),
    opacity 500ms ease,
    margin-top 400ms ease,
    padding-bottom 400ms ease;
}
.faq-item.open .faq-answer {
  max-height: 320px;
  opacity: 1;
  margin-top: 16px;
  padding-bottom: var(--s5);
}
.faq-answer p {
  margin: 0;
}

@media (max-width: 720px) {
  .faq-question { font-size: 20px; }
}


/* ============================================================
   25) Reservar (Fase 7)
   ------------------------------------------------------------
   Página dedicada (no es sección del Home). Shell 7fr/5fr con
   aside derecho sticky (resumen verde bosque). 4 pasos en el
   main; cada paso con número, título, body, y check de estado.

   En <920px el aside pierde sticky y se apila ARRIBA del form
   (decisión del cliente — el resumen es contexto, no closing).
   ============================================================ */
.reservar-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 7fr 5fr;
}
@media (max-width: 920px) {
  .reservar-shell { grid-template-columns: 1fr; }
}

.reservar-aside {
  background: var(--ink);
  color: var(--bg);
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  order: 2; /* desktop: aside a la derecha */
}
@media (max-width: 920px) {
  .reservar-aside {
    position: static;
    height: auto;
    padding: 40px 24px;
    order: 1; /* mobile: aside primero, arriba del form */
  }
}

.reservar-aside .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.reservar-aside-price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 16px;
}
.reservar-aside-price sup {
  font-size: 18px;
  vertical-align: super;
  opacity: 0.5;
  margin-right: 6px;
}

.reservar-aside-kv {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  gap: 14px;
  font-family: var(--sans);
  font-size: 14px;
}
.reservar-aside-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.reservar-aside-kv .k {
  color: rgba(255, 255, 255, 0.6);
}
.reservar-aside-kv .v {
  text-align: right;
}

.reservar-aside-list {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.reservar-aside-list li {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  gap: 12px;
}
.reservar-aside-list li::before {
  content: "·";
  color: rgba(255, 255, 255, 0.4);
}

.reservar-aside-studio {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.reservar-aside-studio .eyebrow { margin-bottom: 8px; }
.reservar-aside-studio p {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.reservar-main {
  padding: 64px 80px;
  max-width: 720px;
  order: 1;
}
@media (max-width: 920px) {
  .reservar-main { order: 2; }
}
@media (max-width: 720px) {
  .reservar-main { padding: 40px 24px; }
}

/* === Steps === */
.step {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-of-type { border-bottom: 0; }

.step-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 400ms var(--ease-out);
}
.step.completed .step-num {
  color: var(--accent);
}
.step.completed .step-num::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
  position: relative;
  background-image:
    linear-gradient(45deg, transparent 38%, var(--paper) 38%, var(--paper) 44%, transparent 44%),
    linear-gradient(-45deg, transparent 56%, var(--paper) 56%, var(--paper) 62%, transparent 62%);
  background-size: 100% 100%;
  animation: stepCheckIn 500ms var(--ease-out);
}
@keyframes stepCheckIn {
  0%   { transform: scale(0.4);  opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .step.completed .step-num::after { animation: none; }
  .step-num { transition: none; }
}

.step-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1.1;
}

.step-body { margin-top: 20px; }

/* === Step 1: modalidad ===
   B-prep · 3 modalidades (Reformer/Mat/Barré). Desktop 3 col, mobile 1. */
.modality {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .modality { grid-template-columns: 1fr; }
}
.mod-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.mod-card .eyebrow {
  color: var(--ink-mute);
  margin-bottom: 8px;
  transition: color 300ms ease;
}
.mod-card .mod-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.015em;
}
.mod-card .mod-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.4;
  transition: color 300ms ease;
}
.mod-card[aria-pressed="true"],
.mod-card[aria-checked="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.mod-card[aria-pressed="true"] .eyebrow,
.mod-card[aria-pressed="true"] .mod-desc,
.mod-card[aria-checked="true"] .eyebrow,
.mod-card[aria-checked="true"] .mod-desc {
  color: rgba(255, 255, 255, 0.75);
}
.mod-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* === Step 2: día === */
.day-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.day-btn {
  padding: 12px 6px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  font: inherit;
  color: inherit;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.day-btn .dn {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.day-btn .dd {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.day-btn[disabled],
.day-btn[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
}
.day-btn[aria-pressed="true"],
.day-btn[aria-checked="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.day-btn[aria-pressed="true"] .dn,
.day-btn[aria-pressed="true"] .dd,
.day-btn[aria-checked="true"] .dn,
.day-btn[aria-checked="true"] .dd {
  color: var(--bg);
}
.day-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.day-disabled-note {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
}

/* === Step 3: horarios === */
.time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .time-grid { grid-template-columns: repeat(3, 1fr); }
}

.time-btn {
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  background: transparent;
  color: inherit;
  position: relative;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.time-btn[data-state="full"] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.time-btn[data-state="last"] {
  border-color: var(--accent);
}
.time-btn[data-state="last"]::after {
  content: "últimos";
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  padding: 0 4px;
  line-height: 1.2;
}
.time-btn[aria-pressed="true"],
.time-btn[aria-checked="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.time-btn[aria-pressed="true"][data-state="last"]::after,
.time-btn[aria-checked="true"][data-state="last"]::after {
  background: var(--ink);
  color: var(--paper);
}
.time-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* === Step 4: form inputs === */
.form-row {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.form-row label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.form-row input,
.form-row textarea {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 300ms ease;
}
.form-row input::placeholder {
  color: var(--ink-mute);
  opacity: 0.6;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-row.is-invalid input {
  border-color: #B5403D;
}
.form-row .error-text {
  font-family: var(--sans);
  font-size: 12px;
  color: #B5403D;
  display: none;
}
.form-row.is-invalid .error-text { display: block; }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.check input { margin-top: 4px; }

.submit-row {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.submit-row .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.submit-note {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  max-width: 540px;
  line-height: 1.55;
}

.submit-error {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: #B5403D;
  display: none;
}
.submit-error.is-visible { display: block; }


/* ============================================================
   26) Documentos · páginas legales + onboarding (Fase 8)
   ------------------------------------------------------------
   Sistema compartido para tu-primera-semana.html, terminos.html,
   privacidad.html, reclamos.html, informacion-comercial.html,
   libro-de-reclamaciones.html. Estructura típica:
     .doc-shell > .doc-wrap > .doc-hero + .doc-card[]
   ============================================================ */
.doc-shell {
  padding-top: 120px;
  padding-bottom: var(--s10);
  min-height: 60vh;
}
@media (max-width: 720px) {
  .doc-shell { padding-top: 96px; padding-bottom: var(--s9); }
}

.doc-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--s7);
}
@media (max-width: 720px) { .doc-wrap { padding: 0 var(--s5); } }

.doc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s6);
  margin-top: var(--s5);
}
.doc-card:first-child { margin-top: 0; }
@media (max-width: 720px) { .doc-card { padding: var(--s5); } }

.doc-hero {
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s7);
}
@media (max-width: 720px) { .doc-hero { padding: var(--s6); } }

.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s4);
}
.doc-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 6px;
}
.doc-brand strong {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.005em;
}

.doc-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.doc-hero p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
}
.doc-hero .doc-meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: var(--s3);
}

.doc-card h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.doc-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s4) 0 var(--s2);
}
.doc-card p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--s3);
}
.doc-card p:last-child { margin-bottom: 0; }
.doc-card strong { color: var(--ink); font-weight: 500; }
.doc-card a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(47, 74, 56, 0.35);
  text-underline-offset: 3px;
}
.doc-card a:hover { text-decoration-color: var(--accent); }

.doc-list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
  display: grid;
  gap: 8px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}
.doc-list li { padding-left: 4px; }

.doc-info-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.doc-info-item {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s4);
  background: var(--bg);
}
.doc-info-item dt {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.doc-info-item dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.doc-info-item a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(47, 74, 56, 0.35);
  text-underline-offset: 3px;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s5);
}
.doc-actions .btn { padding: 14px 22px; font-size: 12px; }

/* === Forms (libro-de-reclamaciones) === */
.doc-form { display: grid; gap: var(--s4); }
.doc-form-row { display: grid; gap: 8px; }
.doc-form-row label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.doc-form-row label .req { color: var(--accent); margin-left: 4px; }
.doc-form-row input,
.doc-form-row textarea,
.doc-form-row select {
  font-family: var(--sans);
  font-size: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 4px;
  transition: border-color 200ms ease;
}
.doc-form-row textarea { min-height: 120px; resize: vertical; }
.doc-form-row input:focus,
.doc-form-row textarea:focus,
.doc-form-row select:focus { outline: none; border-color: var(--ink); }
.doc-form-row.is-invalid input,
.doc-form-row.is-invalid textarea,
.doc-form-row.is-invalid select { border-color: #B5403D; }
.doc-form-row .help {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
}
.doc-form-row .error-text {
  font-family: var(--sans);
  font-size: 12px;
  color: #B5403D;
  display: none;
}
.doc-form-row.is-invalid .error-text { display: block; }


/* ============================================================
   27) Por implementar — mapa de fases
   ------------------------------------------------------------
   (Home + reservar.html cerrados. Sigue Fase 8 con páginas
   restantes (comprar/checkout). Cleanup en Fase 11.)
   ============================================================ */