/*
Theme Name: Studio Sage
Theme URI: https://studiosage.mx
Author: Studio Sage
Description: Tema a la medida para Studio Sage — pilates, barre y yoga en Puebla. Diseno original conservado, con blog, panel de opciones y datos estructurados de negocio local.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-sage
Tags: custom-theme, one-column, blog
*/


/* ============================================================
   STUDIO SAGE · sistema de diseño
   60% neutros · 30% verdes · 10% earth
   ============================================================ */
:root{
  --bosque:#3D5A2A;
  --moss:#8C916C;
  --sage:#ACB087;
  --earth:#95714F;
  --sand:#C7AF94;
  --almond:#EADED0;
  --cream:#F3EBDF;
  --ink:#2E351F;
  --line:rgba(61,90,42,.18);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', sans-serif;
  --script:'Shantell Sans', 'Comic Sans MS', cursive;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--almond);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--bosque);color:var(--almond)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--earth);outline-offset:3px;border-radius:2px}

/* grain sutil sobre todo */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- utilidades tipográficas ---------- */
.label{
  font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:.38em;text-transform:uppercase;
  color:var(--earth);
}
.label--moss{color:var(--moss)}
.label--light{color:rgba(234,222,208,.75)}
.display{
  font-family:var(--serif);font-style:italic;font-weight:500;
  line-height:1.12;color:var(--bosque);letter-spacing:-.01em;
}
.wordmark{display:flex;flex-direction:column;align-items:center;line-height:1}
.wordmark .wm-studio{font-family:var(--script);font-weight:700;font-size:.5em;letter-spacing:.28em;text-indent:.28em;color:currentColor}
.wordmark .wm-sage{display:block;height:1.55em;width:auto;margin-top:.04em;fill:currentColor;color:currentColor}

