/* iswCOP · web pública (2.3). Una sola identidad: el azul de la Sala 092, el naranja de la acción y el cian de los datos.
   Fuentes propias (Inter, licencia OFL): la web no pide nada a otros servidores. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-semibold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-bold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/interdisplay-bold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/interdisplay-extrabold.woff") format("woff"); }

:root {
  --azul-950: #0B1930;
  --azul-900: #0F2240;
  --azul-800: #13294B;
  --azul-700: #1D3051;
  --azul-600: #29426B;
  --azul-500: #20518F;
  --linea-osc: rgba(255, 255, 255, .12);
  --cian: #38B3C5;
  --cian-osc: #0C6B79;
  --naranja: #ED7D21;
  --naranja-2: #F59A4C;
  --naranja-osc: #9A4A06;
  --verde: #1F8A55;
  --verde-cl: #4FD08A;
  --rojo: #B83A43;
  --ambar: #A86A0B;
  --papel: #FFFFFF;
  --niebla: #F3F6FA;
  --niebla-2: #E8EEF6;
  --tinta: #13213A;
  --tinta-2: #46536A;
  --tinta-3: #66738A;
  --regla: #DCE3ED;
  --sobre-osc: #FFFFFF;
  --sobre-osc-2: #BFCCE0;
  --f-cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-titulo: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(15, 34, 64, .06), 0 8px 24px rgba(15, 34, 64, .08);
  --sombra-g: 0 2px 6px rgba(5, 15, 30, .25), 0 30px 70px rgba(5, 15, 30, .45);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body.web { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-cuerpo); font-size: 17px; line-height: 1.6; font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }
body.web .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.web .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.2em; }
:where(.web) h1, :where(.web) h2, :where(.web) h3 { margin: 0; font-family: var(--f-titulo); text-wrap: balance; letter-spacing: -.01em; }
:where(.web) p { margin: 0; }
:where(.web) a { color: var(--azul-500); text-underline-offset: 3px; }
:where(.web) a:hover { color: var(--azul-800); }
.web :focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
.envoltura { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.envoltura.estrecha { max-width: 860px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--naranja); color: #1A1206 !important; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.oculto-vis { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ante { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-500); }

/* ───────── Botones ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font: 600 15px/1.1 var(--f-cuerpo); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-g { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn-bloque { width: 100%; }
.btn-naranja { background: var(--naranja); border-color: var(--naranja); color: #1A1206 !important; box-shadow: 0 6px 18px rgba(237, 125, 33, .28); }
.btn-naranja:hover { background: var(--naranja-2); }
.btn-azul { background: var(--azul-800); border-color: var(--azul-800); color: #fff !important; }
.btn-azul:hover { background: var(--azul-600); }
.btn-claro { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #fff !important; }
.btn-claro:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.btn-borde { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff !important; }
.btn-borde:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn-plano { background: transparent; border-color: var(--regla); color: var(--tinta) !important; margin-top: 10px; }

/* ───────── Cabecera ───────── */
.cab { position: sticky; top: 0; z-index: 30; background: rgba(15, 34, 64, .97); color: #fff; border-bottom: 1px solid var(--linea-osc); backdrop-filter: saturate(140%) blur(8px); }
.cab-in { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.marca { display: inline-flex; align-items: center; gap: 11px; color: #fff !important; text-decoration: none; margin-right: auto; }
.marca-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--cian); color: #06222A; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.marca-ico .ico { width: 22px; height: 22px; vertical-align: 0; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-txt b { font-family: var(--f-titulo); font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.marca-txt b span { color: var(--cian); }
.marca-txt small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-osc-2); margin-top: 3px; }
.cab-nav { display: flex; align-items: center; gap: 4px; }
.cab-nav > a { color: #E3EAF5 !important; text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 12px; border-radius: 8px; }
.cab-nav > a:hover, .cab-nav > a[aria-current="page"] { background: rgba(255, 255, 255, .08); color: #fff !important; }
.cab-acc { display: inline-flex; gap: 8px; margin-left: 10px; }
.cab-menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; font: 600 15px var(--f-cuerpo); cursor: pointer; }
@media (max-width: 1080px) {
  .cab-menu { display: inline-flex; }
  .cab-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px max(20px, env(safe-area-inset-left)) 18px; background: var(--azul-900); border-bottom: 1px solid var(--linea-osc); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
  .cab-nav.abierto { display: flex; }
  .cab-nav > a { padding: 13px 12px; font-size: 16px; }
  .cab-acc { margin: 10px 0 0; flex-direction: column; }
  .cab-acc .btn { min-height: 50px; }
}

/* ───────── Portada ───────── */
.hero { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(1200px 600px at 85% 20%, rgba(56, 179, 197, .18), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(237, 125, 33, .12), transparent 60%),
  linear-gradient(180deg, var(--azul-900), var(--azul-800)); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 88px; }
.hero .ante { color: var(--cian); }
.hero h1 { margin-top: 16px; font-size: clamp(40px, 5vw, 66px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; color: var(--naranja); display: block; }
.entradilla { margin-top: 26px; font-size: 19px; line-height: 1.6; color: #D2DCEC; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.garantias { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: #D2DCEC; font-size: 15px; }
.garantias li { position: relative; padding-left: 30px; }
.garantias li::before { content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: rgba(79, 208, 138, .16); border: 1px solid rgba(79, 208, 138, .55); }
.garantias li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 7px; height: 4px; border-left: 2px solid var(--verde-cl); border-bottom: 2px solid var(--verde-cl); transform: rotate(-45deg); }
.hero-vis { position: relative; padding-bottom: 40px; }
.navegador { margin: 0; border-radius: 12px; overflow: hidden; background: #0A1628; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--sombra-g); }
.nav-barra { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #1B2B47; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3B4D6C; }
.nav-barra i:first-child { background: #E5675E; } .nav-barra i:nth-child(2) { background: #E9B649; } .nav-barra i:nth-child(3) { background: #5CBF6A; }
.nav-barra span { margin-left: 12px; flex: 1; max-width: 340px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: #A9B8D0; font: 11.5px/20px var(--f-mono); padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-img { display: block; width: 100%; height: auto; }
.telefono { margin: 0; }
.hero-vis .telefono { position: absolute; right: -14px; bottom: -6px; width: 27%; min-width: 150px; max-width: 210px; }
.tel-marco { border-radius: 28px; padding: 8px; background: #0A1324; border: 1px solid rgba(255, 255, 255, .18); box-shadow: var(--sombra-g); }
.tel-img { display: block; width: 100%; height: auto; border-radius: 21px; }
@media (max-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 48px; padding-bottom: 64px; }
  .hero-vis { padding-bottom: 28px; }
  .hero-vis .telefono { right: 4px; width: 30%; min-width: 0; }
}

/* ───────── Cifras ───────── */
.cifras { background: var(--azul-700); color: #fff; border-bottom: 3px solid var(--cian); }
.cifras-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifra { padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--linea-osc); }
.cifra:last-child { border-right: 0; }
.cifra b { font-family: var(--f-titulo); font-size: 40px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.cifra:nth-child(1) b { color: #F5A564; } .cifra:nth-child(2) b { color: #7FD3DF; } .cifra:nth-child(3) b { color: #74D79C; }
.cifra span { font-size: 14px; color: #C9D4E6; }
@media (max-width: 760px) {
  .cifras-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(2) { border-right: 0; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid var(--linea-osc); }
  .cifra b { font-size: 34px; }
}

/* ───────── Secciones ───────── */
.sec { padding: 96px 0; }
.sec-niebla { background: var(--niebla); }
.sec-azul { background: linear-gradient(180deg, var(--azul-800), var(--azul-900)); color: #fff; }
.sec-azul .ante { color: var(--cian); }
.sec-azul .entrada { color: #C9D4E6; }
.sec-pag { padding: 64px 0 96px; min-height: 60vh; }
.sec-cab { max-width: 760px; margin-bottom: 44px; display: flex; flex-direction: column; gap: 12px; }
.sec-cab h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; font-weight: 800; }
.sec-cab h2 { font-size: clamp(30px, 3.7vw, 46px); line-height: 1.08; font-weight: 800; }
.entrada { font-size: 19px; color: var(--tinta-2); line-height: 1.6; }
@media (max-width: 760px) { .sec { padding: 68px 0; } .sec-pag { padding: 40px 0 72px; } .sec-cab { margin-bottom: 32px; } .entrada { font-size: 17px; } }

.puntos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.puntos li { position: relative; padding-left: 28px; }
.puntos.si li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.puntos.no li::before, .puntos.no li::after { content: ""; position: absolute; left: 3px; top: 12px; width: 12px; height: 2px; background: var(--rojo); transform: rotate(45deg); }
.puntos.no li::after { transform: rotate(-45deg); }
.puntos.flecha li::before { content: "→"; position: absolute; left: 0; color: var(--naranja); font-weight: 700; }
.sec-azul .puntos.si li::before { border-color: var(--verde-cl); }

/* Problema */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radio); overflow: hidden; border: 1px solid var(--regla); box-shadow: var(--sombra); }
.duo > div { padding: 36px; }
.duo h3 { margin-top: 8px; font-size: 26px; line-height: 1.2; font-weight: 700; }
.duo-a { background: var(--papel); }
.duo-a .ante { color: var(--tinta-3); }
.duo-b { background: var(--azul-800); color: #fff; }
.duo-b .ante { color: var(--cian); }
.duo-b .puntos.si li::before { border-color: var(--verde-cl); }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo > div { padding: 26px 22px; } .duo h3 { font-size: 22px; } }

/* Módulos */
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mod { background: var(--papel); border: 1px solid var(--regla); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.mod:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: #C6D2E3; }
.mod-ico { width: 46px; height: 46px; border-radius: 12px; background: #E6EEFA; color: var(--azul-500); display: inline-flex; align-items: center; justify-content: center; }
.mod-ico .ico { width: 24px; height: 24px; vertical-align: 0; }
.mod h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.mod p { font-size: 15px; color: var(--tinta-2); line-height: 1.55; }
.mod-sala { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }
.mod-sala p { color: #C9D4E6; }
.mod-sala .mod-ico { background: rgba(56, 179, 197, .18); color: var(--cian); }

/* Así se trabaja */
.bloque { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.bloque + .bloque { margin-top: 96px; }
.bloque-inv .bloque-txt { order: 2; }
.bloque-n { font-family: var(--f-titulo); font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--naranja-osc); }
.bloque h3 { margin: 8px 0 14px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.1; }
.bloque-txt > p { color: var(--tinta-2); font-size: 18px; }
.bloque-vis { margin: 0; }
.bloque-vis .navegador { box-shadow: 0 2px 6px rgba(15, 34, 64, .12), 0 24px 60px rgba(15, 34, 64, .22); border-color: #C8D3E3; }
.bloque-movil .bloque-vis { display: flex; justify-content: center; }
.telefono-solo { width: min(300px, 70%); }
.telefono-solo .tel-marco { box-shadow: 0 2px 6px rgba(15, 34, 64, .15), 0 30px 60px rgba(15, 34, 64, .25); }
@media (max-width: 900px) {
  .bloque { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bloque-inv .bloque-txt { order: 0; }
  .bloque + .bloque { margin-top: 72px; }
}

/* Para quién */
.perfiles { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: stretch; }
.perfiles-foto { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--azul-800); box-shadow: var(--sombra); min-height: 320px; }
.perfiles-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.perfiles-lista { display: flex; flex-direction: column; gap: 14px; }
.perfil { background: var(--papel); border: 1px solid var(--regla); border-radius: var(--radio); padding: 22px 24px; }
.perfil h3 { font-size: 20px; font-weight: 700; }
.perfil-p { margin-top: 8px; color: var(--tinta-2); font-size: 15.5px; }
.perfil-r { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15.5px; }
.perfil-r .ico { color: var(--verde); margin-top: 3px; }
@media (max-width: 900px) { .perfiles { grid-template-columns: minmax(0, 1fr); } .perfiles-foto { min-height: 0; aspect-ratio: 16 / 10; } }

/* Red */
.red-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.niveles { display: flex; flex-direction: column; gap: 12px; }
.nivel { background: rgba(255, 255, 255, .05); border: 1px solid var(--linea-osc); border-left: 4px solid var(--cian); border-radius: 12px; padding: 18px 20px; }
.nivel-2 { border-left-color: var(--naranja); }
.nivel-3 { border-left-color: #E8606A; }
.nivel h3 { font-size: 19px; font-weight: 700; }
.nivel p { color: #C9D4E6; font-size: 15.5px; margin-top: 4px; }
.nivel .nivel-ej { color: #9FB0CB; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.red-frase { margin-top: 28px; font-family: var(--f-titulo); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.25; color: #fff; }
.red-mapa { margin: 0; }
.red-mapa img { display: block; width: 100%; height: auto; border-radius: var(--radio); }
@media (max-width: 900px) { .red-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Seguridad */
.sellos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sello { border: 1px solid var(--regla); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 8px; background: var(--papel); }
.sello-ico { width: 44px; height: 44px; border-radius: 12px; background: #E3F4F6; color: var(--cian-osc); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.sello-ico .ico { width: 22px; height: 22px; vertical-align: 0; }
.sello-et { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--cian-osc); }
.sello h3 { font-size: 19px; font-weight: 700; }
.sello p:last-child { color: var(--tinta-2); font-size: 15.5px; }
@media (max-width: 960px) { .sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sellos { grid-template-columns: minmax(0, 1fr); } }

/* Contratación */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: p; }
.paso { position: relative; background: var(--papel); border: 1px solid var(--regla); border-radius: var(--radio); padding: 26px 24px 24px; }
.paso-n { width: 40px; height: 40px; border-radius: 50%; background: var(--naranja); color: #1A1206; font-family: var(--f-titulo); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.paso h3 { margin-top: 14px; font-size: 21px; font-weight: 700; }
.paso p { margin-top: 6px; color: var(--tinta-2); font-size: 15.5px; }
.nota { margin-top: 24px; display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--tinta); }
.nota .ico { color: var(--cian-osc); }

/* Soporte */
.soporte-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.soporte-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.plazos { background: var(--niebla); border: 1px solid var(--regla); border-radius: var(--radio); padding: 26px; }
.plazos h2, .plazos h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.plazos table { width: 100%; border-collapse: collapse; }
.plazos th, .plazos td { padding: 12px 4px; border-top: 1px solid var(--regla); text-align: left; font-size: 15.5px; }
.plazos td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plazos th { font-weight: 600; }
.plazos th i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; vertical-align: 1px; }
.imp-bloquea th i { background: var(--rojo); } .imp-molesta th i { background: var(--naranja); } .imp-espera th i { background: #8FA1BC; }
.plazos-hor { margin-top: 14px; display: flex; gap: 8px; color: var(--tinta-2); font-size: 15px; }
.plazos-nota { margin-top: 10px; color: var(--tinta-3); font-size: 14px; }
.plazos .estado-chip { margin-top: 16px; }
@media (max-width: 900px) { .soporte-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.estado-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #E3F5EA; color: #145C33 !important; font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1px solid #B9E3C9; }
.estado-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(31, 138, 85, .18); }
.estado-chip.est-degradado, .estado-chip.est-mantenimiento { background: #FFF3DA; color: #6B4600 !important; border-color: #ECC57A; }
.estado-chip.est-degradado i, .estado-chip.est-mantenimiento i { background: var(--ambar); box-shadow: 0 0 0 4px rgba(168, 106, 11, .18); }
.estado-chip.est-incidencia { background: #FDE5E6; color: #8C1A20 !important; border-color: #EBA5A8; }
.estado-chip.est-incidencia i { background: var(--rojo); box-shadow: 0 0 0 4px rgba(184, 58, 67, .2); }

/* Preguntas */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--papel); border: 1px solid var(--regla); border-radius: 12px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 700; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 24px; width: 9px; height: 9px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq details p { padding-bottom: 18px; color: var(--tinta-2); }

/* Demostración */
.demo-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.demo-txt h2 { margin-top: 12px; font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.06; }
.demo-txt .entrada { margin-top: 16px; }
.demo-txt .puntos { color: #D2DCEC; }
.demo-form { background: var(--papel); color: var(--tinta); border-radius: 16px; padding: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; box-shadow: var(--sombra-g); }
@media (max-width: 900px) { .demo-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 560px) { .demo-form { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f-ancho { grid-column: 1 / -1; }
.f label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.f label small { font-weight: 400; color: var(--tinta-3); }
.f input, .f textarea, .f select { font: 400 16px/1.4 var(--f-cuerpo); color: var(--tinta); background: var(--papel); border: 1px solid #C2CDDB; border-radius: 10px; padding: 12px 13px; width: 100%; min-height: 48px; }
.f textarea { resize: vertical; min-height: 92px; }
.f input:focus, .f textarea:focus, .f select:focus { border-color: var(--azul-500); outline: 3px solid rgba(32, 81, 143, .2); outline-offset: 0; }
.f [aria-invalid="true"] { border-color: var(--rojo); }
.f-err { color: #A1232D; font-size: 13.5px; font-weight: 600; }
.f-check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.f-check input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--azul-500); }
.f-check label { flex: 1 1 200px; font-weight: 400; color: var(--tinta-2); font-size: 14.5px; }
.f-check .f-err { flex-basis: 100%; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 13px 15px; font-size: 15px; }
.aviso .ico { margin-top: 3px; }
.aviso-ok { background: #E3F5EA; color: #145C33; border: 1px solid #B9E3C9; }
.aviso-mal { background: #FDE5E6; color: #8C1A20; border: 1px solid #EBA5A8; }
.aviso-info { background: #E9F1FB; color: #17345E; border: 1px solid #C3D6EF; }

/* Acceso */
.acceso-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; }
.acceso-txt h1 { margin: 10px 0 14px; font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; line-height: 1.06; }
.acceso { background: var(--papel); border: 1px solid var(--regla); border-radius: 18px; padding: 30px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 16px; }
.acceso-cab { display: flex; gap: 14px; align-items: center; }
.acceso-cab h2 { font-size: 22px; font-weight: 800; }
.acceso-cab p { color: var(--tinta-3); font-size: 14px; }
.acceso form { display: flex; flex-direction: column; gap: 14px; }
.acceso-nota { color: var(--tinta-3); font-size: 13.5px; }
@media (max-width: 900px) { .acceso-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Soporte (página) */
.soporte-pag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: start; }
.soporte-pag-usuario { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.soporte-info { display: flex; flex-direction: column; gap: 16px; }
.soporte-quien { display: flex; gap: 8px; color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 960px) { .soporte-pag, .soporte-pag-usuario { grid-template-columns: minmax(0, 1fr); } }
.cargando { color: var(--tinta-3); padding: 20px 0; }

/* Estado del servicio */
.estado-grande { display: flex; gap: 20px; align-items: flex-start; border-radius: 16px; padding: 28px; background: #E3F5EA; border: 1px solid #B9E3C9; color: #10462A; }
.estado-grande.est-degradado, .estado-grande.est-mantenimiento { background: #FFF3DA; border-color: #ECC57A; color: #5A3B00; }
.estado-grande.est-incidencia { background: #FDE5E6; border-color: #EBA5A8; color: #74151B; }
.estado-ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.estado-ico .ico { width: 28px; height: 28px; vertical-align: 0; }
.estado-nivel { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.estado-grande h2 { font-size: 26px; font-weight: 800; margin: 4px 0 8px; }
.estado-grande p { margin-top: 6px; }
.estado-fecha { font-size: 14px; opacity: .85; }
.estado-ayuda { margin-top: 20px; color: var(--tinta-2); }
.h-sub { margin: 44px 0 16px; font-size: 22px; font-weight: 800; }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.historial li { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--regla); border-radius: 12px; padding: 14px 16px; }
.historial li > i { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--verde); flex: 0 0 auto; }
.historial li.est-degradado > i, .historial li.est-mantenimiento > i { background: var(--ambar); }
.historial li.est-incidencia > i { background: var(--rojo); }
.historial b { display: block; }
.historial span { color: var(--tinta-3); font-size: 14px; }
.historial p { margin-top: 4px; color: var(--tinta-2); font-size: 15px; }

/* Legal */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.legal-nav a { padding: 8px 14px; border-radius: 999px; background: var(--niebla); border: 1px solid var(--regla); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.legal h2 { margin: 40px 0 12px; font-size: 26px; font-weight: 800; scroll-margin-top: 90px; }
.legal h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 700; }
.legal p { color: var(--tinta-2); margin-top: 10px; }
.falta { background: #FFF3DA; color: #6B4600; padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* ───────── Pie ───────── */
.pie { background: var(--azul-950); color: var(--sobre-osc-2); font-size: 15px; }
.pie-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.pie-marca { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pie-marca .marca { margin: 0; }
.pie-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pie-nav div { display: flex; flex-direction: column; gap: 9px; }
.pie-nav b { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.pie-nav a { color: var(--sobre-osc-2) !important; text-decoration: none; }
.pie-nav a:hover { color: #fff !important; text-decoration: underline; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 26px; border-top: 1px solid var(--linea-osc); font-size: 13.5px; color: #8EA0BE; }
@media (max-width: 860px) { .pie-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pie-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────── Panel de soporte incrustado (soporte.js en la web) ───────── */
.web .sop-web { background: var(--papel); border: 1px solid var(--regla); border-radius: 16px; box-shadow: var(--sombra); padding: 24px; min-height: 240px; }

@media print {
  .cab, .pie, .hero-cta, .demo-form, .saltar { display: none !important; }
  .hero, .sec-azul, .cifras { background: #fff !important; color: #000 !important; }
}