/* =========================================================
   CENTRE TUINA ORIENTAL — Sistema de diseño
   Paleta original: blanco/crema cálido, dorado y amarillo,
   rojo terracota en detalles, y un marrón oscuro cálido
   (sin verde) para texto y estructura.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  /* Paleta — blanco cálido, amarillo/dorado y rojo terracota,
     con un neutro oscuro cálido (sin verde) para texto y estructura. */
  --ink:            #241c14;
  --ink-soft:       #57493a;
  --jade-900:       #1c140d;
  --jade-800:       #2c2015;
  --jade-700:       #4a3524;
  --jade-600:       #6b4e30;
  --jade-500:       #8a6540;
  --jade-glow:      #f2c879;
  --copper:         #b96b4a;
  --copper-light:   #d99b74;
  --gold:           #d4b47a;
  --gold-soft:      #ecdcc0;
  --terracotta:       #b4534d;
  --terracotta-light: #c9776f;
  --terracotta-dark:  #833a35;
  --terracotta-soft:  #e8c3bd;
  --paper:          #fbf6ec;
  --paper-dark:     #f1e4c9;
  --paper-deep:     #ecdcb8;
  --peach:          #f4dfbf;
  --white:          #fffdf8;
  --shadow:         0 20px 45px -20px rgba(28,20,13,0.35);
  --shadow-soft:    0 10px 30px -12px rgba(36,28,20,0.18);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* =========================================================================
   ANTI-PARPADEO AL EDITAR TEXTOS
   -------------------------------------------------------------------------
   Al recargar la página, el texto "de fábrica" que hay escrito en el propio
   HTML se parsea y se puede llegar a pintar en pantalla antes de que
   termine de cargar el script que sustituye ese texto por tu versión
   editada (aunque ese script cargue enseguida, sigue siendo una petición de
   red con su propio tiempo, por pequeño que sea) — eso es lo que se veía
   como un parpadeo del texto antiguo.
   Para evitarlo del todo, la página nace oculta (html sin la clase
   "ed-ready") y js/editor.js la revela — con document.documentElement.
   classList.add("ed-ready") — justo después de pintar tu contenido
   guardado, nunca antes. Así lo primero que se ve ya es la versión
   correcta, sin pasos intermedios.
   Por seguridad (JS desactivado, algún fallo, conexión rarísima…) hay dos
   redes de seguridad para que la página NUNCA se quede oculta de forma
   permanente: <noscript> la revela al momento si no hay JavaScript, y una
   animación en CSS puro la revela igualmente pasado 1 segundo pase lo que
   pase, aunque nada de JS haya llegado a ejecutarse.
   ========================================================================= */
html:not(.ed-ready) body{
  visibility:hidden;
  animation: ed-force-reveal 0s 1s forwards;
}
@keyframes ed-force-reveal{ to{ visibility:visible; } }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--jade-900);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.6rem,5vw,4.6rem); }
h2{ font-size:clamp(2rem,3.4vw,3.1rem); }
h3{ font-size:clamp(1.35rem,2.2vw,1.8rem); }
p{ margin:0 0 1em; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:600;
  color:var(--terracotta);
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}
.hanzi{
  font-family:var(--font-display);
  color:var(--gold);
  opacity:.55;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw;
}
@media(min-width:1300px){ .container{ padding:0 2rem; } }

section{ position:relative; padding:clamp(4rem,8vw,7.5rem) 0; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:.95em 2em;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--jade-700),var(--jade-900));
  color:var(--white);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-ghost{
  background:transparent;
  border-color:rgba(36,28,20,.25);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--jade-700); color:var(--jade-800); transform:translateY(-3px); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--copper));
  color:var(--ink);
  box-shadow:0 14px 30px -14px rgba(185,107,74,.55);
}
.btn-gold:hover{ transform:translateY(-3px); }
.btn-whatsapp{
  background:linear-gradient(135deg,#28c76f,#1fa85a);
  color:#fff;
}
.btn-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(31,168,90,.55); }
.btn svg{ width:1.1em; height:1.1em; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  padding:1.1rem 0;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.site-header.is-scrolled{
  background:rgba(246,240,227,.88);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 30px -18px rgba(36,28,20,.35);
  padding:.6rem 0;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.4rem;
  color:var(--white);
  transition:color .4s ease;
}
.site-header.is-scrolled .brand{ color:var(--jade-900); }
.brand-mark{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;
  box-shadow:var(--shadow-soft);
  border:1.5px solid rgba(255,253,248,.55);
  flex-shrink:0;
  background:var(--paper);
}
.site-header.is-scrolled .brand-mark,
.site-header.light-hero .brand-mark{ border-color:rgba(36,28,20,.15); }
.brand small{
  display:block;
  font-family:var(--font-body);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-soft);
  transition:color .4s ease;
}
.site-header.is-scrolled .brand small{ color:var(--copper); }

