/* ==========================================================================
   ELYSIUM — Salud y estética avanzada
   Hoja de estilos del sitio público.

   La paleta nace del logo —el índigo del disco y el blanco de la "E"— y de
   sus publicaciones:

     · índigo noche  para los fondos profundos (pie, secciones oscuras)
     · lila          para los detalles finos: filetes, números, precios
     · blanco perla  como papel, en lugar del blanco frío
     · lavanda       como acento suave, no como fondo general

   La regla del sitio: el lila se usa en hilos y detalles, nunca en bloques
   grandes. Un filete lila sobre índigo noche es lo que hace que se vea fino.
   ========================================================================== */

:root{
  /* ── Marca ────────────────────────────────────────────────────────────── */
  --lavanda:#ECE8FA;        --lavanda-honda:#D3CAF0;   --lavanda-humo:#F6F4FC;
  --indigo:#5565A4;         --violeta:#8A63C4;     --indigo-hondo:#3B4588;

  /* Verdes profundos: el fondo de las secciones oscuras y del pie */
  --noche:#1A1838;        --noche-2:#262352;       --noche-3:#34306A;

  /* Lila: el detalle fino */
  --lila:#A98BD8;          --lila-claro:#DCCDF3;     --lila-hondo:#7552B0;
  --lila-velo:rgba(169,139,216,.30);

  /* ── Texto y superficies ──────────────────────────────────────────────── */
  --carbon:#1E1D35;
  --carbon-80:rgba(30,29,53,.80);   --carbon-55:rgba(30,29,53,.56);
  --perla:#FAF9FD;       --papel:#FAF9FD;         --blanco:#FFFFFF;
  --humo:#6B6985;         --linea:#E7E4F2;         --linea-tibia:#ECE6F6;
  --alerta:#B23A52;

  /* Compatibilidad con los nombres viejos de las variables.
     Quedan porque hay estilos en línea, dentro del PHP, que los usan. */
  --tinta:var(--noche);   --tinta-80:var(--carbon-80); --tinta-55:var(--carbon-55);
  --malva:var(--indigo);    --malva-claro:var(--violeta); --rosa:var(--lila-claro);

  /* ── Tipografías ──────────────────────────────────────────────────────── */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --firma:"Allura","Brush Script MT",cursive;
  --texto:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Montserrat",system-ui,sans-serif;

  /* ── Formas, sombras y curvas ─────────────────────────────────────────── */
  --r:14px; --r-lg:22px; --r-xl:30px;
  --ancho:1200px;
  --sombra:0 1px 2px rgba(26,24,56,.04), 0 14px 34px -18px rgba(26,24,56,.22);
  --sombra-alta:0 2px 8px rgba(26,24,56,.06), 0 34px 64px -26px rgba(26,24,56,.34);
  --sombra-lila:0 18px 44px -26px rgba(117,82,176,.55);

  --curva:cubic-bezier(.22,.68,.36,1);
  --curva-suave:cubic-bezier(.34,1.24,.44,1);

  /* Grano finísimo. Se apoya sobre los fondos oscuros para que el verde no
     quede plano como un plástico. */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--perla); color:var(--carbon);
  font-family:var(--texto); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
::selection{background:var(--lavanda); color:var(--noche)}

.contenedor{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:24px}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:450; line-height:1.06; margin:0;
  font-variation-settings:"SOFT" 8,"WONK" 1; letter-spacing:-.02em;
}
h1{font-size:clamp(2.5rem,6.6vw,4.5rem)}
h2{font-size:clamp(1.95rem,4.2vw,3rem)}
h3{font-size:clamp(1.22rem,2.2vw,1.55rem)}

/* La palabra destacada de los títulos: cursiva y en degradé índigo-lila.
   El degradé sobre el texto necesita el respaldo de un color plano, porque si
   el navegador no recorta el fondo el texto quedaría invisible. */
em.brillo,.titulo-lila{
  font-style:italic; font-variation-settings:"WONK" 1;
  color:var(--lila-hondo);
  background:linear-gradient(96deg,var(--lila-hondo) 0%,var(--lila) 42%,var(--lila-claro) 66%,var(--lila) 100%);
  -webkit-background-clip:text; background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  em.brillo,.titulo-lila{-webkit-text-fill-color:transparent}
}

p{margin:0 0 1em}
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--indigo); margin:0 0 16px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:30px; height:1px; flex:none;
  background:linear-gradient(90deg,var(--lila),var(--lila-velo));
}
.plomo{color:var(--humo)}
.entrada{font-size:1.12rem; color:var(--carbon-80); max-width:56ch}

/* Filete: el hilo lila con un rombo al medio */
.filete{display:flex; align-items:center; gap:12px; margin:26px 0; color:var(--lila)}
.filete::before,.filete::after{content:""; height:1px; flex:1; background:var(--lila-velo)}
.filete i{width:6px; height:6px; background:var(--lila); transform:rotate(45deg); flex:none}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.92rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--curva), background .22s ease, color .22s ease,
             border-color .22s ease, box-shadow .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--principal{
  background:linear-gradient(150deg,var(--noche-2) 0%,var(--noche) 62%);
  color:var(--lavanda); box-shadow:0 14px 30px -18px rgba(26,24,56,.9);
}
.btn--principal:hover{
  background:linear-gradient(150deg,var(--noche-3) 0%,var(--noche-2) 70%);
  color:var(--blanco); box-shadow:0 18px 36px -18px rgba(26,24,56,.95);
}
.btn--lila{
  background:linear-gradient(140deg,var(--lila-claro),var(--lila) 55%,var(--lila-hondo));
  color:var(--noche); box-shadow:var(--sombra-lila);
}
.btn--lila:hover{filter:brightness(1.06)}
.btn--linea{border-color:rgba(30,29,53,.26); color:var(--carbon); background:transparent}
.btn--linea:hover{border-color:var(--noche); background:var(--noche); color:var(--lavanda)}
.btn--claro{background:var(--blanco); color:var(--noche)}
.btn--claro:hover{background:var(--lavanda)}
.btn--indigo{background:var(--indigo); color:#fff}
.btn--indigo:hover{background:var(--indigo-hondo)}
.btn--chico{padding:10px 20px; font-size:.84rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42; pointer-events:none; transform:none}

/* Sobre fondo oscuro, el botón de línea se dibuja en lila */
.seccion--tinta .btn--linea,.pie .btn--linea,.resumen .btn--linea{
  border-color:var(--lila-velo); color:var(--lila-claro)}
.seccion--tinta .btn--linea:hover,.pie .btn--linea:hover,.resumen .btn--linea:hover{
  background:var(--lila); color:var(--noche); border-color:var(--lila)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--violeta); outline-offset:3px; border-radius:6px;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(250,249,253,.82);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid var(--linea-tibia);
}
/* El hilo lila que corre bajo la cabecera */
.cabecera::after{
  content:""; position:absolute; inset:auto 0 -1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lila-velo) 22%,var(--lila) 50%,var(--lila-velo) 78%,transparent);
  opacity:.75;
}
.cabecera__int{display:flex; align-items:center; gap:28px; min-height:76px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto;
       color:var(--carbon)}
.marca__nombre{font-family:var(--display); font-size:1.42rem; letter-spacing:-.02em;
               font-variation-settings:"WONK" 1}
.marca__punto{width:7px; height:7px; border-radius:50%; background:var(--lila); flex:none;
              align-self:center}
.nav{display:flex; gap:30px}
.nav a{text-decoration:none; font-size:.92rem; font-weight:500; color:var(--carbon-80);
       padding:7px 0; letter-spacing:.01em}
.nav a:hover,.nav a[aria-current="page"]{color:var(--noche)}