/* ---------- navegación ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 48px;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
/* El desenfoque va en un ::before, NO en .nav.
   Motivo: backdrop-filter en un elemento lo convierte en bloque contenedor
   de sus hijos position:fixed, y eso rompía el menú móvil al hacer scroll. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(234,222,208,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  transition:opacity .5s var(--ease);
}
.nav.scrolled::before{opacity:1}
.nav.scrolled{padding:14px 48px}
.nav-logo{color:var(--bosque);font-size:15px}
.nav-links{display:flex;gap:38px;align-items:center;list-style:none}
.nav-links a{
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  color:var(--ink);position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--earth);transition:width .4s var(--ease);
}
.nav-links a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  padding:15px 34px;border-radius:999px;
  transition:all .45s var(--ease);
}
.btn--solid{background:var(--bosque);color:var(--almond)}
.btn--solid:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(61,90,42,.5)}
.btn--ghost{border:1px solid var(--bosque);color:var(--bosque)}
.btn--ghost:hover{background:var(--bosque);color:var(--almond)}
.btn--light{background:var(--almond);color:var(--bosque)}
.btn--light:hover{background:#fff;transform:translateY(-2px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--bosque);transition:.3s}

/* ---------- héroe ---------- */
.hero{
  min-height:100vh;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:150px 24px 0;text-align:center;overflow:hidden;
}
.hero-eyebrow{margin-bottom:26px;opacity:0;animation:rise 1.2s .2s var(--ease) forwards}
.hero-title{
  font-size:clamp(46px,7.2vw,104px);max-width:14ch;
  opacity:0;animation:rise 1.2s .4s var(--ease) forwards;
}
.hero-sub{
  margin-top:26px;font-size:15px;letter-spacing:.06em;color:var(--earth);
  opacity:0;animation:rise 1.2s .6s var(--ease) forwards;
}
.hero-cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:rise 1.2s .75s var(--ease) forwards}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* el arco — firma de la marca */
.hero-arch{
  position:relative;margin-top:64px;width:min(620px,86vw);aspect-ratio:3/3.6;
  border-radius:999px 999px 0 0;overflow:hidden;
  border:1px solid rgba(61,90,42,.25);
  box-shadow:0 60px 120px -50px rgba(61,90,42,.45), inset 0 0 0 10px var(--almond), inset 0 0 0 11px rgba(61,90,42,.18);
  opacity:0;animation:archIn 1.6s .9s var(--ease) forwards;
}
@keyframes archIn{from{opacity:0;transform:translateY(70px) scale(.97)}to{opacity:1;transform:none}}
.scene{position:absolute;inset:0}
.scene .p-layer{position:absolute;will-change:transform}
/* interior cálido, en gradientes — reemplazable por fotografía del estudio */
.scene-room{inset:-14% 0;background:
  radial-gradient(120% 65% at 50% 0%, #f7ead6 0%, #ecd9bd 34%, #dfc4a0 62%, #cfae87 100%)}
.scene-glow{inset:-14% 0;background:radial-gradient(60% 42% at 50% 16%, rgba(255,238,205,.95), rgba(255,238,205,0) 70%)}
.scene-wall{left:8%;right:8%;top:22%;bottom:-2%;
  background:linear-gradient(180deg,#5a7040,#42552c 70%,#38491f);
  border-radius:999px 999px 0 0;
  box-shadow:inset 0 30px 60px rgba(0,0,0,.18)}
.scene-slats{left:26%;right:26%;top:34%;bottom:-2%;
  background:repeating-linear-gradient(90deg,#b98d5c 0 8px,#8f6a41 8px 12px,#a97f50 12px 20px);
  border-radius:999px 999px 0 0;opacity:.95;
  box-shadow:inset 0 20px 50px rgba(0,0,0,.28)}
.scene-floor{left:-4%;right:-4%;bottom:-2%;height:22%;
  background:linear-gradient(180deg,#e6d3b8,#d3ba97);
  box-shadow:inset 0 14px 24px rgba(139,106,71,.25)}
.scene-lamp{top:9%;left:15%;width:120px;height:120px}
.scene-lamp i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff6dd, #f2d9a3 60%, #d9b678);
  box-shadow:0 0 34px 10px rgba(255,232,180,.55)}
.scene-lamp i:nth-child(1){width:34px;height:34px;left:0;top:26px}
.scene-lamp i:nth-child(2){width:26px;height:26px;left:40px;top:0}
.scene-lamp i:nth-child(3){width:22px;height:22px;left:52px;top:52px}
.scene-desk{left:12%;bottom:8%;width:34%;height:26%;
  background:
    linear-gradient(180deg,#e9dcc8 0 12%, transparent 12%),
    repeating-linear-gradient(0deg,#93a06f 0 16px,#7f8c5d 16px 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 16px,rgba(0,0,0,.06) 16px 18px);
  background-blend-mode:normal,normal,overlay;
  box-shadow:0 24px 40px -18px rgba(75,60,35,.5), inset 0 -18px 26px rgba(0,0,0,.12);
  border-radius:2px}
.scene-orchid{left:20%;bottom:33%;width:70px;height:86px}
.scene-orchid .stem{position:absolute;left:33px;bottom:16px;width:2px;height:52px;background:#5d7040;border-radius:2px;transform:rotate(8deg)}
.scene-orchid .bloom{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;background:#f6efe2;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.scene-orchid .bloom:nth-child(2){left:24px;top:8px}
.scene-orchid .bloom:nth-child(3){left:36px;top:2px;transform:rotate(40deg)}
.scene-orchid .bloom:nth-child(4){left:44px;top:14px;transform:rotate(90deg)}
.scene-orchid .pot{position:absolute;left:22px;bottom:0;width:26px;height:18px;border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,#cbb392,#a98a63)}
.scene-vignette{inset:0;background:radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(61,45,25,.28));border-radius:999px 999px 0 0}
.hero-caption{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
  background:rgba(234,222,208,.9);backdrop-filter:blur(8px);
  padding:12px 26px;border-radius:999px;border:1px solid var(--line);
}
.hero-caption .dot{width:5px;height:5px;border-radius:50%;background:var(--earth)}

/* ---------- secciones base ---------- */
.section{padding:130px 48px;position:relative}
.wrap{max-width:1240px;margin:0 auto}
.sec-head{max-width:640px;margin-bottom:70px}
.sec-head .label{display:block;margin-bottom:20px}
.sec-head h2{font-size:clamp(36px,4.4vw,58px)}
.sec-head p{margin-top:22px;color:#5a5f47;max-width:52ch}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(44px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}

/* ---------- esencia ---------- */
.essence{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
.essence h2{font-size:clamp(34px,3.8vw,52px)}
.essence .lead{margin-top:26px;font-size:19px;color:#4c5238}
.essence-values{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.value{padding:26px 26px 26px 0;border-bottom:1px solid var(--line)}
.value:nth-child(odd){border-right:1px solid var(--line);padding-right:26px}
.value:nth-child(even){padding-left:26px}
.value h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:var(--bosque);margin-bottom:6px}
.value p{font-size:14.5px;color:#6a6e52;line-height:1.6}
.essence-visual{position:relative}
.arch-frame{
  position:relative;border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:3/3.9;
  box-shadow:0 50px 100px -40px rgba(61,90,42,.4);
}
.arch-frame .fill{position:absolute;inset:-12% 0;will-change:transform}
.fill--salon{background:
  radial-gradient(90% 50% at 50% 8%, #f5e7d0, transparent 60%),
  linear-gradient(180deg,#eddcc2 0%,#ddc39e 45%,#c9a87e 78%,#b8946a 100%)}
.fill--salon::before{content:"";position:absolute;left:30%;right:30%;top:26%;bottom:0;
  background:linear-gradient(180deg,#f9efdc,#e8d3b2);border-radius:999px 999px 0 0;
  box-shadow:inset 0 0 0 6px rgba(120,90,55,.18), 0 0 60px rgba(255,240,210,.8)}
.fill--salon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:
   repeating-linear-gradient(90deg, transparent 0 21%, rgba(122,133,90,.9) 21% 34%, transparent 34% 55%),
   linear-gradient(180deg,#dcc6a4,#cbb08a)}
.essence-visual .badge{
  position:absolute;right:-26px;bottom:60px;width:120px;height:120px;border-radius:50%;
  background:var(--bosque);color:var(--almond);
}
.essence-visual .badge .badge-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.essence-visual .badge .badge-mark{position:absolute;left:50%;top:50%;width:46px;height:auto;transform:translate(-50%,-50%)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- disciplinas ---------- */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.disc{
  background:var(--cream);border:1px solid var(--line);border-radius:999px 999px 18px 18px;
  padding:14px 14px 38px;text-align:center;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.disc:hover{transform:translateY(-10px);box-shadow:0 40px 70px -40px rgba(61,90,42,.45)}
.disc-visual{border-radius:999px 999px 12px 12px;overflow:hidden;aspect-ratio:1/1.06;position:relative;margin-bottom:30px}
.disc-visual .fill{position:absolute;inset:-10% 0;will-change:transform}
.fill--barre{background:linear-gradient(180deg,#efe0c8 0%,#dcc5a2 55%,#c6a67d 100%)}
.fill--barre::before{content:"";position:absolute;left:8%;right:8%;top:46%;height:7px;border-radius:6px;
  background:linear-gradient(180deg,#caa06b,#9c7444);box-shadow:0 6px 12px rgba(90,60,25,.3)}
.fill--barre::after{content:"";position:absolute;left:12%;top:53%;width:5px;height:38%;background:#9c7444;box-shadow:250px 0 #9c7444}
.fill--pilates{background:linear-gradient(180deg,#e9ddc6 0%,#d3ba94 60%,#bf9f74 100%)}
.fill--pilates::before{content:"";position:absolute;left:16%;right:16%;bottom:16%;height:26%;
  background:linear-gradient(180deg,#7d8a5c,#66744a);border-radius:10px;
  box-shadow:inset 0 6px 10px rgba(255,255,255,.15), 0 18px 30px -12px rgba(60,50,25,.5)}
.fill--pilates::after{content:"";position:absolute;left:20%;width:16px;height:16px;bottom:44%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aeb489,#82885f);box-shadow:120px -6px 0 -2px #82885f}
.fill--yoga{background:linear-gradient(180deg,#f2e6cf 0%,#e0cba9 50%,#ccab80 100%)}
.fill--yoga::before{content:"";position:absolute;left:24%;right:24%;top:18%;bottom:0;
  background:linear-gradient(180deg,rgba(255,244,220,.9),rgba(230,205,165,.5));border-radius:999px 999px 0 0;
  box-shadow:inset 0 0 0 5px rgba(120,90,55,.15)}
.fill--yoga::after{content:"";position:absolute;left:30%;right:30%;bottom:10%;height:10px;border-radius:8px;
  background:#7d8a5c;box-shadow:0 10px 18px -6px rgba(60,50,25,.4)}
.disc .label{display:block;margin-bottom:12px}
.disc h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;color:var(--bosque)}
.disc p{margin:16px auto 0;font-size:15px;color:#6a6e52;max-width:30ch}
.disc .disc-meta{margin-top:22px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--earth)}

/* ---------- ritual (parallax oscuro) ---------- */
.ritual{
  background:var(--bosque);color:var(--almond);overflow:hidden;position:relative;
  padding:170px 48px;text-align:center;
}
.ritual::before,.ritual::after{
  content:"";position:absolute;border-radius:999px 999px 0 0;border:1px solid rgba(234,222,208,.14);
  left:50%;transform:translateX(-50%);pointer-events:none;
}
.ritual::before{width:min(760px,92vw);height:120%;top:16%}
.ritual::after{width:min(560px,70vw);height:120%;top:30%;border-color:rgba(234,222,208,.09)}
.ritual .label{display:block;margin-bottom:26px}
.ritual h2{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--almond);
  font-size:clamp(38px,5.4vw,74px);max-width:16ch;margin:0 auto;position:relative;z-index:1}
.ritual p{max-width:52ch;margin:30px auto 0;color:rgba(234,222,208,.8);position:relative;z-index:1}
.ritual .btn{margin-top:44px;position:relative;z-index:1}
.ritual-word{position:absolute;font-family:var(--script);color:rgba(234,222,208,.08);font-size:clamp(120px,20vw,280px);
  white-space:nowrap;pointer-events:none;will-change:transform}
.ritual-word--a{top:2%;left:-4%}
.ritual-word--b{bottom:-6%;right:-6%}

/* ---------- horarios / calendario ---------- */
.booking{background:var(--cream)}
.steps{display:flex;gap:0;margin-bottom:64px;border:1px solid var(--line);border-radius:999px;overflow:hidden;width:max-content;max-width:100%}
.step{display:flex;align-items:center;gap:12px;padding:14px 28px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8a8d72;transition:.4s}
.step + .step{border-left:1px solid var(--line)}
.step .n{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--sand)}
.step.active{background:var(--bosque);color:var(--almond)}
.step.active .n{color:var(--sand)}
.step.done{color:var(--bosque)}
.week{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.day{
  flex:1;min-width:96px;text-align:center;padding:18px 10px 16px;
  border:1px solid var(--line);border-radius:999px 999px 14px 14px;background:var(--almond);
  transition:all .4s var(--ease);
}
.day .dow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--earth)}
.day .num{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--bosque);line-height:1.15}
.day .mon{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8a8d72}
.day:hover{transform:translateY(-4px)}
.day.active{background:var(--bosque);border-color:var(--bosque)}
.day.active .dow,.day.active .mon{color:var(--sand)}
.day.active .num{color:var(--almond)}
.classes{display:flex;flex-direction:column;gap:14px;min-height:320px}
.class-card{
  display:grid;grid-template-columns:110px 1.4fr 1fr 150px 110px;gap:26px;align-items:center;
  background:var(--almond);border:1px solid var(--line);border-radius:16px;
  padding:24px 30px;transition:all .45s var(--ease);
  opacity:0;transform:translateY(18px);animation:cardIn .6s var(--ease) forwards;
}
@keyframes cardIn{to{opacity:1;transform:none}}
.class-card:hover{border-color:var(--moss);box-shadow:0 24px 44px -30px rgba(61,90,42,.4)}
.class-card.selected{background:var(--bosque);border-color:var(--bosque);color:var(--almond)}
.class-card.selected .c-time,.class-card.selected .c-name{color:var(--almond)}
.class-card.selected .c-teacher,.class-card.selected .c-dur{color:var(--sand)}
.class-card.full{opacity:.45;pointer-events:none}
.c-time{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--bosque)}
.c-name{font-size:16px;font-weight:400;letter-spacing:.04em;color:var(--ink)}
.c-name small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--earth);margin-top:4px}
.c-teacher{font-size:14px;color:#6a6e52}
.c-teacher small{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--earth)}
.c-spots{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--earth);white-space:nowrap}
.c-spots.low{color:#9a5b32}
.class-card.selected .c-spots{color:var(--sand)}
.c-btn{padding:12px 26px;font-size:10.5px;width:100%;justify-content:center}
.classes-empty{padding:60px;text-align:center;color:#8a8d72;font-family:var(--serif);font-style:italic;font-size:20px}

/* ---------- precios + pago ---------- */
.pay-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.plan{
  position:relative;background:var(--almond);border:1px solid var(--line);border-radius:18px;
  padding:36px 32px;transition:all .45s var(--ease);cursor:pointer;
}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -35px rgba(61,90,42,.45)}
.plan.selected{border-color:var(--bosque);box-shadow:0 0 0 1.5px var(--bosque), 0 30px 60px -35px rgba(61,90,42,.45)}
.plan .label{display:block;margin-bottom:16px}
.plan h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;color:var(--bosque)}
.plan .price{margin-top:18px;font-family:var(--serif);font-size:38px;color:var(--ink);line-height:1}
.plan .price sup{font-size:15px;top:-16px;position:relative;color:var(--earth)}
.plan .per{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8a8d72;margin-top:8px}
.plan ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:14px;color:#5f6449;padding-left:20px;position:relative}
.plan li::before{content:"—";position:absolute;left:0;color:var(--earth)}
.plan .tag{
  position:absolute;top:-13px;right:22px;background:var(--earth);color:var(--almond);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;padding:7px 16px;border-radius:999px;
}
.plan .check{
  position:absolute;top:22px;right:22px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:transparent;transition:.35s;
}
.plan.selected .check{background:var(--bosque);border-color:var(--bosque);color:var(--almond)}

/* checkout */
.checkout{
  position:sticky;top:110px;
  background:var(--bosque);color:var(--almond);border-radius:999px 999px 22px 22px;
  padding:70px 44px 44px;overflow:hidden;
}
.checkout .label{color:var(--sand);display:block;text-align:center;margin-bottom:8px}
.checkout h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;text-align:center;color:var(--almond)}
.summary{margin:34px 0 26px;border-top:1px solid rgba(234,222,208,.2);border-bottom:1px solid rgba(234,222,208,.2)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px dashed rgba(234,222,208,.18);font-size:14px}
.sum-row:last-child{border-bottom:none}
.sum-row .k{letter-spacing:.2em;text-transform:uppercase;font-size:10px;color:var(--sand)}
.sum-row .v{font-family:var(--serif);font-style:italic;font-size:16px;text-align:right}
.sum-row.total .v{font-size:26px;font-style:normal}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
.field input{
  width:100%;background:rgba(234,222,208,.08);border:1px solid rgba(234,222,208,.25);
  border-radius:10px;padding:14px 16px;color:var(--almond);
  font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.04em;
  transition:border-color .3s, background .3s;
}
.field input::placeholder{color:rgba(234,222,208,.4)}
.field input:focus{outline:none;border-color:var(--sand);background:rgba(234,222,208,.14)}
.field input.err{border-color:#d29a6b}
.field-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.pay-btn{width:100%;justify-content:center;margin-top:10px}
.pay-note{margin-top:16px;text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,222,208,.55);display:flex;align-items:center;justify-content:center;gap:8px}
.pay-note svg{width:12px;height:12px}
.checkout .empty-hint{text-align:center;font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(234,222,208,.7);padding:8px 0 4px}

/* ---------- galería del espacio ---------- */
.space{overflow:hidden}
.space-strip{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:26px;align-items:end}
.space-item{border-radius:999px 999px 14px 14px;overflow:hidden;position:relative}
.space-item .fill{position:absolute;inset:-12% 0;will-change:transform}
.space-item:nth-child(1){aspect-ratio:3/4}
.space-item:nth-child(2){aspect-ratio:4/4.4}
.space-item:nth-child(3){aspect-ratio:3/4.6}
.fill--tile{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 18px,rgba(0,0,0,.05) 18px 20px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 18px,rgba(0,0,0,.06) 18px 20px),
  linear-gradient(180deg,#98a472,#7c8a58)}
.fill--light{background:
  radial-gradient(70% 46% at 50% 26%, #ffe9c2, transparent 62%),
  linear-gradient(180deg,#f0e2ca,#d9bf9b 60%,#c5a077)}
.fill--wall{background:
  radial-gradient(80% 60% at 60% 20%, rgba(255,240,210,.55), transparent 60%),
  linear-gradient(160deg,#6c7c4c,#4c5e33 60%,#3d4f28)}
.space-cap{margin-top:14px;display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--earth)}

/* ---------- ubicación ---------- */
.location{background:var(--cream)}
.location-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:stretch}
.sec-head--loc{margin-bottom:44px}
.loc-address{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.loc-address .street{font-size:20px;color:var(--bosque);font-weight:400}
.loc-address .area{font-size:15px;color:var(--earth)}
.loc-detail{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--moss);margin-bottom:30px;max-width:34ch}
.loc-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.loc-meta{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:24px;border-top:1px solid var(--line)}
.loc-meta div{display:flex;flex-direction:column;gap:3px}
.loc-meta .k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--earth)}
.loc-meta .v{font-size:15px;color:var(--bosque)}
.map-arch{
  position:relative;width:100%;min-height:420px;height:100%;
  border-radius:16px;overflow:hidden;
  box-shadow:0 60px 120px -55px rgba(61,90,42,.5), inset 0 0 0 10px var(--almond), inset 0 0 0 11px rgba(61,90,42,.18);
}
.map-arch iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.82) contrast(.98)}
@media(max-width:820px){
  .location-grid{grid-template-columns:1fr;gap:40px}
  .map-arch{height:340px;min-height:0;max-width:100%}
  .loc-cta .btn{flex:1}
}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--almond);padding:110px 48px 40px;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;max-width:1240px;margin:0 auto}
.footer .wordmark{align-items:flex-start;color:var(--almond);font-size:22px}
.footer .tagline{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--sand)}
.footer h5{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--sand);margin-bottom:22px;font-weight:400}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer a{font-size:14.5px;color:rgba(234,222,208,.8);transition:color .3s}
.footer a:hover{color:#fff}
.footer-bottom{max-width:1240px;margin:80px auto 0;padding-top:26px;border-top:1px solid rgba(234,222,208,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,222,208,.45)}
.footer-arch{position:absolute;right:-90px;bottom:-140px;width:420px;height:520px;border-radius:999px 999px 0 0;
  border:1px solid rgba(234,222,208,.1);pointer-events:none}

/* ---------- overlay de confirmación ---------- */
.confirm{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:rgba(46,53,31,.55);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.confirm.open{opacity:1;pointer-events:auto}
.confirm-card{
  background:var(--almond);border-radius:999px 999px 24px 24px;
  padding:90px 56px 52px;max-width:480px;width:calc(100% - 40px);text-align:center;
  transform:translateY(40px) scale(.97);transition:transform .6s var(--ease);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.5);
}
.confirm.open .confirm-card{transform:none}
.confirm-card .wordmark{color:var(--bosque);font-size:16px;margin-bottom:26px}
.confirm-card h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:34px;color:var(--bosque)}
.confirm-card p{margin-top:18px;color:#5f6449;font-size:15px}
.confirm-card .detail{margin:26px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink)}
.confirm-card .btn{margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .essence{grid-template-columns:1fr;gap:60px}
  .pay-grid{grid-template-columns:1fr;gap:50px}
  .checkout{position:static;border-radius:999px 999px 22px 22px}
  .disc-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .class-card{grid-template-columns:80px 1fr auto;grid-template-rows:auto auto;row-gap:10px}
  .c-teacher{grid-column:1;grid-row:2}
  .c-spots{grid-column:2;grid-row:2}
  .c-btn{grid-column:3;grid-row:1/3}
}
@media (max-width:720px){
  .nav{padding:16px 22px}
  .nav.scrolled{padding:12px 22px}
  .nav-links{
    position:fixed;inset:0;background:var(--almond);flex-direction:column;justify-content:center;gap:34px;
    transform:translateY(-100%);transition:transform .55s var(--ease);z-index:-1;
  }
  .nav-links.open{transform:none}
  .nav-links a{font-size:14px}
  .nav .btn{display:none}
  .nav-toggle{display:flex}
  .section{padding:90px 22px}
  .ritual{padding:120px 22px}
  .steps{width:100%}
  .step{flex:1;justify-content:center;padding:12px 8px}
  .step .txt{display:none}
  .week{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .day{min-width:84px}
  .plans{grid-template-columns:1fr}
  .space-strip{grid-template-columns:1fr;gap:40px}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer{padding:80px 22px 30px}
  .footer-grid{grid-template-columns:1fr;gap:44px}
  .hero{padding-top:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-eyebrow,.hero-title,.hero-sub,.hero-cta,.hero-arch{opacity:1;animation:none}
}


/* ---------- tarifas reales ---------- */
.rates-col{display:flex;flex-direction:column;gap:34px}
.promo{background:var(--bosque);color:var(--almond);border-radius:22px;padding:38px 34px;position:relative;overflow:hidden}
.promo::before{content:"\2731";position:absolute;top:20px;right:28px;color:rgba(234,222,208,.3);font-size:20px}
.promo h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;color:var(--almond);margin-top:10px}
.promo .group{margin-top:26px}
.group-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);padding-bottom:12px;border-bottom:1px solid rgba(234,222,208,.22)}
.promo-note{margin-top:22px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,222,208,.6)}
.rate{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:18px;text-align:left;
  padding:16px 14px;border-bottom:1px solid var(--line);transition:all .35s var(--ease);border-radius:10px}
.rate .r-name{font-size:15.5px;font-weight:300;letter-spacing:.03em}
.rate .r-name em{font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-left:12px}
.rate .r-price{font-family:var(--serif);font-style:italic;font-size:24px;white-space:nowrap}
.rate:hover{background:rgba(61,90,42,.07)}
.rate.selected{background:var(--bosque);color:var(--almond)}
.rate.selected .r-name em{color:var(--sand)}
.rate--promo{border-bottom:1px dashed rgba(234,222,208,.22)}
.rate--promo .r-name em{color:var(--sand)}
.rate--promo:hover{background:rgba(234,222,208,.1)}
.rate--promo.selected{background:var(--almond);color:var(--bosque)}
.rate--promo.selected .r-name em,.rate--promo.selected .r-price{color:var(--bosque)}
.rates{background:var(--almond);border:1px solid var(--line);border-radius:22px;padding:30px 22px}
.rates-head{display:block;padding:0 14px 16px}
.rates .rate:last-child,.promo .group .rate:last-child{border-bottom:none}

/* ---------- fotografía real del estudio ---------- */
.ph{background-size:cover;background-repeat:no-repeat;background-position:center}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,45,25,0) 55%,rgba(61,45,25,.18));pointer-events:none}


/* ============================================================
   AÑADIDOS DEL TEMA · fotografía real, blog y utilidades
   ============================================================ */

/* --- las fotos ahora son <img> reales (alt + srcset + lazy) --- */
img.fill, .fill img{width:100%;height:100%;object-fit:cover;display:block}
.disc-visual .veil,.arch-frame .veil,.space-item .veil{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(61,45,25,0) 55%,rgba(61,45,25,.18));
}

/* --- zona donde se incrusta el widget de reservas --- */
.booking-embed{margin-top:10px}
.booking-embed iframe{width:100%;border:0;border-radius:18px;min-height:640px;background:var(--almond)}
.booking-placeholder{
  border:1px dashed var(--line);border-radius:18px;background:var(--almond);
  padding:56px 30px;text-align:center;color:#6a6e52;
}
.booking-placeholder p{max-width:46ch;margin:0 auto 22px;font-size:15px}
.booking-placeholder .label{display:block;margin-bottom:14px}

/* --- aviso de horarios --- */
.sched-note{
  margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--almond);font-size:14px;color:#6a6e52;display:flex;gap:14px;align-items:flex-start
}
.sched-note strong{color:var(--bosque);font-weight:400}

/* ============================================================
   BLOG · "Diario Sage"
   ============================================================ */
.page-hero{
  padding:170px 48px 70px;text-align:center;background:var(--cream);
  border-bottom:1px solid var(--line);
}
.page-hero .label{display:block;margin-bottom:20px}
.page-hero h1{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bosque);
  font-size:clamp(38px,5vw,68px);line-height:1.12;max-width:18ch;margin:0 auto}
.page-hero p{margin:22px auto 0;max-width:56ch;color:#5a5f47}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.post-card{background:var(--cream);border:1px solid var(--line);border-radius:999px 999px 18px 18px;
  padding:14px 14px 34px;transition:transform .6s var(--ease),box-shadow .6s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-10px);box-shadow:0 40px 70px -40px rgba(61,90,42,.45)}
.post-card .thumb{border-radius:999px 999px 12px 12px;overflow:hidden;aspect-ratio:1/1.02;position:relative;margin-bottom:26px;background:var(--sage)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .meta{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--earth);padding:0 16px}
.post-card h2,.post-card h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;
  color:var(--bosque);margin-top:12px;padding:0 16px;line-height:1.25}
.post-card p{margin-top:14px;font-size:14.5px;color:#6a6e52;padding:0 16px;flex:1}
.post-card .more{margin-top:22px;padding:0 16px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--earth)}

/* artículo individual */
.article{padding:150px 24px 40px;max-width:1240px;margin:0 auto}
.article-head{max-width:760px;margin:0 auto 50px;text-align:center}
.article-head .label{display:block;margin-bottom:20px}
.article-head h1{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bosque);
  font-size:clamp(34px,4.6vw,60px);line-height:1.14}
.article-meta{margin-top:26px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--earth);
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--sand)}
.article-cover{max-width:1000px;margin:0 auto 60px;border-radius:18px;overflow:hidden;
  box-shadow:0 50px 100px -45px rgba(61,90,42,.4)}
.article-cover img{width:100%;height:auto}

.prose{max-width:680px;margin:0 auto;font-size:18px;line-height:1.78;color:#4c5238}
.prose > * + *{margin-top:1.5em}
.prose h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:34px;color:var(--bosque);
  line-height:1.2;margin-top:2em}
.prose h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;color:var(--bosque);margin-top:1.8em}
.prose h4{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--earth);font-weight:400;margin-top:1.8em}
.prose a{color:var(--bosque);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sand)}
.prose a:hover{text-decoration-color:var(--bosque)}
.prose strong{font-weight:500;color:var(--ink)}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.prose li::marker{color:var(--earth)}
.prose blockquote{border-left:2px solid var(--sand);padding:6px 0 6px 28px;
  font-family:var(--serif);font-style:italic;font-size:24px;color:var(--bosque);line-height:1.4}
.prose img,.prose figure img{border-radius:14px;width:100%;height:auto}
.prose figcaption{margin-top:10px;font-size:12.5px;letter-spacing:.06em;color:#8a8d72;text-align:center}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.6em 0}
.prose code{background:var(--cream);padding:2px 7px;border-radius:5px;font-size:.88em}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--earth);font-weight:400}

