/* ==========================================================================
   ELYSIUM — capa de marca y movimiento
   Va después de site.css. Acá vive el logo y las animaciones. La estética
   propia de Elysium (flores, fotos en círculo, títulos con firma) está en
   elysium.css, que va después de esta.
   ========================================================================== */

/* ── Logo ───────────────────────────────────────────────────────────────── */
/* El emblema es un SVG (disco, hilo y aro) con la "E" original adentro. Todo
   lo que se anima va por afuera o sobre el hilo: la letra no se toca. */
.logo{position:relative;display:inline-flex;align-items:center;gap:.7em;line-height:1;
      vertical-align:middle;text-decoration:none}
.emblema{display:block;width:100%;height:100%;overflow:visible}
.emblema__fondo{fill:#fff}
.emblema__hilo{fill:none;stroke:var(--indigo,#5565A4);stroke-width:2.6}
.emblema__disco{fill:var(--indigo,#5565A4)}

.logo__sello{display:block;width:48px;height:48px;flex:none;border-radius:50%;
             box-shadow:0 8px 18px -10px rgba(26,24,56,.55);
             transition:transform .6s var(--curva-suave)}
.logo__texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.logo__nombre{font-family:var(--display);font-size:1.55rem;font-weight:500;letter-spacing:.03em;
              color:var(--noche);line-height:1}
.logo__bajada{font-family:var(--texto);font-size:.52rem;font-weight:600;letter-spacing:.26em;
              text-transform:uppercase;color:var(--indigo);white-space:nowrap}
.logo--claro .logo__nombre{color:#fff}
.logo--claro .logo__bajada{color:var(--lila-claro)}

.logo--completo{display:block;width:100%;max-width:320px;aspect-ratio:1}
.logo--isotipo{display:block;width:100%;height:100%}

/* El brillo que cruza el emblema: una banda que se mueve con transform
   adentro de un círculo con overflow oculto. No repinta nada. */
.logo__brillo{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.logo__brillo::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:translateX(-160%) skewX(-12deg);opacity:0;
}

.marca:hover .logo__sello{transform:rotate(-8deg) scale(1.05)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;color:var(--carbon)}

/* La cabecera se despega apenas se baja: sombra y un pelo más compacta */
.cabecera{transition:box-shadow .32s var(--curva), background .32s var(--curva)}
.cabecera--fija{box-shadow:0 1px 0 var(--linea-tibia), 0 18px 40px -30px rgba(26,24,56,.65);
                background:rgba(250,249,253,.93)}
.cabecera--fija .logo__sello{width:42px;height:42px}
.logo__sello{transition:transform .6s var(--curva-suave), width .32s var(--curva), height .32s var(--curva)}

.pie__marca .logo__sello{width:62px;height:62px}
.pie__marca .logo__nombre{font-size:1.9rem}

@media (max-width:600px){
  .logo__sello,.cabecera--fija .logo__sello{width:40px;height:40px}
  .logo__nombre{font-size:1.32rem}
  .logo__bajada{font-size:.47rem;letter-spacing:.2em}
}

/* ── Animaciones ────────────────────────────────────────────────────────── */
@keyframes surgir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes surgirChico{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes escalar{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes brillo{from{background-position:-180% 0}to{background-position:180% 0}}
@keyframes pulsoSuave{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes girar{to{transform:rotate(360deg)}}

/* Entrada al hacer scroll.
   Ojo con esto: el contenido solo se esconde si el JS está vivo y avisó
   poniendo .js-anim en el <html>. Si el navegador no soporta el efecto, si el
   script falla o si tarda, la página se ve completa igual. Nunca puede quedar
   texto invisible por culpa de una animación. */
.revelar{transition:opacity .7s var(--curva), transform .7s var(--curva);
         transition-delay:calc(var(--i, 0) * 70ms)}
.js-anim .revelar{opacity:0;transform:translateY(22px)}
.js-anim .revelar.visible{opacity:1;transform:none}

/* La portada entra sola al cargar */
.portada__texto > *{animation:surgir .8s var(--curva) both}
.portada__texto > *:nth-child(1){animation-delay:.04s}
.portada__texto > *:nth-child(2){animation-delay:.12s}
.portada__texto > *:nth-child(3){animation-delay:.20s}
.portada__texto > *:nth-child(4){animation-delay:.28s}
.portada__texto > *:nth-child(5){animation-delay:.36s}
.vitrina{animation:escalar 1s var(--curva) both;animation-delay:.14s}

/* ── Micro-interacciones ────────────────────────────────────────────────── */
.ficha,.serv,.opcion,.dia,.hora,.opinion,.cat{
  transition:transform .28s var(--curva), box-shadow .28s var(--curva),
             border-color .28s var(--curva), background .28s var(--curva);
}
.ficha__foto img,.ficha__foto .sinfoto{transition:transform .55s var(--curva)}
.ficha:hover .ficha__foto img,
.ficha:hover .ficha__foto .sinfoto{transform:scale(1.05)}
.serv:hover{transform:translateX(5px)}
.serv__nom{transition:color .22s ease}
.serv:hover .serv__nom{color:var(--indigo-hondo)}
.opcion:hover{transform:translateY(-2px)}
.dia:hover,.hora:hover{transform:translateY(-3px)}
.galeria a{overflow:hidden;border-radius:var(--r);display:block}
.galeria img{transition:transform .6s var(--curva)}
.galeria a:hover img{transform:scale(1.07)}
.chip{transition:transform .2s var(--curva-suave), background .2s ease, color .2s ease,
                 border-color .2s ease}
.chip:hover{transform:translateY(-2px)}

/* Un brillo que cruza el botón principal al pasar por encima */
.btn--principal,.btn--lila{position:relative;overflow:hidden;isolation:isolate}
.btn--principal::after,.btn--lila::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 38%,rgba(220,205,243,.32) 50%,transparent 62%);
  background-size:220% 100%;background-position:-180% 0;
}
.btn--lila::after{background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%)}
.btn--principal:hover::after,.btn--lila:hover::after{animation:brillo .9s var(--curva) forwards}

/* El subrayado del menú crece desde el centro, en lila */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1.5px;
              background:linear-gradient(90deg,var(--lila-hondo),var(--lila),var(--lila-hondo));
              transition:left .28s var(--curva), right .28s var(--curva)}
.nav a:hover::after,.nav a[aria-current="page"]::after{left:0;right:0}
@media (max-width:880px){
  /* En el menú desplegable el subrayado molesta: ahí manda la línea divisoria */
  .nav a::after{display:none}
}

.marca__punto{animation:pulsoSuave 3.4s ease-in-out infinite}

/* El código del turno entra con un golpe suave */
.ticket{animation:surgir .6s var(--curva) both}
.ticket__codigo{animation:escalar .6s var(--curva-suave) both;animation-delay:.15s}

/* Los horarios libres aparecen escalonados */
.dias .dia,.horas .hora{animation:surgirChico .34s var(--curva) both}
.horas .hora:nth-child(1){animation-delay:.02s} .horas .hora:nth-child(2){animation-delay:.04s}
.horas .hora:nth-child(3){animation-delay:.06s} .horas .hora:nth-child(4){animation-delay:.08s}
.horas .hora:nth-child(5){animation-delay:.10s} .horas .hora:nth-child(6){animation-delay:.12s}
.horas .hora:nth-child(7){animation-delay:.14s} .horas .hora:nth-child(8){animation-delay:.16s}
.horas .hora:nth-child(n+9){animation-delay:.18s}

.aviso{animation:surgirChico .4s var(--curva) both}
.panel{transition:box-shadow .3s var(--curva), border-color .3s var(--curva)}
.panel:focus-within{border-color:var(--lila-velo);box-shadow:var(--sombra)}

.estrellas-elegir label{transition:color .14s ease, transform .18s var(--curva-suave)}
.estrellas-elegir label:hover{transform:scale(1.16)}

/* ── Detalles de marca ──────────────────────────────────────────────────── */
body{overflow-x:hidden}

/* Dos halos detrás de la portada: uno lavanda y uno lila. Le dan aire y
   profundidad sin cargar de imágenes la página. */
.portada{position:relative;isolation:isolate}
.portada::before{
  content:"";position:absolute;z-index:-1;top:-22%;right:-12%;
  width:min(640px,66vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--lavanda) 0%,rgba(236,232,250,0) 68%);
  animation:flotar 14s ease-in-out infinite;
}
.portada::after{
  content:"";position:absolute;z-index:-1;bottom:-30%;left:-18%;
  width:min(520px,60vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(169,139,216,.20) 0%,rgba(169,139,216,0) 70%);
}

/* La firma, en la tipografía del logo */
.firma{font-family:var(--firma);font-size:1.9rem;line-height:1;color:var(--indigo)}

/* ==========================================================================
   PORTADA — el sello de la marca

   Antes acá había una mancha lavanda enorme que se deformaba despacio, con
   el isotipo encima: ocupaba media pantalla, el movimiento se arrastraba y no
   se parecía al logo impreso. Ahora va el logo tal cual —blob, firma y bajada—
   adentro de un medallón: más chico, más parecido al original y con un
   movimiento corto y vivo en vez de uno lento y pesado.
   ========================================================================== */
.vitrina{
  position:relative;display:grid;place-items:center;gap:18px;
  min-height:min(400px,64vw);isolation:isolate;
}

/* El aura: un resplandor lavanda y uno lila, quietos. El movimiento lo
   pone el sello, no el fondo. */
.vitrina::before{
  content:"";position:absolute;z-index:-2;width:min(440px,86%);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,var(--lavanda) 0%,rgba(236,232,250,.6) 40%,rgba(236,232,250,0) 70%),
    radial-gradient(circle at 68% 74%,rgba(169,139,216,.28) 0%,rgba(169,139,216,0) 58%);
  pointer-events:none;
}

/* ── El medallón ─────────────────────────────────────────────────────────── */
.sello{
  position:relative;width:clamp(198px,29vw,278px);aspect-ratio:1;
  display:grid;place-items:center;
  animation:selloEntra .85s var(--curva-suave) both,
            selloFlota 6s ease-in-out 1.1s infinite;
}
@keyframes selloEntra{
  from{opacity:0;transform:scale(.86) rotate(-4deg)}
  to  {opacity:1;transform:none}
}
/* Una flotación corta: se nota que respira, no que se arrastra */
@keyframes selloFlota{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

/* El hilo lila fijo, pegado al logo */
.sello::before{
  content:"";position:absolute;inset:-4%;border-radius:50%;
  border:1px solid rgba(169,139,216,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset;
}

/* El aro punteado que gira: 16 s da una vuelta que se percibe sin marear */
.sello__aro{position:absolute;inset:-13%;width:126%;height:126%;
            animation:girar 16s linear infinite;pointer-events:none}
.sello__aro circle{
  fill:none;stroke:var(--lila);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:.5 9;opacity:.85;
}

.sello__logo{
  position:relative;width:88%;border-radius:50%;box-shadow:0 22px 44px -22px rgba(26,24,56,.45);
}
.sello__logo .logo--completo{width:100%;max-width:none}

/* Un destello que recorre el aro lila, como la luz sobre una joya.
   Va sobre el aro y no sobre el logo a propósito: recortar el logo en círculo
   para que el brillo no se saliera le comía las puntas del blob. */
@supports ((-webkit-mask:radial-gradient(#000,#000)) or (mask:radial-gradient(#000,#000))){
  .sello::after{
    content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;
    background:conic-gradient(from 0deg,
      transparent 0 72%, rgba(169,139,216,.5) 82%, rgba(255,255,255,.95) 88%,
      rgba(169,139,216,.5) 94%, transparent 100%);
    -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
            mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    animation:girar 8s linear infinite;
  }
}

/* El sello entra creciendo apenas, una sola vez. */
.sello .emblema{animation:entrarSello 1.05s var(--curva-suave) .25s both}
@keyframes entrarSello{
  from{opacity:0;transform:scale(.90) rotate(-2deg)}
  to  {opacity:1;transform:none}
}

/* El aro punteado se dibuja al entrar, además de girar */
.sello__aro circle{
  stroke-dasharray:.5 9;
  animation:aparecerAro .9s var(--curva) .25s both;
}
@keyframes aparecerAro{
  from{opacity:0;stroke-width:3}
  to  {opacity:.85;stroke-width:1.6}
}

/* La luz que cruza el sello: pasa rápido y descansa cinco segundos. Anima
   background-position sobre un elemento ya recortado con la forma del logo,
   así el brillo se ve SOBRE el sello y no cruzando la página entera. */
.sello .logo__brillo::before{animation:cruzarLuz 7s var(--curva) 2.2s infinite}
@keyframes cruzarLuz{
  0%      {opacity:0;   transform:translateX(-160%) skewX(-12deg)}
  4%      {opacity:1}
  16%     {opacity:1}
  20%,100%{opacity:0;   transform:translateX(330%) skewX(-12deg)}
}

/* El medallón sigue apenas al puntero. El JS del pie pone --gx y --gy; sin JS
   queda quieto y no pasa nada. */
.sello__logo{
  transform:perspective(760px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg));
  transition:transform .45s var(--curva);
  will-change:transform;
}
@media (hover:none){
  .sello__logo{transform:none}
}

/* ── Las chispas ─────────────────────────────────────────────────────────── */
.chispa{
  position:absolute;width:16px;height:16px;pointer-events:none;
  background:linear-gradient(140deg,#fff,var(--lila-claro) 45%,var(--lila));
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  opacity:0;animation:chispear 4.6s ease-in-out infinite;
}
.chispa--1{top:4%;left:8%;animation-delay:1.2s}
.chispa--2{top:32%;right:-2%;width:11px;height:11px;animation-delay:2.6s}
.chispa--3{bottom:6%;right:16%;width:13px;height:13px;animation-delay:3.8s}
@keyframes chispear{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  8%     {opacity:1;transform:scale(1) rotate(35deg)}
  20%    {opacity:0;transform:scale(.5) rotate(70deg)}
}

/* ── La pastilla de turnos y la tarjeta de reputación ────────────────────── */
.vitrina__pastilla{
  position:absolute;left:2%;top:4%;display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid var(--lila-velo);border-radius:999px;padding:9px 16px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--noche);box-shadow:var(--sombra);
  animation:surgir .7s var(--curva) both;animation-delay:.6s;
}
.vitrina__pastilla i{width:7px;height:7px;border-radius:50%;background:var(--violeta);
                     box-shadow:0 0 0 4px rgba(138,99,196,.18);animation:pulsoSuave 2.6s ease-in-out infinite}

.vitrina__sello-op{
  position:absolute;right:0;bottom:2%;
  background:var(--blanco);border-radius:18px;padding:13px 18px;
  border:1px solid var(--lila-velo);
  box-shadow:var(--sombra-alta);text-align:center;
  animation:surgir .7s var(--curva) both;animation-delay:.8s;
}
.vitrina__sello-op b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;
                     color:var(--noche)}
.vitrina__sello-op small{color:var(--humo);font-size:.7rem;font-family:var(--mono);
                         letter-spacing:.06em}
.vitrina__sello-op .estrellas{font-size:.86rem}

/* ── Los tres pasos ──────────────────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.paso__num{
  font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--lila);
  font-variation-settings:"WONK" 1;
}
.paso h3{margin:10px 0 8px;color:var(--blanco)}
.paso p{color:rgba(246,244,252,.62);font-size:.93rem;margin:0}
.paso{position:relative;padding-top:16px}
.paso::before{
  content:"";position:absolute;top:0;left:0;width:30px;height:1px;
  background:var(--lila);transform-origin:left;
  transform:scaleX(0);transition:transform .6s var(--curva) .15s;
}
.paso.visible::before{transform:scaleX(1)}
.js-anim .paso::before{transform:scaleX(0)}

/* ── Tira de opiniones de la portada ─────────────────────────────────────── */
.opiniones--tira{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px;
}
.opiniones--tira .opinion{display:flex;flex-direction:column;gap:11px}
.opiniones--tira .opinion p{margin:0;font-size:.94rem;color:var(--carbon-80)}
.opiniones--tira .opinion footer{
  margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.opiniones--tira .opinion footer b{font-size:.96rem}
.opiniones--tira .opinion footer small{color:var(--humo);font-size:.79rem}

/* ── En celular ──────────────────────────────────────────────────────────── */
@media (max-width:860px){
  /* En el celular el título y el botón de reservar van primero: el sello es
     lindo, pero no vale empujar 300 px abajo lo que la clienta vino a hacer. */
  .vitrina{min-height:auto;margin-top:36px;gap:14px}
  .sello{width:min(230px,60vw)}

  /* Ni la pastilla ni la reputación flotan: entran en el flujo, una arriba y
     otra abajo del sello. Flotando se montaban con la sección siguiente. */
  .vitrina__pastilla{position:static;order:-1;margin-bottom:2px}
  .vitrina__sello-op{
    position:static;display:flex;align-items:baseline;gap:9px;
    padding:10px 18px;border-radius:999px;
  }
  .vitrina__sello-op b{display:inline;font-size:1.15rem}
}
@media (max-width:520px){
  .sello{width:min(212px,64vw)}
  .chispa{width:12px;height:12px}
}

/* ── Menos movimiento si el sistema lo pide ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .revelar{opacity:1;transform:none}
  .sello,.sello__aro,.sello__aro circle,.sello::after,.chispa,
  .sello .logo__brillo::before,.sello .emblema{animation:none}
  .sello__aro circle{opacity:.85}
  .sello__logo{transform:none}

  .chispa{opacity:.9;transform:none}
  .vitrina__sello-op,.vitrina__pastilla{animation:none;opacity:1;transform:none}
  .paso::before,.js-anim .paso::before{transform:scaleX(1)}
}

/* ==========================================================================
   CAPA LILA Y MOVIMIENTO

   Todo lo de acá es decoración: hilos lila y micro-animaciones. Dos reglas
   para que sumen y no molesten:

     · Solo se animan `transform` y `opacity`. Son las dos únicas propiedades
       que el navegador resuelve sin volver a calcular la página, así que ni el
       celular más humilde se pone lento.
     · Casi todo se dispara al pasar el dedo o al aparecer en pantalla. Los
       bucles infinitos se cuentan con los dedos de una mano.
   ========================================================================== */

/* ── La barra de avance, arriba de todo ──────────────────────────────────── */
.avance{
  position:fixed;inset:0 0 auto;height:2px;z-index:90;transform-origin:0 50%;
  transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--lila-hondo),var(--lila),var(--lila-claro),var(--lila));
  box-shadow:0 0 12px rgba(169,139,216,.5);
}

/* ── Hilos lila en los bordes de las secciones ────────────────────────── */
.seccion--papel,.seccion--lavanda{position:relative}
.seccion--papel::before,.seccion--lavanda::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lila-velo) 25%,var(--lila) 50%,var(--lila-velo) 75%,transparent);
  opacity:.7;
}

/* ── El subrayado lila de los títulos, que se dibuja al aparecer ───────── */
.seccion__enc h2,.cabezal h1{position:relative;display:inline-block}
.seccion__enc h2::after,.cabezal h1::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--lila),var(--lila-velo) 70%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--curva) .15s;
}
.cabezal h1::after{transform:scaleX(1)}
.js-anim .cabezal h1::after{transform:scaleX(0);animation:subrayar .9s var(--curva) .35s forwards}
.seccion__enc.visible h2::after,
.seccion__enc:not(.revelar) h2::after{transform:scaleX(1)}
@keyframes subrayar{to{transform:scaleX(1)}}