.menu-btn{
  display:none; background:var(--blanco); border:1px solid var(--linea-tibia); border-radius:12px;
  padding:10px 13px; cursor:pointer; box-shadow:0 2px 10px -6px rgba(26,24,56,.4);
}
.menu-btn span{display:block; width:19px; height:1.6px; background:var(--noche); margin:4.5px 0;
               border-radius:2px; transition:transform .28s var(--curva), opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}

@media (max-width:880px){
  .menu-btn{display:block}
  .cabecera__int{min-height:66px; gap:14px}
  .nav{
    position:absolute; inset:66px 0 auto; flex-direction:column; gap:0;
    background:rgba(250,249,253,.98);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--linea-tibia); padding:6px 24px 22px;
    box-shadow:0 26px 40px -30px rgba(26,24,56,.8);
    display:none;
  }
  .nav.abierto{display:flex; animation:menuBaja .3s var(--curva) both}
  .nav a{padding:15px 2px; border-bottom:1px solid var(--linea);
         font-family:var(--display); font-size:1.18rem; letter-spacing:-.01em}
  .nav a:last-child{border-bottom:0}
  .cabecera__int .btn{display:none}
}
@keyframes menuBaja{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada{padding:clamp(44px,6.5vw,92px) 0 clamp(46px,6vw,84px); overflow:hidden}
.portada__grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,5vw,70px);
               align-items:center}
.portada h1{font-size:clamp(2.6rem,6.6vw,4.6rem)}
.portada h1 em{font-style:italic}
.portada__texto p{margin-top:24px}
.portada__acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* La tira de datos: números en Fraunces con hilos lila entre medio */
.portada__dato{
  display:flex; gap:0; margin-top:40px; padding-top:26px;
  border-top:1px solid var(--linea-tibia);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--humo);
  text-transform:uppercase; line-height:1.5;
}
.portada__dato > div{padding-inline:clamp(14px,2.4vw,26px); position:relative}
.portada__dato > div:first-child{padding-left:0}
.portada__dato > div + div::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--lila-velo);
}
.portada__dato b{
  display:block; font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.15rem);
  color:var(--noche); letter-spacing:-.03em; font-weight:450; text-transform:none;
  line-height:1.1; margin-bottom:2px;
}

/* Avatar con iniciales, cuando la profesional todavía no subió su foto */
.sinfoto{display:grid; place-items:center;
         background:linear-gradient(150deg,var(--lavanda),var(--violeta));
         color:#fff; font-family:var(--display); font-size:2.6rem}

@media (max-width:860px){
  .portada__grid{grid-template-columns:1fr}
}

/* ── Cabezal de las páginas interiores ──────────────────────────────────── */
/* Todas las páginas que no son la portada abren igual: el mismo aire, el mismo
   halo lavanda y el mismo filete. Es lo que hace que el sitio se sienta de
   una sola pieza. */
.cabezal{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(38px,5.5vw,72px) 0 clamp(28px,3.4vw,42px);
  background:linear-gradient(180deg,var(--lavanda-humo) 0%,var(--perla) 100%);
  border-bottom:1px solid var(--linea-tibia);
}
.cabezal::before{
  content:""; position:absolute; z-index:-1; top:-58%; right:-8%;
  width:min(520px,62vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--lavanda) 0%,rgba(236,232,250,0) 70%);
}
.cabezal h1{font-size:clamp(2.15rem,5.4vw,3.5rem)}
.cabezal h2{font-size:clamp(2rem,5vw,3.1rem)}
.cabezal .entrada{margin-top:16px}
.cabezal__acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.seccion{padding:clamp(54px,7vw,96px) 0; position:relative}
.seccion--papel{background:var(--blanco); border-block:1px solid var(--linea-tibia)}
.seccion--lavanda{background:var(--lavanda-humo); border-block:1px solid var(--linea)}

.seccion--tinta{
  background:linear-gradient(165deg,var(--noche-2) 0%,var(--noche) 58%);
  color:rgba(246,244,252,.82); position:relative; isolation:isolate; overflow:hidden;
}
.seccion--tinta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grano); opacity:.05;
}
.seccion--tinta::after{
  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);
}
.seccion--tinta h1,.seccion--tinta h2,.seccion--tinta h3{color:var(--blanco)}
.seccion--tinta .eyebrow{color:var(--lila-claro)}
.seccion--tinta .eyebrow::before{background:linear-gradient(90deg,var(--lila),transparent)}

.seccion__enc{display:flex; align-items:end; justify-content:space-between; gap:26px;
              margin-bottom:clamp(30px,4vw,50px); flex-wrap:wrap}
.seccion__enc p{max-width:50ch; margin:14px 0 0; color:var(--humo)}
.seccion--tinta .seccion__enc p{color:rgba(246,244,252,.68)}

/* ── Vitrina de categorías: el catálogo contado una sola vez ────────────── */
/* Antes la portada mostraba las categorías arriba (como chips) y una lista de
   servicios destacados más abajo: la misma información, dos veces. Ahora hay
   un solo bloque, donde cada categoría muestra lo que tiene adentro. */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:18px}
.cat{
  position:relative; display:flex; flex-direction:column;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:26px 24px 22px; text-decoration:none;
  overflow:hidden; isolation:isolate;
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva);
}
/* El velo lavanda que sube desde abajo al pasar por encima */
.cat::before{
  content:""; position:absolute; inset:auto 0 0; height:0; z-index:-1;
  background:linear-gradient(0deg,var(--lavanda-humo),rgba(246,244,252,0));
  transition:height .38s var(--curva);
}
.cat:hover{transform:translateY(-6px); box-shadow:var(--sombra-alta); border-color:var(--lila-velo)}
.cat:hover::before{height:100%}
.cat__n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--lila-hondo);
  display:block; margin-bottom:12px;
}
.cat__nombre{font-family:var(--display); font-size:1.55rem; letter-spacing:-.02em; margin:0;
             font-variation-settings:"SOFT" 8,"WONK" 1; font-weight:450; line-height:1.1}
.cat__desc{font-size:.89rem; color:var(--humo); margin:9px 0 0}
.cat__lista{list-style:none; margin:18px 0 0; padding:16px 0 0; display:grid; gap:9px;
            border-top:1px dashed var(--linea-tibia)}
.cat__lista li{display:flex; align-items:baseline; gap:9px; font-size:.92rem; color:var(--carbon-80)}
.cat__lista li::before{
  content:""; width:5px; height:5px; flex:none; transform:rotate(45deg) translateY(-1px);
  background:var(--violeta);
}
.cat__lista li.es-top::before{background:var(--lila); box-shadow:0 0 0 3px rgba(169,139,216,.18)}
.cat__lista li em{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:.68rem;
                  color:var(--humo); letter-spacing:.04em; white-space:nowrap}
.cat__mas{
  margin-top:auto; padding-top:18px; font-size:.86rem; font-weight:600; color:var(--indigo);
  display:flex; align-items:center; gap:8px;
}
.cat__mas span{transition:transform .28s var(--curva)}
.cat:hover .cat__mas span{transform:translateX(5px)}

/* La referencia del rombo lila */
.leyenda-top{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--humo);
}
.leyenda-top i{width:6px; height:6px; background:var(--lila); transform:rotate(45deg); flex:none;
               box-shadow:0 0 0 3px rgba(169,139,216,.18)}