.article-foot{max-width:680px;margin:70px auto 0;padding-top:34px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.article-cta{background:var(--bosque);color:var(--almond);border-radius:22px;padding:52px 40px;text-align:center;
  max-width:680px;margin:60px auto 0}
.article-cta h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;color:var(--almond)}
.article-cta p{margin-top:14px;color:rgba(234,222,208,.8);font-size:15px;max-width:44ch;margin-left:auto;margin-right:auto}
.article-cta .btn{margin-top:28px}

/* paginación y navegación */
.pagination{display:flex;gap:10px;justify-content:center;margin-top:70px;flex-wrap:wrap}
.pagination .page-numbers{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--bosque);transition:.35s}
.pagination .page-numbers:hover{background:var(--cream)}
.pagination .page-numbers.current{background:var(--bosque);color:var(--almond);border-color:var(--bosque)}

/* páginas simples y 404 */
.page-body{padding:60px 24px 120px}
.notfound{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:170px 24px 120px}
.notfound h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(40px,6vw,80px);color:var(--bosque)}
.notfound p{margin-top:20px;color:#5a5f47;max-width:44ch}
.notfound .btn{margin-top:34px}

/* menú del blog dentro del nav */
.nav-links a[aria-current="page"]::after{width:100%}

/* barra flotante de WhatsApp en móvil */
/* --- botón flotante de WhatsApp ---------------------------------
   Vive en todas las páginas y en todos los tamaños. Aparece al bajar
   400 px para no tapar la portada al entrar. En escritorio se estira
   al pasar el cursor; en móvil se queda redondo. */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:300;height:56px;border-radius:999px;
  background:var(--bosque);color:var(--almond);display:flex;align-items:center;justify-content:center;
  gap:0;padding:0 15px;text-decoration:none;
  box-shadow:0 16px 34px -12px rgba(61,90,42,.65);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s,gap .35s ease,padding .35s ease}
