/* HIDISPA - página pública. Sigue el diseño BeautyPro Premium WEB con la marca HIDISPA:
   portada ciruela con brillo rosa, franja de módulos, soluciones con imagen, barra de datos,
   tarjetas de plataforma, planes con el destacado en rosa, llamada en degradado y pie oscuro.
   Tema claro por omisión; el oscuro se elige con el mismo interruptor del sistema. */

/* ---------- Tokens ---------- */
:root {
  --rosa: #e8508f;
  --rosa-2: #c93375;
  --rosa-suave: #fdeaf2;
  --rosa-tinta: #a8285d;
  --ciruela: #140912;
  --ciruela-2: #2a1024;
  --ciruela-3: #3d1633;
  --verde: #8DC63F;
  --verde-osc: #4d7a1a;
  --dorado: #d59a2a;
  --azul: #3b6fd8;
  --fondo: #ffffff;
  --suave: #f8f4f7;
  --tarjeta: #ffffff;
  --tinta: #1a1320;
  --gris: #5f5a66;
  --tenue: #8f8894;
  --linea: #ece5ea;
  --sombra: 0 1px 2px rgba(40, 10, 30, .05), 0 12px 32px rgba(40, 10, 30, .08);
  --radio: 18px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fondo: #0d070b;
  --suave: #130a11;
  --tarjeta: #1a0f18;
  --tinta: #f5edf2;
  --gris: #bba9b5;
  --tenue: #8a7884;
  --linea: rgba(255, 255, 255, .09);
  --rosa-suave: rgba(232, 80, 143, .16);
  --rosa-tinta: #f5a3c4;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.6 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: "Montserrat", sans-serif; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h2 em, h1 em { font-style: normal; color: var(--rosa); }
.caja { width: min(1511px, 100% - 32px); margin-inline: auto; }
.caja-estrecha { width: min(820px, 100% - 32px); }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--rosa); color: #fff; padding: 8px 14px; border-radius: 8px; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.antetitulo { margin: 0 0 10px; font: 700 12px/1.4 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.entrada { font-size: 17px; color: var(--gris); margin: 0; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 700 14.5px "Inter", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-grande { height: 52px; padding: 0 26px; font-size: 15.5px; border-radius: 14px; }
.btn-prim { background: linear-gradient(135deg, #f0609a, var(--rosa-2)); color: #fff; box-shadow: 0 8px 22px rgba(232, 80, 143, .35); }
.btn-prim:hover { box-shadow: 0 10px 28px rgba(232, 80, 143, .45); }
.btn-fantasma { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-fantasma:hover { background: rgba(255, 255, 255, .12); }
.btn-borde { background: transparent; color: var(--rosa-tinta); border-color: color-mix(in srgb, var(--rosa) 45%, transparent); }
.btn-borde:hover { background: var(--rosa-suave); }
.btn-claro { background: #fff; color: var(--rosa-2); box-shadow: 0 8px 22px rgba(0, 0, 0, .15); }
.btn-borde-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-borde-claro:hover { background: rgba(255, 255, 255, .1); }
.ic-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.ic-btn:hover { background: rgba(255, 255, 255, .12); }
.enlace { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* ---------- Barra superior y cabecera (oscuras, como el diseño) ---------- */
.barra-sup { background: #0b050a; color: #cdb9c6; font-size: 12.5px; }
.barra-sup-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.barra-sup-izq { display: inline-flex; align-items: center; gap: 6px; }
.barra-sup-izq svg { color: var(--rosa); }
.barra-sup-der { display: flex; gap: 18px; }
.barra-sup-der a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #cdb9c6; }
.barra-sup-der a:hover { color: #fff; }
.cab { position: sticky; top: 0; z-index: 40; background: rgba(20, 9, 18, .92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); color: #fff; transition: box-shadow .2s; }
.cab.bajada { box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.cab-in { display: flex; align-items: center; gap: 20px; height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(232, 80, 143, .25), rgba(232, 80, 143, .08)); color: var(--rosa); border: 1px solid rgba(232, 80, 143, .35); }
.marca-txt { display: grid; line-height: 1.1; }
.marca-txt b { font: 800 20px "Montserrat", sans-serif; letter-spacing: .06em; }
.marca-txt b i { font-style: normal; color: var(--rosa); }
.marca-txt small { font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #bfa9b8; }
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a { position: relative; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: #dccbd6; }
.menu a:hover { color: #fff; }
.menu a.activo { color: #fff; }
.menu a.activo::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--rosa); }
.cab-acc { display: flex; align-items: center; gap: 8px; }
.cab-acc .btn { height: 42px; }
.menu-btn { display: none; }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; color: #fff; padding: 64px 0 40px;
  background: radial-gradient(1100px 600px at 85% 20%, rgba(232, 80, 143, .32), transparent 60%),
              radial-gradient(700px 500px at 10% 90%, rgba(120, 40, 110, .35), transparent 60%),
              linear-gradient(160deg, #1d0b1a 0%, var(--ciruela) 55%, #0b050a 100%); }
.portada-luz { position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232, 80, 143, .22), transparent 65%); filter: blur(20px); pointer-events: none; }
.portada-in { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.portada h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; margin-bottom: 18px; }
.portada .entrada { color: #dccbd6; max-width: 540px; }
.portada-acc { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.garantias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: #cdb9c6; }
.garantias li { display: inline-flex; align-items: center; gap: 7px; }
.garantias svg { color: var(--rosa); }
.portada-vis { position: relative; padding: 10px 30px 30px 0; }
.marco { margin: 0; border-radius: 16px; overflow: hidden; background: #120811; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 80, 143, .15), 0 0 60px rgba(232, 80, 143, .18); }
.marco-barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.marco-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.marco-barra i:first-child { background: #ff5f57; } .marco-barra i:nth-child(2) { background: #febc2e; } .marco-barra i:nth-child(3) { background: #28c840; }
.marco-barra span { margin-left: 10px; font-size: 11.5px; color: #bfa9b8; }
.marco img { width: 100%; height: auto; }
.telefono { margin: 0; position: absolute; right: 0; bottom: 0; width: 22%; min-width: 120px; border-radius: 26px; overflow: hidden; border: 5px solid #1d101b; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); background: #120811; }
.telefono img { width: 100%; height: auto; }
.flota { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(26, 12, 24, .82); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); animation: flotar 6s ease-in-out infinite; }
.flota div { display: grid; line-height: 1.25; }
.flota small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #bfa9b8; font-weight: 700; }
.flota b { font-size: 14px; }
.flota span:not(.flota-ic) { font-size: 11.5px; color: #cdb9c6; }
.flota-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.flota-ic.verde { background: rgba(141, 198, 63, .18); color: var(--verde); }
.flota-ic.rosa { background: rgba(232, 80, 143, .2); color: #f58ab5; }
.flota-a { left: -26px; bottom: 44px; }
.flota-b { right: 12%; top: -8px; animation-delay: -3s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.franja { position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); }
.franja article { display: flex; align-items: center; gap: 10px; padding: 16px 14px; }
.franja article + article { border-left: 1px solid rgba(255, 255, 255, .08); }
.franja i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #f58ab5; background: rgba(232, 80, 143, .14); }
.franja div { display: grid; line-height: 1.3; min-width: 0; }
.franja b { font-size: 13.5px; }
.franja small { font-size: 11.5px; color: #bfa9b8; }

/* ---------- Secciones ---------- */
.seccion { padding: 34px 0; position: relative; }
.seccion-suave { background: var(--suave); }
.titular { margin-bottom: 40px; }
.titular h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; }
.titular p:not(.antetitulo) { color: var(--gris); margin: 12px 0 0; }
.titular.centrado { text-align: center; max-width: 720px; margin-inline: auto; }
.titular-par { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.titular-par > p { margin: 0 !important; }

/* Soluciones */
.soluciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sol { position: relative; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; padding: 0 20px 20px; transition: transform .2s, box-shadow .2s; }
.sol:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40, 10, 30, .06), 0 20px 44px rgba(40, 10, 30, .14); }
.sol-img { margin: 0 -20px; aspect-ratio: 2 / 1; overflow: hidden; background: var(--suave); border-bottom: 1px solid var(--linea); }
.sol-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s; }
.sol:hover .sol-img img { transform: scale(1.04); }
.sol-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-top: -23px; position: relative; border: 3px solid var(--tarjeta); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.sol-ic.rosa { background: linear-gradient(135deg, #f0609a, var(--rosa-2)); }
.sol-ic.ciruela { background: linear-gradient(135deg, #9b4fd1, #6d2fa3); }
.sol-ic.azul { background: linear-gradient(135deg, #4d86ee, #2d5bc0); }
.sol-ic.dorado { background: linear-gradient(135deg, #eab04a, #c4851a); }
.sol h3 { font-size: 18px; margin: 14px 0 8px; }
.sol p { margin: 0 0 16px; color: var(--gris); font-size: 14px; flex: 1; }
.sol a { font-weight: 700; font-size: 13.5px; color: var(--rosa-tinta); text-decoration: none; }
.sol a:hover { text-decoration: underline; }

.cifras { margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: var(--radio); overflow: hidden; color: #fff;
  background: radial-gradient(600px 200px at 80% 0%, rgba(232, 80, 143, .25), transparent 70%), linear-gradient(135deg, #1f0c1c, var(--ciruela)); box-shadow: 0 20px 50px rgba(20, 9, 18, .3); }
.cifras div { display: grid; justify-items: center; gap: 4px; padding: 26px 12px; text-align: center; }
.cifras div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.cifras span { color: #f58ab5; }
.cifras strong { font: 800 22px "Montserrat", sans-serif; }
.cifras small { font-size: 12px; color: #bfa9b8; }

/* Plataforma */
.plataforma { display: grid; grid-template-columns: 1.75fr 1fr 1fr; gap: 6px; }
.pcard { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; }
.pcard h2 { font-size: 24px; font-weight: 800; }
.pcard > p:not(.antetitulo) { margin: 0; color: var(--gris); font-size: 14.5px; }
.pcard .antetitulo { margin: 0; }
.pcard .btn { align-self: flex-start; margin-top: auto; }
.pcard-ancha { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; }
.pcard-ancha .lista-check { font-size: 14px; gap: 7px; }
.pcard-ancha h2 { margin: 0 0 16px; }
.dispositivos { position: relative; padding: 0 18px 24px 0; }
.disp-pc { border-radius: 10px; border: 1px solid var(--linea); box-shadow: 0 14px 34px rgba(40, 10, 30, .18); }
.disp-tel { position: absolute; right: 0; bottom: 0; width: 30%; border-radius: 14px; border: 3px solid #1d101b; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.lista-check li { position: relative; padding-left: 28px; color: var(--gris); }
.lista-check li b { color: var(--tinta); }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--rosa-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8508f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pcard-ia { background: radial-gradient(400px 220px at 100% 0%, rgba(232, 80, 143, .28), transparent 70%), linear-gradient(160deg, #22101f, var(--ciruela)); color: #fff; border-color: rgba(255, 255, 255, .08); }
.pcard-ia .lista-check li { color: #dccbd6; }
.pcard-ia .lista-check li::before { background-color: rgba(232, 80, 143, .2); }
.chat-ej { display: grid; gap: 8px; font-size: 13px; }
.chat-ej p { margin: 0; padding: 9px 12px; border-radius: 12px; line-height: 1.45; }
.chat-yo { justify-self: end; max-width: 85%; background: rgba(232, 80, 143, .25); border-bottom-right-radius: 4px; }
.chat-bot { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-top-left-radius: 4px; color: #e7d8e1; }
.chat-bot b { color: #f58ab5; font-weight: 600; }

/* Módulos */
.modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mod { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--linea); transition: border-color .2s, box-shadow .2s; }
.mod:hover { border-color: color-mix(in srgb, var(--rosa) 40%, transparent); box-shadow: var(--sombra); }
.mod-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.mod-ic.t0 { background: var(--rosa-suave); color: var(--rosa); }
.mod-ic.t1 { background: rgba(141, 198, 63, .16); color: var(--verde-osc); }
.mod-ic.t2 { background: rgba(155, 79, 209, .13); color: #8a44c2; }
[data-theme="dark"] .mod-ic.t1 { color: var(--verde); }
[data-theme="dark"] .mod-ic.t2 { color: #c79af0; }
.mod h3 { font-size: 15.5px; margin-bottom: 4px; }
.mod p { margin: 0; font-size: 13.5px; color: var(--gris); line-height: 1.5; }

/* Recorrido */
.pestanas { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 28px; padding: 4px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--linea); }
.pestanas button { border: 0; background: none; height: 38px; padding: 0 18px; border-radius: 10px; font: 600 14px "Inter", sans-serif; color: var(--gris); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: linear-gradient(135deg, #f0609a, var(--rosa-2)); color: #fff; }
.marco-claro { background: var(--tarjeta); border-color: var(--linea); box-shadow: 0 30px 70px rgba(40, 10, 30, .16); max-width: 1223px; margin: 0 auto; }
.marco-claro .marco-barra { background: var(--suave); border-color: var(--linea); }
.marco-claro .marco-barra span { color: var(--tenue); }
.vitrina img { transition: opacity .2s; }
.vitrina img.cambiando { opacity: .35; }
.vitrina-pie { text-align: center; color: var(--gris); margin: 18px auto 0; max-width: 640px; font-size: 14.5px; }

/* App */
.seccion-ciruela { overflow: hidden; color: #fff; background: radial-gradient(800px 500px at 10% 30%, rgba(232, 80, 143, .25), transparent 60%), linear-gradient(160deg, #1d0b1a, var(--ciruela)); }
.seccion-ciruela h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; margin-bottom: 16px; }
.seccion-ciruela .entrada { color: #dccbd6; margin-bottom: 22px; }
.seccion-ciruela .lista-check li { color: #dccbd6; }
.seccion-ciruela .lista-check li b { color: #fff; }
.seccion-ciruela .lista-check li::before { background-color: rgba(232, 80, 143, .22); }
.app-in { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: center; }
.telefono-solo { position: relative; width: 100%; right: auto; bottom: auto; border-width: 7px; border-radius: 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(232, 80, 143, .2); }

/* Planes */
.ciclo { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--suave); border: 1px solid var(--linea); }
.ciclo[hidden] { display: none; }
.ciclo button { border: 0; background: none; height: 38px; padding: 0 20px; border-radius: 999px; font: 700 14px "Inter", sans-serif; color: var(--gris); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ciclo button[aria-pressed="true"] { background: var(--tarjeta); color: var(--rosa-tinta); box-shadow: 0 2px 8px rgba(40, 10, 30, .12); }
.ciclo em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--rosa); color: #fff; }
.ciclo em:empty { display: none; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 6px; align-items: center; max-width: 1080px; margin: 0 auto; }
.plan { position: relative; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; padding: 30px 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.plan-cod { margin: 0 0 6px; font: 800 12px "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.plan .plan-desc { font-size: 16px; font-weight: 700; margin: 0 0 18px; line-height: 1.35; }
.plan-precio { display: flex; align-items: baseline; gap: 6px; }
.plan-precio b { font: 800 36px "Montserrat", sans-serif; letter-spacing: -.02em; }
.plan-precio small { color: var(--tenue); font-size: 14px; }
.plan-ciclo { margin: 4px 0 18px; font-size: 13px; color: var(--tenue); }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14px; flex: 1; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 3px; color: var(--rosa); }
.plan .btn { align-self: flex-start; }
.plan.destacado { background: linear-gradient(160deg, #f0609a 0%, var(--rosa-2) 60%, #9e2360 100%); color: #fff; border-color: transparent; padding: 40px 30px; box-shadow: 0 30px 60px rgba(201, 51, 117, .35); }
.plan.destacado .plan-cod, .plan.destacado .plan-precio small, .plan.destacado .plan-ciclo { color: rgba(255, 255, 255, .8); }
.plan.destacado li svg { color: #fff; }
.plan-rec { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: #1a0b18; color: #fff; font: 800 11px "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cargando { grid-column: 1 / -1; text-align: center; color: var(--gris); }

/* Preguntas */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--rosa); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--gris); font-size: 15px; }

/* Llamada */
.llamada { color: #fff; background: linear-gradient(100deg, var(--rosa-2) 0%, #b3306e 40%, #6a1f5e 75%, #3d1440 100%); }
.llamada-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 0; flex-wrap: wrap; }
.llamada h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
.llamada p { margin: 6px 0 0; color: rgba(255, 255, 255, .85); }
.llamada-acc { display: flex; gap: 12px; flex-wrap: wrap; }

/* Pie */
.pie { background: #0b050a; color: #cdb9c6; padding: 64px 0 0; font-size: 14px; }
.pie-in { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.pie .marca { color: #fff; }
.pie-marca p { margin: 16px 0 0; max-width: 320px; }
.pie h4 { color: #fff; font-size: 14.5px; margin-bottom: 14px; }
.pie-in > div:not(.pie-marca) { display: grid; gap: 9px; align-content: start; }
.pie-in a, .pie .enlace { color: #cdb9c6; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.pie-in a:hover, .pie .enlace:hover { color: #fff; }
.pie-in p { margin: 0; display: flex; align-items: center; gap: 7px; }
.pie-marcas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; }
.pie-msoft { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.pie-msoft span { display: grid; line-height: 1.2; }
.pie-msoft small { color: #bfa9b8; font-size: 11px; }

/* WhatsApp */
.whatsapp { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25a55f; box-shadow: 0 12px 30px rgba(37, 165, 95, .45); transition: transform .2s; }
.whatsapp:hover { transform: scale(1.06); }
.whatsapp[hidden] { display: none; }

/* ---------- Demostración (entra desde la derecha) ---------- */
.lateral { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.lateral-fondo { position: absolute; inset: 0; background: rgba(10, 4, 9, .55); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); }
.lateral-caja { position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100%); background: var(--tarjeta); color: var(--tinta); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s; visibility: hidden; }
.lateral.abierto { pointer-events: auto; }
.lateral.abierto .lateral-fondo { opacity: 1; }
.lateral.abierto .lateral-caja { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 0, 0, .3); }
.lateral-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--linea); }
.lateral-cab h2 { font-size: 21px; }
.lateral-cab .ic-btn { color: var(--tinta); border-color: var(--linea); background: transparent; }
.lateral-cuerpo { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; gap: 12px; align-content: start; }
.lateral-pie { display: flex; justify-content: space-between; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.nota { margin: 0; color: var(--gris); font-size: 14px; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.campo small { font-weight: 400; color: var(--tenue); }
.campo input, .campo select, .campo textarea { width: 100%; font: 400 15px "Inter", sans-serif; color: var(--tinta); background: var(--fondo); border: 1px solid var(--linea); border-radius: 11px; padding: 11px 13px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-suave); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trampa { position: absolute; left: -9999px; }
.error { margin: 0; min-height: 20px; color: #c2410c; font-size: 13.5px; }
.listo { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 10px; }
.listo svg { color: #fff; background: linear-gradient(135deg, #f0609a, var(--rosa-2)); border-radius: 50%; padding: 12px; width: 58px; height: 58px; }
.listo p { margin: 0; color: var(--gris); }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .franja, .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .franja article:nth-child(4), .cifras div:nth-child(4) { border-left: 0; }
  .franja article:nth-child(n + 4), .cifras div:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .soluciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plataforma { grid-template-columns: 1fr 1fr; }
  .pcard-ancha { grid-column: 1 / -1; }
  .pie-in { grid-template-columns: 1fr 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: #140912; border-bottom: 1px solid rgba(255, 255, 255, .08); display: none; }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 8px; }
  .menu a.activo::after { display: none; }
  .menu-btn { display: inline-grid; }
  .portada-in, .app-in, .titular-par { grid-template-columns: minmax(0, 1fr); }
  .portada { padding-top: 40px; }
  .portada-vis { max-width: 680px; }
  .app-in { gap: 36px; }
  .telefono-solo { width: 240px; margin: 0 auto; }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .oculto-sm { display: none; }
  .barra-sup-izq { display: none; }
  .barra-sup:has(.barra-sup-der:empty) { display: none; }
  .barra-sup-in { justify-content: center; }
  .barra-sup-der { gap: 14px; }
  .cab-in { gap: 10px; }
  .cab-acc .btn-prim { height: 38px; padding: 0 14px; font-size: 13px; }
  .cab-acc .btn-prim span { display: none; }
  .marca-txt small { display: none; }
  .seccion { padding: 28px 0; }
  .franja, .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja article, .cifras div { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
  .franja article:nth-child(-n + 2), .cifras div:nth-child(-n + 2) { border-top: 0; }
  .franja article:nth-child(even), .cifras div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .08) !important; }
  .soluciones, .plataforma, .modulos, .pcard-ancha { grid-template-columns: minmax(0, 1fr); }
  .flota-a { left: 0; bottom: 18px; }
  .flota-b { display: none; }
  .portada-vis { padding: 0 18px 24px 0; }
  .campos-2 { grid-template-columns: 1fr; }
  .pie-in { grid-template-columns: 1fr 1fr; }
  .llamada-acc, .llamada-acc .btn { width: 100%; }
  .portada-acc .btn { width: 100%; }
}

/* Cabecera: «Acceso clientes» en escritorio, «Entrar» en el móvil (quien ya usa el sistema lo encuentra a la vista) */
.cab-entrar .txt-corto { display: none; }
@media (max-width: 720px) {
  .cab-entrar { height: 38px; padding: 0 14px; font-size: 13px; gap: 6px; }
  .cab-entrar .txt-largo { display: none; }
  .cab-entrar .txt-corto { display: inline; }
  /* En el móvil la demo se pide desde la portada y el pie (botones grandes); la cabecera queda para entrar */
  .cab-acc .cab-demo { display: none; }
  /* Pie: la última franja centrada */
  .pie-marcas { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .pie-msoft { justify-content: center; }
  .pie-msoft span { text-align: left; }
}

/* Facturación electrónica en cada plan */
.plan-ecf { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35;
  border: 1px solid color-mix(in srgb, var(--rosa) 45%, transparent); background: color-mix(in srgb, var(--rosa) 8%, transparent); }
.plan-ecf svg { flex: none; margin-top: 2px; color: var(--rosa); }
.plan.destacado .plan-ecf { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }
.plan.destacado .plan-ecf svg { color: #fff; }