/* abhalo.com — la web pública y el área de clientes, encima de luz-de-halo.css.
   Sin estilos en línea: la CSP los bloquea. Todo lo que haga falta, aquí. */

/* Iconos: el relleno suave (el sprite lo trae como clase, no como style). */
.ico .t, .t { opacity: var(--ico-tono, .22); }
.ico .t6, .t6 { opacity: calc(var(--ico-tono, .22) * .6); }
.ico .t16, .t16 { opacity: calc(var(--ico-tono, .22) * 1.6); }
.ico-fin { margin: 0 0 0 .25em !important; }

.tenue { color: var(--tenue); }
.w-ancho { width: min(72rem, 100% - 2.4rem); margin-inline: auto; }
.saltar { position: absolute; left: .8rem; top: -4rem; z-index: 99; padding: .6rem 1rem; border-radius: 12px; background: var(--primario); color: var(--primario-texto); font-weight: 700; }
.saltar:focus { top: .8rem; }
img { max-width: 100%; height: auto; }

/* El logo: plata en oscuro, tinta en crema. */
.logo-crema { display: none; }
html.tema-crema .logo-oscuro { display: none; }
html.tema-crema .logo-crema { display: inline-block; }

/* ───────── cabecera ───────── */
.w-cabecera { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(var(--fondo-rgb), .78); border-bottom: 1px solid var(--canto); }
.w-cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.w-logo { display: inline-flex; align-items: center; min-height: 44px; }
.w-logo img { width: 112px; height: auto; }
.w-logo img.logo-oscuro { display: block; }
html.tema-crema .w-logo img.logo-oscuro { display: none; }
html.tema-crema .w-logo img.logo-crema { display: block; }
/* Todos los botones de arriba a la derecha son IGUALES: mismo alto (44 px), mismo ancho,
   mismo borde y misma letra. El de la página donde estás se marca con el borde lima. */
.w-menu { display: flex; gap: .4rem; margin-left: auto; }
.w-menu a, .w-cabecera-der .lh-boton {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 7.6rem; height: 44px; min-height: 44px; padding: 0 .5rem; white-space: nowrap;
  border-radius: var(--r-pildora); border: 1px solid var(--canto-fuerte);
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)); box-shadow: var(--luz);
  color: var(--texto); text-decoration: none; font: 700 1rem/1.2 var(--fuente);
  transition: background-color .15s, border-color .15s, box-shadow .2s;
}
.w-menu a:hover, .w-cabecera-der .lh-boton:hover { background: var(--cristal-alto); border-color: color-mix(in srgb, var(--texto) 32%, transparent); }
.w-menu a[aria-current="page"] { border-color: color-mix(in srgb, var(--brillo) 70%, transparent); background: color-mix(in srgb, var(--brillo) 12%, transparent); }
html.letra-dislexia .w-menu a, html.letra-dislexia .w-cabecera-der .lh-boton { width: 9.2rem; }
.w-cabecera-der { display: flex; align-items: center; gap: .5rem; margin-left: .4rem; }
.w-cabecera-der form { margin: 0; }

/* ───────── héroe ───────── */
.w-heroe { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 3.5rem 0 2rem; }
.w-heroe h1, .w-contacto h1, .w-aviso h1, .w-texto h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.12; letter-spacing: -.01em; margin: .2rem 0 1rem; }
.w-heroe-p { font-size: 1.18rem; color: var(--tenue); max-width: 38rem; }
.w-luz { color: var(--acento); }
.w-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.w-heroe-img, .w-figura { position: relative; display: grid; place-items: center; isolation: isolate; }
.w-heroe-img::before, .w-figura::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--aura), transparent 68%); filter: blur(10px); }
.w-heroe-img img { width: min(17rem, 70%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: w-flota 6s ease-in-out infinite alternate; }
.w-figura img { width: min(13rem, 60%); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); }
html.tema-crema .w-heroe-img img, html.tema-crema .w-figura img { filter: drop-shadow(0 22px 30px rgba(60, 45, 20, .35)); }
@keyframes w-flota { to { transform: translateY(-10px); } }

