/* AllSitesOK — limpio y de confianza: blanco, un solo azul, Inter, tarjetas suaves. */
/* Inter servida desde el propio dominio: Google Fonts manda la IP del visitante a Google. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2") }
:root {
  --fondo: #FFFFFF;
  --gris-fondo: #F6F8FB;
  --tinta: #0F172A;
  --suave: #475569;
  --tenue: #64748B;
  --linea: #E2E8F0;
  --linea-fuerte: #CBD5E1;
  --azul: #0B5FFF;
  --azul-hover: #0047D4;
  --azul-claro: #EEF4FF;
  --azul-borde: #C7D7FE;
  --marino: #0A1F44;
  --ok: #15803D;
  --ok-fondo: #ECFDF3;
  --ok-borde: #BBF7D0;
  --aviso: #A16207;
  --aviso-punto: #EAB308;
  --aviso-fondo: #FEFCE8;
  --mal: #B91C1C;
  --mal-fondo: #FEF2F2;
  --mal-borde: #FECACA;
  --pend: #94A3B8;
  --r: 8px;
  --r-grande: 12px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sombra-alta: 0 12px 32px -8px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased }
a { color: var(--azul); text-underline-offset: 2px }
a:hover { color: var(--azul-hover) }
:focus-visible { outline: 3px solid #93B4FD; outline-offset: 2px; border-radius: 4px }
img { max-width: 100% }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700 }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem) }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em }
p { margin: 0 0 1em }
.mono { font-variant-numeric: tabular-nums }
.suave { color: var(--suave) }
.peq { font-size: .875rem }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 12px; z-index: 50; border-radius: var(--r) }
.saltar:focus { left: 8px }
.envoltura { width: min(1160px, 100% - 32px); margin-inline: auto }

/* ---------- botones y formularios ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--tinta); border-radius: var(--r); background: var(--tinta); color: #fff; font: 600 .95rem var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s }
.btn:hover { background: #1E293B; color: #fff }
.btn.acento { background: var(--azul); border-color: var(--azul) }
.btn.acento:hover { background: var(--azul-hover); border-color: var(--azul-hover) }
.btn.linea { background: #fff; color: var(--tinta); border-color: var(--linea-fuerte) }
.btn.linea:hover { border-color: var(--tenue); background: var(--gris-fondo); color: var(--tinta) }
.btn.peligro { background: #fff; color: var(--mal); border-color: var(--mal-borde) }
.btn.peligro:hover { background: var(--mal-fondo) }
.btn.chico { min-height: 36px; padding: 0 14px; font-size: .875rem }
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px }
.ayuda { display: block; font-weight: 400; color: var(--suave); font-size: .85rem; margin-top: 2px }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  background: #fff; color: var(--tinta); font: 1rem var(--sans); transition: border-color .15s, box-shadow .15s }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro) }
input::placeholder { color: #94A3B8 }
.campo { margin-bottom: 16px }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400 }
.check input { width: 18px; height: 18px; accent-color: var(--azul) }
.form-linea { display: flex; gap: 10px; flex-wrap: wrap }
.form-linea > input { flex: 1 1 260px }
.form-linea > * { min-width: 0 }

.flash { padding: 12px 16px; border: 1px solid; border-radius: var(--r); margin: 0 0 16px; background: #fff; font-weight: 500 }
.flash.ok { border-color: var(--ok-borde); background: var(--ok-fondo); color: #14532D }
.flash.error { border-color: var(--mal-borde); background: var(--mal-fondo); color: #7F1D1D }

/* ---------- estados ---------- */
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--pend) }
.punto.ok { background: #22C55E; box-shadow: 0 0 0 3px #DCFCE7 }
.punto.aviso { background: var(--aviso-punto); box-shadow: 0 0 0 3px #FEF9C3 }
.punto.caida { background: #EF4444; box-shadow: 0 0 0 3px #FEE2E2 }
.etq { display: inline-block; font: 600 .75rem/1.4 var(--sans); padding: 2px 8px; border-radius: 6px; background: #F1F5F9; color: var(--suave); white-space: nowrap }
.etq.ok { background: var(--ok-fondo); color: var(--ok) }
.etq.aviso { background: var(--aviso-fondo); color: var(--aviso) }
.etq.caida, .etq.mal { background: var(--mal-fondo); color: var(--mal) }
.etq.acento { background: var(--azul-claro); color: var(--azul) }

/* ---------- cabecera publica ---------- */
.cab { border-bottom: 1px solid var(--linea); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 20 }
.cab .envoltura { display: flex; align-items: center; gap: 24px; min-height: 68px }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--tinta); text-decoration: none; letter-spacing: -.02em }
.logo:hover { color: var(--tinta) }
.logo svg { width: 28px; height: 28px; flex: none }
.marca { font-weight: 800; letter-spacing: -.035em; color: var(--marino); font-size: 1.2rem }
.marca b { color: var(--azul); font-weight: 800 }
.cab nav { display: flex; align-items: center; gap: 28px }
.cab .nav-central { margin-left: 40px }
.cab .nav-derecha { margin-left: auto; gap: 20px }
.cab nav a:not(.btn), .desplegable > button { color: #334155; text-decoration: none; font: 500 .92rem var(--sans) }
.cab nav a:not(.btn):hover, .desplegable > button:hover { color: var(--azul) }
.cab .nav-central a[aria-current="page"] { background: #EEF2F8; color: var(--marino); padding: 7px 12px; border-radius: 8px; margin: 0 -12px }
.cab .entrar { color: var(--azul) !important; font-weight: 600 !important }
.desplegable { position: relative }
.desplegable > button { background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px }
.desplegable > button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.desplegable .menu { display: none; position: absolute; top: calc(100% + 8px); left: -16px; width: 300px; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--r-grande); box-shadow: var(--sombra-alta); padding: 8px; z-index: 30 }
.desplegable > button[aria-expanded="true"] + .menu, .desplegable:hover .menu, .desplegable:focus-within .menu { display: block }
.desplegable .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px }
.desplegable .menu a { display: block; padding: 10px 12px; border-radius: var(--r) }
.desplegable .menu a:hover { background: var(--azul-claro) }
.desplegable .menu b { display: block; color: var(--tinta); font-weight: 600 }
.desplegable .menu span { font-size: .82rem; color: var(--suave) }
@media (max-width: 1020px) { .cab .solo-ancho { display: none } .cab nav { gap: 14px } }

/* ---------- portada ---------- */
.heroe { padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); background: linear-gradient(180deg, var(--azul-claro) 0%, #fff 75%) }
.heroe .rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center }
@media (max-width: 920px) { .heroe .rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px } }
.heroe h1 em { font-style: normal; color: var(--azul) }
.heroe .entrada { font-size: 1.15rem; color: var(--suave); max-width: 33em; margin-bottom: 28px }
.analizador { display: flex; gap: 8px; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: var(--r-grande); padding: 6px; max-width: 540px; box-shadow: var(--sombra-alta) }
.analizador input { border: 0; min-height: 48px; font: 500 1.05rem var(--sans); padding-left: 12px; background: transparent; min-width: 0; box-shadow: none !important }
.analizador:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro), var(--sombra-alta) }
.analizador .btn { min-height: 48px; padding: 0 22px }
@media (max-width: 480px) { .analizador { flex-direction: column } }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: .9rem; color: var(--suave); padding: 0; list-style: none }
.garantias li { display: inline-flex; align-items: center; gap: 6px }
.garantias li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2315803D'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }

