/* ==========================================================================
   ELYSIUM — la estética propia
   Va después de site.css y marca.css. Toma lo que usa el centro en sus
   publicaciones:

     · índigo del logo + lavanda + lila, sobre blanco perla
     · flores dibujadas a pluma (lirios, magnolias) → .flor, que se "dibuja"
     · fotos en círculo con un hilo corrido alrededor → .orbe, .cat__foto
     · títulos en mayúscula sostenida con una palabra manuscrita → .firma-t
     · el hilo con lazo debajo de los títulos → .lazo

   Movimiento: solo transform, opacity y stroke-dashoffset; entradas de menos
   de un segundo y giros de 12 a 16 s. Nada se arrastra.
   ========================================================================== */

:root{
  --lila-vivo:#8A63C4;
  --perla:#FAF9FD;
  --degrade-marca:linear-gradient(135deg,#5565A4 0%,#6F5DB8 55%,#8A63C4 100%);
}

body{background:var(--perla)}
::selection{background:#DCCDF3;color:var(--noche)}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em}
h1{line-height:1.04}

/* La palabra destacada: índigo → violeta, en cursiva de Playfair */
em.brillo,.titulo-lila{
  font-style:italic;color:var(--indigo);
  background:linear-gradient(96deg,#5565A4 0%,#8A63C4 55%,#A98BD8 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* "Conocé a nuestras profesionales": la palabra final, manuscrita */
.firma-t{
  display:inline-block;font-family:var(--firma);font-weight:400;font-style:normal;
  font-size:1.5em;line-height:.7;letter-spacing:0;color:var(--lila-vivo);
  transform:translateY(.1em) rotate(-4deg);margin-left:.08em;
  padding-right:.08em;
}
.seccion--tinta .firma-t{color:#CDB8F0}

.eyebrow{color:var(--indigo);font-weight:600;letter-spacing:.24em}

/* El hilo con lazo, que se dibuja cuando el título aparece */
.lazo{display:block;width:min(220px,58%);height:auto;margin:10px 0 0;overflow:visible}
.lazo path{fill:none;stroke:var(--lila);stroke-width:1.6;stroke-linecap:round;
           stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--curva) .2s}
.js-anim .revelar:not(.visible) .lazo path{stroke-dashoffset:1}
/* Con el lazo, el subrayado recto de marca.css sobra */
.seccion__enc h2::after{display:none}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn--principal{background:var(--degrade-marca);color:#fff;
                box-shadow:0 16px 32px -18px rgba(85,101,164,.95)}
.btn--principal:hover{background:linear-gradient(135deg,#46528F 0%,#5F4FA6 55%,#7552B0 100%);color:#fff}
.btn--principal::after{background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%)}
.btn--linea{border-color:rgba(85,101,164,.35);color:var(--indigo-hondo)}
.btn--linea:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ── La flor ────────────────────────────────────────────────────────────── */
.flor{position:absolute;pointer-events:none;overflow:visible;z-index:-1}
.flor path{fill:none;stroke:var(--indigo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
           vector-effect:non-scaling-stroke}
.flor circle{fill:var(--indigo)}

/* Se dibuja trazo por trazo. Sin JS (o con menos movimiento) queda dibujada. */
.js-anim .flor path{stroke-dasharray:1;stroke-dashoffset:1;
  animation:trazar 1.3s var(--curva) forwards;animation-delay:calc(var(--t,0) * 55ms + .15s)}
.js-anim .flor circle{opacity:0;animation:aparecer .5s ease forwards 1.3s}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}
/* Ya dibujada, se mece apenas, como con brisa */
@keyframes mecer{0%,100%{transform:rotate(var(--r0,0deg))}50%{transform:rotate(calc(var(--r0,0deg) + 3deg))}}

.flor--portada-a{width:clamp(210px,30vw,360px);top:-26px;left:-70px;opacity:.30;
                 --r0:-18deg;transform:rotate(-18deg);transform-origin:40% 90%;
                 animation:mecer 11s ease-in-out 2s infinite}
.flor--portada-b{width:clamp(150px,20vw,250px);right:-40px;bottom:-30px;opacity:.26;
                 --r0:160deg;transform:rotate(160deg);transform-origin:50% 50%;
                 animation:mecer 13s ease-in-out 2.4s infinite}
.flor--tinta{width:clamp(190px,26vw,320px);right:-30px;top:-20px;opacity:.16;
             --r0:12deg;transform:rotate(12deg)}
.flor--tinta path{stroke:#fff}.flor--tinta circle{fill:#fff}

/* Las páginas interiores y el pie llevan la flor como fondo, quieta */
.cabezal::after{
  content:"";position:absolute;z-index:-1;right:-30px;bottom:-60px;width:230px;height:295px;
  background:url(../img/flor.svg) center/contain no-repeat;opacity:.17;transform:rotate(-14deg);
  pointer-events:none;
}
.pie{position:relative;isolation:isolate;overflow:hidden}
.pie::before{
  content:"";position:absolute;z-index:-1;inset:auto;left:-40px;bottom:-50px;width:240px;height:300px;
  background:url(../img/flor-clara.svg) center/contain no-repeat;opacity:.08;transform:rotate(18deg);
  pointer-events:none;
}

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada{
  background:
    radial-gradient(60% 70% at 88% 18%,rgba(206,194,240,.55) 0%,rgba(206,194,240,0) 70%),
    radial-gradient(50% 60% at 6% 96%,rgba(174,181,219,.40) 0%,rgba(174,181,219,0) 70%),
    var(--perla);
}
.portada::before,.portada::after{display:none}
.portada h1{font-size:clamp(2.55rem,6.4vw,4.5rem)}
.portada h1 .salto{display:block}
.portada h1 em{white-space:nowrap}

/* ── La vitrina ─────────────────────────────────────────────────────────── */
.vitrina{min-height:min(470px,110vw)}
.vitrina::before{
  background:
    radial-gradient(circle at 50% 44%,#ECE8FA 0%,rgba(236,232,250,.7) 42%,rgba(236,232,250,0) 70%),
    radial-gradient(circle at 70% 76%,rgba(138,99,196,.20) 0%,rgba(138,99,196,0) 58%);
}
.sello{width:clamp(200px,27vw,270px)}
.sello::before{border-color:rgba(85,101,164,.28)}
.sello__aro circle{stroke:var(--lila-vivo)}
.chispa{background:linear-gradient(140deg,#fff,#DCCDF3 45%,#8A63C4)}

/* Los tratamientos en círculo, con el hilo corrido que usan en los flyers */
.orbe{
  position:absolute;z-index:2;display:block;width:clamp(86px,10vw,118px);aspect-ratio:1;
  text-decoration:none;color:var(--noche);
  animation:orbeEntra .8s var(--curva-suave) both, orbeFlota 7s ease-in-out infinite;
}
.orbe img{width:100%;height:100%;object-fit:cover;border-radius:50%;
          border:3px solid #fff;box-shadow:0 16px 30px -16px rgba(26,24,56,.55);
          transition:transform .45s var(--curva)}
.orbe::before{
  content:"";position:absolute;inset:-9px -5px -5px -9px;border-radius:47% 53% 50% 50% / 52% 46% 54% 48%;
  border:1.3px solid var(--lila);pointer-events:none;
  animation:girar 16s linear infinite;
}
.orbe__nombre{
  position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;
  background:#fff;border:1px solid var(--linea-tibia);border-radius:999px;padding:4px 11px;
  font-size:.62rem;font-weight:600;letter-spacing:.06em;color:var(--indigo-hondo);
  box-shadow:0 8px 18px -12px rgba(26,24,56,.5);
}
.orbe:hover img{transform:scale(1.06)}
.orbe--1{top:4%;right:2%;animation-delay:.55s,0s}
.orbe--2{bottom:9%;left:1%;width:clamp(78px,9vw,104px);animation-delay:.7s,-2.3s}
.orbe--3{bottom:0;right:10%;width:clamp(70px,8vw,94px);animation-delay:.85s,-4.6s}
.orbe--2::before{animation-direction:reverse}
@keyframes orbeEntra{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes orbeFlota{0%,100%{translate:0 0}50%{translate:0 -8px}}

.vitrina__pastilla{border-color:rgba(138,99,196,.28);color:var(--indigo-hondo)}
.vitrina__pastilla i{background:var(--lila-vivo);box-shadow:0 0 0 4px rgba(138,99,196,.18)}

/* ── Rubros con foto ────────────────────────────────────────────────────── */
.cat{padding-right:24px}
.cat__foto{
  position:absolute;top:18px;right:18px;width:70px;height:70px;border-radius:50%;
  z-index:1;
}
.cat__foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;
               border:2px solid #fff;box-shadow:0 10px 22px -14px rgba(26,24,56,.6);
               transition:transform .45s var(--curva)}
.cat__foto::before{
  content:"";position:absolute;inset:-6px -3px -3px -6px;border-radius:50%;
  border:1px solid var(--lila-velo);transition:transform .6s var(--curva);
}
.cat:hover .cat__foto img{transform:scale(1.08)}
.cat:hover .cat__foto::before{transform:rotate(90deg) translate(2px,2px)}
.cat__foto ~ .cat__nombre,.cat__foto ~ .cat__desc,.cat__foto ~ .cat__n{padding-right:84px}
.cat::after{display:none}   /* la esquina de marca.css se pisaba con la foto */

.cat__n{color:var(--lila-vivo);font-weight:600}
.cat__lista li::before{background:var(--indigo)}
.cat__lista li.es-top::before{background:var(--lila-vivo);box-shadow:0 0 0 3px rgba(138,99,196,.18)}
.leyenda-top i{background:var(--lila-vivo)}

/* ── Fichas de las profesionales ───────────────────────────────────────── */
.sinfoto{background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),rgba(255,255,255,0) 45%),
    linear-gradient(150deg,#AEB5DB 0%,#8A63C4 100%);
  font-size:3rem;letter-spacing:.04em}
.ficha__titulo{color:var(--lila-vivo);font-weight:600}
.semana i.abre{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ── Sección oscura: índigo noche ──────────────────────────────────────── */
.seccion--tinta{background:linear-gradient(160deg,#2B2760 0%,#1A1838 62%)}
.paso__num{color:#CDB8F0;font-style:italic}

/* ── Menos movimiento ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .flor,.orbe,.orbe::before{animation:none}
  .flor path{stroke-dashoffset:0 !important}
  .flor circle{opacity:1 !important}
  .lazo path{stroke-dashoffset:0 !important}
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .vitrina{min-height:0;padding:14px 0 34px;margin-top:26px}
  .sello{width:min(200px,54vw)}
  .orbe--1{top:34px;right:0}
  .orbe--2{bottom:26px;left:0}
  .orbe--3{bottom:-2px;right:4%}
  .flor--portada-a{left:-90px;top:-40px;opacity:.22}
  .flor--portada-b{display:none}
}
@media (max-width:520px){
  .portada h1{font-size:clamp(2.3rem,10.6vw,3rem)}
  .orbe{width:78px}
  .orbe--2{width:70px}.orbe--3{width:64px}
  .orbe__nombre{font-size:.56rem;padding:3px 8px}
  .cat__foto{width:58px;height:58px;top:16px;right:16px}
  .cat__foto ~ .cat__nombre,.cat__foto ~ .cat__desc,.cat__foto ~ .cat__n{padding-right:66px}
  .firma-t{font-size:1.38em}
}

/* Perfil sin foto: en el celular, las iniciales no pueden tapar la pantalla */
@media (max-width:860px){
  .perfil__foto:has(.sinfoto){max-width:150px;border-radius:50%}
  .perfil__foto .sinfoto{aspect-ratio:1;font-size:2.6rem}
}

/* En el celular el perfil va: foto → nombre y tratamientos → horario y enlaces.
   Antes el horario quedaba entre la foto y el nombre. */
@media (max-width:860px){
  .perfil__grid > aside{display:contents}
  .perfil__grid > aside > *{order:2}
  .perfil__grid > aside > .perfil__foto{order:0}
  .perfil__grid > :not(aside){order:1}
}

/* ==========================================================================
   MÁS MOVIMIENTO (todo con transform y opacity)
   ========================================================================== */

/* Cambio de página: un fundido corto entre una y otra (Chrome, Edge, Safari
   nuevos). Donde no se soporta, se navega como siempre. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s ease both vtSale}
::view-transition-new(root){animation:.32s cubic-bezier(.22,.68,.36,1) both vtEntra}
@keyframes vtSale{to{opacity:0}}
@keyframes vtEntra{from{opacity:0;transform:translateY(8px)}}

/* Destellos que titilan en la portada: aparecen, giran y descansan */
.destello{position:absolute;z-index:0;width:14px;height:14px;pointer-events:none;
  background:linear-gradient(140deg,#fff,#DCCDF3 45%,#8A63C4);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  opacity:0;animation:titilarD 5.2s ease-in-out infinite}
.destello--1{top:18%;left:46%;animation-delay:.8s}
.destello--2{top:62%;left:8%;width:10px;height:10px;animation-delay:2.1s}
.destello--3{top:12%;right:6%;width:11px;height:11px;animation-delay:3.3s}
.destello--4{bottom:14%;left:52%;width:9px;height:9px;animation-delay:4.4s}
@keyframes titilarD{0%,100%{opacity:0;transform:scale(.3) rotate(0)}
  10%{opacity:1;transform:scale(1) rotate(45deg)}22%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* Las fotos de la vitrina siguen apenas al puntero (lo mueve el JS del pie) */
.orbe img{translate:var(--px,0) var(--py,0);transition:transform .45s var(--curva), translate .5s var(--curva)}

/* Cabezal de las páginas interiores: el título entra en dos tiempos y la flor
   del fondo se mece */
.js-anim .cabezal .eyebrow{animation:surgir .6s var(--curva) both}
.js-anim .cabezal h1,.js-anim .cabezal h2{animation:surgir .75s var(--curva) .08s both}
.js-anim .cabezal .entrada{animation:surgir .75s var(--curva) .18s both}
.js-anim .cabezal .cabezal__acciones{animation:surgir .75s var(--curva) .26s both}
.cabezal::after{animation:meceFondo 12s ease-in-out infinite}
@keyframes meceFondo{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-9deg) translateY(-6px)}}

/* Tarjetas: al pasar, un halo lila y la foto que se acerca */
.cat:hover,.ficha:hover,.combo:hover{box-shadow:0 26px 50px -30px rgba(85,101,164,.65),0 0 0 1px rgba(138,99,196,.25)}
.ficha__foto .sinfoto{transition:transform .6s var(--curva)}

/* Filas de tratamientos con su foto en círculo */
.serv__foto{float:left;width:58px;height:58px;border-radius:50%;object-fit:cover;margin:2px 14px 4px 0;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--lila-velo),0 8px 16px -10px rgba(26,24,56,.5);
  transition:transform .45s var(--curva)}
.serv:hover .serv__foto{transform:scale(1.08) rotate(-4deg)}

/* Botón principal: además del brillo, una respiración suave de la sombra */
.portada__acciones .btn--principal{animation:respira 3.6s ease-in-out 1.5s infinite}
@keyframes respira{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Menos movimiento: lo nuevo también se queda quieto */
@media (prefers-reduced-motion:reduce){
  .destello,.cabezal::after,.portada__acciones .btn--principal{animation:none}
  .destello{opacity:.8}
}

/* Combo sin foto: el sello de descuento baja adentro de la tarjeta */
.combo:not(:has(.combo__foto)) .combo__sello{top:18px}
.combo:not(:has(.combo__foto)) .combo__nombre{padding-right:96px}
.combo__foto img{transition:transform .6s var(--curva)}
.combo:hover .combo__foto img{transform:scale(1.06)}

/* La barra de arriba: con el logo nuevo (emblema + nombre) los enlaces no
   entraban en una línea y "El equipo" se partía en dos. */
.nav{gap:24px}
.nav a{white-space:nowrap}
@media (max-width:1240px) and (min-width:881px){
  .nav{gap:16px}
  .nav a{font-size:.85rem}
  .cabecera__int{gap:18px}
  .logo--lockup .logo__bajada{display:none}
}