/* ── Ficha de profesional ───────────────────────────────────────────────── */
.fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:22px}
.ficha{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva);
}
.ficha:hover{transform:translateY(-6px); box-shadow:var(--sombra-alta); border-color:var(--lila-velo)}
.ficha__foto{position:relative; background:var(--lavanda); overflow:hidden}
.ficha__foto img,.ficha__foto .sinfoto{width:100%; aspect-ratio:4/5; object-fit:cover}
/* Un velo abajo de la foto: las fotos vienen de distintas cámaras y así todas
   terminan igual de calmas donde arranca el texto. */
.ficha__foto::after{
  content:""; position:absolute; inset:auto 0 0; height:42%; pointer-events:none;
  background:linear-gradient(0deg,rgba(26,24,56,.30),rgba(26,24,56,0));
}
.ficha__marca{
  position:absolute; top:14px; left:14px; width:9px; height:9px; border-radius:50%; z-index:2;
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
.ficha__cuerpo{padding:20px 22px 22px; display:flex; flex-direction:column; gap:7px; flex:1}
.ficha__nombre{font-family:var(--display); font-size:1.42rem; letter-spacing:-.02em; line-height:1.15}
.ficha__titulo{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
               text-transform:uppercase; color:var(--lila-hondo)}
.ficha__bio{font-size:.9rem; color:var(--humo); margin:2px 0 0;
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ficha__pie{margin-top:auto; padding-top:15px; border-top:1px dashed var(--linea-tibia);
            display:flex; align-items:center; justify-content:space-between; gap:10px}
.ficha__pie span{font-family:var(--mono); font-size:.72rem; color:var(--humo)}
.ficha__ir{font-size:.86rem; font-weight:600; color:var(--indigo)}

/* ── Tira semanal (el detalle que hace de firma visual) ─────────────────── */
.semana{display:flex; gap:3px; font-family:var(--mono); font-size:.6rem}
.semana i{
  width:22px; height:22px; display:grid; place-items:center; border-radius:7px;
  background:var(--lavanda-humo); color:var(--humo); font-style:normal; letter-spacing:.02em;
  border:1px solid var(--linea);
}
.semana i.abre{background:var(--noche); color:var(--lavanda); border-color:var(--noche)}
.seccion--tinta .semana i{background:rgba(255,255,255,.07); color:rgba(246,244,252,.55);
                          border-color:rgba(255,255,255,.1)}
.seccion--tinta .semana i.abre{background:var(--lila); color:var(--noche); border-color:var(--lila)}

/* ── Servicios ──────────────────────────────────────────────────────────── */
.filtros{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px}
.filtro{
  padding:9px 18px; border-radius:999px; border:1px solid var(--linea); background:var(--blanco);
  font-size:.85rem; text-decoration:none; color:var(--carbon-80); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s var(--curva);
}
.filtro:hover{border-color:var(--lila); color:var(--lila-hondo); transform:translateY(-2px)}
.filtro.activo{background:var(--noche); color:var(--lavanda); border-color:var(--noche)}

/* El rótulo de cada grupo del catálogo */
.grupo{display:flex; align-items:baseline; gap:14px; margin:48px 0 6px}
.grupo:first-of-type{margin-top:6px}
.grupo h3{margin:0}
.grupo span{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
            color:var(--humo); white-space:nowrap}
.grupo::after{content:""; flex:1; height:1px; background:var(--lila-velo)}

.lista-serv{display:grid; gap:0; border-top:1px solid var(--linea-tibia)}
.serv{
  position:relative; display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center;
  padding:22px 6px 22px 4px; border-bottom:1px solid var(--linea-tibia); text-decoration:none;
}
/* La barrita lila que aparece a la izquierda al pasar por encima */
.serv::before{
  content:""; position:absolute; left:-4px; top:16%; bottom:16%; width:2px;
  background:var(--lila); transform:scaleY(0); transform-origin:center;
  transition:transform .3s var(--curva);
}
.serv:hover{background:linear-gradient(90deg,var(--lavanda-humo),rgba(246,244,252,0) 70%)}
.serv:hover::before{transform:scaleY(1)}
.serv__nom{font-family:var(--display); font-size:1.24rem; letter-spacing:-.02em}
.serv__desc{font-size:.89rem; color:var(--humo); margin:5px 0 0; max-width:60ch}
.serv__quien{font-size:.79rem; color:var(--indigo); margin:7px 0 0; font-weight:500}
.serv__dur{
  font-family:var(--mono); font-size:.71rem; color:var(--humo); white-space:nowrap;
  border:1px solid var(--linea); border-radius:999px; padding:5px 12px; background:var(--blanco);
}
.serv__precio{font-family:var(--mono); font-size:1rem; font-weight:700; white-space:nowrap;
              color:var(--noche)}
.serv__precio small{display:block; font-size:.58rem; font-weight:400; color:var(--lila-hondo);
                    letter-spacing:.16em; text-transform:uppercase; text-align:right}
@media (max-width:640px){
  .serv{grid-template-columns:1fr auto; gap:10px; padding:18px 4px}
  .serv__dur{grid-column:1; order:3; justify-self:start}
  .serv__precio{order:2}
}

/* ── Perfil de profesional ──────────────────────────────────────────────── */
.perfil{padding:clamp(30px,5vw,54px) 0 0}
.perfil__grid{display:grid; grid-template-columns:340px 1fr; gap:clamp(26px,4vw,54px);
              align-items:start}
.perfil__foto{border-radius:var(--r-lg); overflow:hidden; background:var(--lavanda);
              box-shadow:var(--sombra); position:sticky; top:100px; border:1px solid var(--linea)}
.perfil__foto img,.perfil__foto .sinfoto{aspect-ratio:4/5; width:100%; object-fit:cover}
.perfil__contacto{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--linea); background:var(--blanco); font-size:.84rem; text-decoration:none;
}
.chip:hover{border-color:var(--lila); color:var(--lila-hondo)}
.perfil h1{margin-bottom:6px; font-size:clamp(2.1rem,5vw,3.2rem)}
@media (max-width:820px){
  .perfil__grid{grid-template-columns:1fr}
  .perfil__foto{position:static; max-width:330px}
}

/* Cuadro de horario semanal */
.horario{border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
         background:var(--blanco); font-family:var(--mono); font-size:.82rem}
.horario div{display:flex; justify-content:space-between; gap:14px; padding:12px 16px;
             border-bottom:1px solid var(--linea)}
.horario div:last-child{border-bottom:0}
.horario div.hoy{background:var(--lavanda-humo); box-shadow:inset 2px 0 0 var(--lila)}
.horario .cerrado{color:var(--humo)}
.horario b{font-weight:400}

/* Galería */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px}
.galeria a{border-radius:var(--r); overflow:hidden; background:var(--lavanda); display:block;
           border:1px solid var(--linea)}
.galeria img{aspect-ratio:1; object-fit:cover; width:100%; display:block}

/* La portada del tratamiento: la placa de marca que lleva el nombre escrito.
   Va apaisada y ocupando todo el ancho, no en el cuadrado de las fotos. El
   cuadrado le comía los costados y el nombre quedaba cortado por la mitad
   —"ilación" en vez de "Depilación láser"—, en el celular y también en la
   computadora. Una foto se recorta sin drama; un texto no. */
/* El tope de 560 px es el que evita que en una pantalla grande la placa se
   estire a todo el ancho: el archivo mide 800 px, así que más allá de eso se
   agranda y se ve borrosa, y a 16/9 sobre 1150 px de ancho ocuparía media
   pantalla de alto. En el celular `min()` se resuelve en el 100% y ocupa todo. */
.galeria__portada{grid-column:1/-1; max-width:min(100%, 560px)}
.galeria__portada img{aspect-ratio:16/9; object-fit:contain; background:var(--perla)}

/* ── Reserva ────────────────────────────────────────────────────────────── */
.reserva{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:clamp(22px,4vw,46px);
         align-items:start; padding-bottom:76px}