/* Tablero de ejemplo: tarjeta clara */
.tablero { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra-alta); overflow: hidden; font-size: .92rem }
.tablero .t-cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); font-weight: 600; background: var(--gris-fondo) }
.tablero .t-cab span:last-child { font-weight: 500; color: var(--tenue); font-size: .8rem }
.tablero .t-fila { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--linea) }
.tablero .t-fila:last-child { border-bottom: 0 }
.tablero .t-fila b { font-weight: 600 }
.tablero .t-fila small { display: block; color: var(--suave); font-size: .82rem }
.tablero .t-dato { font: 600 .78rem var(--sans); padding: 3px 8px; border-radius: 6px; background: var(--ok-fondo); color: var(--ok); white-space: nowrap }
.tablero .t-dato.mal { background: var(--mal-fondo); color: var(--mal) }
.tablero .t-dato.aviso { background: var(--aviso-fondo); color: var(--aviso) }
.tablero .t-dato.neutro { background: #F1F5F9; color: var(--tinta) }

.confianza { border-bottom: 1px solid var(--linea); background: #fff }
.confianza ul { list-style: none; margin: 0 auto; padding: 28px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px }
@media (max-width: 860px) { .confianza ul { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 480px) { .confianza ul { grid-template-columns: minmax(0, 1fr) } }
.confianza li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--suave) }
.confianza li b { display: block; color: var(--tinta); font-weight: 600; font-size: .95rem }
.confianza svg { width: 22px; height: 22px; flex: none; color: var(--azul); margin-top: 2px }

.seccion { padding: clamp(56px, 8vw, 96px) 0 }
.seccion.gris { background: var(--gris-fondo) }
.seccion .cab-sec { max-width: 680px; margin-bottom: 40px }
.seccion .cab-sec p { color: var(--suave); font-size: 1.1rem }
.antetitulo { font: 600 .9rem var(--sans); color: var(--azul); margin-bottom: 10px; display: block }

.roto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px }
.roto div { padding: 22px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra) }
.roto .cod { font: 600 .78rem var(--sans); color: var(--ok); background: var(--ok-fondo); padding: 2px 8px; border-radius: 6px; display: inline-block; margin-bottom: 12px }
.roto .pero { font: 600 .9rem var(--sans); color: var(--mal); display: block; margin-top: 12px }
.roto p { margin: 0; color: var(--suave) }

.comprob { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: 0; list-style: none; margin: 0 }
.comprob li { padding: 20px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande) }
.comprob li b { display: block; font-weight: 600; margin-bottom: 4px }
.comprob li span { color: var(--suave); font-size: .95rem }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: p; padding: 0; list-style: none; margin: 0 }
.pasos li { counter-increment: p; padding: 22px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: #fff }
.pasos li::before { content: counter(p); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-weight: 700; margin-bottom: 14px }
.pasos p { color: var(--suave); margin: 0 }

.franja { background: var(--azul-claro); border-top: 1px solid var(--azul-borde); border-bottom: 1px solid var(--azul-borde) }
.franja .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center }
.franja p { color: var(--suave) }
@media (max-width: 860px) { .franja .envoltura { grid-template-columns: minmax(0, 1fr) } }