/* La rayita de los volantines crece igual */
.eyebrow::before{transform-origin:left;transition:transform .6s var(--curva)}
.js-anim .revelar:not(.visible) .eyebrow::before{transform:scaleX(0)}

/* ── Esquinas lila en las tarjetas ────────────────────────────────────── */
/* Dos rayitas que dibujan una esquina, como el marco del logo. Aparecen al
   pasar por encima; en el celular, donde no hay hover, quedan siempre puestas
   pero tenues. */
.cat,.opinion,.panel,.ficha{position:relative}
.cat::after,.opinion::after,.panel::after{
  content:"";position:absolute;top:10px;right:10px;width:22px;height:22px;
  border-top:1px solid var(--lila);border-right:1px solid var(--lila);
  border-radius:0 8px 0 0;opacity:0;transform:translate(-4px,4px);
  transition:opacity .35s var(--curva), transform .35s var(--curva);pointer-events:none;
}
.cat:hover::after,.opinion:hover::after,.panel:focus-within::after{opacity:.85;transform:none}
@media (hover:none){
  .cat::after,.opinion::after{opacity:.4;transform:none}
}

/* ── Detalles lila sueltos ────────────────────────────────────────────── */
/* El rombo delante de cada grupo del catálogo */
.grupo h3{position:relative;padding-left:20px}
.grupo h3::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  background:var(--lila);transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(169,139,216,.16);
}