.panel{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg);
       padding:clamp(20px,3vw,32px); margin-bottom:18px;
       box-shadow:0 12px 30px -26px rgba(26,24,56,.5)}
.panel__num{font-family:var(--mono); font-size:.68rem; color:var(--lila-hondo); letter-spacing:.2em}
.panel h2{font-size:1.5rem; margin:8px 0 20px}

.opciones{display:grid; gap:10px}
.opcion{
  display:flex; gap:14px; align-items:center; padding:15px 17px; border:1.5px solid var(--linea);
  border-radius:var(--r); cursor:pointer; background:var(--blanco); text-align:left; width:100%;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.opcion:hover{border-color:var(--violeta)}
.opcion[aria-pressed="true"]{border-color:var(--noche); background:var(--lavanda-humo);
                             box-shadow:inset 3px 0 0 var(--lila)}
.opcion__av{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
            background:var(--lavanda); display:grid; place-items:center; color:#fff;
            font-family:var(--display); font-size:1.05rem}
.opcion__t{font-weight:600; font-size:.97rem}
.opcion__s{font-size:.81rem; color:var(--humo)}
.opcion__p{margin-left:auto; font-family:var(--mono); font-weight:700; font-size:.9rem;
           text-align:right; white-space:nowrap}
.opcion__p small{display:block; font-weight:400; font-size:.66rem; color:var(--humo)}

/* Calendario de días.
   Los días bajan de renglón en vez de irse para el costado: con dos semanas
   abiertas, una tira horizontal deja la mitad de los días fuera de la pantalla
   y nada avisa que hay que deslizarla. */
.dias{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:9px;
      padding:4px 0 12px}
.dia{
  padding:12px 6px; border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--blanco); cursor:pointer; text-align:center;
  font-family:var(--mono); line-height:1.35;
}
.dia small{display:block; font-size:.62rem; text-transform:uppercase; color:var(--humo); letter-spacing:.1em}
.dia b{display:block; font-family:var(--display); font-size:1.5rem; font-weight:450}
.dia em{display:block; font-style:normal; font-size:.56rem; color:var(--indigo); letter-spacing:.06em}
.dia[aria-pressed="true"]{background:var(--noche); border-color:var(--noche); color:var(--blanco)}
.dia[aria-pressed="true"] small{color:var(--lila-claro)}
.dia[aria-pressed="true"] em{color:var(--lila)}
.dia[disabled]{opacity:.34; cursor:not-allowed}

/* Horarios: la agenda tipeada */
.horas{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.hora{
  padding:13px 4px; border:1.5px solid var(--linea); border-radius:11px; background:var(--blanco);
  font-family:var(--mono); font-size:.92rem; cursor:pointer; text-align:center;
}
.hora:hover{border-color:var(--indigo); color:var(--indigo)}
.hora[aria-pressed="true"]{background:var(--noche); border-color:var(--noche); color:var(--lavanda)}

.campo{margin-bottom:16px}
.campo label{display:block; font-size:.83rem; font-weight:600; margin-bottom:7px}
.campo input,.campo textarea,.campo select{
  width:100%; padding:13px 15px; border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--blanco); font-size:1rem; color:var(--carbon);
}
.campo input::placeholder,.campo textarea::placeholder{color:#B3B0C8}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:2px solid var(--violeta); outline-offset:1px; border-color:transparent}
.campo small{display:block; margin-top:6px; font-size:.77rem; color:var(--humo)}
.campos-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.campos-2{grid-template-columns:1fr}}

/* Resumen pegajoso */
.resumen{
  position:sticky; top:100px; color:rgba(246,244,252,.82);
  background:linear-gradient(165deg,var(--noche-2),var(--noche) 65%);
  border-radius:var(--r-lg); padding:28px; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 60px -34px rgba(26,24,56,.85);
}
.resumen::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--lila),transparent);
}
.resumen h3{color:var(--blanco); font-size:1.32rem; margin-bottom:18px}
.resumen dl{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:0 0 20px;
            font-size:.9rem}
.resumen dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
            color:var(--lila-claro); align-self:center}
.resumen dd{margin:0; text-align:right; font-weight:500; color:var(--blanco)}
.resumen .total{border-top:1px solid rgba(169,139,216,.28); padding-top:15px; margin-top:15px;
                display:flex; justify-content:space-between; align-items:baseline; color:var(--blanco)}
.resumen .total b{font-family:var(--mono); font-size:1.35rem; color:var(--lila-claro)}
.resumen .total[hidden]{display:none}   /* sin precio cargado no va la fila: el display:flex le ganaba al hidden */
.resumen .btn{width:100%; margin-top:18px}
.resumen .campo label{color:rgba(246,244,252,.86)}
@media (max-width:900px){
  .reserva{grid-template-columns:minmax(0,1fr)}
  .resumen{position:static}
}

/* ── Cómo se le pide turno a cada una ───────────────────────────────────── */
/* El sello sobre la foto: dice de entrada si se reserva online o si hay que
   escribirle, así nadie entra al perfil solo para descubrirlo.

   Va abajo y chico a propósito. Arriba a la derecha tapaba la cara, que es
   justo lo que la clienta viene a mirar; abajo se apoya sobre el velo oscuro
   que ya tiene la foto y se lee igual de bien. */