.pie { padding: 56px 0 28px; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--linea); background: var(--gris-fondo) }
.pie-rej { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px }
@media (max-width: 860px) { .pie-rej { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pie-marca { grid-column: 1 / -1 } }
.pie-rej > * { display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.pie h2 { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); margin: 0 0 4px }
.pie a { color: var(--suave); text-decoration: none }
.pie a:hover { color: var(--azul); text-decoration: underline }
.pie .logo { color: var(--tinta) }
.pie-marca p { margin: 0; max-width: 22em }
.pie-estado { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ok) }
.pie-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: .82rem; color: var(--tenue) }

/* ---------- analisis ---------- */
.informe-rapido { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra); overflow: hidden }
.informe-rapido .fila { display: grid; grid-template-columns: 24px 190px minmax(0, 1fr); gap: 14px; padding: 15px 20px; border-top: 1px solid var(--linea); align-items: start }
.informe-rapido .fila:first-child { border-top: 0 }
@media (max-width: 600px) { .informe-rapido .fila { grid-template-columns: 24px minmax(0, 1fr) } .informe-rapido .fila .txt { grid-column: 2 } }
.ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem var(--sans); color: #fff; flex: none }
.ico.ok { background: var(--ok) } .ico.aviso { background: #CA8A04 } .ico.mal { background: var(--mal) }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: start }
@media (max-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1fr) } }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 24px; box-shadow: var(--sombra) }
.caja.oscura { background: var(--azul-claro); border-color: var(--azul-borde); box-shadow: none }
.caja.oscura p { color: var(--suave) }
.caja.mal { border-color: var(--mal-borde) }