/* ───────── secciones ───────── */
.w-seccion { padding: 2.6rem 0; }
.w-etiqueta { margin: 0 0 .35rem; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brillo); }
.w-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .6rem; }
.w-intro { color: var(--tenue); font-size: 1.08rem; max-width: 42rem; }
.w-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.2rem; }
.w-dos.w-centro { align-items: center; }
.w-dos > * { min-width: 0; }

.w-lista { list-style: none; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .55rem; }
.w-lista li { display: flex; align-items: flex-start; }
.w-lista li .ico { color: var(--ok); margin-top: .22em; }

/* Los dos pilares: imagen arriba, texto debajo sobre liso. */
.w-pilar { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.w-pilar .lh-portada h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.45rem; margin: 0; }
.w-pilar .lh-portada h3 .ico { width: 1.5rem; height: 1.5rem; color: var(--acento); }
.w-pilar .lh-portada.lima h3 .ico { color: var(--brillo); }
.w-pilar-cuerpo { padding: .6rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.w-pilar-cuerpo .lh-boton { align-self: flex-start; margin-top: auto; }
.w-pilar-lema { font-size: 1.1rem; font-weight: 700; margin-top: .6rem; }

.w-rasgos { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.w-rasgos li { padding: 1.1rem 1.15rem; }
.w-rasgos h3 { font-size: 1.1rem; margin: .7rem 0 .3rem; color: var(--texto); }
.w-rasgos p { margin: 0; color: var(--tenue); }
.w-rasgo-ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.w-rasgo-ico .ico { width: 1.35rem; height: 1.35rem; }

.w-pasos { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.w-pasos li { padding: 1.1rem; }
.w-pasos h3 { font-size: 1.1rem; margin: .7rem 0 .3rem; }
.w-pasos p { margin: 0; color: var(--tenue); }
.w-num { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 700;
  background: var(--primario); color: var(--primario-texto); }

.w-soluciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.w-solucion h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; }
.w-ejemplo { margin-top: auto; padding: .8rem 1rem; border-radius: 12px; background: var(--cristal); border: 1px solid var(--canto); color: var(--tenue); }
.w-ejemplo strong { color: var(--texto); }
.w-solucion { display: flex; flex-direction: column; }

.w-preguntas { display: grid; gap: .7rem; margin-top: 1.2rem; max-width: 50rem; }
.w-preguntas summary { font-weight: 700; min-height: 2.6rem; }
.w-preguntas p { margin: .5rem 0 0; color: var(--tenue); }

.w-clientes { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.5rem 1.6rem; }
.w-clientes h2 { margin-bottom: .3rem; }
.w-clientes p { margin: 0; }

.w-llamada { text-align: center; padding: 2.4rem 1.4rem; }
.w-llamada h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.w-llamada p { max-width: 36rem; margin: 0 auto 1.3rem; }
.w-llamada-halo { width: 3rem; height: 3rem; color: var(--marca); margin-bottom: .8rem; filter: drop-shadow(0 0 18px var(--aura)); }

/* ───────── formularios ───────── */
.w-contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-top: 3rem; }
.w-form { display: grid; gap: .25rem; padding: 1.4rem; }
.w-form .lh-etiqueta { margin-top: .7rem; }
.w-form .lh-boton { margin-top: 1rem; justify-self: start; }
.w-form-t { font-size: 1.3rem; margin: 0; }
.w-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.w-casilla { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; }
.w-casilla input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--acento); flex: none; }

/* ───────── avisos y texto ───────── */
.w-aviso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: center; min-height: 60vh; }
.w-texto { max-width: 46rem; }
.w-texto h2 { margin-top: 2rem; font-size: 1.35rem; }
.w-texto li { margin-bottom: .5rem; }
.w-pendiente { color: var(--espera); font-weight: 700; }