/* Se esconde SOLO si el JavaScript lo pide. Al revés sería frágil: si el
   script no carga, el botón se quedaría invisible para siempre. */
.wa-float.oculto{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.94)}
.wa-float svg{width:27px;height:27px;flex:0 0 auto}
.wa-float-txt{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;max-width:0;overflow:hidden;opacity:0;
  transition:max-width .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
@media(hover:hover){
  .wa-float:hover{gap:11px;padding:0 21px 0 17px}
  .wa-float:hover .wa-float-txt{max-width:130px;opacity:1}
}
/* Sobre el pie verde se invierte para no perderse en el fondo. */
.wa-float.sobre-oscuro{background:var(--almond);color:var(--bosque);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.wa-float:focus-visible{outline:2px solid var(--almond);outline-offset:3px}
.wa-float.sobre-oscuro:focus-visible{outline-color:var(--bosque)}
@media(max-width:720px){.wa-float{right:16px;bottom:16px;height:52px;padding:0 13px}}
@media(prefers-reduced-motion:reduce){
  .wa-float{transition:opacity .2s ease}
  .wa-float.oculto{transform:none}
}

/* --- redes sociales en el pie --- */
.footer-redes{display:flex;gap:12px;margin-top:26px}
.footer-redes a{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(234,222,208,.28);color:rgba(234,222,208,.78);
  transition:color .3s ease,border-color .3s ease,background .3s ease,transform .3s ease}
.footer-redes a:hover{
  color:var(--bosque);background:var(--almond);border-color:var(--almond);transform:translateY(-2px)}
.footer-redes svg{width:18px;height:18px}

@media(max-width:1080px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .post-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .page-hero{padding:130px 22px 56px}
  .article{padding:120px 22px 30px}
  .prose{font-size:17px}
  .article-cover{border-radius:14px}
}

/* accesibilidad */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--bosque);color:var(--almond);
  padding:14px 22px;border-radius:0 0 10px 0;font-size:13px}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- paneles de días en horarios --- */