/* ---------- precios ---------- */
.planes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-top: 12px }
@media (max-width: 1100px) { .planes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) } }
.plan { padding: 24px 20px; border: 1px solid var(--linea); border-radius: var(--r-grande); background: #fff; display: flex; flex-direction: column; box-shadow: var(--sombra); position: relative }
.plan.dest { border: 2px solid var(--azul); box-shadow: var(--sombra-alta) }
.plan[data-marca]::before { content: attr(data-marca); position: absolute; top: -12px; left: 18px; background: var(--azul); color: #fff; font: 600 .75rem var(--sans); padding: 3px 10px; border-radius: 6px }
.plan .precio { font: 700 2.2rem/1 var(--sans); margin: 14px 0 4px; letter-spacing: -.03em }
.plan .precio small { font-size: .95rem; font-weight: 500; color: var(--suave); letter-spacing: 0 }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; font-size: .9rem; flex: 1 }
.plan li { padding: 5px 0 5px 24px; position: relative }
.plan li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 14px; background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 6' fill='none' stroke='%2315803D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.plan li.no { color: #94A3B8 }
.plan li.no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23CBD5E1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") }
.tabla-func { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); font-size: .92rem; overflow: hidden }
.tabla-func th, .tabla-func td { padding: 12px 16px; border-bottom: 1px solid var(--linea); text-align: left }
.tabla-func tbody tr:last-child th, .tabla-func tbody tr:last-child td { border-bottom: 0 }
.tabla-func thead th { font-weight: 600; background: var(--gris-fondo) }
.tabla-func td.c { text-align: center; font-weight: 600 }
.tabla-func td.si { color: var(--ok) } .tabla-func td.no { color: #CBD5E1 }
.scroll-x { overflow-x: auto }

/* ---------- auth ---------- */
.auth { max-width: 440px; margin: 56px auto 72px; padding: 0 16px }
.auth .caja { padding: 28px }

/* ---------- app ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--gris-fondo) }
.lateral { background: #fff; border-right: 1px solid var(--linea); padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px }
.lateral .logo { margin: 4px 10px 24px }
.lateral a.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--suave); text-decoration: none; padding: 9px 12px; border-radius: var(--r); font-weight: 500; font-size: .95rem }
.lateral a.nav:hover { background: var(--gris-fondo); color: var(--tinta) }
.lateral a.nav[aria-current="page"] { background: var(--azul-claro); color: var(--azul); font-weight: 600 }
.lateral .cuenta-min { margin-top: auto; border-top: 1px solid var(--linea); padding: 14px 12px 0; font-size: .85rem; color: var(--suave) }
.lateral .cuenta-min b { color: var(--tinta); display: block }
.lateral .cuenta-min button { background: none; border: 0; color: var(--azul); padding: 0; cursor: pointer; font: inherit; margin-top: 6px }
.lateral .cuenta-min button:hover { text-decoration: underline }
.contador { background: #EF4444; color: #fff; font: 700 .72rem var(--sans); padding: 1px 7px; border-radius: 10px }
.principal { padding: 32px clamp(16px, 3.2vw, 44px) 64px; min-width: 0 }
.principal > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px }
.principal > header h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 4px }
.migas { font-size: .875rem; margin-bottom: 6px; color: var(--suave) }
.migas a { color: var(--suave); text-decoration: none }
.migas a:hover { color: var(--azul) }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 2px; border-right: 0; border-bottom: 1px solid var(--linea) }
  .lateral .logo { margin: 0 auto 0 0; font-size: 1rem }
  .lateral a.nav { padding: 7px 10px; font-size: .9rem }
  .lateral .cuenta-min { display: none }
}

.resumen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px }
@media (max-width: 900px) { .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.resumen div { padding: 18px 20px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra) }
.resumen b { display: block; font: 700 1.75rem/1.15 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.resumen span { font-size: .85rem; color: var(--suave) }
.resumen .ok b { color: var(--ok) } .resumen .aviso b { color: var(--aviso) } .resumen .caida b { color: var(--mal) }

.lista-webs { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra); overflow: hidden }
.lista-webs .w { display: grid; grid-template-columns: 14px minmax(0, 1.6fr) minmax(0, 1.4fr) 96px 90px; gap: 16px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; transition: background .12s }
.lista-webs .w:first-child { border-top: 0 }
.lista-webs .w:hover { background: #F8FAFC }
.lista-webs .w.caida { background: #FFFBFB }
.lista-webs .nom b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.lista-webs .nom small { color: var(--tenue); font-size: .82rem }
.lista-webs .det { font-size: .9rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lista-webs .det.caida { color: var(--mal); font-weight: 600 }
.lista-webs .det.aviso { color: var(--aviso) }
.lista-webs .num { font-size: .92rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums }
.lista-webs .num small { display: block; color: var(--tenue); font-size: .72rem; font-weight: 500 }
@media (max-width: 760px) {
  .lista-webs .w { grid-template-columns: 14px minmax(0, 1fr) auto }
  .lista-webs .det { grid-column: 2 / 4 }
  .lista-webs .num.ms { display: none }
}
.vacio { padding: 40px 28px }

.rejilla-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start }
.rejilla-panel > * { min-width: 0 }
@media (max-width: 1100px) { .rejilla-panel { grid-template-columns: minmax(0, 1fr) } }
.bloque { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); margin-bottom: 20px; box-shadow: var(--sombra); overflow: hidden }
.bloque > h2, .bloque > .bloque-cab { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; padding: 15px 20px; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: 12px }
.bloque .dentro { padding: 20px }
.alerta-min { padding: 13px 20px; border-top: 1px solid var(--linea); font-size: .9rem }
.alerta-min:first-of-type { border-top: 0 }
.alerta-min time { display: block; color: var(--tenue); font-size: .8rem; margin-top: 2px }

.barras { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 32px }
.barras i { display: block; border-radius: 2px; background: #E2E8F0 }
.barras i.b100 { background: #22C55E } .barras i.b99 { background: #86EFAC } .barras i.b95 { background: var(--aviso-punto) } .barras i.bmal { background: #EF4444 }
.barras-pie { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tenue); margin-top: 6px }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 700px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.cifras div { padding: 18px 20px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea) }
.cifras b { display: block; font: 700 1.45rem var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.cifras span { font-size: .84rem; color: var(--suave) }

.estado-grande { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); margin-bottom: 20px; box-shadow: var(--sombra) }
.estado-grande.ok { background: var(--ok-fondo); border-color: var(--ok-borde) }
.estado-grande.aviso { background: var(--aviso-fondo); border-color: #FDE68A }
.estado-grande.caida { background: var(--mal-fondo); border-color: var(--mal-borde) }
.estado-grande b { font-size: 1.1rem; display: block }
.estado-grande .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
@media (max-width: 600px) { .estado-grande { flex-wrap: wrap } .estado-grande .acciones { margin-left: 30px } }

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem }
.tabla th, .tabla td { text-align: left; padding: 11px 20px; border-top: 1px solid var(--linea); vertical-align: top }
.tabla th { font-weight: 600; font-size: .8rem; color: var(--suave); border-top: 0; border-bottom: 1px solid var(--linea); background: var(--gris-fondo) }
.tabla td.mono { white-space: nowrap }

.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: .92rem }
.dl dt { color: var(--suave) }
.dl dd { margin: 0; overflow-wrap: anywhere }

.graf svg { width: 100%; height: 190px; display: block }
.graf .eje { font: 11px var(--sans); fill: var(--tenue) }

.codigo { font: .84rem var(--mono); background: var(--gris-fondo); border: 1px solid var(--linea); padding: 10px 12px; border-radius: var(--r); overflow-x: auto; white-space: nowrap; display: block }

.aviso-lista { list-style: none; padding: 0; margin: 0 }
.aviso-lista li { padding: 12px 20px; border-top: 1px solid var(--linea); display: flex; gap: 10px; align-items: baseline }
.aviso-lista li:first-child { border-top: 0 }

.bloqueado { padding: 20px; color: var(--suave) }
.bloqueado strong { color: var(--tinta) }

.activado { max-width: 680px }
.activado .lista-check { list-style: none; padding: 0; margin: 0 0 20px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra); overflow: hidden }
.activado .lista-check li { display: flex; gap: 12px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--linea); font-size: .95rem }
.activado .lista-check li:first-child { border-top: 0 }
.sello { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--ok-fondo); border: 1px solid var(--ok-borde); border-radius: var(--r-grande); margin-bottom: 24px }
.sello b { font-size: 1.1rem; color: #14532D }

/* ================================================================
   Panel v2: lateral con iconos, pie con ayuda y promo, barra superior.
   ================================================================ */
.app { grid-template-columns: 250px minmax(0, 1fr); background: #F5F8FD }
.lateral { padding: 22px 14px 16px; gap: 4px; border-right: 1px solid #E6ECF5 }
.lateral .logo { margin: 2px 10px 30px }
.lateral .logo svg { width: 32px; height: 32px }
.lateral .logo .marca { font-size: 1.3rem }
.lateral a.nav, .lateral button.nav { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 11px 14px; border-radius: 10px;
  color: #334155; font: 500 .96rem var(--sans); text-decoration: none; background: none; border: 0; width: 100%; cursor: pointer; text-align: left }
.lateral a.nav:hover, .lateral button.nav:hover { background: #F1F5FB; color: var(--tinta) }
.lateral a.nav[aria-current="page"] { background: #E8F0FF; color: var(--azul); font-weight: 600 }
.lateral .ni { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.lateral .contador { margin-left: auto; background: #EF4444; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; padding: 0 6px }
.lat-pie { margin-top: auto; padding-top: 16px; border-top: 1px solid #E6ECF5; display: flex; flex-direction: column; gap: 4px }
.lat-pie form { margin: 0 }
.lat-promo { margin-top: 18px; border-radius: 14px; padding: 18px; color: #DCE6F7; font-size: .85rem;
  background: radial-gradient(90% 70% at 100% 100%, rgba(59, 130, 255, .5) 0%, rgba(59, 130, 255, 0) 70%), linear-gradient(160deg, #0A2A66 0%, #061634 100%) }
.lat-promo b { display: block; color: #fff; font-size: 1.02rem; margin-bottom: 4px }
.lat-promo p { margin: 0 0 14px }
.lat-promo a { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--azul); font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 8px }
.lat-promo a:hover { background: #E8F0FF; color: var(--azul) }
.barra-sup { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin: -8px 0 18px }
.campana { position: relative; color: #334155; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% }
.campana:hover { background: #E8F0FF; color: var(--azul) }
.campana .ni { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.campana i { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px #F5F8FD }
.yo { display: flex; align-items: center; gap: 12px; font-size: .9rem; line-height: 1.25 }
.yo b { display: block; color: var(--tinta) }
.yo small { color: #64748B }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .lateral { padding: 10px 12px }
  .lateral .logo { margin: 0 auto 0 0 }
  .lateral a.nav { padding: 8px 10px; font-size: .9rem; width: auto; gap: 8px }
  .lateral .ni { width: 18px; height: 18px }
  .lat-pie { display: none }
  .barra-sup { margin: 0 0 12px }
  .yo span:last-child { display: none }
}

/* ================================================================
   Portada v2 (h-*): producto a la vista, estado «All sites OK» como marca.
   Solo se anima transform, stroke y box-shadow: nunca opacity (sale en blanco
   si la animación no llega) ni el titular del héroe (LCP).
   ================================================================ */
.h-heroe h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -.035em; max-width: 13em }
.h-heroe h1 em { display: block }
.h-escena { position: relative; padding: 18px 0 }
.h-escena .tablero { position: relative; z-index: 1 }
.h-graf { padding: 12px 18px 14px; border-top: 1px solid var(--linea); background: #FBFCFE }
.h-graf svg { width: 100%; height: 44px; display: block }
.h-graf span { font-size: .75rem; color: var(--tenue) }
.h-linea { fill: none; stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round }
.h-flota { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--r-grande); padding: 10px 14px; box-shadow: var(--sombra-alta); font-size: .85rem; line-height: 1.3 }
.h-flota b { display: block; font-weight: 600 }
.h-flota small { color: var(--suave); font-size: .78rem }
.h-flota svg { width: 22px; height: 22px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; flex: none }
.h-f1 { top: -6px; right: -18px; border-color: var(--mal-borde); animation: h-flotar 6s ease-in-out infinite }
.h-f2 { bottom: -10px; left: -22px; animation: h-flotar 7s ease-in-out -2s infinite }
@keyframes h-flotar { 50% { transform: translateY(-8px) } }
@media (max-width: 1100px) { .h-f1 { right: 8px } .h-f2 { left: 8px } }
@media (max-width: 520px) { .h-flota { display: none } }

/* franja de estado */
.h-estado { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #13305F 0%, var(--tinta) 55%); color: #E2E8F0; padding: clamp(48px, 7vw, 80px) 0 32px }
.h-estado .envoltura { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center }
.h-estado-ok { display: flex; gap: 22px; align-items: center }
.h-estado h2 { margin: 0; color: #fff; font-size: clamp(2.1rem, 5vw, 4.2rem); white-space: nowrap; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .95 }
.h-estado-ok p { margin: 10px 0 0; font-size: 1.05rem; color: #CBD5E1 }
.h-latido { width: 26px; height: 26px; border-radius: 50%; background: #22C55E; flex: none; animation: h-latir 2s ease-out infinite }
@keyframes h-latir { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6) } 100% { box-shadow: 0 0 0 22px rgba(34, 197, 94, 0) } }
.h-monitor { position: absolute; left: 0; right: 0; bottom: 58px; width: 100%; height: 70px; pointer-events: none }
.h-monitor path { fill: none; stroke: rgba(34, 197, 94, .35); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  stroke-dasharray: 1400; animation: h-trazo 5s linear infinite }
@keyframes h-trazo { from { stroke-dashoffset: 2800 } to { stroke-dashoffset: 0 } }
.h-contadores { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap }
.h-contadores li { background: #0F1A30; border: 1px solid #1E3A5F; border-radius: var(--r-grande); padding: 14px 18px; min-width: 150px; backdrop-filter: blur(4px) }
.h-contadores b { display: block; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2 }
.h-contadores span { font-size: .8rem; color: #94A3B8 }
.h-estado-mal { position: relative; grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding-top: 20px; border-top: 1px solid #1E293B; font-size: .9rem; color: #94A3B8 }
.h-estado-mal b { color: #FCA5A5; text-transform: uppercase; letter-spacing: .04em }
.h-estado .punto.caida { box-shadow: 0 0 0 3px rgba(239, 68, 68, .25) }
@media (max-width: 900px) { .h-estado .envoltura { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 480px) { .h-contadores li { min-width: 0; flex: 1 1 40% } .h-latido { width: 18px; height: 18px } }

/* héroe: rejilla de puntos y resplandor, sin tocar el titular */
.h-heroe { position: relative; overflow: hidden;
  background: radial-gradient(60% 70% at 85% 30%, rgba(59, 130, 246, .16), transparent 70%), linear-gradient(180deg, var(--azul-claro) 0%, #fff 80%) }
.h-heroe::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(29, 78, 216, .13) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%) }
.h-heroe .envoltura { position: relative }
.h-heroe h1 { font-weight: 800 }
.h-ticker { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--tinta); color: #CBD5E1; font: 500 .78rem var(--mono); white-space: nowrap; overflow: hidden }
.h-ticker span:last-child { overflow: hidden; text-overflow: ellipsis }
.h-radar { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; flex: none; animation: h-latir 1.6s ease-out infinite }

/* ilustraciones de las ventanas */
.h-ilu { height: 178px; padding: 16px; background: #FBFCFE; border-bottom: 1px solid var(--linea); position: relative; display: flex; flex-direction: column; gap: 7px; overflow: hidden }
.h-ilu .campo-f { display: block; height: 16px; border: 1px solid var(--linea-fuerte); border-radius: 4px; background: #fff }
.h-ilu .campo-f.alto { height: 34px }
.h-ilu .boton-f { align-self: flex-start; background: var(--azul); color: #fff; font: 600 .72rem var(--sans); padding: 5px 14px; border-radius: 4px }
.h-ilu .toast { position: absolute; right: 12px; bottom: 10px; left: 12px; font: 600 .74rem var(--sans); padding: 7px 10px; border-radius: 6px; box-shadow: var(--sombra-alta) }
.h-ilu .toast.mal { background: #FEF2F2; color: var(--mal); border: 1px solid var(--mal-borde) }
.h-ilu-pago .tarjeta-f { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: #fff; font: 500 .75rem var(--mono); color: var(--suave) }
.h-ilu-pago .tarjeta-f i { width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #1D4ED8, #60A5FA) }
.h-ilu-pago .total-f { display: flex; justify-content: space-between; font-size: .8rem; color: var(--suave) }
.h-ilu-pago .total-f b { color: var(--tinta) }
.h-ilu-google { gap: 2px; font-size: .74rem; line-height: 1.35 }
.h-ilu-google small { color: #475569; font-size: .68rem }
.h-ilu-google small.sep { margin-top: 10px }
.h-ilu-google b { color: #1A0DAB; font-weight: 500; font-size: .86rem }
.h-ilu-google span { color: var(--suave) }
.h-ilu-google mark { background: #FEE2E2; color: var(--mal); padding: 0 2px; border-radius: 2px }
.h-ilu-ssl { flex-direction: row; align-items: center; gap: 12px }
.h-ilu-ssl svg { width: 44px; height: 44px; fill: none; stroke: var(--aviso); stroke-width: 2.4; stroke-linecap: round; flex: none }
.h-ilu-ssl div { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.35 }
.h-ilu-ssl b { display: block; font-size: .86rem }
.h-ilu-ssl span { color: var(--suave) }
.h-ilu-ssl .cuenta-f { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--aviso-punto);
  font: 800 1.4rem/1 var(--sans); color: var(--aviso) }
.h-ilu-ssl .cuenta-f small { display: block; font-size: .6rem; font-weight: 600; margin-top: -8px }

/* pantalla de bloqueo */
.h-hora { color: #fff; font: 700 3.6rem/1 var(--sans); letter-spacing: -.04em; text-align: center; margin: 4px 0 26px; font-variant-numeric: tabular-nums }
.h-hora small { display: block; font-size: .85rem; font-weight: 500; letter-spacing: 0; color: #CBD5E1; margin-top: 8px }

/* panel de ejemplo vivo */
.h-cap-main { position: relative; overflow: hidden }
.h-cap-main .etq { transition: background .4s, color .4s }
.h-captura .lista-webs .w { position: relative; transition: background .4s }
.h-captura .lista-webs .w.escanea { background: var(--azul-claro) }
.h-captura .lista-webs .w.escanea::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azul) }
.h-captura .punto { transition: background .3s, box-shadow .3s }
.h-captura .punto.caida { animation: h-latir-rojo 1.4s ease-out infinite }
@keyframes h-latir-rojo { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55) } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0) } }
.h-cap-toast { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; gap: 12px; align-items: center; max-width: calc(100% - 40px);
  background: var(--tinta); color: #fff; border-radius: var(--r-grande); padding: 12px 16px; box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .45);
  font-size: .85rem; line-height: 1.35; transform: translateY(calc(100% + 40px)); transition: transform .55s cubic-bezier(.2, .8, .2, 1) }
.h-cap-toast.visible { transform: none }
.h-cap-toast b { display: block; font-weight: 600 }
.h-cap-toast small { color: #CBD5E1; font-size: .8rem }
.h-linea { stroke-dasharray: 100; animation: h-dibuja 2.2s cubic-bezier(.3, .6, .2, 1) .3s both }
@keyframes h-dibuja { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }

/* entrada al hacer scroll: solo transform */
.sube { transform: translateY(32px); transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
.sube.visto { transform: none }
.h-ventana, .h-tarjeta, .h-vigila li { transition: transform .9s cubic-bezier(.2, .7, .2, 1), box-shadow .25s }
.h-ventana.visto:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta) }

/* ventanas de navegador */
.h-ventanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1000px) { .h-ventanas { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 540px) { .h-ventanas { grid-template-columns: minmax(0, 1fr) } }
.h-ventana { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column }
.nav-barra { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #F1F5F9; border-bottom: 1px solid var(--linea) }
.nav-barra i { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1 }
.nav-barra span { margin-left: 8px; flex: 1; min-width: 0; background: #fff; border-radius: 5px; padding: 2px 8px; font-size: .72rem; color: var(--tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.h-v-cuerpo { padding: 18px; display: flex; flex-direction: column; flex: 1 }
.h-num { font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue) }
.h-v-cuerpo p { margin: 8px 0 16px; color: var(--suave); font-size: .95rem; flex: 1 }
.h-v-cuerpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.h-v-cuerpo li { display: flex; gap: 8px; align-items: center; font-size: .88rem; font-weight: 600; padding: 7px 10px; border-radius: 6px }
.h-v-cuerpo li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none }
.h-v-cuerpo li.si { background: var(--ok-fondo); color: var(--ok) } .h-v-cuerpo li.si::before { background: #22C55E }
.h-v-cuerpo li.no { background: var(--mal-fondo); color: var(--mal) } .h-v-cuerpo li.no::before { background: #EF4444 }
.h-v-cuerpo li.av { background: var(--aviso-fondo); color: var(--aviso) } .h-v-cuerpo li.av::before { background: var(--aviso-punto) }
.h-remate { margin: 32px 0 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em }

/* qué vigilamos */
.h-vigila { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--r-grande); overflow: hidden }
@media (max-width: 1000px) { .h-vigila { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 540px) { .h-vigila { grid-template-columns: minmax(0, 1fr) } }
.h-vigila li { background: #fff; padding: 24px 22px; display: flex; flex-direction: column; gap: 6px }
.h-vigila b { font-weight: 600; font-size: 1.02rem }
.h-vigila span:not(.h-ico) { color: var(--suave); font-size: .92rem; flex: 1 }
.h-vigila em { font: 600 .75rem var(--sans); color: var(--ok); margin-top: 6px }
.h-vigila em.pro { color: var(--azul) }
.h-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--azul-claro); display: grid; place-items: center; margin-bottom: 10px }
.h-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* alertas */
.h-alertas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: center }
@media (max-width: 860px) { .h-alertas { grid-template-columns: minmax(0, 1fr) } }
.h-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px }
.h-lista li { padding-left: 28px; position: relative }
.h-lista li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2315803D'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.h-movil { background: linear-gradient(160deg, #1E3A8A, #0F172A 70%); border: 10px solid #0B1120; border-radius: 40px; padding: 14px 14px 56px;
  box-shadow: var(--sombra-alta); max-width: 360px; width: 100%; justify-self: center }
.h-movil-cab { display: flex; justify-content: space-between; align-items: center; color: #fff; font: 600 .78rem var(--sans); padding: 2px 10px 22px }
.h-isla { width: 84px; height: 22px; background: #0B1120; border-radius: 12px }
.h-aviso { background: #F8FAFC; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; font-size: .86rem; line-height: 1.35; border-left: 4px solid }
.h-aviso.mal { border-left-color: #EF4444 } .h-aviso.ok { border-left-color: #22C55E }
.h-aviso > b { display: block; margin-bottom: 2px }
.h-aviso > span { color: var(--suave) }
.h-aviso-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .75rem; color: var(--suave) }
.h-aviso-cab b { font-weight: 600; color: var(--tinta) }
.h-aviso-cab time { margin-left: auto }
.h-app { width: 20px; height: 20px; border-radius: 6px; background: var(--azul); color: #fff; display: grid; place-items: center; font: 700 .7rem var(--sans) }

/* captura del panel: reutiliza las clases reales del panel */
.h-captura { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: 1px solid var(--linea-fuerte); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .25), var(--sombra); background: var(--gris-fondo) }
.h-cap-lat { background: #fff; border-right: 1px solid var(--linea); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; color: var(--suave) }
.h-cap-lat > span { padding: 8px 10px; border-radius: var(--r) }
.h-cap-lat .act { background: var(--azul-claro); color: var(--azul); font-weight: 600 }
.h-cap-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tinta); margin-bottom: 14px }
.h-cap-logo svg { width: 22px; height: 22px }
.h-cap-main { padding: 22px clamp(14px, 2.4vw, 28px) 26px; min-width: 0 }
.h-cap-hola { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px }
.h-cap-hola small { display: block; color: var(--tenue); font-size: .8rem }
.h-cap-hola b { font-size: 1.35rem; letter-spacing: -.02em }
.h-captura .resumen { margin-bottom: 16px }
@media (max-width: 760px) {
  .h-captura { grid-template-columns: minmax(0, 1fr) } .h-cap-lat { display: none }
  .h-captura .resumen > div:nth-child(5) { display: none }
  .h-captura .lista-webs .w { grid-template-columns: 14px minmax(0, 1fr); gap: 4px 12px }
  .h-captura .lista-webs .det { grid-column: 2 }
  .h-captura .lista-webs .num { display: none }
}

/* cómo funciona */
.h-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative }
.h-pasos::before { content: ""; position: absolute; top: 20px; left: 20px; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--azul-borde) 0 8px, transparent 8px 14px) }
.h-pasos li { position: relative }
.h-paso-n { width: 42px; height: 42px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: 0 0 0 6px var(--gris-fondo) }
.h-pasos p { color: var(--suave); margin: 0 }
@media (max-width: 860px) { .h-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)) } .h-pasos::before { display: none } }
@media (max-width: 480px) { .h-pasos { grid-template-columns: minmax(0, 1fr) } }

/* precio */
.h-precio-rej { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center }
@media (max-width: 860px) { .h-precio-rej { grid-template-columns: minmax(0, 1fr) } }
.h-precio h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.035em; max-width: 14em }
.h-precio-sub { font-size: 1.2rem; color: var(--tinta); margin-bottom: 20px }
.h-tarjeta { border: 2px solid var(--azul); border-radius: 16px; padding: 28px; background: #fff; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; align-items: flex-start }
.h-cifra { font: 700 3.4rem/1 var(--sans); letter-spacing: -.04em; margin: 16px 0 6px }
.h-cifra small { font-size: 1rem; font-weight: 500; color: var(--suave); letter-spacing: 0 }
.h-tarjeta ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 8px; font-size: .95rem }
.h-tarjeta li { padding-left: 26px; position: relative }
.h-tarjeta li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 6' fill='none' stroke='%2315803D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.h-tarjeta .btn { min-height: 50px; font-size: 1rem; align-self: stretch }
.h-gratis { margin-top: 12px; font-size: .9rem }

/* agencias */
.h-agencias { background: #0B1B3F; color: #CBD5E1; padding: clamp(56px, 8vw, 96px) 0 }
.h-agencias h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem) }
.h-agencias .antetitulo { color: #93B4FD }
.h-ag-rej { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center }
@media (max-width: 900px) { .h-ag-rej { grid-template-columns: minmax(0, 1fr) } }
.h-ag-lista { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px }
@media (max-width: 480px) { .h-ag-lista { grid-template-columns: minmax(0, 1fr) } }
.h-ag-lista li { padding-left: 24px; position: relative; color: #E2E8F0 }
.h-ag-lista li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 3px; background: #22C55E }
.h-botones { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }
.h-botones .peq { color: #94A3B8 }
.h-agencias .btn.acento { background: #fff; border-color: #fff; color: var(--tinta) }
.h-agencias .btn.acento:hover { background: #E0E7FF; border-color: #E0E7FF; color: var(--tinta) }
.h-agencias :focus-visible { outline-color: #fff }
.h-ag-panel { background: #fff; color: var(--tinta); border-radius: 16px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5) }
.h-ag-total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px }
.h-ag-total b { font: 700 3rem/1 var(--sans); letter-spacing: -.04em }
.h-ag-total span { color: var(--suave) }
.h-ag-fila { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linea); font-weight: 600; font-size: .92rem }
.h-ag-fila.mal { color: var(--mal) } .h-ag-fila.av { color: var(--aviso) }
.h-ag-mapa { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin: 16px 0 10px }
.h-ag-mapa i { aspect-ratio: 1; border-radius: 3px; background: #22C55E }
.h-ag-mapa i.mal { background: #EF4444 } .h-ag-mapa i.av { background: var(--aviso-punto) }
.h-ag-panel small { color: var(--tenue); font-size: .78rem }

/* FAQ */
.h-faq-rej { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start }
@media (max-width: 860px) { .h-faq-rej { grid-template-columns: minmax(0, 1fr); gap: 24px } }
.h-faq details { border-bottom: 1px solid var(--linea) }
.h-faq details:first-child { border-top: 1px solid var(--linea) }
.h-faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 600; position: relative }
.h-faq summary::-webkit-details-marker { display: none }
.h-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 1.5rem/1 var(--sans); color: var(--azul) }
.h-faq details[open] summary::after { content: "–" }
.h-faq details p { color: var(--suave); margin: -4px 0 18px }

/* CTA final */
.h-final { padding: clamp(56px, 8vw, 96px) 0; background: linear-gradient(180deg, #fff 0%, var(--azul-claro) 100%); border-top: 1px solid var(--linea) }
.h-final h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -.035em; max-width: 16em }
.h-final p { color: var(--suave); font-size: 1.1rem; margin-bottom: 24px }

@media (prefers-reduced-motion: reduce) {
  .h-flota, .h-latido, .h-monitor path, .h-radar, .h-linea, .h-captura .punto.caida { animation: none }
}