/* ───────── pie ───────── */
.w-pie { margin-top: 3rem; padding: 2.6rem 0 1.4rem; border-top: 1px solid var(--canto); background: rgba(var(--panel-rgb), .5); }
.w-pie-rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 1.6rem; }
.w-pie-t { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin-bottom: .6rem; }
.w-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.w-pie ul a { display: inline-flex; align-items: center; min-height: 2.2rem; color: var(--texto); text-decoration: none; }
.w-pie ul a:hover { color: var(--acento); text-decoration: underline; }
.w-pie img { width: 112px; margin-bottom: .6rem; }
.w-ajustes { display: grid; gap: .5rem; margin-top: 1rem; justify-items: start; }
.w-ajustes .lh-boton { min-height: 2.3rem; font-size: .9rem; padding: .35rem .9rem; }
.w-copy { margin-top: 2rem; font-size: .9rem; }

/* ═════════════ área de clientes ═════════════ */
.p-pagina { padding: 2.2rem 0 1rem; }
.p-pagina h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: .3rem; }
.p-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.p-cabeza p { margin: 0; }
.p-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.p-cifra { padding: 1rem 1.1rem; }
.p-cifra b { display: block; font-size: 1.7rem; color: var(--marca); line-height: 1.2; }
.p-cifra span { color: var(--tenue); }
.p-cifra.espera { border-color: color-mix(in srgb, var(--espera) 55%, transparent); }
.p-cifra.espera b { color: var(--espera); }
.p-bloque { margin-bottom: 1.6rem; }
.p-bloque > h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; }
.p-bloque > h2 .ico { color: var(--acento); }

.p-tabla-caja { overflow-x: auto; border: 1px solid var(--canto-fuerte); border-radius: 16px; background: var(--cristal); }
.p-tabla { width: 100%; border-collapse: collapse; min-width: 34rem; }
.p-tabla th, .p-tabla td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--canto); vertical-align: top; }
.p-tabla th { font-size: .85rem; color: var(--tenue); font-weight: 700; }
.p-tabla tr:last-child td { border-bottom: 0; }
.p-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-tabla td small { display: block; color: var(--tenue); }

.p-estado { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: var(--r-pildora); font-size: .88rem; font-weight: 700;
  border: 1px solid currentColor; white-space: nowrap; }
.p-estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.p-estado.ok { color: var(--ok); } .p-estado.espera { color: var(--espera); } .p-estado.error { color: var(--error); }
.p-estado.info { color: var(--acento); } .p-estado.apagado { color: var(--tenue); }

.p-vacio { padding: 1.2rem; color: var(--tenue); text-align: center; }
.p-form { display: grid; gap: .25rem; max-width: 34rem; }
.p-form .lh-etiqueta { margin-top: .6rem; }
.p-form .lh-boton { justify-self: start; margin-top: 1rem; }
.p-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; }
.p-rejilla > * { min-width: 0; }
.p-rejilla .entera { grid-column: 1 / -1; }
.p-lineas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: .4rem .6rem; }
.p-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.p-acciones form { margin: 0; }
.p-mini { min-height: 2.2rem; padding: .3rem .8rem; font-size: .9rem; }
.p-enlace-alta { word-break: break-all; font-family: var(--mono); font-size: .9rem; padding: .7rem .9rem; border-radius: 12px; background: var(--codigo); border: 1px solid var(--canto-fuerte); user-select: all; }
.p-dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.p-dl dt { color: var(--tenue); }
.p-dl dd { margin: 0; }
.p-entrada { min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); }
.p-entrada form { width: min(25rem, 100%); }
.p-entrada h1 { display: flex; align-items: center; gap: .6rem; color: var(--texto); font-size: 1.6rem; }
.p-entrada .lh-boton { width: 100%; margin-top: 1.2rem; }
.p-entrada .lh-etiqueta { margin-top: .8rem; }
.p-entrada p { color: var(--tenue); font-size: .95rem; }
.p-nota { margin-top: 1rem; }