.day-panel{display:flex;flex-direction:column;gap:14px}
.day-panel.oculto{display:none}
.classes{min-height:0}
.day .num{font-size:26px}
.class-card{opacity:1;transform:none;animation:none}
.day-panel:not(.oculto) .class-card{opacity:0;transform:translateY(18px);animation:cardIn .6s var(--ease) forwards}
.c-spots{color:var(--moss)}
.checkout .pay-note a{color:var(--sand);letter-spacing:.16em}
.checkout .pay-note{justify-content:center}
.article-cta .wordmark{color:var(--almond);font-size:16px}
.footer-legal li{display:inline}
.footer-bottom a{color:rgba(234,222,208,.45)}
.footer-bottom a:hover{color:var(--almond)}

/* --- pestañas de día: apilar etiqueta, número y unidad --- */
.day .dow,.day .num,.day .mon{display:block}
.day .num{line-height:1.1;margin:2px 0}
/* --- valores largos en el resumen: legibles, no en cursiva --- */
.sum-row .v--texto{font-family:var(--sans);font-style:normal;font-size:13.5px;line-height:1.5;
  letter-spacing:.02em;color:rgba(234,222,208,.9);max-width:30ch}

/* --- correcciones de móvil --- */
.class-card > *{min-width:0}
@media (max-width:720px){
  .hero-caption{
    white-space:normal;text-align:center;max-width:calc(100vw - 44px);
    padding:10px 18px;font-size:9.5px;letter-spacing:.24em;line-height:1.6;
    justify-content:center;flex-wrap:wrap;gap:8px;
  }
  .class-card{
    grid-template-columns:62px 1fr;grid-template-rows:auto auto auto;
    gap:10px 14px;padding:20px 18px;
  }
  .c-time{grid-column:1;grid-row:1;font-size:20px}
  .c-name{grid-column:2;grid-row:1;font-size:15px}
  .c-teacher{grid-column:1;grid-row:2;font-size:13px}
  .c-spots{grid-column:2;grid-row:2;text-align:right;font-size:10px}
  .c-btn{grid-column:1 / -1;grid-row:3;width:100%;margin-top:4px}
  .sched-note{font-size:13.5px;padding:16px 18px}
}

