/* ═══════════════════════════════════════════════════════════════════════
   CAPA DINÁMICA. Va encima de estilo.css.
   No depende de prefers-reduced-motion: para quien no quiera movimiento hay
   un botón en el pie («Reducir animaciones») que pone la clase html.quieto
   y deja la página estática.
   Todo en pastel: la pieza del loto va sobre un degradado rubor/melocotón
   con trazos coral.
   Capas: contenido < grano (8900) < estela (9000) < cursor (9500) < visor (9800) < preloader (9999)
   ═══════════════════════════════════════════════════════════════════════ */

/* con GSAP activo, los reveals los hace GSAP y no la transición CSS */
html.dinamico .rv{opacity:1;transform:none;transition:none}
html.dinamico [data-reveal],html.dinamico [data-hero-reveal]{visibility:hidden}

/* grano de papel muy suave */
html.dinamico body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:8900;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;mix-blend-mode:multiply;opacity:.09}

/* estela fluida (rubor sobre crema) */
#fluid{position:fixed;inset:0;width:100%;height:100%;z-index:9000;pointer-events:none;
  mix-blend-mode:multiply;opacity:.7;transition:opacity .4s}
#fluid canvas{width:100%;height:100%;display:block}

/* cursor decorativo (el nativo sigue visible) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0}
.cursor-dot{width:6px;height:6px;background:var(--vela)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(178,92,77,.45)}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* progreso lateral */
.progreso{position:fixed;right:1.2rem;top:50%;transform:translateY(-50%);width:1px;height:9rem;
  background:var(--linea);z-index:60;pointer-events:none}
.progreso span{position:absolute;inset:0;background:var(--vela);transform:scaleY(0);transform-origin:top}
@media (max-width:900px){.progreso{display:none}}

/* preloader (solo la primera página que se abre; al pasar de página, cortina corta) */
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:end start;padding:var(--pad)}
.preloader__curtain{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 60% at 70% 30%,var(--rosa),transparent 70%),linear-gradient(160deg,var(--melocoton),var(--crema))}
.preloader__brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;
  overflow:hidden;line-height:1.25;width:90%}
.preloader__brand span{display:inline-block;font-family:var(--brand);font-size:clamp(2.2rem,8vw,5.5rem);
  letter-spacing:.16em;color:var(--tinta)}
.preloader__brand small{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,3vw,1.7rem);
  color:var(--vela);letter-spacing:.02em}
.preloader__counter{overflow:hidden;line-height:1}
.preloader__num{display:inline-block;font-family:var(--serif);font-size:clamp(4rem,13vw,9rem);
  font-variant-numeric:tabular-nums;color:var(--vela-luz);font-weight:300}
.preloader__num i{font-style:normal;color:var(--vela);font-size:.32em;vertical-align:super}
html:not(.dinamico) .preloader{display:none}
html.visto .preloader{display:none}

/* FUNDIDO ENTRE PÁGINAS (Chrome, Edge y Safari recientes): el navegador mantiene la
   página vieja en pantalla hasta que la nueva puede pintarse y las funde, sin pasar
   por blanco. El menú de arriba no se funde: se queda quieto. */
@view-transition{navigation:auto}
.barra{view-transition-name:barra}
::view-transition-old(root){animation:dt-sale .38s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:dt-entra .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes dt-sale{to{opacity:0;transform:translateY(-14px);filter:blur(4px)}}
@keyframes dt-entra{from{opacity:0;transform:translateY(18px);filter:blur(4px)}}
/* navegadores sin ese fundido: la página se desvanece antes de irse (comun.js) */
body{transition:opacity .3s ease}
html.saliendo body{opacity:0}

/* hero: halo que respira detrás del arco */
.arco{isolation:isolate}
.arco .halo{position:absolute;inset:-18% -22%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(231,168,152,.55),rgba(243,216,207,.35) 55%,transparent 75%);
  animation:respira 5.5s ease-in-out infinite;filter:blur(8px)}
@keyframes respira{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.arco [data-hero-media]{overflow:hidden;border-radius:999px 999px 18px 18px}
.arco [data-hero-media] img{border-radius:0}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:1.05rem 0;background:var(--rosa);color:var(--vela-osc)}
.marquee__track{display:inline-flex;gap:2.6rem;will-change:transform}
.marquee__group{display:inline-flex;gap:2.6rem;align-items:center}
.marquee__group span{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.7rem)}
.marquee__group i.sep{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vela-luz)}