/* El avatar del paso "¿con quién?", con aro lila */
.opcion__av{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 3px var(--lila-velo)}
.opcion[aria-pressed="true"] .opcion__av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--lila)}

/* El día y la hora elegidos, con un aro lila alrededor */
.dia[aria-pressed="true"],.hora[aria-pressed="true"]{
  box-shadow:0 0 0 2px rgba(250,249,253,1),0 0 0 3.5px var(--lila);
}

/* Las estrellas titilan una vez cuando entran en pantalla */
.revelar.visible .estrellas{animation:titilar 1.4s var(--curva) .2s}
@keyframes titilar{
  0%,100%{filter:none}
  35%    {filter:drop-shadow(0 0 6px rgba(169,139,216,.85))}
}

/* Los números de la portada, con su punto lila */
.portada__dato b{position:relative}
.portada__dato b::after{
  content:"";position:absolute;top:.15em;margin-left:5px;width:5px;height:5px;
  background:var(--lila);transform:rotate(45deg);opacity:.9;
}

/* Los enlaces del pie, con subrayado lila que crece */
.pie a{position:relative;width:fit-content}
.pie a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--lila);transition:right .3s var(--curva);
}
.pie a:hover::after{right:0}

/* El botón de línea también recibe su brillo */
.btn--linea{position:relative;overflow:hidden;isolation:isolate}
.btn--linea::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 40%,rgba(169,139,216,.28) 50%,transparent 60%);
  background-size:220% 100%;background-position:-180% 0;
}
.btn--linea:hover::after{animation:brillo .9s var(--curva) forwards}