.nav-links{
  display:flex; align-items:center; gap:2.4rem;
}
.nav-links a{
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:rgba(255,253,248,.88);
  padding:.3rem 0;
  transition:color .4s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--terracotta);
  transition:width .35s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--gold-soft); }
.site-header.is-scrolled .nav-links a{ color:var(--ink-soft); }
.site-header.is-scrolled .nav-links a.active{ color:var(--jade-900); }

.nav-actions{ display:flex; align-items:center; gap:.9rem; }

.nav-toggle{
  display:none;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(36,28,20,.18);
  background:var(--white);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:.3s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

.editor-key{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;
  color:rgba(246,240,227,.5);
  opacity:.55;
  cursor:pointer;
  transition:.3s;
  background:transparent;
  font-size:.78rem;
}
.editor-key:hover{ opacity:1; color:var(--gold-soft); }
.site-header.is-scrolled .editor-key,
.site-header.light-hero .editor-key{ color:rgba(36,28,20,.32); }
.site-header.is-scrolled .editor-key:hover,
.site-header.light-hero .editor-key:hover{ color:var(--jade-700); }

/* Cabeceras de páginas internas: el fondo bajo el header ya es claro
   desde el principio, así que el texto empieza oscuro sin esperar al scroll. */
.site-header.light-hero .brand{ color:var(--jade-900); }
.site-header.light-hero .brand small{ color:var(--terracotta); }
.site-header.light-hero .nav-links a{ color:var(--ink-soft); }
.site-header.light-hero .nav-links a.active{ color:var(--jade-900); }
@media(max-width:920px){
  .site-header.light-hero .nav-links a,
  .site-header.light-hero.is-scrolled .nav-links a{ color:var(--paper); }
}
.editor-key svg{ width:13px; height:13px; }

@media(max-width:920px){
  .nav-links{
    position:fixed; inset:0 0 0 auto;
    width:min(78vw,340px);
    height:100vh;
    background:var(--jade-900);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.6rem;
    padding:3rem 3rem;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
    z-index:600;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a,
  .site-header.is-scrolled .nav-links a{ color:var(--paper); font-size:1.3rem; font-family:var(--font-display); }
  .nav-links a.active,
  .site-header.is-scrolled .nav-links a.active{ color:var(--gold-soft); }
  .nav-toggle{ display:flex; }
  .nav-actions .btn-primary{ display:none; }
  /* El panel del menú móvil (dentro de la propia cabecera) tiene su
     propio z-index para quedar por encima del contenido de la página.
     Sin esto, el botón de abrir/cerrar quedaría tapado por su propio
     panel al abrirlo (misma pila de apilamiento local), sin forma de
     cerrar el menú. Lo posicionamos y le damos más z-index que el panel
     para que se quede siempre visible y pulsable encima. */
  .nav-toggle{ position:relative; z-index:601; }
  .nav-toggle.open span{ background:transparent; }
  .nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }
  body.nav-open{ overflow:hidden; }
}
@media(max-width:560px){
  /* En móvil el nombre completo del negocio no cabe en una sola línea
     junto al logo y los iconos de la derecha; si se parte en dos líneas,
     la cabecera (que es fixed) crece y tapa el inicio del contenido de
     debajo. Se reduce un poco el tamaño para que quepa en una línea. */
  .brand{ font-size:1.05rem; gap:.5rem; }
  .brand-mark{ width:34px; height:34px; }
  .brand span{ white-space:nowrap; }
  .brand small{ font-size:.52rem; letter-spacing:.15em; white-space:nowrap; }
  .nav-actions{ gap:.6rem; }
}

/* ---------- Hero (inmersivo, asimétrico, sin caja/plantilla) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  /* En navegadores que la soportan, "svh" (small viewport height) evita que
     la altura del hero salte cuando la barra de direcciones del móvil
     aparece/desaparece al hacer scroll — la causa principal de que el
     visual 3D pareciera "saltar" o recortarse en el borde inferior. Los
     navegadores que no reconocen la unidad simplemente ignoran esta línea
     y se quedan con el 100vh de arriba. */
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:8rem;
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(207,165,90,.25), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(180,83,77,.35), transparent 60%),
    linear-gradient(180deg,var(--jade-900) 0%, #140e08 100%);
  color:var(--paper);
}
.hero .container{
  position:relative;
  z-index:3;
  width:100%;
  padding-bottom:6.4rem;
}
.hero-content{ max-width:760px; }
.hero h1{ color:var(--white); position:relative; z-index:1; letter-spacing:-.01em; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--gold-soft),var(--terracotta-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead{
  font-size:1.14rem;
  color:rgba(246,240,227,.82);
  max-width:46ch;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero-cta .btn-ghost{ border-color:rgba(246,240,227,.4); color:var(--paper); }
.hero-cta .btn-ghost:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

.hero-canvas-wrap{
  position:absolute; inset:0;
  z-index:1;
  opacity:.95;
}
#hero-canvas{ width:100%; height:100%; display:block; }

/* Vela el lado del texto para que las partículas nunca se mezclen con
   las letras — el campo 3D queda vivo por toda la escena, más denso
   a la derecha y abajo. */
.hero-scrim{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(28,20,13,.95) 0%,
    rgba(28,20,13,.82) 30%,
    rgba(28,20,13,.4) 52%,
    transparent 72%);
}
@media(max-width:920px){
  .hero-scrim{
    background:linear-gradient(190deg,
      transparent 0%,
      transparent 24%,
      rgba(28,20,13,.55) 40%,
      rgba(28,20,13,.94) 56%);
  }
}

/* Índice decorativo lateral — eco del menú, refuerzo de identidad editorial */
.hero-index-rail{
  position:absolute; z-index:3;
  top:50%; right:6vw; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1.6rem;
}
.hero-index-rail a{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(246,240,227,.45);
  transition:color .3s;
}
.hero-index-rail a span{
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:0;
  color:rgba(246,240,227,.3);
  transition:color .3s;
}
.hero-index-rail a:hover,
.hero-index-rail a.active{ color:var(--paper); }
.hero-index-rail a:hover span,
.hero-index-rail a.active span{ color:var(--gold-soft); }
@media(max-width:1180px){ .hero-index-rail{ display:none; } }

/* Marquesina — cinta continua de terapias, firma visual del sitio */
.marquee{
  position:relative; z-index:3;
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(246,240,227,.14);
  padding:1.1rem 0;
  margin-top:3.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:2.2rem;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:rgba(246,240,227,.55);
  white-space:nowrap;
}
.marquee-track span.dot{ color:var(--terracotta-light); font-size:.9rem; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

.hero-scroll{
  position:absolute; bottom:1.6rem; left:6vw;
  z-index:3;
  display:flex; align-items:center; gap:.6rem;
  color:rgba(246,240,227,.5);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
}
.hero-scroll .line{ width:34px; height:1px; background:linear-gradient(90deg,rgba(246,240,227,.7),transparent); }

@media(max-width:920px){
  .hero{ align-items:center; padding-bottom:2rem; }
  .hero .container{ padding-bottom:0; }
  .marquee{ margin-top:2.2rem; }
  .hero-scroll{ position:static; margin-top:2rem; }
}

/* ---------- Sub hero (páginas internas) ---------- */
.page-hero{
  position:relative;
  padding:11rem 0 5rem;
  background:linear-gradient(165deg, var(--peach) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  color:var(--ink);
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(640px 380px at 88% 0%, rgba(180,83,77,.14), transparent 62%),
    radial-gradient(520px 320px at 4% 100%, rgba(180,83,77,.1), transparent 60%);
}
.page-hero h1{ color:var(--jade-900); position:relative; z-index:2; max-width:16ch; }
.page-hero .lead{ position:relative; z-index:2; max-width:60ch; color:var(--ink-soft); }
.page-hero-accent{
  position:absolute; z-index:2;
  top:8.5rem; right:6vw;
  width:150px; height:150px;
}
@media(max-width:760px){ .page-hero-accent{ display:none; } }
.breadcrumb{
  position:relative; z-index:2;
  font-size:.8rem; letter-spacing:.08em;
  color:rgba(36,28,20,.5);
  margin-bottom:1rem;
}
.breadcrumb a{ color:var(--terracotta); }
.floaters{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.floaters span{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(180,83,77,.4), rgba(180,83,77,0) 70%);
  filter:blur(1px);
  animation:float 12s ease-in-out infinite;
}
.floaters span:nth-child(3n){
  background:radial-gradient(circle at 35% 30%, rgba(212,180,122,.45), rgba(212,180,122,0) 70%);
}
@keyframes float{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-26px) translateX(14px); }
}

/* ---------- Placeholder de foto (deliberadamente vacío) ---------- */
.photo-slot{
  position:relative;
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(36,28,20,.05) 0 12px, rgba(36,28,20,.02) 12px 24px),
    var(--paper-dark);
  border:1.5px dashed rgba(36,28,20,.22);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  min-height:220px;
}
.photo-slot::before{
  content:attr(data-label);
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(36,28,20,.4);
  text-align:center;
  padding:0 1.2rem;
}
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.photo-slot.square{ aspect-ratio:1/1; }
.photo-slot.portrait{ aspect-ratio:3/4; }
.photo-slot.wide{ aspect-ratio:16/10; }