.ficha__modo{
  position:absolute; left:10px; bottom:10px; z-index:2; max-width:calc(100% - 20px);
  background:rgba(26,24,56,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(169,139,216,.45); color:var(--lila-claro);
  font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; line-height:1.4; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* En la ficha acostada del celular la foto mide 130 px: el sello se achica un
   poco más para entrar entero, sin cortarse. */
@media (max-width:520px){
  .ficha__modo{
    left:8px; bottom:8px; max-width:calc(100% - 16px);
    font-size:.46rem; letter-spacing:.05em; padding:3px 8px;
  }
}

/* El aviso de "lista filtrada por una profesional" */
.filtro-pro{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
  background:linear-gradient(100deg,rgba(169,139,216,.18),rgba(169,139,216,.04));
  border:1px solid var(--lila-velo); border-radius:12px; padding:11px 15px; font-size:.88rem;
}
.filtro-pro[hidden]{display:none}
.filtro-pro__salir{
  margin-left:auto; background:none; border:0; padding:0; cursor:pointer;
  color:var(--indigo); font-weight:600; font-size:.84rem; text-decoration:underline;
}
.filtro-pro__salir:hover{color:var(--lila-hondo)}

/* Las profesionales que no usan el turnero: se las contacta directo */
.panel--aparte{border-color:var(--lila-velo);
               background:linear-gradient(180deg,var(--blanco),var(--lavanda-humo))}
.aparte{display:grid; gap:10px}
.aparte__item{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:12px 14px;
}
.aparte__punto{width:10px; height:10px; border-radius:50%; flex:none;
               box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.aparte__datos{min-width:0; flex:1 1 160px}
.aparte__datos b{display:block; font-size:.96rem}
.aparte__datos small{display:block; color:var(--humo); font-size:.79rem; line-height:1.45}
.aparte__hace{color:var(--indigo) !important}
.aparte__acciones{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:520px){
  .aparte__acciones{width:100%}
  .aparte__acciones .btn{flex:1; justify-content:center}
}

/* ── El paso a paso de la reserva ───────────────────────────────────────── */
/* Cuatro pasos y una barra que dice en cuál va. Sin esto la clienta ve un
   formulario largo y no sabe cuánto le falta. */
/* Los rótulos de los pasos venían en 10 px y en gris claro: se leían con
   esfuerzo sobre el papel crema, y en un celular al sol directamente no se
   veían. Se subió el cuerpo y se oscurecieron los tonos. */
.pasos-mini{
  display:flex; align-items:center; gap:6px; list-style:none; margin:0 0 20px; padding:0;
  font-family:var(--mono); font-size:.73rem; letter-spacing:.08em; text-transform:uppercase;
}
.pasos-mini li{
  flex:1; display:flex; flex-direction:column; gap:7px; color:var(--carbon);
  min-width:0; text-align:left; font-weight:500;
}
.pasos-mini li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pasos-mini li::before{
  content:""; height:4px; border-radius:2px; background:var(--linea-tibia); display:block;
  transition:background .35s var(--curva);
}
.pasos-mini li.actual{color:var(--noche); font-weight:700}
.pasos-mini li.actual::before{background:var(--lila)}
.pasos-mini li.hecho{color:var(--indigo-hondo)}
.pasos-mini li.hecho::before{background:var(--violeta)}

/* Lo ya elegido, repetido arriba del paso para no tener que subir a mirar */
.panel__eco{
  margin:-12px 0 18px; font-size:.88rem; color:var(--indigo-hondo);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.panel__eco::before{content:"✓"; color:var(--indigo); font-weight:700}
.panel__eco[hidden]{display:none}
.panel__eco button{
  background:none; border:0; padding:0; color:var(--humo); font-size:.8rem;
  text-decoration:underline; cursor:pointer;
}

/* La barra fija de la reserva en el celular.
   El resumen con el botón de confirmar queda al final de la página: en el
   teléfono había que bajar dos pantallas para apretar "confirmar". */
.barra-reserva{display:none}
@media (max-width:900px){
  .barra-reserva{
    display:flex; align-items:center; gap:12px; position:fixed; inset:auto 0 0; z-index:75;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(165deg,var(--noche-2),var(--noche) 70%);
    box-shadow:0 -16px 34px -24px rgba(26,24,56,.9);
  }
  .barra-reserva::before{
    content:""; position:absolute; inset:0 0 auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--lila),transparent);
  }
  .barra-reserva__txt{
    flex:1; min-width:0; color:rgba(246,244,252,.72); font-size:.78rem; line-height:1.35;
  }
  .barra-reserva__txt b{display:block; color:var(--blanco); font-size:.9rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .barra-reserva .btn{flex:none}
  /* La clase la pone el JS de la reserva: es más seguro que :has(), que en
     navegadores viejos no existe y dejaría la barra tapando el formulario. */
  body.con-barra-reserva{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso{padding:14px 17px; border-radius:var(--r); font-size:.91rem; margin-bottom:16px;
       border-left:3px solid}
.aviso--ok{background:rgba(138,99,196,.12); border-color:var(--indigo); color:#146055}
.aviso--error{background:#FBE9EC; border-color:var(--alerta); color:#8A2237}
.aviso--info{background:rgba(169,139,216,.14); border-color:var(--lila); color:#5B3D93}
.vacio{text-align:center; padding:56px 20px; color:var(--humo)}
.vacio h3{margin-bottom:10px; color:var(--noche)}

/* Confirmación */
.ticket{
  max-width:530px; margin:0 auto; background:var(--blanco); border:1px solid var(--linea-tibia);
  border-radius:var(--r-lg); padding:40px 36px; text-align:center; box-shadow:var(--sombra-alta);
  position:relative; overflow:hidden;
}
.ticket::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--lila-hondo),var(--lila-claro),var(--lila-hondo));
}
.ticket__codigo{
  font-family:var(--mono); font-size:clamp(1.5rem,6vw,2rem); letter-spacing:.28em; color:var(--noche);
  background:var(--lavanda-humo); border:1px dashed var(--lila-velo);
  padding:16px 10px 16px 20px; border-radius:var(--r); margin:20px 0;
}
.ticket dl{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; text-align:left;
           margin:26px 0; font-size:.93rem}
.ticket dt{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.16em;
           color:var(--humo); align-self:center}
.ticket dd{margin:0; text-align:right; font-weight:600}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{
  background:linear-gradient(170deg,var(--noche-2) 0%,var(--noche) 55%);
  color:rgba(246,244,252,.7); padding:64px 0 28px; font-size:.91rem;
  position:relative; isolation:isolate; overflow:hidden;
}
.pie::before{
  content:""; position:absolute; inset:0; z-index:-1; background-image:var(--grano); opacity:.05;
}
.pie::after{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--lila-velo) 25%,var(--lila) 50%,var(--lila-velo) 75%,transparent);
}
.pie__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:38px; margin-bottom:40px}
.pie h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
        color:var(--lila-claro); font-weight:400; margin:0 0 16px}
.pie a{text-decoration:none; display:block; padding:5px 0; color:rgba(246,244,252,.7);
       transition:color .2s ease}
.pie a:hover{color:var(--lila-claro)}
.pie__marca{margin-bottom:14px}
.pie__lema{font-family:var(--firma); font-size:1.5rem; line-height:1.25; color:var(--lila-claro);
           max-width:22ch; margin:0 0 16px}
.pie__base{border-top:1px solid rgba(169,139,216,.22); padding-top:22px; display:flex;
           justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.68rem;
           font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
           color:rgba(246,244,252,.5)}
@media (max-width:720px){.pie__grid{grid-template-columns:1fr; gap:30px}}

/* Barra fija de móvil */
.barra-movil{display:none}
@media (max-width:880px){
  .barra-movil{
    display:flex; position:fixed; inset:auto 0 0; z-index:70; gap:10px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(250,249,253,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--linea-tibia);
    box-shadow:0 -14px 30px -24px rgba(26,24,56,.8);
  }
  .barra-movil::before{
    content:""; position:absolute; inset:0 0 auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--lila-velo),var(--lila),var(--lila-velo),transparent);
  }
  .barra-movil .btn{flex:1; padding-inline:12px}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* ── Opiniones y puntajes ──────────────────────────────────────────────── */
.puntaje{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.puntaje b{font-family:var(--display);font-size:2rem;line-height:1;color:var(--noche)}
.puntaje small{color:var(--humo);font-size:.85rem}
.puntaje--grande b{font-size:clamp(2.6rem,6vw,3.4rem)}
.estrellas{color:var(--lila);letter-spacing:.12em;font-size:1.02rem;line-height:1}

.opiniones{display:grid;gap:14px;margin-bottom:18px}
.opinion{
  position:relative; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:22px 24px; overflow:hidden;
}
/* La comilla de adorno: bien grande y muy tenue */
.opinion::before{
  content:"\201C"; position:absolute; top:-24px; right:12px; font-family:var(--display);
  font-size:7rem; color:var(--lila); opacity:.13; line-height:1; pointer-events:none;
}
.opinion__enc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.opinion__enc b{font-size:.97rem}
.opinion__enc small{color:var(--humo);font-size:.79rem}
.opinion p{margin:0;color:var(--carbon-80);font-size:.95rem}
.opinion__resp{margin-top:12px !important;padding-left:15px;border-left:2px solid var(--lila-velo);
               color:var(--humo) !important;font-size:.88rem !important}

/* Estrellas para elegir: se pintan de derecha a izquierda */
.estrellas-elegir{display:inline-flex;flex-direction:row-reverse;gap:5px}
.estrellas-elegir input{position:absolute;opacity:0;width:0;height:0}
.estrellas-elegir label{font-size:1.9rem;line-height:1;cursor:pointer;color:var(--linea);
                        transition:color .12s ease}
.estrellas-elegir label:hover,
.estrellas-elegir label:hover ~ label,
.estrellas-elegir input:checked ~ label{color:var(--lila)}
.estrellas-elegir input:focus-visible + label{outline:2.5px solid var(--violeta);outline-offset:2px}
.resumen .estrellas-elegir label{color:rgba(246,244,252,.26)}
.resumen .estrellas-elegir label:hover,
.resumen .estrellas-elegir label:hover ~ label,
.resumen .estrellas-elegir input:checked ~ label{color:var(--lila-claro)}

/* ── Ficha de un servicio ──────────────────────────────────────────────── */
.serv-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.serv-datos span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--carbon-80);border:1px solid var(--lila-velo);border-radius:999px;padding:8px 16px;
  background:var(--blanco);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .btn:hover,.ficha:hover,.cat:hover{transform:none}
}