/* La factura: se ve como un papel, también en oscuro, y se imprime limpia. */
.f-papel { background: #fcfcfd; color: #15171b; border-radius: 16px; padding: 2.2rem; box-shadow: var(--sombra); max-width: 52rem; margin: 0 auto; }
.f-papel h1, .f-papel h2 { color: #15171b; }
.f-papel .f-tenue { color: #50555f; }
.f-cabeza { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.f-cabeza img { width: 120px; }
.f-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.6rem; }
.f-partes h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #50555f; margin-bottom: .3rem; }
.f-partes p { margin: 0; }
.f-tabla { width: 100%; border-collapse: collapse; }
.f-tabla th, .f-tabla td { padding: .55rem .4rem; border-bottom: 1px solid #d9dbe0; text-align: left; }
.f-tabla th { font-size: .85rem; color: #50555f; }
.f-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-totales { margin: 1rem 0 0 auto; width: min(20rem, 100%); }
.f-totales div { display: flex; justify-content: space-between; padding: .25rem 0; }
.f-totales .f-total { border-top: 2px solid #15171b; margin-top: .3rem; padding-top: .5rem; font-size: 1.2rem; font-weight: 700; }
.f-pie { margin-top: 1.8rem; font-size: .92rem; color: #50555f; }
.f-sello { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-weight: 700; border: 2px solid; }
.f-sello.pagada { color: #1d7a49; } .f-sello.pendiente { color: #8a5600; } .f-sello.anulada { color: #b93737; }
.f-barra { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: space-between; max-width: 52rem; margin: 0 auto 1rem; }

@media print {
  .w-cabecera, .w-pie, .f-barra, .saltar { display: none !important; }
  body { background: #fff !important; }
  .f-papel { box-shadow: none; padding: 0; max-width: none; }
  .p-pagina { padding: 0; }
}

/* ───────── móvil ───────── */
@media (max-width: 900px) {
  .w-rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .w-heroe { grid-template-columns: 1fr; padding-top: 1.6rem; gap: 1rem; }
  .w-heroe-img { order: -1; }
  .w-heroe-img img { width: 9rem; }
  .w-dos, .w-soluciones, .w-contacto, .w-aviso, .p-cifras, .f-partes { grid-template-columns: 1fr; }
  .w-figura img { width: 9rem; }
  .w-rasgos, .w-pasos { grid-template-columns: 1fr; }
  .w-pie-rejilla { grid-template-columns: 1fr; }
  .p-rejilla { grid-template-columns: 1fr; }
  .p-lineas { grid-template-columns: 1fr 1fr; }
  .p-lineas .concepto { grid-column: 1 / -1; }
  .f-papel { padding: 1.2rem; }
  .w-aviso { min-height: 0; padding-top: 2rem; }
}
@media (pointer: coarse) {
  .w-menu a, .w-pie ul a, .w-ajustes .lh-boton, .p-mini { min-height: 44px; }
  .w-casilla input { width: 1.6rem; height: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .w-heroe-img img { animation: none; }
}
.p-acciones select.lh-campo { width: auto; }
/* Ajustes tras el comprobador de la estética (10-oct-2026). */
html.tema-crema .w-etiqueta { color: #4a5f00; }
.w-preguntas summary { min-height: max(44px, 2.6rem); align-items: center; }
.w-trampa input { font-size: 16px; }
/* Formulario de contacto: «Qué te interesa» con botones en vez de desplegable (10-oct-2026). */
.w-opciones { border: 0; padding: 0; margin: .7rem 0 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.w-opciones legend { padding: 0; margin-bottom: .3rem; }
.w-opcion { position: relative; display: block; cursor: pointer; }
.w-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.w-opcion span { display: flex; align-items: center; gap: .55rem; min-height: max(44px, 2.9rem); height: 100%; padding: .55rem .8rem; border-radius: 14px;
  border: 1px solid var(--canto-fuerte); background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)); box-shadow: var(--luz); line-height: 1.3; }
.w-opcion span .ico { color: var(--tenue); }
.w-opcion:hover span { border-color: color-mix(in srgb, var(--texto) 30%, transparent); }
.w-opcion input:checked + span { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); box-shadow: var(--luz), 0 0 0 3px var(--aura); font-weight: 700; }
.w-opcion input:checked + span .ico { color: var(--acento); --ico-tono: .42; }
.w-opcion input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.w-form .lh-banner { margin-top: .6rem; }
@media (max-width: 480px) { .w-opciones { grid-template-columns: 1fr; } }
/* Los desplegables que quedan (gestión): la lista abierta, legible en oscuro y en crema. */
select.lh-campo option { background: var(--panel); color: var(--texto); }

/* ───────── cabecera en pantallas estrechas (10-oct-2026) ─────────
   Una rejilla de dos columnas: logo y «Clientes» arriba, y debajo los otros cuatro.
   Los cinco botones miden lo mismo. La cabecera deja de ir pegada arriba: con tres filas
   taparía demasiado pantalla. */
@media (max-width: 900px) {
  .w-cabecera { position: static; }
  .w-cabecera-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; min-height: 0; padding: .6rem 0; align-items: center; }
  .w-logo { order: 0; }
  .w-cabecera-der { order: 1; margin: 0; width: 100%; }
  .w-menu { display: contents; }
  .w-menu a { order: 2; width: 100%; }
  .w-cabecera-der .lh-boton { width: 100%; }
}

/* ───────── retoques de estética (10-oct-2026) ───────── */
.w-heroe-img img { width: min(19rem, 75%); }
.lh-tarjeta, .w-pilar, .w-solucion { transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; }
.lh-tarjeta:hover, .w-pilar:hover, .w-solucion:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--texto) 26%, transparent); box-shadow: var(--luz), 0 14px 34px rgba(0, 0, 0, .22); }
html.tema-crema .lh-tarjeta:hover, html.tema-crema .w-pilar:hover, html.tema-crema .w-solucion:hover { box-shadow: var(--luz), 0 14px 30px rgba(60, 45, 20, .16); }
.w-heroe h1 { text-wrap: balance; }
.w-llamada { overflow: hidden; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* ───────── el tour de 4B-halo, v2 (11-oct-2026) ─────────
   El muñeco de la portada es un botón (lo pone tour.js). Al pulsarlo, un 4B-halo libre
   vuela por la pantalla y se posa junto a cada cosa de la que habla. El texto, abajo. */
.w-tour-boton { all: unset; cursor: pointer; display: grid; place-items: center; position: relative; border-radius: 28px; max-width: 100%; }
.w-tour-boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 6px; }
.w-tour-boton img { transition: filter .2s ease; }
.w-tour-boton:hover img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) brightness(1.08); }
html.tema-crema .w-tour-boton:hover img { filter: drop-shadow(0 22px 30px rgba(60, 45, 20, .35)) brightness(1.04); }
.w-tour-pista { justify-self: center; display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; min-height: 44px; padding: 0 1rem;
  border-radius: var(--r-pildora); border: 1px solid var(--canto-fuerte); background: linear-gradient(180deg, var(--cristal-alto), var(--cristal));
  box-shadow: var(--luz); color: var(--texto); font-size: .95rem; pointer-events: none; animation: w-pista 2.8s ease-in-out infinite; }
.w-tour-pista[hidden] { display: none; }
.w-tour-pista svg { width: 1rem; height: 1rem; fill: var(--acento); }
@keyframes w-pista { 0%, 100% { box-shadow: var(--luz), 0 0 0 0 transparent; } 50% { box-shadow: var(--luz), 0 0 0 6px var(--aura); } }

/* el muñeco libre */
.w-tour-mono { position: fixed; left: 0; top: 0; z-index: 61; width: 5.4rem; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
.w-tour-cuerpo { position: relative; transform-origin: 50% 85%; }
.w-tour-cuerpo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); transition: transform .25s ease; }
html.tema-crema .w-tour-cuerpo img { filter: drop-shadow(0 12px 16px rgba(60, 45, 20, .35)); }
.w-tour-cuerpo.mira-izq img { transform: scaleX(-1); }
.w-tour-cuerpo.hablando { animation: w-habla .6s ease-in-out infinite alternate; }
@keyframes w-habla { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(-7px) rotate(2.5deg); } }
/* en el aire: los propulsores brillan y deja una estela de luz */
.w-tour-cuerpo::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -6%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--acento) 70%, #fff), transparent 70%); opacity: 0; filter: blur(4px); transition: opacity .2s; }
.w-tour-cuerpo.volando::after { opacity: .9; }
/* los efectos: ondas (saluda, señala), aro (escudo), chispas (celebra) */
.w-tour-efecto { position: absolute; inset: 0; pointer-events: none; }
.w-tour-efecto i { position: absolute; display: block; }
.w-tour-efecto.ondas i { left: 50%; top: 30%; width: 40%; aspect-ratio: 1; margin-left: -20%; border-radius: 50%; border: 2px solid var(--acento); animation: w-onda 1s ease-out forwards; }
.w-tour-efecto.aro i { left: -14%; right: -14%; top: 4%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--acento);
  box-shadow: 0 0 22px var(--aura), inset 0 0 22px var(--aura); animation: w-aro 1.2s ease-out forwards; }
