/* Équora — capa de demo: botón de vuelta y animaciones.
   Todo el movimiento cuelga de html.anim, que solo se pone si el visitante
   no ha pedido reducir el movimiento. Sin esa clase la página se ve entera
   y quieta. */

.dig-volver{
  position:fixed; top:13px; left:14px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px; border-radius:100px;
  background:rgba(15,15,15,.72); color:#fff; text-decoration:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:13px; font-weight:500; line-height:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:background .25s ease, transform .25s ease;
}
.dig-volver:hover{background:rgba(15,15,15,.92); transform:translateX(-2px);}
.dig-volver svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:900px){
  .dig-volver{padding:0 14px 0 10px; height:38px; gap:7px;}
}

/* ---------- Cabecera: acabado ---------- */
:root{ --oro:#a98a4e; --oro-suave:rgba(169,138,78,.38);
       --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --display:var(--serif); }
@media (prefers-color-scheme: dark){ :root{ --oro:#d5b878; --oro-suave:rgba(213,184,120,.34); } }
:root[data-theme="dark"]{ --oro:#d5b878; --oro-suave:rgba(213,184,120,.34); }
:root[data-theme="light"]{ --oro:#a98a4e; --oro-suave:rgba(169,138,78,.38); }

.hero{position:relative;}
.hero h1{font-family:var(--display); font-weight:300; font-size:clamp(4.6rem,12.5vw,9.4rem);
         line-height:.86; letter-spacing:-.012em; margin-bottom:2rem;}
.hero h1 .palabra{display:inline-block; white-space:nowrap;}
.hero h1 .palabra--marca{letter-spacing:-.01em;}
.hero h1 .palabra--marca .letra:first-child{font-style:italic;}

.eyebrow{display:flex; align-items:center; gap:1rem; color:var(--oro); font-size:.7rem; --tracking:.42em; letter-spacing:var(--tracking); margin-bottom:2.2rem; white-space:nowrap;}
.eyebrow::before{content:""; width:3.2rem; height:1px; background:var(--oro-suave); transform-origin:left;}

.hero__tagline{font-family:var(--display); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.7rem);
               line-height:1.45; max-width:26ch; margin-bottom:3rem;}
.hero__tagline .pal{display:inline-block;}

/* La balanza va pegada al nombre, del tamaño de la letra. */
.balanza{display:inline-block; width:.74em; height:.74em; margin-left:.1em; vertical-align:-.02em; overflow:visible;
         fill:none; stroke:var(--oro); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.balanza__remate{fill:var(--oro); stroke:none;}
.balanza__brazo circle{fill:var(--bg); }
.balanza__cuenco{fill:var(--oro-suave);}
.balanza__brazo{transform-box:view-box; transform-origin:50px 18px;}
.balanza__plato{transform-box:view-box;}

.btn--cita{position:relative; overflow:hidden; isolation:isolate; padding:1.1rem 2.8rem;
           border-color:var(--oro-suave); color:var(--text); font-size:.76rem; letter-spacing:.28em;}
.btn--cita::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
                   transform:scaleX(0); transform-origin:right; transition:transform .7s cubic-bezier(.22,1,.36,1);}
.btn--cita:hover{background:transparent; color:var(--accent-ink); border-color:var(--accent); letter-spacing:.32em;}
.btn--cita:hover::before{transform:scaleX(1); transform-origin:left;}

/* Indicación de bajar */
.desliza{position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:.7rem;
         color:var(--text-soft); text-decoration:none; font-size:.62rem; letter-spacing:.4em; text-transform:uppercase;}
.desliza span{padding-left:.4em;}
.desliza i{display:block; width:1px; height:2.8rem; background:linear-gradient(var(--oro), transparent); overflow:hidden;}

/* Grano de papel: quita el aspecto de pantalla plana. */
.grano{position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.06; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media (prefers-color-scheme: dark){ .grano{mix-blend-mode:screen; opacity:.035;} }
:root[data-theme="dark"] .grano{mix-blend-mode:screen; opacity:.035;}
:root[data-theme="light"] .grano{mix-blend-mode:multiply; opacity:.06;}

@media (max-width:860px){
  .eyebrow{justify-content:center;}
  .eyebrow::after{content:""; width:3.2rem; height:1px; background:var(--oro-suave);}
  .hero__tagline{margin-inline:auto;}
  .hero{padding-bottom:7rem;}
}
@media (max-width:560px){
  .eyebrow{--tracking:.3em; font-size:.64rem; gap:.8rem;}
  .eyebrow::before,.eyebrow::after{width:1.8rem;}
}
/* Que la luz, al moverse, no deje ver su borde. */
.aura{inset:-10%;}
/* Los títulos de sección, con la misma letra que la cabecera. */
.section__title{font-weight:300; font-size:clamp(2.6rem,5.6vw,4rem); letter-spacing:-.005em;}
.card h3{font-weight:400; font-size:1.55rem;}

/* ---------- Entrada, en orden ----------
   La pantalla empieza limpia. 1) Équora, letra a letra, y la balanza
   2) la frase, palabra a palabra  3) Quiromasaje · Bienestar  4) los chakras
   5) Reservar mi cita. */
.anim .hero h1 .letra{display:inline-block; animation:db-letra 1.2s cubic-bezier(.22,1,.36,1) both;
                      animation-delay:calc(.35s + var(--i) * .07s);}
@keyframes db-letra{from{opacity:0; transform:translateY(.45em); filter:blur(10px);}
                    to  {opacity:1; transform:none; filter:none;}}

.anim .balanza{animation:db-aparece 1.4s cubic-bezier(.22,1,.36,1) 1.15s both;}
.anim .balanza path{stroke-dasharray:120; stroke-dashoffset:120; animation:db-traza 1.6s cubic-bezier(.65,0,.35,1) 1.15s forwards;}
.anim .balanza__brazo{animation:db-balancea 4.2s ease-in-out 2.4s infinite alternate both;}
.anim .balanza__plato--izq{animation:db-plato-izq 4.2s ease-in-out 2.4s infinite alternate both;}
.anim .balanza__plato--der{animation:db-plato-der 4.2s ease-in-out 2.4s infinite alternate both;}
@keyframes db-aparece{from{opacity:0;} to{opacity:1;}}
@keyframes db-traza{to{stroke-dashoffset:0;}}
/* El brazo gira sobre su eje; cada plato baja y sube lo mismo que su
   extremo (40 de brazo × sen 7° ≈ 4,9), así cuelgan siempre rectos. */
@keyframes db-balancea {from{transform:rotate(-7deg);} to{transform:rotate(7deg);}}
@keyframes db-plato-izq{from{transform:translate(.3px, 4.9px);} to{transform:translate(.3px,-4.9px);}}
@keyframes db-plato-der{from{transform:translate(-.3px,-4.9px);} to{transform:translate(-.3px, 4.9px);}}

.anim .hero__tagline .pal{animation:db-pal 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(1.9s + var(--i) * .06s);}
@keyframes db-pal{from{opacity:0; transform:translateY(.5em); filter:blur(6px);} to{opacity:1; transform:none; filter:none;}}

.anim .eyebrow span{animation:db-espacia 1.6s cubic-bezier(.22,1,.36,1) 3s both;}
.anim .eyebrow::before,.anim .eyebrow::after{animation:db-linea 1.4s cubic-bezier(.22,1,.36,1) 3s both;}
@keyframes db-espacia{from{opacity:0; letter-spacing:calc(var(--tracking) * 2); filter:blur(4px);} to{opacity:1; letter-spacing:var(--tracking); filter:none;}}
@keyframes db-linea{from{transform:scaleX(0);} to{transform:scaleX(1);}}

.anim .btn--cita{animation:db-sube 1.2s cubic-bezier(.22,1,.36,1) 5.2s both;}
.anim .desliza{animation:db-aparece 1.2s ease 5.9s both;}
.anim .desliza i::after{content:""; display:block; width:1px; height:100%; background:var(--bg);
                        animation:db-gota 2.4s cubic-bezier(.65,0,.35,1) 6.4s infinite;}
.anim .dig-volver{animation:db-aparece 1s ease 5.6s both;}
@keyframes db-sube{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
@keyframes db-gota{0%{transform:translateY(-100%);} 50%{transform:translateY(0);} 100%{transform:translateY(100%);}}

/* Los chakras: después de la frase y la etiqueta. El eje se dibuja de
   arriba abajo y cada centro se enciende en su turno. */
.anim .chakras .axis{stroke-dasharray:460; stroke-dashoffset:460;
                     animation:db-eje 1.8s cubic-bezier(.65,0,.35,1) 3.5s forwards;}
@keyframes db-eje{to{stroke-dashoffset:0;}}
.anim .chakra{transform-box:fill-box; transform-origin:center;
              animation:db-chakra 1s cubic-bezier(.34,1.56,.64,1) both;}
.anim .chakra:nth-of-type(1){animation-delay:3.7s;}
.anim .chakra:nth-of-type(2){animation-delay:3.9s;}
.anim .chakra:nth-of-type(3){animation-delay:4.1s;}
.anim .chakra:nth-of-type(4){animation-delay:4.3s;}
.anim .chakra:nth-of-type(5){animation-delay:4.5s;}
.anim .chakra:nth-of-type(6){animation-delay:4.7s;}
.anim .chakra:nth-of-type(7){animation-delay:4.9s;}
@keyframes db-chakra{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:none;}}
.anim .chakras{animation:db-flota 9s ease-in-out 6s infinite;}
@keyframes db-flota{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}
.chakra .seed{filter:drop-shadow(0 0 6px var(--c));}
.axis{stroke:var(--oro); opacity:.45;}

/* El fondo empieza limpio y la luz entra con el nombre. */
.anim .aura{opacity:0; animation:db-aparece 3s ease .2s forwards, db-aura 18s ease-in-out 3.2s infinite alternate;}
/* El fondo de luz se mueve despacio. */
@keyframes db-aura{from{transform:translate3d(-3%,-2%,0) scale(1);} to{transform:translate3d(3%,2%,0) scale(1.08);}}

/* ---------- Aparecer al hacer scroll ---------- */
.anim .revela{opacity:0; transform:translateY(30px);
              transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
              transition-delay:calc(var(--i, 0) * .12s);}
.anim .revela.visto{opacity:1; transform:none;}

/* Las tarjetas de sesiones se inclinan un poco hacia el ratón. */
.anim .card{transform-style:preserve-3d; will-change:transform;}
.anim .card.inclina{transition:transform .12s linear, border-color .3s;}

/* El botón de WhatsApp lleva un brillo que lo cruza de vez en cuando. */
.anim .btn--wa{position:relative; overflow:hidden;}
.anim .btn--wa::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-120%); animation:db-brillo 4.5s ease-in-out 2s infinite;}
@keyframes db-brillo{0%,60%{transform:translateX(-120%);} 85%,100%{transform:translateX(120%);}}

/* El número del paso se ilumina cuando el paso entra en pantalla. */
.anim .step.visto .step__n{animation:db-latido 1.2s ease-out .3s both;}
@keyframes db-latido{0%{box-shadow:0 0 0 0 var(--line-strong);} 100%{box-shadow:0 0 0 14px transparent;}}

/* Que los círculos respiren desde su propio centro y no desde el del
   dibujo: sin esto se escurrían hacia abajo y el punto quedaba descentrado. */
.chakra .halo, .chakra .core{transform-box:fill-box; transform-origin:center;}

/* ---------- Reserva en dos pasos y simulación de WhatsApp ---------- */
/* .booking lleva display:flex y ganaría al atributo hidden. */
.booking[hidden], .wa-sim[hidden], .fase[hidden]{display:none !important;}

.fases{display:flex; justify-content:center; gap:.6rem; list-style:none; margin:0 0 2.4rem; padding:0;
       font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-soft);}
.fases__paso{display:flex; align-items:center; gap:.6rem;}
.fases__paso + .fases__paso::before{content:""; width:2.6rem; height:1px; background:var(--line-strong); margin-right:.6rem;}
.fases__paso span{display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%;
                  border:1px solid var(--line-strong); letter-spacing:0; font-size:.78rem;}
.fases__paso[aria-current="step"]{color:var(--text);}
.fases__paso[aria-current="step"] span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.fases__paso.hecho span{border-color:var(--oro); color:var(--oro);}

.anim .fase{animation:db-sube .7s cubic-bezier(.22,1,.36,1) both;}
.btn--siguiente{margin-top:1.4rem;}
.btn--siguiente span{transition:transform .35s ease;}
.btn--siguiente:hover:not(:disabled) span{transform:translateX(4px);}

.elegida{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
         margin-bottom:2.2rem; padding:1rem 1.3rem; border:1px solid var(--line-strong); border-radius:16px;}
.elegida__txt{font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--accent);}
.elegida__cambiar{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:.72rem;
                  letter-spacing:.22em; text-transform:uppercase; color:var(--text-soft); border-bottom:1px solid var(--line-strong);}