/* ── reCAPTCHA ──────────────────────────────────────────────────────────── */
/* La insignia flotante de Google se planta abajo a la derecha y en el celular
   queda justo encima de la barra de reservar. Google deja esconderla siempre
   que se muestre la leyenda con los enlaces a su privacidad y sus términos:
   eso es lo que va en el pie. */
.grecaptcha-badge{visibility:hidden !important}
.pie__recaptcha{text-transform:none; letter-spacing:.04em}
.pie__recaptcha a{display:inline; padding:0; text-decoration:underline;
                  color:rgba(246,244,252,.62)}
.pie__recaptcha a:hover{color:var(--lila-claro)}

/* ══════════════════════════════════════════════════════════════════════════
   COMBOS
   El flyer del salón manda: título grande, promesa abajo y después los pasos
   numerados. Se respeta la regla de la casa —el lila va en hilos, nunca en
   bloques— así que el número del paso es lila sobre índigo noche y el resto
   respira en marfil.
   ══════════════════════════════════════════════════════════════════════════ */
.combos{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}

.combo{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea-tibia); border-radius:18px;
  text-decoration:none; color:inherit;
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva);
}
.combo::before{
  content:""; position:absolute; inset:0 0 auto; height:2px; z-index:1;
  background:linear-gradient(90deg,transparent,var(--lila-velo),var(--lila),var(--lila-velo),transparent);
}
.combo:hover{transform:translateY(-4px);border-color:var(--lila-velo);
             box-shadow:0 26px 50px -34px rgba(26,24,56,.55)}

.combo__foto{aspect-ratio:16/9;overflow:hidden;background:var(--lavanda-humo)}
.combo__foto img{width:100%;height:100%;object-fit:cover;
                 transition:transform .5s var(--curva)}
.combo:hover .combo__foto img{transform:scale(1.04)}

.combo__cuerpo{position:relative;padding:22px 22px 18px;display:flex;flex-direction:column;flex:1}

.combo__sello{
  position:absolute; top:-13px; right:20px;
  background:var(--noche); color:var(--lila-claro);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; border:1px solid var(--lila-velo);
}
.combo__nombre{font-family:var(--display);font-size:1.35rem;font-weight:500;
               line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.combo__bajada{color:var(--humo);font-size:.92rem;margin:0 0 16px;font-style:italic}

.combo__pasos{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.combo__pasos li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--tinta)}
.combo__pasos li span{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--lavanda-humo); border:1px solid var(--lavanda-honda);
  font-family:var(--mono); font-size:.68rem; color:var(--indigo);
}

.combo__pie{margin-top:auto;padding-top:15px;border-top:1px solid var(--linea);
            display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.combo__precio s{color:var(--humo);font-size:.85rem;margin-right:7px}
.combo__precio b{font-family:var(--display);font-size:1.4rem;color:var(--noche);letter-spacing:-.01em}
.combo__consultar{font-size:1rem !important;color:var(--humo) !important;font-weight:500}

.combo__equipo{display:flex;align-items:center;gap:-6px}
.combo__equipo img,.combo__equipo span{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid var(--blanco);margin-left:-8px;
  display:grid;place-items:center;color:#fff;font-size:.68rem;font-weight:600;
}
.combo__equipo img:first-child,.combo__equipo span:first-child{margin-left:0}
.combo__equipo small{margin-left:9px;color:var(--humo);font-size:.78rem}

/* ── La ficha del combo ─────────────────────────────────────────────────── */
.combo-ficha__top{
  background:linear-gradient(170deg,var(--lavanda-humo),var(--papel) 65%);
  padding:clamp(26px,4vw,44px) 0 clamp(30px,4vw,46px);
  border-bottom:1px solid var(--linea-tibia);
}
.combo-ficha__volver{display:inline-block;margin-bottom:14px;color:var(--humo);
                     text-decoration:none;font-size:.88rem}
.combo-ficha__volver:hover{color:var(--indigo)}
.combo-ficha__top h1{font-size:clamp(2rem,5vw,3.1rem);margin:6px 0 8px;line-height:1.08}
.combo-ficha__bajada{font-family:var(--display);font-style:italic;
                     font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--indigo-hondo);margin:0 0 20px}

.combo-ficha__datos{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.combo-ficha__precio s{color:var(--humo);font-size:1rem;margin-right:9px}
.combo-ficha__precio b{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.3rem);color:var(--noche)}
.combo-ficha__sello{
  margin-left:10px;background:var(--noche);color:var(--lila-claro);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;
}
.combo-ficha__dato{color:var(--humo);font-size:.92rem;position:relative;padding-left:18px}
.combo-ficha__dato::before{content:"";position:absolute;left:0;top:.5em;
                           width:5px;height:5px;border-radius:50%;background:var(--lila)}
.combo-ficha__texto{max-width:62ch;color:var(--tinta);margin:0 0 22px}
.combo-ficha__acciones{display:flex;gap:12px;flex-wrap:wrap}
.combo-ficha__nota{margin:22px 0 0;color:var(--humo);font-size:.86rem;
                   padding-left:14px;border-left:2px solid var(--lila-velo)}

/* ── Los pasos, en grande ───────────────────────────────────────────────── */
.pasos-combo{display:grid;gap:16px}
.pasoc{
  position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:16px;padding:22px 24px;
}
.pasoc::before{
  content:"";position:absolute;inset:18px auto 18px 0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--lila),var(--lila-velo));
}
.pasoc__enc{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pasoc__num{
  flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--noche);color:var(--lila-claro);
  font-family:var(--mono);font-size:.92rem;letter-spacing:.04em;
}
.pasoc__enc h3{font-family:var(--display);font-size:1.16rem;font-weight:500;margin:0;line-height:1.25}

.pasoc__items{list-style:none;margin:0;padding:0 0 0 58px;display:grid;gap:9px}
.pasoc__items li{position:relative;padding-left:17px;font-size:.95rem;line-height:1.5}
.pasoc__items li::before{content:"";position:absolute;left:0;top:.62em;
                        width:6px;height:6px;border-radius:50%;background:var(--violeta)}
.pasoc__items a{color:inherit;text-decoration:none;border-bottom:1px solid var(--lavanda-honda)}
.pasoc__items a:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.pasoc__opc,.pasoc__quien{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;margin-left:7px;white-space:nowrap;
}
.pasoc__opc{background:var(--linea-tibia);color:var(--humo)}
.pasoc__quien{background:var(--lavanda-humo);color:var(--indigo)}