.w-tour-efecto.chispas i { left: 50%; top: 40%; width: 9px; height: 9px; border-radius: 2px; background: var(--brillo); animation: w-chispa 1.1s ease-out forwards; }
.w-tour-efecto.chispas i:nth-child(2n) { background: var(--acento); }
.w-tour-efecto.chispas i:nth-child(3n) { background: var(--marca); }
.w-tour-efecto.chispas i:nth-child(1) { --dx: -70px; --dy: -60px; } .w-tour-efecto.chispas i:nth-child(2) { --dx: 70px; --dy: -64px; }
.w-tour-efecto.chispas i:nth-child(3) { --dx: -90px; --dy: 0px; }   .w-tour-efecto.chispas i:nth-child(4) { --dx: 90px; --dy: 6px; }
.w-tour-efecto.chispas i:nth-child(5) { --dx: -40px; --dy: -96px; } .w-tour-efecto.chispas i:nth-child(6) { --dx: 44px; --dy: -100px; }
.w-tour-efecto.chispas i:nth-child(7) { --dx: -60px; --dy: 50px; }  .w-tour-efecto.chispas i:nth-child(8) { --dx: 62px; --dy: 46px; }
@keyframes w-onda { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes w-aro { 0% { transform: scale(.5); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes w-chispa { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

/* la caja del texto, abajo en el centro */
.w-tour-caja { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(40rem, calc(100vw - 1.5rem)); padding: .9rem 1rem 1rem; border-radius: var(--r-grande); border: 1px solid var(--canto-fuerte);
  background: rgba(var(--fondo-rgb), .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--luz), 0 18px 50px rgba(0, 0, 0, .45); }
html.tema-crema .w-tour-caja { box-shadow: var(--luz), 0 16px 40px rgba(60, 45, 20, .25); }
.w-tour-cuenta { margin: 0 0 .3rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.w-tour-texto { margin: 0 0 .8rem; font-size: 1.08rem; line-height: 1.5; }
.w-tour-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-tour-b { min-height: 44px; padding: .3rem .95rem; font-size: .95rem; }
.w-tour-caja.se-va { opacity: 0; transition: opacity .25s ease; }

/* lo que explica: la sección con luz cobalto, y la cosa de la que habla con luz lima («estás aquí») */
.w-tour-foco { border-radius: var(--r-grande); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 70%, transparent), 0 0 0 12px color-mix(in srgb, var(--acento) 12%, transparent); transition: box-shadow .35s ease; }
.w-tour-toca { outline: 3px solid var(--brillo); outline-offset: 4px; box-shadow: 0 0 26px color-mix(in srgb, var(--brillo) 35%, transparent); transition: outline-color .2s, box-shadow .3s; }
body.con-tour { padding-bottom: 16rem; }
@media (max-width: 640px) {
  .w-tour-mono { width: 4.4rem; }
  .w-tour-caja { width: calc(100vw - 1rem); padding: .75rem .8rem .8rem; }
  .w-tour-texto { font-size: 1rem; }
  .w-tour-botones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .w-tour-b { padding: .3rem .2rem; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .w-tour-pista, .w-tour-cuerpo.hablando { animation: none; }
  .w-tour-efecto { display: none; }
  .lh-tarjeta, .w-pilar, .w-solucion { transition: none; }
  .lh-tarjeta:hover, .w-pilar:hover, .w-solucion:hover { transform: none; }
}
@media (max-width: 780px) { .w-heroe-img img { width: 9rem; } }
/* Letra para dislexia + letra grande a la vez: es la combinación más ancha. La cabecera se apila
   antes (hasta 1100 px) y los botones llevan la letra algo menor, para que sigan siendo iguales y quepan. */
html.letra-dislexia.letra-grande .w-menu a, html.letra-dislexia.letra-grande .w-cabecera-der .lh-boton { font-size: .82rem; padding: 0 .25rem; }
@media (max-width: 1100px) {
  html.letra-dislexia.letra-grande .w-cabecera { position: static; }
  html.letra-dislexia.letra-grande .w-cabecera-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; min-height: 0; padding: .6rem 0; align-items: center; }
  html.letra-dislexia.letra-grande .w-logo { order: 0; }
  html.letra-dislexia.letra-grande .w-cabecera-der { order: 1; margin: 0; width: 100%; }
  html.letra-dislexia.letra-grande .w-menu { display: contents; }
  html.letra-dislexia.letra-grande .w-menu a { order: 2; width: 100%; }
  html.letra-dislexia.letra-grande .w-cabecera-der .lh-boton { width: 100%; }
}
/* El botón de salir del área de clientes: cuadrado de 44 px, a juego con los demás. */
.w-cabecera-der .lh-icono { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pildora); }

/* ───────── luz de halo, v2 (11-oct-2026) ─────────
   Imágenes solo en los «sitios» y sin texto encima: el escenario del muñeco en la portada
   (fluido cobalto con grano y un halo que gira) y la cabecera de metal de la llamada final. */
.w-heroe-img::before { width: 78%; background: var(--img-cobalto); filter: blur(30px) saturate(1.15); opacity: .55; }
html.tema-crema .w-heroe-img::before { opacity: .35; }
.w-heroe-img::after { content: ""; position: absolute; z-index: -1; width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 38%, transparent);
  background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--acento) 30%, transparent) 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%);
  animation: w-halo 14s linear infinite; }
