/* FINDLEY SERVICES · Estilos compartidos por todas las páginas
   Mismo sistema del grupo (Plus Jakarta Sans, logo apilado, animaciones al hacer scroll),
   con paleta propia: tinta violeta + lima eléctrica + hueso. */
:root {
  --noche: #110e1b;
  --noche-2: #1a1628;
  --noche-3: #272138;
  --hueso: #f7f5f1;
  --hueso-2: #eeebe4;
  --lima: #d7ff3c;
  --lima-2: #e6ff7a;
  --lima-osc: #4f6800;
  --coral: #ff5c7a;
  --tinta: #15121f;
  --gris: #625c70;
  --gris-claro: #aba4b9;
  --linea: #e5e0d7;
  --linea-osc: rgba(255, 255, 255, .1);
  --verde: #14a17a;
  --ambar: #f5a524;
  --wa: #25d366;
  --radio: 22px;
  --sombra: 0 18px 50px -24px rgba(17, 14, 27, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--tinta); background: var(--hueso); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--lima); color: var(--noche); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.contenedor { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.angosto { max-width: 860px; }
.solo-movil { display: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; border-radius: 6px; }
em { font-style: normal; font-weight: inherit; }
.nota { display: block; color: var(--gris); font-size: 13px; line-height: 1.5; margin-top: 10px; }
.oscuro .nota { color: var(--gris-claro); }
input[type="range"] { width: 100%; accent-color: var(--noche); cursor: pointer; }
.oscuro input[type="range"] { accent-color: var(--lima); }
.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: .82; font-weight: 800; letter-spacing: -.045em; font-size: 22px; }
.logo b { color: #fff; font-weight: 800; }
.logo i { color: var(--lima); font-style: normal; padding-left: .55em; }

/* ---------- Barra ---------- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.barra .contenedor { display: flex; align-items: center; gap: 20px; height: 74px; }
.barra.con-fondo, .pag-perfil .barra, .pag-explorar .barra, .pag-mis-reservas .barra { background: rgba(17, 14, 27, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea-osc); }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { color: #d2cce0; font-weight: 600; font-size: 14.5px; padding: 8px 13px; border-radius: 999px; transition: color .2s, background .2s; }
.menu a:hover, .menu a.activo { color: #fff; background: rgba(255, 255, 255, .08); }
.barra-acciones { display: flex; align-items: center; gap: 4px; }
.icono-barra { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: none; border: 0; cursor: pointer; transition: background .2s; }
.icono-barra:hover { background: rgba(255,255,255,.1); }
.icono-barra .i { width: 21px; height: 21px; }
.burbuja { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--lima); color: var(--noche); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.btn-menu { display: none; background: none; border: 0; color: #fff; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; }
.btn-menu .i { width: 24px; height: 24px; margin: auto; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .i { width: 18px; height: 18px; }
.btn-lima { background: var(--lima); color: var(--noche); box-shadow: 0 12px 30px -12px rgba(215, 255, 60, .8); }
.btn-lima:hover { background: var(--lima-2); }
.btn-negro { background: var(--noche); color: #fff; }
.btn-negro:hover { background: var(--noche-3); }
.btn-claro { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.oscuro .btn-claro, .hero .btn-claro, .cabecera-pag .btn-claro, .cta .btn-claro { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-chico { padding: 10px 18px; font-size: 14px; }
.btn-ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.enlace { background: none; border: 0; color: var(--lima-osc); font-weight: 700; cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.oscuro .enlace { color: var(--lima); }

/* ---------- Textos ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 800; color: var(--lima-osc); margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 3px; background: currentColor; border-radius: 2px; }
.oscuro .eyebrow, .hero .eyebrow, .cabecera-pag .eyebrow, .cta .eyebrow { color: var(--lima); }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; font-weight: 800; }
h2 { font-size: clamp(32px, 4.6vw, 52px); }
h3 { letter-spacing: -.02em; line-height: 1.25; }
h1 em, h2 em { background: linear-gradient(transparent 60%, rgba(215,255,60,.75) 60%, rgba(215,255,60,.75) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oscuro h2 em, .hero h1 em, .cabecera-pag h1 em, .cta h2 em { background: none; color: var(--lima); }
.titulo-seccion { display: grid; gap: 8px; margin-bottom: 38px; max-width: 780px; }
.titulo-seccion p:not(.eyebrow) { color: var(--gris); font-size: 17px; }
.oscuro .titulo-seccion p:not(.eyebrow) { color: var(--gris-claro); }
.titulo-fila { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.titulo-fila .titulo-seccion { margin-bottom: 0; }
.lista-check { list-style: none; display: grid; gap: 9px; margin-top: 16px; }
.lista-check li { padding-left: 28px; position: relative; font-weight: 500; font-size: 15px; }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23110e1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---------- Secciones ---------- */
.seccion { padding: 100px 0; }
.oscuro { background: var(--noche); color: #fff; }
.suave { background: var(--hueso-2); }
.blanco { background: #fff; }
.aviso-ejemplo { margin: 22px 0 0; background: #fbffe0; border: 1px solid #d9ec7a; color: #4a5a00; padding: 11px 16px; border-radius: 14px; font-size: 14px; }
.hero .aviso-ejemplo, .cabecera-pag .aviso-ejemplo { background: rgba(215,255,60,.08); border-color: rgba(215,255,60,.25); color: #e9ffa0; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--noche); color: #fff; padding: 132px 0 64px; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; background:
  radial-gradient(520px 420px at 82% 30%, rgba(215, 255, 60, .14), transparent 62%),
  radial-gradient(640px 460px at 8% 100%, rgba(255, 92, 122, .2), transparent 60%),
  radial-gradient(500px 400px at 50% -10%, rgba(124, 92, 255, .25), transparent 60%),
  linear-gradient(#141020, #0c0a14); }
.hero > .contenedor { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.8vw, 74px); margin-bottom: 20px; }
.hero-sub { color: #cfc8dc; font-size: 18.5px; max-width: 590px; }
.hero-sub strong { color: #fff; }
.palabra-giratoria { display: inline-block; color: var(--lima); min-width: 4ch; transition: opacity .3s, transform .3s; }
.palabra-giratoria.sale { opacity: 0; transform: translateY(12px); }

/* Buscador */
.buscador { position: relative; margin-top: 30px; display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 6px; background: #fff; border-radius: 22px; padding: 7px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); max-width: 640px; }
.buscador label { display: grid; padding: 8px 14px; border-radius: 16px; cursor: text; transition: background .2s; color: var(--tinta); }
.buscador label:hover { background: var(--hueso); }
.buscador label span { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.buscador input, .buscador select { border: 0; outline: 0; background: none; font-weight: 600; font-size: 15.5px; width: 100%; padding: 2px 0; }
.buscador .btn { border-radius: 16px; padding: 0 22px; }
.sugerencias { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; color: var(--tinta); border-radius: 18px; box-shadow: var(--sombra); padding: 8px; z-index: 5; max-height: 360px; overflow: auto; }
.sugerencias a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-weight: 600; font-size: 14.5px; }
.sugerencias a:hover, .sugerencias a.foco { background: var(--hueso); }
.sugerencias small { color: var(--gris); font-weight: 500; margin-left: auto; font-size: 12.5px; }
.sugerencias .mini-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.sugerencias .mini-icono .i { width: 18px; height: 18px; }
.sugerencias .mini-avatar { width: 34px; height: 34px; flex: none; }
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.atajos a { font-size: 13.5px; font-weight: 600; color: #dcd6e8; border: 1px solid rgba(255,255,255,.15); padding: 6px 13px; border-radius: 999px; transition: border-color .2s, color .2s; }
.atajos a:hover { border-color: var(--lima); color: #fff; }

/* Mosaico del hero */
.mosaico { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; transform: rotate(-4deg); }
.mosaico .tesela { border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 1; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); animation: flotar 7s ease-in-out infinite; }
.mosaico .tesela:nth-child(3n+2) { animation-delay: -2.3s; margin-top: 28px; }
.mosaico .tesela:nth-child(3n) { animation-delay: -4.6s; }
.mosaico .tesela svg { width: 100%; height: 100%; }
.mosaico .tesela span { position: absolute; left: 8px; bottom: 8px; background: rgba(17,14,27,.78); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.contadores { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--linea-osc); }
.contadores b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.contadores span { color: var(--gris-claro); font-size: 14px; }

/* ---------- Categorías ---------- */
.grupos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip { border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--noche); }
.chip.activo, .chip[aria-pressed="true"] { background: var(--noche); border-color: var(--noche); color: #fff; }
.chip .i { width: 16px; height: 16px; }
.oscuro .chip { background: transparent; border-color: rgba(255,255,255,.18); color: #fff; }
.oscuro .chip.activo, .oscuro .chip[aria-pressed="true"] { background: var(--lima); color: var(--noche); border-color: var(--lima); }
.grid-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.cat { position: relative; background: #fff; border-radius: 20px; padding: 18px; display: grid; gap: 12px; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.cat:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.cat .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; }
.cat .ico .i { width: 25px; height: 25px; }
.cat b { font-size: 15.5px; letter-spacing: -.01em; line-height: 1.25; }
.cat small { color: var(--gris); font-size: 13px; }
.cat::after { content: "→"; position: absolute; right: 16px; top: 18px; font-weight: 800; opacity: 0; transform: translateX(-6px); transition: all .25s; }
.cat:hover::after { opacity: 1; transform: none; }

/* ---------- Tarjeta de profesional ---------- */
.grid-pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.pro { position: relative; color: var(--tinta); background: #fff; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.pro:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.pro-obras { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 16 / 10; background: var(--hueso-2); }
.pro-obras > div { overflow: hidden; }
.pro-obras > div:first-child { grid-row: span 2; }
.pro-obras svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pro:hover .pro-obras svg { transform: scale(1.05); }
.pro-cuerpo { padding: 0 18px 18px; display: grid; gap: 6px; flex: 1; align-content: start; }
.pro-cabeza { display: flex; align-items: end; gap: 10px; margin-top: -26px; position: relative; }
.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: -.02em; flex: none; overflow: hidden; }
.pro-cabeza .avatar { width: 58px; height: 58px; font-size: 20px; border: 4px solid #fff; }
.insignias { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 4px; }
.insignia { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--hueso); color: var(--tinta); white-space: nowrap; }
.insignia .i { width: 13px; height: 13px; }
.insignia.top { background: var(--noche); color: var(--lima); }
.insignia.hoy { background: #e3f8ef; color: #0b7a59; }
.insignia.verif { background: #eaf2ff; color: #2856b8; }
.pro h3 { font-size: 17.5px; margin-top: 4px; }
.pro h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pro-sub { color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.pro-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gris); flex-wrap: wrap; }
.estrellas { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta); font-weight: 800; }
.estrellas .i { width: 15px; height: 15px; fill: var(--ambar); stroke: var(--ambar); }
.pro-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.pro-pie small { color: var(--gris); font-size: 12px; display: block; }
.pro-pie b { font-size: 19px; letter-spacing: -.02em; }
.pro-acciones { display: flex; gap: 6px; position: relative; z-index: 2; }
.btn-redondo { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--linea); background: #fff; color: var(--tinta); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.btn-redondo:hover { border-color: var(--noche); }
.btn-redondo .i { width: 18px; height: 18px; }
.btn-redondo.activo { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn-redondo.activo .i { fill: currentColor; }
.btn-redondo.comparar.activo { background: var(--noche); border-color: var(--noche); }
.btn-redondo.comparar.activo .i { fill: none; }
.pro .fav-flotante { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,.92); border: 0; }
.distancia { font-weight: 700; color: var(--tinta); }

/* Carrusel horizontal */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 300px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; }
.carrusel > * { scroll-snap-align: start; }

/* ---------- Cómo funciona ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: paso; }
.paso { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: var(--radio); padding: 26px; position: relative; }
.paso::before { counter-increment: paso; content: "0" counter(paso); font-weight: 800; font-size: 13px; color: var(--lima); letter-spacing: .1em; }
.paso h3 { font-size: 19px; margin: 14px 0 8px; }
.paso p { color: var(--gris-claro); font-size: 15px; }
.paso .i { width: 30px; height: 30px; color: var(--lima); position: absolute; right: 22px; top: 22px; }

/* ---------- Wow (funciones) ---------- */
.wow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wow { background: #fff; border-radius: var(--radio); padding: 24px; border: 1px solid var(--linea); display: grid; gap: 10px; align-content: start; transition: transform .25s, box-shadow .25s; }
.wow:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.wow .num { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--lima-osc); }
.wow .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--noche); color: var(--lima); display: grid; place-items: center; }
.wow .ico .i { width: 24px; height: 24px; }
.wow h3 { font-size: 18.5px; }
.wow p { color: var(--gris); font-size: 14.5px; }
.wow a.enlace { justify-self: start; text-decoration: none; }

/* ---------- Antes / después ---------- */
.ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.antes-despues { position: relative; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; user-select: none; touch-action: pan-y; background: #222; }
.antes-despues > svg, .antes-despues .capa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.antes-despues .capa { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.antes-despues .linea { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.antes-despues .linea::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--noche); font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: 18px; letter-spacing: 2px; }
.antes-despues input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.antes-despues .etq { position: absolute; top: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(17,14,27,.75); color: #fff; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.antes-despues .etq.a { left: 12px; }
.antes-despues .etq.d { right: 12px; background: var(--lima); color: var(--noche); }
.ad-pie { margin-top: 10px; font-size: 14px; color: var(--gris-claro); }
.ad-pie b { color: #fff; }

/* ---------- Match (quiz) ---------- */
.match { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.match-caja { color: var(--tinta); background: #fff; border-radius: 26px; padding: 28px; box-shadow: var(--sombra); }
.match-progreso { height: 6px; background: var(--hueso-2); border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.match-progreso i { display: block; height: 100%; background: var(--noche); width: 25%; transition: width .4s; border-radius: inherit; }
.match-paso h3 { font-size: 22px; margin-bottom: 16px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { border: 1.5px solid var(--linea); background: #fff; border-radius: 14px; padding: 11px 15px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: all .2s; display: inline-flex; gap: 8px; align-items: center; }
.opcion:hover { border-color: var(--noche); transform: translateY(-2px); }
.opcion .i { width: 18px; height: 18px; }
.match-res { display: grid; gap: 12px; }
.match-fila { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--linea); transition: background .2s; }
.match-fila:hover { background: var(--hueso); }
.match-fila .avatar { width: 50px; height: 50px; font-size: 17px; }
.match-fila div { flex: 1; min-width: 0; }
.match-fila b { display: block; }
.match-fila small { color: var(--gris); font-size: 13px; }
.match-fila .pct { font-weight: 800; font-size: 20px; color: var(--lima-osc); }

/* ---------- Paquetes ---------- */
.paquetes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.paquete { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: var(--radio); padding: 22px; display: grid; gap: 12px; align-content: start; }
.paquete h3 { font-size: 20px; }
.paquete p { color: var(--gris-claro); font-size: 14.5px; }
.paquete ul { list-style: none; display: grid; gap: 8px; }
.paquete li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.paquete li .avatar { width: 32px; height: 32px; font-size: 12px; }
.paquete li span:not(.avatar) { flex: 1; line-height: 1.3; }
.paquete li small { display: block; color: var(--gris-claro); font-size: 12px; }
.paquete .precio { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linea-osc); }
.paquete .precio b { font-size: 26px; color: var(--lima); letter-spacing: -.03em; }
.paquete .precio s { color: var(--gris-claro); }

/* ---------- Cabecera de página ---------- */
.cabecera-pag { position: relative; background: var(--noche); color: #fff; padding: 128px 0 56px; overflow: hidden; }
.cabecera-pag::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 360px at 85% 20%, rgba(215,255,60,.13), transparent 60%), radial-gradient(500px 360px at 0% 100%, rgba(255,92,122,.16), transparent 60%); }
.cabecera-pag .contenedor { position: relative; }
.cabecera-pag h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 14px; }
.cabecera-pag p.sub { color: #cfc8dc; font-size: 18px; max-width: 680px; }

/* ---------- Explorar ---------- */
.explorar { display: grid; grid-template-columns: 270px 1fr; gap: 30px; padding-top: 30px; padding-bottom: 90px; align-items: start; }
.filtros { position: sticky; top: 92px; background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); padding: 20px; display: grid; gap: 20px; max-height: calc(100vh - 110px); overflow: auto; }
.filtros h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin-bottom: 8px; }
.filtros select, .campo select, .campo input, .campo textarea { width: 100%; border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 12px; background: #fff; font-weight: 600; font-size: 14.5px; }
.filtros select:focus, .campo select:focus, .campo input:focus, .campo textarea:focus { outline: 0; border-color: var(--noche); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 3px 0; }
.interruptor input { appearance: none; width: 40px; height: 23px; border-radius: 999px; background: var(--hueso-2); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.interruptor input:checked { background: var(--noche); }
.interruptor input:checked::after { transform: translateX(17px); background: var(--lima); }
.rango-precio output { font-weight: 800; }
.cats-filtro { display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.cats-filtro button { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 7px 8px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; }
.cats-filtro button:hover { background: var(--hueso); }
.cats-filtro button.activo { background: var(--noche); color: #fff; }
.cats-filtro button .i { width: 17px; height: 17px; flex: none; }
.cats-filtro button small { margin-left: auto; color: var(--gris); font-weight: 600; }
.cats-filtro button.activo small { color: var(--gris-claro); }
.resultados-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.resultados-barra p { color: var(--gris); }
.resultados-barra b { color: var(--tinta); }
.resultados-barra select { border: 1.5px solid var(--linea); border-radius: 999px; padding: 8px 14px; font-weight: 700; background: #fff; }
.vacio { text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--radio); border: 1px dashed var(--linea); color: var(--gris); }
.vacio b { display: block; color: var(--tinta); font-size: 19px; margin-bottom: 6px; }
.btn-filtros { display: none; }
.cat-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--noche); color: #fff; border-radius: var(--radio); padding: 20px 22px; margin-bottom: 20px; }
.cat-banner .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.cat-banner .ico .i { width: 28px; height: 28px; }
.cat-banner p { color: var(--gris-claro); font-size: 14.5px; }
.cat-banner h2 { font-size: 24px; }
.herramienta-embebida { margin-bottom: 26px; }

/* ---------- Perfil ---------- */
.portada { position: relative; height: 370px; overflow: hidden; margin-top: 74px; }
.portada .portada-arte { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; opacity: .55; }
.portada .portada-arte svg { width: 100%; height: 100%; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,14,27,.1), rgba(17,14,27,.85)); }
.perfil-cabeza { position: relative; margin-top: -196px; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: end; color: #fff; padding-bottom: 26px; }
.perfil-cabeza .avatar { width: 136px; height: 136px; font-size: 46px; border: 6px solid var(--hueso); box-shadow: var(--sombra); }
.perfil-cabeza h1 { font-size: clamp(30px, 4vw, 46px); }
.perfil-cabeza .quien { color: #e2dcec; font-weight: 600; }
.perfil-datos { margin-top: 30px; background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 26px; }
.perfil-datos div { padding: 16px 18px; border-right: 1px solid var(--linea); }
.perfil-datos div:last-child { border-right: 0; }
.perfil-datos b { display: block; font-size: 22px; letter-spacing: -.03em; }
.perfil-datos small { color: var(--gris); font-size: 13px; }
.perfil-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 30px; align-items: start; padding-bottom: 90px; }
.pestanas { position: sticky; top: 74px; z-index: 5; background: var(--hueso); display: flex; gap: 4px; padding: 12px 0; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.pestanas a { padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--gris); white-space: nowrap; }
.pestanas a:hover { color: var(--tinta); background: #fff; }
.pestanas a.activo { background: var(--noche); color: #fff; }
.bloque { background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); padding: 26px; margin-bottom: 20px; }
.bloque > h2 { font-size: 26px; margin-bottom: 6px; }
.bloque > p.sub { color: var(--gris); margin-bottom: 18px; }
.filtro-obras { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.obra { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; cursor: zoom-in; border: 0; padding: 0; background: var(--hueso-2); }
.obra svg { width: 100%; height: 100%; transition: transform .5s; }
.obra:hover svg { transform: scale(1.06); }
.obra figcaption, .obra .pie-obra { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 12px; font-weight: 700; text-align: left; opacity: 0; transition: opacity .3s; }
.obra:hover .pie-obra, .obra:focus-visible .pie-obra { opacity: 1; }
.obra .likes { position: absolute; top: 8px; right: 8px; background: rgba(17,14,27,.7); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; display: flex; gap: 4px; align-items: center; }
.obra .likes .i { width: 12px; height: 12px; fill: var(--coral); stroke: var(--coral); }
.servicios { display: grid; gap: 8px; }
.servicio { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--linea); cursor: pointer; transition: border-color .2s, background .2s; }
.servicio:hover { border-color: var(--noche); }
.servicio.elegido { border-color: var(--noche); background: #fbffe8; }
.servicio b { display: block; font-size: 15.5px; }
.servicio small { color: var(--gris); font-size: 13px; }
.servicio .precio { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.servicio .marca { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linea); display: grid; place-items: center; transition: all .2s; }
.servicio.elegido .marca { background: var(--noche); border-color: var(--noche); color: var(--lima); }
.servicio .marca .i { width: 15px; height: 15px; }
.resenas-top { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-bottom: 22px; }
.resenas-top .grande { font-size: 60px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.barras-estrellas { display: grid; gap: 6px; }
.barras-estrellas div { display: grid; grid-template-columns: 26px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--gris); font-weight: 700; }
.barras-estrellas i { height: 8px; background: var(--hueso-2); border-radius: 999px; overflow: hidden; }
.barras-estrellas i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--ambar); border-radius: inherit; }
.resena { padding: 16px 0; border-top: 1px solid var(--linea); display: grid; gap: 6px; }
.resena-cab { display: flex; align-items: center; gap: 10px; }
.resena-cab .avatar { width: 38px; height: 38px; font-size: 14px; }
.resena-cab small { color: var(--gris); display: block; font-size: 12.5px; }
.resena .serv { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.fila-estrellas { display: inline-flex; gap: 1px; }
.fila-estrellas .i { width: 14px; height: 14px; fill: var(--ambar); stroke: var(--ambar); }
.fila-estrellas .i.vacia { fill: none; stroke: #d9d3c6; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.info-grid h4 { font-size: 14px; margin-bottom: 6px; }
.info-grid p, .info-grid li { color: var(--gris); font-size: 14.5px; }
.horario { list-style: none; display: grid; gap: 3px; }
.horario li { display: flex; justify-content: space-between; }
.horario li.hoy-dia { color: var(--tinta); font-weight: 800; }

/* Reserva (columna derecha) */
.reserva { min-width: 0; grid-template-columns: minmax(0, 1fr); position: sticky; top: 92px; background: #fff; border-radius: 26px; border: 1px solid var(--linea); box-shadow: var(--sombra); padding: 22px; display: grid; gap: 16px; }
.reserva h3 { font-size: 20px; }
.reserva-etq { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; display: flex; justify-content: space-between; }
.dias { display: grid; grid-auto-flow: column; grid-auto-columns: 58px; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.dia { border: 1.5px solid var(--linea); background: #fff; border-radius: 14px; padding: 7px 0; text-align: center; cursor: pointer; transition: all .2s; line-height: 1.2; }
.dia small { display: block; font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; }
.dia b { font-size: 19px; }
.dia i { display: block; font-style: normal; font-size: 10.5px; color: var(--verde); font-weight: 700; }
.dia.lleno i { color: var(--coral); }
.dia:hover { border-color: var(--noche); }
.dia.activo { background: var(--noche); border-color: var(--noche); color: #fff; }
.dia.activo small { color: var(--gris-claro); }
.dia.activo i { color: var(--lima); }
.horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hora { border: 1.5px solid var(--linea); background: #fff; border-radius: 11px; padding: 8px 0; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s; }
.hora:hover:not(:disabled) { border-color: var(--noche); }
.hora:disabled { color: #c8c2b6; text-decoration: line-through; cursor: not-allowed; background: var(--hueso); }
.hora.activo { background: var(--lima); border-color: var(--noche); }
.modalidad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.modalidad label { border: 1.5px solid var(--linea); border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: all .2s; font-size: 13.5px; line-height: 1.3; }
.modalidad label b { display: block; font-size: 14.5px; }
.modalidad label small { color: var(--gris); }
.modalidad input { position: absolute; opacity: 0; pointer-events: none; }
.modalidad label:has(input:checked) { border-color: var(--noche); background: #fbffe8; }
.modalidad label.no { opacity: .45; cursor: not-allowed; }
.resumen { display: grid; gap: 6px; font-size: 14px; background: var(--hueso); border-radius: 16px; padding: 14px; }
.resumen div { display: flex; justify-content: space-between; gap: 10px; }
.resumen .total { font-size: 18px; font-weight: 800; padding-top: 8px; border-top: 1px dashed var(--linea); margin-top: 4px; }
.resumen .adelanto { color: var(--lima-osc); font-weight: 700; }
.resumen .vacio-res { color: var(--gris); text-align: center; display: block; }
.garantia { display: flex; gap: 10px; font-size: 13px; color: var(--gris); align-items: flex-start; }
.garantia .i { width: 20px; height: 20px; flex: none; color: var(--verde); }
.campo { display: grid; gap: 6px; }
.campo span { font-size: 13px; font-weight: 700; }
.campo textarea { resize: vertical; min-height: 64px; }
.barra-reserva-movil { display: none; }

/* ---------- Diálogos ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
dialog::backdrop { background: rgba(10, 8, 18, .72); backdrop-filter: blur(6px); }
.ficha[open] { margin: auto; width: min(960px, calc(100vw - 30px)); animation: subir .3s ease; }
.ficha-caja { background: #fff; border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; max-height: calc(100vh - 40px); }
.ficha-arte svg { width: 100%; height: 100%; aspect-ratio: 1; }
.ficha-info { padding: 28px; display: grid; gap: 12px; align-content: start; overflow: auto; }
.ficha-info h3 { font-size: 24px; }
.ficha-info .datos-obra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ficha-info .datos-obra div { background: var(--hueso); border-radius: 14px; padding: 10px 12px; }
.ficha-info .datos-obra small { display: block; color: var(--gris); font-size: 12px; }
.ficha-nav { display: flex; gap: 8px; margin-top: auto; }
.cerrar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); cursor: pointer; display: grid; place-items: center; z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cerrar .i { width: 20px; height: 20px; }
.panel[open] { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100vw); animation: entrar .3s ease; }
.panel-caja { background: #fff; height: 100%; padding: 26px; display: flex; flex-direction: column; gap: 16px; overflow: auto; position: relative; }
.confirmacion[open] { margin: auto; width: min(480px, calc(100vw - 30px)); animation: subir .3s ease; }
.confirmacion-caja { background: #fff; border-radius: 28px; padding: 32px 28px; text-align: center; display: grid; gap: 14px; position: relative; }
.confirmacion-caja .sello { width: 74px; height: 74px; border-radius: 50%; background: var(--lima); display: grid; place-items: center; margin: 0 auto; animation: latir 1.2s ease 1; }
.confirmacion-caja .sello .i { width: 36px; height: 36px; stroke-width: 2.6; }
.confirmacion-caja .codigo { font-family: ui-monospace, monospace; font-weight: 800; font-size: 22px; letter-spacing: .12em; background: var(--hueso); padding: 10px; border-radius: 12px; }
.confirmacion-caja .botones { justify-content: center; margin-top: 4px; }
@keyframes subir { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes entrar { from { transform: translateX(100%); } }
@keyframes latir { 50% { transform: scale(1.15); } }

/* ---------- Herramientas (Pruébalo) ---------- */
.herramienta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border-radius: 28px; overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.herramienta-controles { padding: 30px; display: grid; gap: 20px; align-content: start; }
.herramienta-controles h3 { font-size: 26px; }
.herramienta-controles > p { color: var(--gris); margin-top: -12px; }
.herramienta-vista { background: var(--noche); color: #fff; padding: 30px; display: grid; gap: 18px; align-content: start; position: relative; }
.control-etq { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.control-etq output { font-weight: 800; color: var(--lima-osc); }
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.segmentos button { border: 1.5px solid var(--linea); background: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s; }
.segmentos button:hover { border-color: var(--noche); }
.segmentos button.activo { background: var(--noche); border-color: var(--noche); color: #fff; }
.colores { display: flex; flex-wrap: wrap; gap: 8px; }
.colores button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--linea); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.colores button:hover { transform: scale(1.1); }
.colores button.activo { box-shadow: 0 0 0 2.5px var(--noche); transform: scale(1.12); }
.cifra-grande { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--lima); }
.cifra-sub { color: var(--gris-claro); font-size: 14.5px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cifras div { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 16px; padding: 12px 14px; }
.cifras b { display: block; font-size: 20px; letter-spacing: -.02em; }
.cifras small { color: var(--gris-claro); font-size: 12.5px; }
.medidor { display: grid; gap: 6px; }
.medidor-barra { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #14a17a, #f5a524 55%, #ff5c7a); position: relative; }
.medidor-barra i { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--noche); transform: translate(-50%, -50%); transition: left .4s; box-shadow: 0 0 0 2px #fff; }
.medidor small { display: flex; justify-content: space-between; color: var(--gris-claro); font-size: 12px; }
.recomendados { display: grid; gap: 8px; }
.recomendados a { display: flex; align-items: center; gap: 12px; background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 16px; padding: 10px 12px; transition: border-color .2s; }
.recomendados a:hover { border-color: var(--lima); }
.recomendados .avatar { width: 42px; height: 42px; font-size: 15px; }
.recomendados a div { flex: 1; min-width: 0; line-height: 1.3; }
.recomendados small { color: var(--gris-claro); font-size: 12.5px; }
.recomendados .precio-rec { font-weight: 800; color: var(--lima); white-space: nowrap; }
.cuerpo-svg { width: 100%; max-width: 300px; margin: 0 auto; }
.cuerpo-svg .zona { fill: #3a3150; stroke: #110e1b; stroke-width: 2; cursor: pointer; transition: fill .2s; }
.cuerpo-svg .zona:hover { fill: #5a4d78; }
.cuerpo-svg .zona.activa { fill: var(--lima); }
.vista-escala { display: flex; gap: 18px; align-items: end; justify-content: center; min-height: 150px; }
.vista-escala figure { display: grid; gap: 6px; justify-items: center; font-size: 12px; color: var(--gris-claro); }
.mano-svg, .pelo-svg, .mascota-svg { width: 100%; max-width: 330px; margin: 0 auto; border-radius: 22px; overflow: hidden; }
.herramientas-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.herramienta + .herramienta { margin-top: 40px; }
.ancla-herr { scroll-margin-top: 100px; }

/* ---------- Profesionales ---------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { background: #fff; border-radius: 26px; padding: 28px; border: 1.5px solid var(--linea); display: grid; gap: 14px; align-content: start; position: relative; }
.plan.top { background: var(--noche); color: #fff; border-color: var(--noche); transform: translateY(-10px); }
.plan.top .lista-check li { color: #e6e0f0; }
.plan .etq-top { position: absolute; top: -13px; left: 28px; background: var(--lima); color: var(--noche); font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 22px; }
.plan .precio-plan { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan .precio-plan small { font-size: 15px; font-weight: 600; color: var(--gris); letter-spacing: 0; }
.plan.top .precio-plan small { color: var(--gris-claro); }
.plan.recomendado { outline: 3px solid var(--lima); outline-offset: 4px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); }
.tabla-planes { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla-planes td, .tabla-planes th { padding: 9px 4px; border-bottom: 1px solid var(--linea-osc); text-align: right; }
.tabla-planes th:first-child, .tabla-planes td:first-child { text-align: left; }
.tabla-planes th { color: var(--gris-claro); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.tabla-planes tr.mejor td { color: var(--lima); font-weight: 800; }
.constructor { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.constructor form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.constructor form .ancho { grid-column: 1 / -1; }
.verificacion { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.verificacion div { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 20px; }
.verificacion .i { width: 28px; height: 28px; color: var(--lima-osc); margin-bottom: 10px; }
.verificacion h3 { font-size: 16.5px; margin-bottom: 4px; }
.verificacion p { color: var(--gris); font-size: 14px; }

/* ---------- Mis reservas ---------- */
.reservas-lista { display: grid; gap: 14px; }
.reserva-item { background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); padding: 18px; display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center; }
.reserva-item .fecha-caja { background: var(--noche); color: #fff; border-radius: 16px; text-align: center; padding: 8px 0; line-height: 1.15; }
.reserva-item .fecha-caja small { display: block; font-size: 11px; color: var(--lima); font-weight: 800; text-transform: uppercase; }
.reserva-item .fecha-caja b { font-size: 26px; }
.reserva-item h3 { font-size: 17px; }
.reserva-item p { color: var(--gris); font-size: 14px; }
.reserva-item .acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reserva-item.pasada { opacity: .6; }
.estado { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #e3f8ef; color: #0b7a59; margin-left: 6px; vertical-align: middle; }
.estado.cancelada { background: #ffe7ec; color: #b4233f; }
.comparador { overflow-x: auto; background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); }
.comparador table { width: 100%; border-collapse: collapse; min-width: 620px; }
.comparador th, .comparador td { padding: 14px 16px; border-bottom: 1px solid var(--linea); text-align: left; font-size: 14.5px; vertical-align: top; }
.comparador th { width: 170px; color: var(--gris); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.comparador td .avatar { width: 54px; height: 54px; font-size: 18px; margin-bottom: 8px; }
.comparador td.mejor { background: #fbffe8; font-weight: 800; }
.barra-comparar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; background: var(--noche); color: #fff; padding: 10px 10px 10px 18px; border-radius: 999px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); font-weight: 700; font-size: 14px; }
.barra-comparar .avatares { display: flex; }
.barra-comparar .avatar { width: 30px; height: 30px; font-size: 11px; border: 2px solid var(--noche); margin-left: -8px; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 10px; }
.preguntas details { background: #fff; border-radius: 18px; border: 1px solid var(--linea); padding: 0 22px; }
.preguntas summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::after { content: "+"; font-size: 22px; line-height: 1; transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { color: var(--gris); padding-bottom: 18px; }

/* ---------- CTA ---------- */
.cta { background: var(--noche); color: #fff; border-radius: 32px; padding: 54px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(215,255,60,.25), transparent 65%); }
.cta > * { position: relative; }
.cta p { color: #cfc8dc; margin-top: 10px; font-size: 17px; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: #cfc8dc; padding: 70px 0 28px; }
.pie-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--linea-osc); }
.pie-marca p { margin-top: 16px; max-width: 460px; font-size: 15px; }
.pie-grupo { color: var(--gris-claro); font-size: 14px !important; }
.pie-grupo b { color: #fff; }
.pie-boletin h4 { color: #fff; font-size: 17px; }
.pie-boletin p { font-size: 14px; margin: 6px 0 14px; color: var(--gris-claro); }
.pie-boletin div { display: flex; gap: 8px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px; border: 1px solid var(--linea-osc); }
.pie-boletin input { flex: 1; background: none; border: 0; outline: 0; padding: 0 14px; color: #fff; min-width: 0; }
.pie-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 40px 0; }
.pie-grid h4 { color: #fff; font-size: 14.5px; margin-bottom: 12px; }
.pie-grid ul { list-style: none; display: grid; gap: 8px; }
.pie-grid a { font-size: 14px; color: var(--gris-claro); transition: color .2s; cursor: pointer; }
.pie-grid a:hover { color: var(--lima); }
.pie-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--gris-claro); padding-top: 24px; border-top: 1px solid var(--linea-osc); }

/* ---------- Flotantes ---------- */
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(37,211,102,.6); cursor: pointer; transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, calc(100% + 40px)); background: var(--noche); color: #fff; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; z-index: 100; transition: transform .35s; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); max-width: calc(100vw - 30px); text-align: center; }
.toast.ver { transform: translate(-50%, 0); }

/* ---------- Animación al aparecer ---------- */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .mosaico .tesela { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .menu { display: none; position: fixed; top: 74px; left: 0; right: 0; background: var(--noche); flex-direction: column; padding: 14px 20px 22px; gap: 2px; border-top: 1px solid var(--linea-osc); max-height: calc(100vh - 74px); overflow: auto; }
  .menu.abierto { display: flex; }
  .menu a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  .btn-menu { display: grid; }
  .solo-movil { display: block; }
  .menu a.solo-movil { color: var(--lima); }
  .solo-escritorio { display: none; }
  .barra.menu-abierto { background: var(--noche); }
  .hero-grid, .match, .cta, .constructor { grid-template-columns: 1fr; }
  .mosaico { max-width: 520px; margin: 0 auto; transform: rotate(-3deg); }
  .pasos { grid-template-columns: 1fr 1fr; }
  .wow-grid, .ad-grid { grid-template-columns: 1fr 1fr; }
  .paquetes { grid-template-columns: 1fr 1fr; }
  .perfil-grid { grid-template-columns: minmax(0, 1fr); }
  .reserva { position: static; }
  .herramienta, .calc-grid { grid-template-columns: 1fr; }
  .verificacion { grid-template-columns: 1fr 1fr; }
  .pie-grid { grid-template-columns: repeat(3, 1fr); }
  .explorar { grid-template-columns: 1fr; }
  .filtros { display: none; position: fixed; inset: 74px 0 0 0; top: 74px; z-index: 30; border-radius: 0; max-height: none; }
  .filtros.abierto { display: grid; align-content: start; }
  .btn-filtros { display: inline-flex; }
  .barra-reserva-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: #fff; border-top: 1px solid var(--linea); padding: 12px 20px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.15); }
  .pag-perfil .wa-flotante { bottom: 90px; }
}
@media (max-width: 720px) {
  .seccion { padding: 72px 0; }
  .hero { padding: 108px 0 50px; }
  .buscador { grid-template-columns: 1fr; }
  .buscador .btn { padding: 14px; }
  .contadores { gap: 22px; }
  .contadores b { font-size: 24px; }
  .pasos, .wow-grid, .ad-grid, .paquetes, .planes, .verificacion { grid-template-columns: 1fr; }
  .plan.top { transform: none; }
  .galeria { grid-template-columns: 1fr 1fr; }
  .perfil-cabeza { grid-template-columns: 1fr; gap: 10px; margin-top: -90px; }
  .perfil-cabeza .avatar { width: 104px; height: 104px; font-size: 36px; }
  .perfil-cabeza .acciones-perfil { justify-self: start; }
  .portada { height: 230px; }
  .perfil-cabeza { color: var(--tinta); }
  .perfil-cabeza .quien { color: var(--gris); }
  .perfil-datos { grid-template-columns: 1fr 1fr; }
  .perfil-datos div { border-bottom: 1px solid var(--linea); }
  .perfil-datos div:nth-child(2n) { border-right: 0; }
  .perfil-datos div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .bloque { padding: 20px; }
  .resenas-top { grid-template-columns: 1fr; gap: 12px; }
  .info-grid { grid-template-columns: 1fr; }
  .ficha-caja { grid-template-columns: 1fr; }
  .ficha-arte svg { max-height: 50vh; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .herramienta-controles, .herramienta-vista { padding: 22px; }
  .constructor form { grid-template-columns: 1fr; }
  .reserva-item { grid-template-columns: 60px 1fr; }
  .reserva-item .acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .cta { padding: 34px 24px; }
  .pie-top { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .cat-banner { grid-template-columns: auto 1fr; }
  .cat-banner .btn { grid-column: 1 / -1; }
  .grid-cats { grid-template-columns: repeat(2, 1fr); }
  .servicio { grid-template-columns: 1fr auto; }
  .servicio .marca { display: none; }
}

/* ---------- Ajustes de celular ---------- */
.barra-acciones { margin-left: auto; }
.menu + .barra-acciones { margin-left: 0; }
#movil-total small { display: block; font-size: 12px; color: var(--gris); line-height: 1.1; }
#movil-total b { font-size: 20px; letter-spacing: -.02em; }
@media (max-width: 1080px) {
  .menu + .barra-acciones { margin-left: auto; }
  .pag-perfil .barra-comparar { bottom: 92px; }
}
@media (max-width: 720px) {
  .barra-comparar { left: 16px; right: 88px; transform: none; justify-content: space-between; padding-left: 12px; }
  .barra-comparar > span:nth-child(2) { display: none; }
  .perfil-datos { margin-top: 18px; }
  .perfil-cabeza { padding-bottom: 0; }
}