/* ============================================================
   PÁGINAS INTERIORES · disciplinas, precios, instructoras
   Construidas con el mismo vocabulario del inicio:
   el arco, las rejillas con divisiones, la banda verde.
   ============================================================ */

.sg-hero{padding:180px 48px 20px;text-align:center}
.sg-hero .label{display:block;margin-bottom:22px}
.sg-hero h1{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bosque);
  font-size:clamp(40px,5.6vw,76px);line-height:1.1;max-width:15ch;margin:0 auto;letter-spacing:-.01em}
.sg-hero .lead{margin:28px auto 0;max-width:50ch;font-size:18px;color:#5a5f47;line-height:1.7}
.sg-hero-cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.sg-sec{padding:100px 48px}
.sg-sec--cream{background:var(--cream)}
.sg-sec--top{padding-top:80px}
.sg-wrap{max-width:1240px;margin:0 auto}
.sg-head{max-width:620px;margin-bottom:54px}
.sg-head .label{display:block;margin-bottom:18px}
.sg-head h2{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bosque);
  font-size:clamp(32px,4vw,50px);line-height:1.16}
.sg-head p{margin-top:20px;color:#5a5f47;max-width:52ch}
.sg-head--centro{margin-left:auto;margin-right:auto;text-align:center}

/* --- dos columnas con arco --- */
.sg-dos{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.sg-dos--inv .sg-visual{order:-1}
.sg-texto p{margin-bottom:1.15em;color:#4c5238;font-size:17px;line-height:1.72}
.sg-texto p:last-child{margin-bottom:0}
.sg-texto strong{font-weight:400;color:var(--bosque)}
.sg-arco{position:relative;border-radius:999px 999px 16px 16px;overflow:hidden;aspect-ratio:3/3.7;
  box-shadow:0 50px 100px -45px rgba(61,90,42,.4)}
.sg-arco img{width:100%;height:100%;object-fit:cover;display:block}
.sg-arco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(61,45,25,0) 60%,rgba(61,45,25,.16))}

/* --- secuencia de la clase (aquí el número sí es un orden real) --- */
.sg-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.sg-paso{border-top:1px solid var(--line);padding-top:26px}
.sg-paso .n{display:block;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--sand);margin-bottom:14px;letter-spacing:.06em}
.sg-paso h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:23px;
  color:var(--bosque);margin-bottom:10px}