/* La flecha de las filas de servicios */
.serv{padding-right:26px}
.serv::after{
  content:"→";position:absolute;right:2px;top:50%;transform:translate(-6px,-50%);
  color:var(--lila);opacity:0;transition:opacity .28s var(--curva), transform .28s var(--curva);
}
.serv:hover::after{opacity:1;transform:translate(0,-50%)}
@media (max-width:640px){.serv::after{display:none}.serv{padding-right:4px}}

/* El botón principal de la portada llama la atención cada tanto */
@keyframes brilloLento{
  0%      {background-position:-180% 0}
  22%,100%{background-position:180% 0}
}
.portada__acciones .btn--principal::after{animation:brilloLento 6.5s var(--curva) 2.5s infinite}
.portada__acciones .btn--principal:hover::after{animation:brillo .9s var(--curva) forwards}

/* El sello de la ficha entra con la tarjeta */
.ficha:hover .ficha__modo{border-color:var(--lila)}

/* Los vacíos y los avisos, con su rombo */
.vacio h3::before{
  content:"";display:block;width:9px;height:9px;margin:0 auto 14px;
  background:var(--lila);transform:rotate(45deg);
  box-shadow:0 0 0 4px rgba(169,139,216,.18);
}

/* ── Menos movimiento si el sistema lo pide ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .avance{display:none}
  .seccion__enc h2::after,.cabezal h1::after{transform:scaleX(1) !important;animation:none !important}
  .js-anim .revelar:not(.visible) .eyebrow::before{transform:none}
  .cat::after,.opinion::after{opacity:.4;transform:none}
  .revelar.visible .estrellas{animation:none}
  .portada__acciones .btn--principal::after{animation:none}
}