@media (max-width:620px){
  .pasoc__items{padding-left:0}
  .pasoc__num{width:38px;height:38px;font-size:.82rem}
  .combos{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   EL ASISTENTE
   La regla de la casa vale también acá: el lila va en hilos y destellos,
   nunca en bloques. El botón es una piedra índigo noche con un aro de lila;
   lo que se mueve es un brillo que la recorre, no la pieza entera.
   Todo el movimiento se apaga solo con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
.chat-btn{
  position:fixed; right:22px; bottom:24px; z-index:80;
  display:flex; align-items:center; gap:10px;
  padding:11px 20px 11px 11px; border:0; border-radius:100px; cursor:pointer;
  background:linear-gradient(145deg,var(--noche-2),var(--noche) 60%);
  color:var(--lavanda); font:inherit; font-size:.9rem; font-weight:500;
  letter-spacing:.01em;
  box-shadow:0 18px 38px -18px rgba(26,24,56,.9), 0 0 0 1px rgba(169,139,216,.34);
  transition:transform .3s var(--curva-suave), box-shadow .3s var(--curva);
  isolation:isolate;
}
.chat-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 46px -18px rgba(26,24,56,.95), 0 0 0 1px var(--lila);
}
.chat-btn:active{transform:translateY(-1px)}

/* El hilo de luz que recorre el borde, muy lento y muy tenue. */
.chat-btn::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(115deg,transparent 28%,var(--lila-claro) 46%,var(--lila) 52%,transparent 72%);
  background-size:280% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:chatHilo 7s linear infinite;
  opacity:.85; pointer-events:none;
}
@keyframes chatHilo{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* El halo: late dos veces al entrar y se queda quieto. Llamar la atención una
   vez está bien; un botón parpadeando para siempre es una mosca. */
.chat-btn__halo{
  position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:0 0 0 0 rgba(169,139,216,.45);
  animation:chatHalo 2.6s var(--curva) 1.2s 2;
}
@keyframes chatHalo{
  0%{box-shadow:0 0 0 0 rgba(169,139,216,.45)}
  70%{box-shadow:0 0 0 16px rgba(169,139,216,0)}
  100%{box-shadow:0 0 0 0 rgba(169,139,216,0)}
}

/* El globo de diálogo. Es el ícono que todo el mundo lee como "acá se
   conversa"; la chispita al costado avisa que del otro lado contesta una
   asistente y no una persona. La palabra "Asistente" va SIEMPRE, también en
   celular: un botón redondo y mudo no se toca porque nadie sabe qué es. */
.chat-btn__globo{
  position:relative; flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%,rgba(236,232,250,.30),rgba(85,101,164,.42));
  box-shadow:inset 0 0 0 1px rgba(169,139,216,.55);
}
.chat-btn__icono{width:19px;height:19px;fill:none;stroke:var(--lavanda);
                 stroke-width:1.7;stroke-linejoin:round}
.chat-btn__icono circle{fill:var(--lavanda);stroke:none}
.chat-btn__chispa{
  position:absolute; top:-3px; right:-3px; width:13px; height:13px;
  display:grid; place-items:center;
}
.chat-btn__chispa svg{width:13px;height:13px;fill:var(--lila-claro);
                      animation:chatBrillo 4.5s ease-in-out infinite}
@keyframes chatBrillo{
  0%,72%,100%{opacity:.9;transform:scale(1) rotate(0)}
  84%{opacity:1;transform:scale(1.18) rotate(12deg)}
}
.chat-btn__txt{white-space:nowrap}
.chat-btn--abierto{padding:11px}
.chat-btn--abierto .chat-btn__txt{display:none}

/* ── La invitación ─────────────────────────────────────────────────────── */
/* Papel tibio con un hilo lila, como una tarjetita apoyada sobre el botón.
   Nada de globo amarillo con signo de admiración: tiene que notarse sin
   gritar, que es justo lo contrario de lo que hace un cartel de promoción. */
.chat-invita{
  position:fixed; right:22px; bottom:88px; z-index:79;
  width:min(272px, calc(100vw - 44px));
  padding:14px 30px 14px 16px; cursor:pointer;
  background:var(--papel); border-radius:16px;
  border:1px solid var(--linea-tibia);
  box-shadow:0 26px 50px -26px rgba(26,24,56,.6), 0 0 0 1px rgba(169,139,216,.18);
  animation:invitaEntra .5s var(--curva-suave) both;
}
.chat-invita[hidden]{display:none !important}
.chat-invita::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; margin:0 16px;
  background:linear-gradient(90deg,transparent,var(--lila-velo),var(--lila),var(--lila-velo),transparent);
}
/* La colita que apunta al botón */
.chat-invita::after{
  content:""; position:absolute; right:26px; bottom:-6px;
  width:12px; height:12px; background:var(--papel);
  border-right:1px solid var(--linea-tibia); border-bottom:1px solid var(--linea-tibia);
  transform:rotate(45deg);
}
.chat-invita b{display:block;font-family:var(--display);font-size:1rem;
               font-weight:500;color:var(--noche);margin-bottom:3px}
.chat-invita span{display:block;color:var(--humo);font-size:.83rem;line-height:1.45}
.chat-invita__x{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border:0;
  border-radius:50%; background:transparent; color:var(--humo);
  font-size:1.05rem; line-height:1; cursor:pointer;
}
.chat-invita__x:hover{background:var(--linea-tibia);color:var(--tinta)}
@keyframes invitaEntra{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:none}
}

/* ── El panel ──────────────────────────────────────────────────────────── */
.chat{
  position:fixed; right:22px; bottom:92px; z-index:81;
  width:min(392px, calc(100vw - 36px)); max-height:min(min(640px, 78vh), calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(178deg,var(--papel),var(--lavanda-humo) 78%);
  border-radius:22px; border:1px solid var(--linea-tibia);
  box-shadow:0 40px 80px -34px rgba(26,24,56,.62), 0 0 0 1px rgba(169,139,216,.16);
  transform-origin:bottom right;
  animation:chatEntra .42s var(--curva-suave) both;
}
.chat[hidden]{display:none !important}
@keyframes chatEntra{
  from{opacity:0;transform:translateY(18px) scale(.94)}
  to{opacity:1;transform:none}
}

.chat__enc{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 15px; color:var(--lavanda);
  background:linear-gradient(140deg,var(--noche-2),var(--noche) 68%);
}
.chat__enc::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--lila-velo),var(--lila),var(--lila-velo),transparent);
}
.chat__avatar{
  flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--lavanda);
  box-shadow:0 0 0 1px var(--lila-velo), 0 0 0 4px rgba(236,232,250,.10);
}
.chat__logo{width:34px;height:34px}
.chat__logo .logo__img{width:100%;height:100%;object-fit:contain}
.chat__quien{flex:1;min-width:0}
.chat__quien b{display:block;font-size:.93rem;font-weight:600;letter-spacing:.01em}
.chat__quien small{display:flex;align-items:center;gap:6px;
                   color:rgba(236,232,250,.60);font-size:.76rem;margin-top:1px}
.chat__punto{
  width:6px;height:6px;border-radius:50%;background:var(--violeta);flex:none;
  box-shadow:0 0 0 0 rgba(138,99,196,.6); animation:chatLate 2.4s ease-out infinite;
}
@keyframes chatLate{
  0%{box-shadow:0 0 0 0 rgba(138,99,196,.55)}
  60%{box-shadow:0 0 0 6px rgba(138,99,196,0)}
  100%{box-shadow:0 0 0 0 rgba(138,99,196,0)}
}
.chat__x{
  flex:none; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(236,232,250,.08); display:grid; place-items:center;
  transition:background .2s ease, transform .2s var(--curva);
}
.chat__x svg{width:15px;height:15px;fill:none;stroke:rgba(236,232,250,.75);
             stroke-width:2;stroke-linecap:round}
.chat__x:hover{background:rgba(236,232,250,.16);transform:rotate(90deg)}
.chat__x:hover svg{stroke:var(--lila-claro)}