/* sobre mí: foto flotante */
.sobre .flotante{position:absolute;width:clamp(110px,15vw,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:6px solid var(--crema);box-shadow:0 20px 50px rgba(142,69,56,.2);inset-inline-start:30%;bottom:-6%;z-index:2}
.sobre .flotante img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
@media(max-width:820px){.sobre .flotante{inset-inline-start:auto;inset-inline-end:4%;top:calc(min(100vw,600px) * .95);bottom:auto}}
[data-img-reveal]{overflow:hidden}
.sobre [data-img-reveal]{border-radius:18px}

/* tarjetas: la foto respira al pasar */
.tarjeta .marco-img{overflow:hidden}
.tarjeta .marco-img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tarjeta:hover .marco-img img{transform:scale(1.07)}

/* PIEZA SINGULAR «El masaje empieza antes del tacto», en los pastel de la web. */
.energia{height:360vh;position:relative;background:var(--crema-2);padding:0} /* sin el relleno general de section: si no, la parte fija se clavaba 112 px más abajo y se cortaba */
.energia__pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;color:var(--tinta);
  background:radial-gradient(50% 55% at 50% 58%,rgba(255,251,248,.9),transparent 70%),linear-gradient(170deg,var(--rosa),var(--melocoton))}
.energia__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.energia__hud{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(4.5rem,11vh,6.5rem) var(--pad) clamp(2.2rem,6vh,4rem);pointer-events:none}
.energia__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.energia__titulo{font-size:clamp(1.6rem,3.6vw,2.9rem);max-width:13ch;margin:0}
.energia__num{font-family:var(--serif);font-size:clamp(2rem,5.5vw,4.2rem);font-variant-numeric:tabular-nums;
  color:var(--vela-osc);line-height:1;opacity:.75;white-space:nowrap}
.energia__num i{font-style:normal;color:var(--vela);font-size:.42em}
.energia__pie{display:grid;gap:.6rem;max-width:40rem}
.energia__fase{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--vela-osc);
  border-inline-start:2px solid var(--vela);padding-inline-start:1rem;margin:0}
.energia__frase{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.4;
  color:var(--tinta);padding-inline-start:1rem;min-height:3.2em;margin:0}
.energia__tramos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-inline-start:1rem;max-width:22rem}
.energia__tramos i{display:block;height:2px;background:var(--linea);position:relative;overflow:hidden}
.energia__tramos i::after{content:"";position:absolute;inset:0;background:var(--vela);transform-origin:left;
  transform:scaleX(var(--p,0))}
@media(max-width:700px){.energia__cab{gap:1rem}.energia__num{font-size:1.7rem}.energia__frase{min-height:4.4em}
  .energia__hud{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}
/* los chakras de Servicios (mismo marco): en apaisado los textos van en la columna izquierda y la figura a la derecha */
@media(min-width:900px) and (min-aspect-ratio:23/20){.energia--chakras .energia__pie{max-width:min(38rem,36vw)}
  .energia--chakras .energia__titulo{max-width:min(17ch,36vw)}}
/* móviles estrechos: que «El Ritual de Bienvenida · Escuchar» quepa en una línea */
@media(max-width:420px){.energia__fase{letter-spacing:.1em}}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* zoom inmersivo: la foto del gabinete se come la pantalla */
.zoom{height:280vh;position:relative;padding:0;background:var(--crema)}
.zoom__pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--crema)}
.zoom__marco{position:absolute;inset:0;clip-path:inset(34% 34% 34% 34% round 24px);will-change:clip-path}
.zoom__marco img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* capa oscura: la foto nueva del gabinete es muy luminosa; detrás de la frase llega a ~.7 para que se lea siempre */
.zoom__marco::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 50%,rgba(52,36,31,.42),rgba(52,36,31,0) 75%),linear-gradient(180deg,rgba(142,69,56,.34),rgba(59,43,39,.58))}
/* la foto mide 640 px: una trama fina hace que lo blando se lea como estilo */
.zoom__marco::before{content:"";position:absolute;inset:0;z-index:1;opacity:.28;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.5) 1px,transparent 1.2px);background-size:4px 4px}
.zoom__texto{position:relative;z-index:2;font-family:var(--brand);font-size:clamp(2.2rem,6vw,5rem);line-height:1.1;
  color:#FFF8F4;text-align:center;max-width:15ch;padding:0 var(--pad);margin:0}
.zoom__texto em{font-family:var(--serif);color:var(--melocoton)}

/* botón magnético */
[data-magnetico]{will-change:transform}
[data-magnetico] .magnetico__label{display:inline-flex;align-items:center;gap:.5rem;pointer-events:none}

/* botón «reducir animaciones» del pie */
.quietud{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.quietud:hover{color:var(--vela)}

/* modo estático (sin librerías o por elección): todo a la vista */
html:not(.dinamico) .energia{height:auto}
html:not(.dinamico) .energia__num{display:none}
html:not(.dinamico) .zoom{height:auto}
html:not(.dinamico) .zoom__marco{clip-path:none}
html:not(.dinamico) #fluid,html:not(.dinamico) .cursor-dot,html:not(.dinamico) .cursor-ring,html:not(.dinamico) .progreso{display:none}
html:not(.dinamico) .arco .halo{animation:none}
/* lo que entra desde los lados no puede ensanchar la página en el móvil */
main{overflow-x:clip}