@keyframes w-halo { to { transform: rotate(1turn); } }
.w-llamada { position: relative; isolation: isolate; }
.w-llamada::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 4.2rem; background: var(--img-vetas-fino);
  filter: blur(2.5px); opacity: .55; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
/* los pasos, unidos por un hilo de luz */
.w-pasos { position: relative; }
.w-pasos::before { content: ""; position: absolute; z-index: 0; left: 2.2rem; right: 2.2rem; top: 2.2rem; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acento) 55%, transparent), transparent); }
.w-pasos li { position: relative; z-index: 1; }
.w-num { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 14%, transparent), 0 0 18px var(--aura); }
/* la etiqueta de cada sección con su puntito lima */
.w-etiqueta { display: inline-flex; align-items: center; gap: .5rem; }
.w-etiqueta::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
@media (max-width: 900px) { .w-pasos::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .w-heroe-img::after { animation: none; } }

/* ───────── el bot y el otro muñeco (11-oct-2026) ─────────
   El muñeco de la portada se queda a la vista mientras dura el tour: el bot sale de él,
   interactúa con él y con los de las secciones, y al final vuelven a chocar. */
.w-heroe-img img.w-tour-mira, .w-figura img.w-tour-mira { filter: drop-shadow(0 0 26px var(--aura)) drop-shadow(0 22px 28px rgba(0, 0, 0, .45)) brightness(1.08); }
.w-tour-globo { position: fixed; z-index: 62; max-width: 14rem; padding: .5rem .9rem; border-radius: var(--r-grande); border: 1px solid var(--canto-fuerte);
  background: rgba(var(--fondo-rgb), .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--luz), 0 10px 30px rgba(0, 0, 0, .35); font-weight: 700; font-size: 1rem; line-height: 1.3; pointer-events: none;
  transform-origin: 50% 100%; animation: w-globo 2.7s ease both; }
.w-tour-globo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: rgba(var(--fondo-rgb), .96); border-right: 1px solid var(--canto-fuerte); border-bottom: 1px solid var(--canto-fuerte); }
html.tema-crema .w-tour-globo { box-shadow: var(--luz), 0 10px 26px rgba(60, 45, 20, .22); }
@keyframes w-globo { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 12% { opacity: 1; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w-tour-globo { animation: none; } }