/* ── El hilo de mensajes ───────────────────────────────────────────────── */
.chat__hilo{
  flex:1; overflow-y:auto; padding:16px 15px 6px;
  display:flex; flex-direction:column; gap:11px;
  min-height:160px; overscroll-behavior:contain; scrollbar-width:thin;
}
.chat__hilo::-webkit-scrollbar{width:6px}
.chat__hilo::-webkit-scrollbar-thumb{background:var(--linea-tibia);border-radius:3px}

.chat__msg{
  max-width:86%; padding:11px 14px; border-radius:16px;
  font-size:.92rem; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  animation:chatBurbuja .34s var(--curva-suave) both;
}
@keyframes chatBurbuja{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}

.chat__msg--bot{
  align-self:flex-start; background:var(--blanco); color:var(--tinta);
  border:1px solid var(--linea); border-bottom-left-radius:6px;
  box-shadow:0 8px 20px -16px rgba(26,24,56,.6);
}
.chat__msg--yo{
  align-self:flex-end; border-bottom-right-radius:6px; color:var(--lavanda);
  background:linear-gradient(145deg,var(--noche-2),var(--noche));
  box-shadow:0 10px 22px -16px rgba(26,24,56,.9);
}
.chat__msg a{color:var(--indigo);word-break:break-all;text-decoration:none;
             border-bottom:1px solid var(--lavanda-honda)}
.chat__msg a:hover{border-bottom-color:var(--indigo)}
.chat__msg--yo a{color:var(--lila-claro);border-bottom-color:var(--lila-velo)}

.chat__msg--pensando{display:flex;gap:6px;align-items:center;padding:14px 16px}
.chat__msg--pensando i{
  width:6px;height:6px;border-radius:50%;background:var(--lila);
  animation:chatPunto 1.25s infinite ease-in-out;
}
.chat__msg--pensando i:nth-child(2){animation-delay:.16s}
.chat__msg--pensando i:nth-child(3){animation-delay:.32s}
@keyframes chatPunto{
  0%,64%,100%{opacity:.28;transform:translateY(0) scale(.9)}
  32%{opacity:1;transform:translateY(-4px) scale(1)}
}

/* ── Atajos ────────────────────────────────────────────────────────────── */
.chat__atajos{display:flex;flex-wrap:wrap;gap:7px;padding:10px 15px 4px}
.chat__atajos:empty{display:none}
.chat__atajos button{
  background:var(--blanco); border:1px solid var(--lavanda-honda); color:var(--indigo-hondo);
  padding:7px 13px; border-radius:100px; font:inherit; font-size:.81rem; cursor:pointer;
  animation:chatBurbuja .34s var(--curva-suave) both;
  transition:background .2s ease, border-color .2s ease, transform .2s var(--curva);
}
.chat__atajos button:nth-child(2){animation-delay:.05s}
.chat__atajos button:nth-child(3){animation-delay:.1s}
.chat__atajos button:nth-child(4){animation-delay:.15s}
.chat__atajos button:hover{background:var(--lavanda);border-color:var(--violeta);transform:translateY(-2px)}

/* ── Escribir ──────────────────────────────────────────────────────────── */
.chat__form{
  display:flex; gap:9px; padding:12px 14px 10px;
  border-top:1px solid var(--linea-tibia); background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.chat__form input{
  flex:1; min-width:0; padding:12px 16px; border-radius:100px;
  border:1.5px solid var(--linea); background:var(--blanco);
  font:inherit; font-size:.92rem; color:var(--tinta);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.chat__form input:focus{
  outline:none; border-color:var(--violeta);
  box-shadow:0 0 0 3px rgba(138,99,196,.14);
}
.chat__form button{
  flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(145deg,var(--noche-2),var(--noche));
  display:grid; place-items:center;
  box-shadow:0 0 0 1px rgba(169,139,216,.34);
  transition:transform .22s var(--curva-suave), box-shadow .22s ease;
}
.chat__form button:hover{transform:scale(1.07);box-shadow:0 0 0 1px var(--lila)}
.chat__form button:active{transform:scale(.97)}
.chat__form button svg{width:18px;height:18px;fill:var(--lila-claro);
                       transform:translateX(1px)}

.chat__pie{
  margin:0; padding:0 16px 12px; background:rgba(255,255,255,.72);
  color:var(--humo); font-size:.72rem; line-height:1.45;
}
.chat__pie a{color:var(--indigo)}

/* En el celular la barra fija de abajo ya ocupa lugar: el chat se corre para
   arriba y se abre casi a pantalla completa, que es como se usa un chat. */
@media (max-width:880px){
  .chat-btn{bottom:calc(92px + env(safe-area-inset-bottom));right:14px;
            padding:9px 16px 9px 9px;font-size:.85rem}
  .chat-btn__globo{width:30px;height:30px}
  .chat-btn__icono{width:17px;height:17px}
  .chat-invita{right:14px;bottom:calc(150px + env(safe-area-inset-bottom))}
  .chat-invita::after{right:20px}
  .chat{
    right:10px; left:10px; width:auto;
    bottom:calc(152px + env(safe-area-inset-bottom));
    max-height:calc(100vh - 240px); border-radius:20px;
  }
}

/* Quien pidió menos movimiento no ve nada moverse: ni el hilo lila, ni el
   halo, ni el destello, ni la entrada del panel. */
@media (prefers-reduced-motion:reduce){
  .chat,.chat__msg,.chat__atajos button,.chat-btn::after,.chat-btn__halo,.chat-invita,
  .chat-btn__chispa svg,.chat__punto,.chat__msg--pensando i{animation:none}
  .chat-btn,.chat-btn:hover,.chat__x:hover,.chat__form button:hover{transform:none}
}

/* Los botones que acompañan una respuesta. Se leen como acción, no como enlace:
   fondo índigo noche con la flecha en lila, del lado de la burbuja del bot.
   Antes acá iba la dirección cruda y en el celular ocupaba dos renglones. */
.chat__acciones{
  display:flex; flex-wrap:wrap; gap:7px;
  align-self:flex-start; max-width:92%; margin:-3px 0 2px;
  animation:chatBurbuja .34s var(--curva-suave) both;
}
.chat__accion{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:100px; text-decoration:none;
  background:linear-gradient(145deg,var(--noche-2),var(--noche));
  color:var(--lavanda); font-size:.84rem; font-weight:500; line-height:1.2;
  box-shadow:0 0 0 1px rgba(169,139,216,.30), 0 10px 22px -16px rgba(26,24,56,.9);
  transition:transform .2s var(--curva-suave), box-shadow .2s ease;
}
.chat__accion::after{
  content:"→"; color:var(--lila-claro); font-size:.92rem; line-height:1;
  transition:transform .2s var(--curva);
}
.chat__accion:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--lila), 0 14px 26px -16px rgba(26,24,56,.95)}
.chat__accion:hover::after{transform:translateX(3px)}
.chat__accion:nth-child(2){animation-delay:.05s}
.chat__accion:nth-child(3){animation-delay:.1s}

@media (prefers-reduced-motion:reduce){
  .chat__acciones{animation:none}
  .chat__accion:hover{transform:none}
  .chat__accion:hover::after{transform:none}
}

/* El horario que queda pegado al turno anterior. Se marca con el hilo lila de
   la casa —no con un color chillón— y con un puntito: la clienta lo elige sin
   que haga falta explicarle nada, y la agenda del salón se llena junta. */
.hora--seguida{
  border-color:var(--lila-velo);
  background:linear-gradient(180deg,#fff,rgba(169,139,216,.07));
  position:relative;
}
.hora--seguida::after{
  content:""; position:absolute; top:5px; right:5px;
  width:5px; height:5px; border-radius:50%; background:var(--lila);
}
.hora--seguida[aria-pressed="true"]::after{background:var(--lila-claro)}