/* ---------- Secciones comunes ---------- */
.section-head{
  max-width:640px;
  margin:0 auto 3.4rem;
  text-align:center;
}
.section-head.left{ margin:0 0 3.4rem; text-align:left; }

.grid{ display:grid; gap:1.8rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border-radius:var(--radius);
  padding:2.2rem 1.9rem;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(36,28,20,.06);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  position:relative;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.card .icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--jade-700),var(--jade-900));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem;
  color:var(--gold-soft);
}
.card .icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }
.card .price{
  margin-top:1.1rem;
  font-family:var(--font-display);
  color:var(--terracotta);
  font-size:1.3rem;
  font-weight:600;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
@media(max-width:920px){ .split{ grid-template-columns:1fr; gap:2.4rem; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.tag-row span{
  font-size:.75rem; letter-spacing:.04em;
  padding:.4em 1em;
  border-radius:999px;
  background:var(--paper-dark);
  color:var(--jade-800);
  border:1px solid rgba(36,28,20,.08);
}

/* ---------- Recuadro para un objeto 3D (motor compartido en main.js) ---------- */
.mini3d-slot{ position:relative; }

/* =========================================================================
   SIN OBJETOS 3D (dispositivos táctiles / sin ratón real)
   -------------------------------------------------------------------------
   main.js solo pone en marcha el motor 3D en dispositivos con ratón real
   (hover:hover + pointer:fine) y en ese caso marca <html class="has-3d">.
   En el resto —la inmensa mayoría de móviles y tablets— no se anima nada
   (evita que los objetos "floten" o se desincronicen del texto durante el
   scroll táctil), y estas reglas ocultan con normalidad los huecos donde
   habría ido cada visual, sin dejar espacios vacíos ni romper ninguna
   cuadrícula.
   ========================================================================= */
html:not(.has-3d) [data-3d]{
  /* visibility, no display: algunos de estos objetos son un elemento más
     dentro de una cuadrícula con columnas fijas (p. ej. la fila de una
     terapia) — quitarlos del todo desplazaría a los demás elementos a la
     columna equivocada. visibility:hidden los oculta sin tocar el sitio
     que ocupan. Donde sí es seguro colapsar el hueco del todo, hay una
     regla más abajo que lo hace con display:none. */
  visibility:hidden;
}
html:not(.has-3d) .hero-canvas-wrap,
html:not(.has-3d) .page-hero-accent,
html:not(.has-3d) .ribbon-divider,
html:not(.has-3d) .pin-visual{
  display:none;
}
html:not(.has-3d) .pin-split-inner{ grid-template-columns:1fr; }
@media(max-width:760px){
  html:not(.has-3d) .t-3d{ display:none; }
  html:not(.has-3d) .therapy-row{ grid-template-areas:"num info"; row-gap:0; }
}
/* ---------- Divisor "cinta" 3D — sustituye los cambios de color planos ---------- */
.ribbon-divider{
  position:relative;
  width:100%;
  height:150px;
  overflow:hidden;
}
@media(max-width:640px){ .ribbon-divider{ height:110px; } }

/* ---------- Numerales editoriales ---------- */
.numeral-ghost{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(36,28,20,.18);
  user-select:none;
}

/* ---------- Índice de terapias (lista editorial, sustituye la rejilla de tarjetas) ---------- */
.therapy-index{ border-top:1px solid rgba(36,28,20,.12); }
.therapy-row{
  position:relative;
  display:grid;
  grid-template-columns:5rem 1fr 96px 2.2rem;
  align-items:center;
  gap:1.8rem;
  padding:1.9rem 0;
  border-bottom:1px solid rgba(36,28,20,.12);
  text-decoration:none;
  color:inherit;
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.therapy-row::before{
  content:'';
  position:absolute; inset:0 -2rem;
  background:linear-gradient(90deg, rgba(180,83,77,.08), transparent 70%);
  opacity:0;
  transition:opacity .4s;
  z-index:0;
  pointer-events:none;
}
.therapy-row:hover{ padding-left:.8rem; }
.therapy-row:hover::before{ opacity:1; }
.therapy-row > *{ position:relative; z-index:1; }
.t-num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:rgba(36,28,20,.28);
  transition:color .4s;
}
.therapy-row:hover .t-num{ color:var(--terracotta); }
.t-info h3{ margin-bottom:.35rem; font-size:clamp(1.3rem,2vw,1.7rem); }
.t-info p{ margin:0; color:var(--ink-soft); font-size:.92rem; max-width:52ch; }
.t-3d{ width:96px; height:96px; justify-self:center; }
.t-arrow{
  font-size:1.4rem; color:var(--terracotta);
  transform:translateX(-6px); opacity:0;
  transition:transform .4s, opacity .4s;
  justify-self:end;
}
.therapy-row:hover .t-arrow{ transform:translateX(0); opacity:1; }
@media(max-width:760px){
  .therapy-row{ grid-template-columns:3rem 1fr; grid-template-areas:"num info" "d3d d3d"; row-gap:1rem; }
  .t-num{ grid-area:num; font-size:1.6rem; }
  .t-info{ grid-area:info; }
  .t-3d{ grid-area:d3d; width:100%; height:150px; justify-self:stretch; }
  .t-arrow{ display:none; }
}

/* ---------- Ficha de servicio detallada (página Servicios) ---------- */
.service-detail{ position:relative; overflow:hidden; }
.sd-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.6rem; }
.service-detail-inner{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:3rem;
}
.sd-numeral{
  font-size:clamp(6rem,11vw,9rem);
  align-self:start;
  margin-top:-1.2rem;
}
.sd-3d{ width:min(340px,32vw); height:auto; aspect-ratio:4/5; min-height:0; }
@media(max-width:920px){
  .service-detail-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .sd-numeral{ position:absolute; top:-1.6rem; right:0; font-size:5rem; margin:0; z-index:0; opacity:.7; }
  .sd-text{ position:relative; z-index:1; }
  .sd-3d{ width:100%; height:auto; aspect-ratio:16/10; order:2; }
}
@media(max-width:520px){
  .sd-3d{ aspect-ratio:4/3; }
}

/* ---------- Sección con visual 3D fijo al hacer scroll (pin-split) ---------- */
.pin-split-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:4.5rem;
  align-items:start;
}
.pin-visual{
  position:sticky;
  top:130px;
  height:62vh;
  min-height:360px;
}
.pin-visual .mini3d-slot{ width:100%; height:100%; }
.pin-text{ padding-top:1.2rem; }
.pin-text p{ max-width:52ch; }
@media(max-width:920px){
  .pin-split-inner{ grid-template-columns:1fr; gap:2rem; }
  .pin-visual{ position:static; height:280px; order:-1; }
}

/* ---------- Galería asimétrica (huecos de foto deliberadamente vacíos) ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:130px;
  gap:1.2rem;
}
.gallery-grid .photo-slot:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gallery-grid .photo-slot:nth-child(2){ grid-row:span 3; }
.gallery-grid .photo-slot:nth-child(3){ grid-row:span 2; }
.gallery-grid .photo-slot:nth-child(4){ grid-column:span 2; grid-row:span 2; }
.gallery-grid .photo-slot:nth-child(5){ grid-row:span 1; }
@media(max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; }
}

/* Promo banda */
.promo-band{
  background:linear-gradient(120deg,var(--terracotta-dark),var(--terracotta));
  color:var(--paper);
  border-radius:28px;
  padding:3rem clamp(1.6rem,5vw,4rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.promo-band::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(500px 260px at 90% 10%, rgba(212,180,122,.35), transparent 70%);
}
.promo-band > *{ position:relative; z-index:1; }
.promo-price{
  font-family:var(--font-display);
  font-size:3.2rem;
  color:var(--gold-soft);
  line-height:1;
}
.promo-price span{ font-size:1rem; display:block; font-family:var(--font-body); color:rgba(246,240,227,.7); letter-spacing:.1em; text-transform:uppercase; margin-top:.4rem; }

/* Testimonios / quote */
.quote-block{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.quote-block p{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.6vw,2rem);
  color:var(--jade-900);
  font-style:italic;
}

/* Timeline (sobre nosotros) */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--gold),var(--jade-700));
}
.timeline-item{ position:relative; padding-bottom:2.4rem; }
.timeline-item::before{
  content:''; position:absolute; left:-2.2rem; top:4px;
  width:13px;height:13px;border-radius:50%;
  background:var(--white); border:3px solid var(--copper);
}
.timeline-item h4{ font-family:var(--font-display); color:var(--jade-900); margin-bottom:.2rem; font-size:1.2rem; }
.timeline-item span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:rgba(246,240,227,.75);
  padding:4.5rem 0 2rem;
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:2.6rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(246,240,227,.1);
}
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  color:var(--gold-soft);
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.footer-grid li{ margin-bottom:.65rem; font-size:.92rem; }
.footer-grid a:hover{ color:var(--gold-soft); }
.footer-brand{ font-family:var(--font-display); font-size:1.5rem; color:var(--white); margin-bottom:.8rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.6rem; font-size:.8rem; color:rgba(246,240,227,.45);
  flex-wrap:wrap; gap:.8rem;
}
.social-row{ display:flex; gap:.8rem; }
.social-row a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(246,240,227,.18);
  display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.social-row a:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.social-row svg{ width:16px;height:16px; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;
  right:1.6rem; bottom:1.6rem;
  z-index:800;
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(135deg,#28c76f,#1fa85a);
  color:#fff;
  padding:.85rem 1.3rem .85rem .85rem;
  border-radius:999px;
  box-shadow:0 16px 34px -14px rgba(31,168,90,.6);
  font-weight:600;
  font-size:.88rem;
  transition:transform .35s ease;
}
.wa-float:hover{ transform:translateY(-4px) scale(1.02); }
.wa-float .wa-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.wa-float .wa-icon svg{ width:20px;height:20px; }
.wa-float .wa-pulse{
  position:absolute; inset:0; border-radius:999px;
  border:2px solid rgba(40,199,111,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media(max-width:560px){
  .wa-float span.wa-label{ display:none; }
  .wa-float{ padding:.75rem; }
}

/* ---------- Booksy flotante (alternativa de reserva online) ---------- */
.booksy-float{
  position:fixed;
  right:1.6rem; bottom:6.35rem;
  z-index:799;
  display:flex; align-items:center; gap:.6rem;
  background:var(--white);
  color:var(--jade-900);
  border:1.5px solid var(--gold);
  padding:.62rem 1.15rem .62rem .62rem;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
  font-weight:600;
  font-size:.82rem;
  transition:transform .35s ease, background .35s, color .35s, border-color .35s;
}
.booksy-float:hover{ transform:translateY(-4px) scale(1.02); background:var(--gold); border-color:var(--gold); color:var(--ink); }
.booksy-float .bk-icon{
  width:30px;height:30px;border-radius:50%;
  background:var(--paper-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.booksy-float .bk-icon svg{ width:15px;height:15px; }
@media(max-width:560px){
  .booksy-float span.bk-label{ display:none; }
  .booksy-float{ padding:.62rem; bottom:5.35rem; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ---------- Mapa / contacto ---------- */
.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(36,28,20,.1);
  box-shadow:var(--shadow-soft);
  filter:grayscale(.15) sepia(.08);
}
.map-frame iframe{ width:100%; height:420px; border:0; display:block; }

.contact-info-row{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.3rem 0;
  border-bottom:1px solid rgba(36,28,20,.08);
}
.contact-info-row .icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--paper-dark);
  display:flex;align-items:center;justify-content:center;
  color:var(--jade-800); flex-shrink:0;
}
.contact-info-row .icon svg{ width:20px;height:20px; }
.contact-info-row h4{ font-family:var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:.2rem; color:var(--ink); }
.contact-info-row p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

.form-field{ margin-bottom:1.2rem; }
.form-field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.45rem; color:var(--jade-900); }
.form-field input, .form-field textarea{
  width:100%;
  padding:.9em 1.1em;
  border-radius:var(--radius-sm);
  border:1px solid rgba(36,28,20,.16);
  background:var(--white);
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--ink);
  resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--jade-600); box-shadow:0 0 0 3px rgba(180,83,77,.15);
}

/* Utilities */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.muted{ color:var(--ink-soft); }
.gold-text{ color:var(--copper); }

/* =========================================================================
   TOQUE INTERACTIVO Y VISUAL — barra de progreso, halo de cursor,
   botones "magnéticos" e inclinación 3D en tarjetas (solo escritorio: el
   propio JS comprueba que el dispositivo tenga puntero fino y hover antes
   de activar nada de esto, así que en móvil/táctil no se cargan ni afectan
   en absoluto — el ajuste de móvil se deja para más adelante).
   ========================================================================= */

/* Barra de progreso de lectura, arriba del todo */
.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  z-index:4000;
  background:linear-gradient(90deg,var(--terracotta),var(--gold));
  transform-origin:left center;
  transform:scaleX(0);
  pointer-events:none;
}