.sg-paso p{font-size:14.5px;color:#6a6e52;line-height:1.65}

/* --- rejilla 2x2 con divisiones, igual que los valores del inicio --- */
.sg-quien{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.sg-q{padding:26px 26px 26px 0;border-bottom:1px solid var(--line)}
.sg-q:nth-child(odd){border-right:1px solid var(--line)}
.sg-q:nth-child(even){padding-left:26px}
.sg-q h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;
  color:var(--bosque);margin-bottom:6px}
.sg-q p{font-size:14.5px;color:#6a6e52;line-height:1.6}


/* --- banda verde --- */
.sg-banda{background:var(--bosque);color:var(--almond);padding:96px 48px;position:relative;overflow:hidden}
.sg-banda::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:20%;
  width:min(780px,92vw);height:130%;border-radius:999px 999px 0 0;
  border:1px solid rgba(234,222,208,.13);pointer-events:none}
.sg-banda .sg-wrap{position:relative;z-index:1}
.sg-banda .label{color:var(--sand);display:block;margin-bottom:18px}
.sg-banda h2{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--almond);
  font-size:clamp(30px,3.8vw,48px);line-height:1.16;max-width:18ch}
.sg-lista4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px}
.sg-item{border-top:1px solid rgba(234,222,208,.25);padding-top:22px}
.sg-item h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;
  color:var(--almond);margin-bottom:8px}
.sg-item p{font-size:14px;color:rgba(234,222,208,.72);line-height:1.6}

/* --- horarios + panel de precio --- */
.sg-precio{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.sg-dias{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.sg-dia{padding:12px 22px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bosque);background:var(--almond)}
.sg-panel{background:var(--bosque);color:var(--almond);border-radius:999px 999px 22px 22px;
  padding:64px 40px 40px;text-align:center}
.sg-panel .label{color:var(--sand);display:block;margin-bottom:10px}
.sg-panel h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;color:var(--almond)}
.sg-panel .cifra{font-family:var(--serif);font-size:56px;line-height:1;margin:26px 0 6px}
.sg-panel .cifra sup{font-size:22px;top:-20px;position:relative;color:var(--sand)}
.sg-panel .pie{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,222,208,.6)}
.sg-panel .btn{margin-top:30px;width:100%;justify-content:center}
.sg-panel .nota{margin-top:18px;font-size:13px;color:rgba(234,222,208,.72);line-height:1.6}

/* --- preguntas en acordeón, dos columnas --- */
/* Dos columnas INDEPENDIENTES. Con grid normal comparten la altura de fila,
   así que al abrir una pregunta de la derecha se abría un hueco en la izquierda. */
.sg-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
.sg-faq-col{display:flex;flex-direction:column;gap:14px}
.sg-faq details{border:1px solid var(--line);border-radius:14px;background:var(--almond);
  overflow:hidden;transition:border-color .3s;height:max-content}