.elegida__cambiar:hover{color:var(--accent);}
.aviso{min-height:1.4rem; margin-top:.9rem; text-align:center; font-size:.9rem; color:var(--error);}

.wa-sim{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(1.6rem,5vw,3.5rem); align-items:center;}
@media (max-width:760px){ .wa-sim{grid-template-columns:1fr;} .wa-sim__movil{margin-inline:auto; width:100%; max-width:340px;} .wa-sim__lado{text-align:center;} }
.anim .wa-sim{animation:db-sube .9s cubic-bezier(.22,1,.36,1) both;}
.wa-sim__movil{border-radius:30px; overflow:hidden; border:7px solid #1d2422; background:#0b141a; box-shadow:0 40px 80px -40px rgba(20,30,28,.55);}
.wa-sim__cab{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; background:#1f2c33; color:#e9edef;}
.wa-sim__avatar{display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%;
                background:linear-gradient(135deg,#8fcabf,#c9b779); color:#10201d; font-size:.78rem; font-weight:600; letter-spacing:.04em;}
.wa-sim__quien{display:flex; flex-direction:column; line-height:1.25;}
.wa-sim__quien b{font-weight:500; font-size:.95rem;}
.wa-sim__quien small{font-size:.72rem; color:#8696a0;}
.wa-sim__chat{display:flex; flex-direction:column; gap:.5rem; height:430px; overflow-y:auto; padding:1rem .8rem;
              background:#0b141a radial-gradient(circle at 20% 10%, rgba(255,255,255,.03), transparent 40%);
              font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}
.wa-sistema{align-self:center; margin:0 0 .3rem; padding:.3rem .7rem; border-radius:8px; background:#182229;
            color:#8696a0; font-size:.7rem; text-align:center;}
.wa-msg{max-width:86%; padding:.45rem .6rem .3rem; border-radius:10px; color:#e9edef; font-size:.82rem; line-height:1.4;
        animation:wa-entra .35s cubic-bezier(.22,1,.36,1) both;}
.wa-msg p{margin:0; white-space:pre-wrap;}
.wa-msg--entra{align-self:flex-start; background:#202c33; border-top-left-radius:2px;}
.wa-msg--sale{align-self:flex-end; background:#005c4b; border-top-right-radius:2px;}
.wa-msg__pie{display:flex; justify-content:flex-end; gap:.25rem; margin-top:.15rem; font-size:.62rem; color:rgba(233,237,239,.6);}
.wa-vistos{font-style:normal; color:#8696a0;}
.wa-vistos.leido{color:#53bdeb;}
.wa-escribe{display:flex; gap:4px; padding:.7rem .8rem;}
.wa-escribe span{width:6px; height:6px; border-radius:50%; background:rgba(233,237,239,.7); animation:wa-punto 1.2s infinite ease-in-out;}
.wa-escribe span:nth-child(2){animation-delay:.15s;} .wa-escribe span:nth-child(3){animation-delay:.3s;}
@keyframes wa-entra{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
@keyframes wa-punto{0%,60%,100%{opacity:.3; transform:none;} 30%{opacity:1; transform:translateY(-3px);}}
.wa-sim__rotulo{font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--oro); margin-bottom:1rem;}
.wa-sim__titulo{font-family:var(--display); font-weight:300; font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; margin-bottom:1rem;}
.wa-sim__txt{color:var(--text-soft); max-width:34ch; margin-bottom:2rem;}
@media (max-width:760px){ .wa-sim__txt{margin-inline:auto;} }