/* Halo suave que sigue al cursor (solo dispositivos con ratón) */
.cursor-glow{
  position:fixed; top:0; left:0;
  width:420px; height:420px;
  margin-left:-210px; margin-top:-210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,180,122,.16), rgba(180,83,77,.08) 45%, transparent 72%);
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor-glow.is-active{ opacity:1; }

/* Botones "magnéticos": main.js desplaza levemente el botón hacia el
   cursor al pasar por encima; la transición rápida es lo que da la
   sensación de "imán" al soltar. */
.btn{ will-change:transform; }
.btn.is-magnetic{ transition:transform .15s ease-out, box-shadow .35s, background .35s, color .35s, border-color .35s; }

/* Tarjetas con inclinación 3D suave según la posición del cursor */
.tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.tilt.is-tilting{ transition:transform .08s linear; }

/* ---------- Reveal on scroll — versión con difuminado + escala ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(30px) scale(.97);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* Efecto "cascada": cuando varias tarjetas/filas hermanas aparecen juntas,
   entran una tras otra en vez de todas a la vez. */
.grid > [data-reveal]:nth-child(1){ transition-delay:0s; }
.grid > [data-reveal]:nth-child(2){ transition-delay:.08s; }
.grid > [data-reveal]:nth-child(3){ transition-delay:.16s; }
.grid > [data-reveal]:nth-child(4){ transition-delay:.24s; }
.therapy-index .therapy-row:nth-child(1){ transition-delay:0s; }
.therapy-index .therapy-row:nth-child(2){ transition-delay:.06s; }
.therapy-index .therapy-row:nth-child(3){ transition-delay:.12s; }
.therapy-index .therapy-row:nth-child(4){ transition-delay:.18s; }
.therapy-index .therapy-row:nth-child(5){ transition-delay:.24s; }
.therapy-index .therapy-row:nth-child(6){ transition-delay:.3s; }
.product-grid > [data-reveal]:nth-child(3n+1){ transition-delay:0s; }
.product-grid > [data-reveal]:nth-child(3n+2){ transition-delay:.08s; }
.product-grid > [data-reveal]:nth-child(3n+3){ transition-delay:.16s; }