.sg-faq details[open]{border-color:var(--moss)}
.sg-faq summary{cursor:pointer;padding:20px 24px;font-size:16px;color:var(--bosque);
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;transition:background .3s}
.sg-faq summary::-webkit-details-marker{display:none}
.sg-faq summary::after{content:"+";font-size:22px;color:var(--earth);line-height:1;transition:transform .35s var(--ease)}
.sg-faq details[open] summary::after{transform:rotate(45deg)}
.sg-faq summary:hover{background:var(--cream)}
.sg-faq .r{padding:0 24px 22px;font-size:15px;color:#6a6e52;line-height:1.68}
.sg-faq .r a{color:var(--bosque);border-bottom:1px solid var(--sand)}

/* --- tarjetas de instructoras --- */
.sg-personas{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.sg-persona{background:var(--cream);border:1px solid var(--line);
  border-radius:999px 999px 18px 18px;padding:14px 14px 34px;text-align:center}
.sg-persona .retrato{border-radius:999px 999px 12px 12px;overflow:hidden;aspect-ratio:1/1.14;margin-bottom:26px;background:var(--sage)}
.sg-persona .retrato img{width:100%;height:100%;object-fit:cover}
.sg-persona h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;color:var(--bosque)}
.sg-persona .da{margin-top:10px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--earth)}
.sg-persona .bio{margin:18px 20px 0;font-size:14.5px;color:#6a6e52;line-height:1.65}
.sg-persona .pendiente{margin:18px 20px 0;font-size:13.5px;color:#9a5b32;line-height:1.6;
  border:1px dashed rgba(154,91,50,.4);border-radius:10px;padding:14px}

/* --- enlaces entre disciplinas --- */
.sg-cruz{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sg-cruz a{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:30px 34px;border:1px solid var(--line);border-radius:18px;background:var(--almond);
  transition:all .45s var(--ease)}
.sg-cruz a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -35px rgba(61,90,42,.45);border-color:var(--moss)}
.sg-cruz .t{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--bosque)}
.sg-cruz .s{display:block;font-size:13.5px;color:#6a6e52;margin-top:6px;font-family:var(--sans);font-style:normal}
.sg-cruz .fl{font-size:20px;color:var(--earth)}

/* --- tabla de tarifas en página de precios --- */
.sg-tarifas{background:var(--almond);border:1px solid var(--line);border-radius:22px;padding:30px 22px}

@media (max-width:1080px){
  .sg-dos{grid-template-columns:1fr;gap:50px}
  .sg-dos--inv .sg-visual{order:0}
  .sg-arco{max-width:440px;margin:0 auto}
  .sg-precio{grid-template-columns:1fr;gap:44px}
  .sg-panel{border-radius:999px 999px 22px 22px}
  .sg-lista4{grid-template-columns:1fr 1fr}
  .sg-personas{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .sg-hero{padding:130px 22px 10px}
  .sg-sec{padding:70px 22px}
  .sg-banda{padding:70px 22px}
  .sg-pasos{grid-template-columns:1fr;gap:0}
  .sg-paso{padding:22px 0}
  .sg-quien{grid-template-columns:1fr}
  .sg-q:nth-child(odd){border-right:none}
  .sg-q:nth-child(even){padding-left:0}
  .sg-q{padding:22px 0}
    .sg-lista4{grid-template-columns:1fr;gap:0}
  .sg-item{padding:20px 0}
  .sg-faq{grid-template-columns:1fr;gap:14px 0}
  .sg-personas{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .sg-cruz{grid-template-columns:1fr}
}

/* --- las tarjetas de disciplina del inicio ahora llevan a su página --- */
.disc{display:flex;flex-direction:column}
.disc .disc-meta{margin-bottom:0}
.disc-mas{display:block;margin-top:22px;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--earth);opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.disc:hover .disc-mas,.disc:focus-visible .disc-mas{opacity:1;transform:none}
@media(hover:none){.disc-mas{opacity:1;transform:none}}

/* --- submenú de disciplinas --- */
.nav-links li{position:relative}
.nav-links .menu-item-has-children>a::before{
  content:"";position:absolute;right:-13px;top:50%;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.5;transition:.3s}
.nav-links .menu-item-has-children:hover>a::before{opacity:1}
.sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:190px;list-style:none;padding:14px 0;margin-top:14px;
  background:var(--almond);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 60px -30px rgba(61,90,42,.45);
  opacity:0;visibility:hidden;transition:all .35s var(--ease);z-index:10}
.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub-menu li{display:block}
.sub-menu a{display:block;padding:10px 24px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);transition:.25s}
.sub-menu a::after{display:none}
.sub-menu a:hover{background:var(--cream);color:var(--bosque)}
@media (max-width:720px){
  .sub-menu{position:static;transform:none;opacity:1;visibility:visible;
    background:none;border:none;box-shadow:none;padding:14px 0 0;margin:0;min-width:0}
  .nav-links li:hover>.sub-menu{transform:none}
  .sub-menu a{padding:8px 0;font-size:12px;color:var(--earth)}
  .nav-links .menu-item-has-children>a::before{display:none}
}

/* --- corrección: las fotos deben llenar el marco del arco ---
   Un <img> con position:absolute y height:100% se queda del alto del marco,
   así que el inset negativo que daba margen para el parallax no servía.
   Se fija inset:0 y el margen se consigue con scale, que es una propiedad
   aparte de transform y por eso no pelea con el parallax del JS. */
.scene img.fill,
.arch-frame img.fill,
.disc-visual img.fill,
.space-item img.fill{
  inset:0;width:100%;height:100%;object-fit:cover;
  scale:1.16;transform-origin:center center;
}
@media (prefers-reduced-motion:reduce){
  .scene img.fill,.arch-frame img.fill,.disc-visual img.fill,.space-item img.fill{scale:1}
}

/* --- el arco solo cierra si la caja es más alta que su medio ancho --- */
.sg-panel{min-height:400px;display:flex;flex-direction:column;justify-content:center}
.checkout{min-height:440px}
@media (max-width:720px){.sg-panel{min-height:360px}.checkout{min-height:400px}}

/* Al apilarse en una columna, el panel se iría a todo lo ancho y el arco
   volvería a aplastarse: el radio no alcanza a cubrir medio ancho. */
@media (max-width:1080px){
  .sg-panel,.checkout{max-width:460px;margin-left:auto;margin-right:auto}
}

/* --- tres disciplinas en el bloque de enlaces cruzados --- */
.sg-cruz--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.sg-cruz--3{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* --- canales donde vive el horario: no se lista, se manda a WhatsApp e Instagram --- */
.sec-head--centro{margin-left:auto;margin-right:auto;text-align:center}
.canales{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1000px;margin:0 auto}
.canal{
  display:flex;align-items:flex-start;gap:22px;padding:34px 34px;
  background:var(--almond);border:1px solid var(--line);border-radius:20px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.canal:hover,.canal:focus-visible{transform:translateY(-5px);border-color:var(--moss);
  box-shadow:0 34px 64px -38px rgba(61,90,42,.45)}
.canal-icono{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--bosque);
  color:var(--almond);display:flex;align-items:center;justify-content:center}
.canal-icono svg{width:22px;height:22px}
.canal-txt{flex:1}
.canal-t{display:block;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:22px;color:var(--bosque);line-height:1.2}
.canal-s{display:block;margin-top:10px;font-size:14.5px;color:#6a6e52;line-height:1.6}
.canal-fl{color:var(--earth);font-size:20px;align-self:center;transition:transform .4s var(--ease)}
.canal:hover .canal-fl{transform:translateX(5px)}
@media (max-width:820px){
  .canales{grid-template-columns:1fr;max-width:520px}
  .canal{padding:28px 26px;gap:18px}
}
/* versión compacta de los canales dentro de las páginas de disciplina */
.canales--mini{grid-template-columns:1fr;gap:16px;max-width:none;margin:0}
.canales--mini .canal{padding:24px 26px;gap:18px}
.canales--mini .canal-t{font-size:19px}
.canales--mini .canal-s{font-size:13.5px;margin-top:7px}
.canales--mini .canal-icono{flex:0 0 38px;width:38px;height:38px}
.canales--mini .canal-icono svg{width:19px;height:19px}

/* ============================================================
   COMPARACIÓN · un eje central en vez de dos listas paralelas
   La idea: se compara atributo por atributo, no leyendo dos
   columnas y alineándolas de memoria.
   ============================================================ */
.sg-comp{position:relative;max-width:1000px;margin:0 auto}

/* la línea del eje, de la cabecera hacia abajo */
.sg-comp::before{
  content:"";position:absolute;left:50%;top:14px;bottom:0;width:1px;
  background:var(--line);transform:translateX(-.5px);
}

.sg-comp-cab,.sg-comp-fila{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center}

.sg-comp-cab{padding-bottom:26px}
.sg-comp-cab .lado{text-align:center;padding:0 20px}
.sg-comp-cab .label{display:block;margin-bottom:12px}
.sg-comp-cab h3{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(30px,3.4vw,42px);color:var(--bosque);line-height:1.1;
}
.sg-comp-eje{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
/* La marca del estudio, no una letra: un círculo con una "o" se leía como cero. */
.sg-comp-o{
  color:var(--sand);font-size:19px;line-height:1;
  background:var(--cream);padding:10px 0;display:block;
}

.sg-comp-fila{border-top:1px dashed var(--line);padding:22px 0}
.sg-comp-fila:last-child{border-bottom:1px dashed var(--line)}
.sg-comp-fila .v{font-size:16px;color:#4c5238;line-height:1.5;padding:0 26px;text-align:center}
.sg-comp-fila .k{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--earth);
  text-align:center;position:relative;z-index:1;
}
.sg-comp-fila .k span{background:var(--cream);padding:6px 0;display:block}

/* la última fila es la conclusión: se destaca */
.sg-comp-fila--elige{padding:26px 0}
.sg-comp-fila--elige .v{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--bosque)}
.sg-comp-fila--elige .k span{color:var(--moss)}

.sg-comp-pie{margin:38px auto 0;text-align:center;max-width:56ch;color:#5a5f47}

@media (max-width:820px){
  .sg-comp::before{display:none}
  .sg-comp-cab{grid-template-columns:1fr auto 1fr;padding-bottom:20px}
  .sg-comp-cab .lado{padding:0 8px}
  .sg-comp-cab h3{font-size:24px}
  .sg-comp-o{font-size:16px;padding:6px 0}
  .sg-comp-fila{grid-template-columns:1fr 1fr;grid-template-areas:"k k" "a b";padding:18px 0;row-gap:12px}
  .sg-comp-fila .k{grid-area:k}
  .sg-comp-fila .k span{background:none;padding:0}
  .sg-comp-fila .v:first-of-type{grid-area:a;border-right:1px solid var(--line)}
  .sg-comp-fila .v:last-of-type{grid-area:b}
  .sg-comp-fila .v{font-size:14.5px;padding:0 14px}
  .sg-comp-fila--elige .v{font-size:16px}
}