/* =========================================================================
   PÁGINA PRODUCTOS
   ========================================================================= */
.category-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin:0 0 3rem;
}
.tab-btn{
  padding:.65em 1.5em;
  border-radius:999px;
  border:1.5px solid rgba(36,28,20,.16);
  background:var(--white);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  transition:.3s;
}
.tab-btn:hover{ border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-2px); }
.tab-btn.active{
  background:linear-gradient(135deg,var(--jade-700),var(--jade-900));
  border-color:transparent;
  color:var(--white);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}
@media(max-width:920px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .product-grid{ grid-template-columns:1fr; } }

/* Mientras se confirma el catálogo real (ver comentario en js/editor.js,
   sección 2B) el grid de productos permanece oculto y en su lugar se ve
   este indicador, para no mostrar antes un catálogo antiguo que luego se
   sustituye de golpe por el actual. */
.product-grid[data-loading="1"]{ display:none; }
.product-grid-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:5rem 1rem;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:.95rem;
}
.product-grid-loading.show{ display:flex; }
.product-grid-loading .pg-spinner{
  width:20px; height:20px;
  border:3px solid var(--terracotta);
  border-right-color:transparent;
  border-radius:50%;
  opacity:.6;
  animation:pg-spin .8s linear infinite;
}
@keyframes pg-spin{ to{ transform:rotate(360deg); } }

.product-card{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(36,28,20,.06);
  display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.product-card:hover{ box-shadow:var(--shadow); }
.product-card.is-hidden{ display:none; }
.product-card .photo-slot{ border-radius:0; border-width:0 0 1.5px; min-height:190px; }
.product-card-body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.product-card-cat{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracotta); font-weight:600; margin-bottom:.5rem;
}
.product-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
.product-card p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:1.1rem; flex:1; }
.product-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding-top:1rem;
  border-top:1px solid rgba(36,28,20,.08);
}
.product-card-price{ font-family:var(--font-display); font-size:1.05rem; color:var(--jade-900); font-weight:600; }
.product-card-foot .btn{ padding:.6em 1.2em; font-size:.78rem; }

/* Aviso visual de que se puede ampliar la foto del producto (fuera del
   modo editor, que ya tiene su propia pista de "Clic para subir imagen"). */
body:not(.ed-active) .product-card .photo-slot.has-image{ cursor:pointer; }
body:not(.ed-active) .product-card .photo-slot.has-image::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(28,20,13,0);
  transition:background .25s;
  pointer-events:none;
}
body:not(.ed-active) .product-card .photo-slot.has-image:hover::after{ background:rgba(28,20,13,.18); }
body:not(.ed-active) .product-card .photo-slot.has-image::before{
  content:'';
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(28,20,13,.55);
  opacity:0; transform:translateY(4px); transition:.25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-3.6-3.6M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:15px;
}
body:not(.ed-active) .product-card .photo-slot.has-image:hover::before{ opacity:1; transform:translateY(0); }

/* ---------- Vista ampliada de fotos (lightbox) ---------- */
body.tuina-lightbox-open{ overflow:hidden; }
.tuina-lightbox{
  position:fixed; inset:0; z-index:3900;
  background:rgba(15,11,7,.92);
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1rem;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.tuina-lightbox.is-open{ opacity:1; pointer-events:auto; }
.tuina-lightbox-stage{
  max-width:min(900px,90vw); max-height:80vh;
  display:flex; align-items:center; justify-content:center;
}
.tuina-lightbox-stage img{
  max-width:100%; max-height:80vh; object-fit:contain;
  border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  background:rgba(255,255,255,.04);
}
.tuina-lightbox-close{
  position:absolute; top:1.2rem; right:1.2rem; z-index:2;
  width:42px; height:42px; border-radius:50%;
  border:none; background:rgba(255,255,255,.1); color:#fffdf8;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.tuina-lightbox-close:hover{ background:rgba(255,255,255,.22); }
.tuina-lightbox-close svg{ width:18px; height:18px; }
.tuina-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.1); color:#fffdf8;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.tuina-lightbox-nav:hover{ background:rgba(255,255,255,.22); }
.tuina-lightbox-nav svg{ width:20px; height:20px; }
.tuina-lightbox-nav.prev{ left:1rem; }
.tuina-lightbox-nav.next{ right:1rem; }
.tuina-lightbox-counter{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  color:rgba(255,253,248,.85); font-size:.82rem; letter-spacing:.04em;
  font-family:var(--font-body);
}
@media(max-width:640px){
  .tuina-lightbox-nav{ width:40px; height:40px; }
  .tuina-lightbox-close{ width:38px; height:38px; top:.8rem; right:.8rem; }
}