/* Sitio publico de MailSolid, identidad Cimientos (0.22.0). Lo memorable es el muro del hero (SPF, DKIM y DMARC delante de la
   consola real); el resto es tranquilo: listas con rayas en lugar de tarjetas, un estilo de boton por papel. El naranja es de la
   marca y nunca indica un estado. Fuentes propias desde /console/fonts. */
@font-face{font-family:Archivo;src:url(/console/fonts/archivo-variable.woff2) format('woff2');font-weight:600 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:Geist;src:url(/console/fonts/geist-variable.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
 color-scheme:light;
 --cobalto:#1F3FD6;--cobalto-hover:#1832B0;--naranja:#FF8A3D;--fondo:#0E1A4F;
 --pagina:#F4F6FF;--superficie:#FFFFFF;--suave:#EBEFFD;--tinta:#0E1A4F;--tinta-2:#3A4677;--raya:#DCE2F2;--raya-2:#B8C3E2;
 --enlace:#1F3FD6;--banda:#1F3FD6;--sobre-banda:#FFFFFF;--sobre-banda-2:#DDE3FF;--noche:#0E1A4F;--sobre-noche:#F4F6FF;--sobre-noche-2:#B9C2EA;
 --ok:#1E6B45;--ok-bg:#E4F3EA;--aviso:#8A4B00;--aviso-bg:#FFF1D6;
 --sombra:0 24px 60px -24px #0e1a4f40;
 --tit:'Archivo','Geist',system-ui,sans-serif;--tx:'Geist',system-ui,sans-serif;
}
:root[data-theme=dark]{
 color-scheme:dark;
 --pagina:#0B1238;--superficie:#141F55;--suave:#101A4A;--tinta:#F4F6FF;--tinta-2:#C9D0F0;--raya:#2A3878;--raya-2:#3F4F95;
 --enlace:#AEBDFF;--noche:#070D2E;
 --ok:#8FE0B0;--ok-bg:#123526;--aviso:#FFD28A;--aviso-bg:#3A2A0C;
 --sombra:0 24px 60px -24px #00000080;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--pagina);color:var(--tinta);font:16px/1.6 var(--tx);overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--enlace);text-decoration:none;font-weight:600}
a:hover{color:var(--tinta)}
:focus-visible{outline:3px solid var(--enlace);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;color:var(--tinta);text-wrap:balance}
h1,h2{font-family:var(--tit);font-weight:850;font-stretch:118%;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1}
h3{font-size:18px;line-height:1.35;font-weight:650}
p{margin:0}
.ancho{width:min(1180px,100% - 48px);margin-inline:auto}
.estrecho{width:min(760px,100% - 48px)}
.saltar{position:absolute;left:16px;top:-60px;z-index:20;background:var(--superficie);padding:10px 16px;border-radius:8px}
.saltar:focus{top:12px}

.b-fondo{fill:var(--tinta)}
.logo{height:34px;width:auto}

/* Botones: primario cobalto, secundario con raya, claro sobre las bandas de color. */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 20px;border-radius:10px;font:600 15px/1.2 var(--tx);border:1.5px solid transparent;cursor:pointer;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
.boton.pri{background:var(--cobalto);color:#fff}
.boton.pri:hover{background:var(--cobalto-hover);color:#fff}
.boton.sec{background:transparent;color:var(--tinta);border-color:var(--raya-2)}
.boton.sec:hover{border-color:var(--tinta);color:var(--tinta)}
.boton.claro{background:#fff;color:var(--fondo)}
.boton.claro:hover{background:var(--sobre-banda-2);color:var(--fondo)}
.enlace{display:inline-flex;min-height:44px;align-items:center}

/* Cabecera */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--pagina) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--raya)}
.top-in{display:flex;align-items:center;gap:28px;min-height:72px}
.marca{display:inline-flex;flex:none}
.nav{display:flex;gap:24px;margin-inline:auto}
.nav a{color:var(--tinta-2);font-weight:550;font-size:15px}
.nav a:hover{color:var(--tinta)}
.acciones-top{display:flex;align-items:center;gap:10px}
.idioma{font-size:14px;padding:10px 8px;min-height:44px;display:inline-flex;align-items:center;color:var(--tinta-2)}
.tema{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--raya-2);border-radius:10px;background:transparent;color:var(--tinta);cursor:pointer}
.tema svg{width:18px;height:18px}

/* Hero: la promesa a la izquierda; a la derecha la consola real con el muro delante. */
.hero{padding:72px 0 88px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1;font-weight:900;font-stretch:122%;letter-spacing:-.03em}
.intro{font-size:19px;line-height:1.6;color:var(--tinta-2);margin-top:24px;max-width:46ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.escena{position:relative;padding-bottom:118px}
.pantalla{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--raya);box-shadow:var(--sombra);background:var(--superficie)}
.muro{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:absolute;left:-32px;bottom:0;width:min(420px,78%)}
.escena:not(:has(.pantalla)) {padding-bottom:0}
.escena:not(:has(.pantalla)) .muro{position:static;width:100%}
.ladrillo{border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:116px;box-shadow:0 12px 30px -14px #0e1a4f66}
.ladrillo b{font-family:var(--tit);font-weight:900;font-stretch:125%;font-size:26px;line-height:1;letter-spacing:-.01em}
.ladrillo .detalle{font-size:13px;line-height:1.45}
.l1{background:var(--cobalto);color:#fff}
.l2{background:var(--naranja);color:#2A1300}
.l3{grid-column:span 2;background:var(--fondo);color:#F4F6FF;min-height:0}
:root[data-theme=dark] .l3{background:#F4F6FF;color:var(--fondo)}
.estado{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12.5px;font-weight:650;line-height:1.4}
.estado svg{width:14px;height:14px;flex:none}
.estado.ok{background:#E4F3EA;color:#1E6B45}
.estado.warn{background:#FFF1D6;color:#8A4B00}
.nota-ejemplo{position:absolute;right:0;bottom:-28px;font-size:12.5px;color:var(--tinta-2)}

/* Bandas */
.verbos{background:var(--banda);color:var(--sobre-banda)}
.verbos-in{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:48px 0}
.verbos h2{color:#fff;font-size:24px;font-stretch:118%;margin-bottom:8px}
.verbos p{color:var(--sobre-banda-2);font-size:15px;max-width:34ch}
.banda-ayuda{background:var(--noche);color:var(--sobre-noche)}
.banda-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:56px 0}
.banda-ayuda h2{color:#fff}
.banda-ayuda p{color:var(--sobre-noche-2);margin-top:8px}

/* Secciones */
.seccion{padding:96px 0}
.seccion.suave{background:var(--suave)}
.cab-seccion{max-width:62ch;margin-bottom:40px}
.cab-seccion p{color:var(--tinta-2);font-size:17px;margin-top:14px}
.dos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.dos .cab-seccion{margin:0}
.vigila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;margin:0}
.vigila.una{grid-template-columns:minmax(0,1fr)}
.vigila>div{padding:22px 0;border-top:1px solid var(--raya)}
.vigila dt{font-weight:700;font-size:17px}
.vigila dd{margin:6px 0 0;color:var(--tinta-2);max-width:52ch}

.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.pasos li{counter-increment:paso;border-top:3px solid var(--cobalto);padding-top:20px}
.pasos li::before{content:counter(paso);display:block;font:900 40px/1 var(--tit);font-stretch:125%;color:var(--cobalto);margin-bottom:14px}
:root[data-theme=dark] .pasos li::before{color:var(--enlace)}
:root[data-theme=dark] .pasos li{border-color:var(--enlace)}
.pasos p{color:var(--tinta-2);margin-top:8px}

/* Recorrido */
.pestanas{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--raya);margin-bottom:28px}
.pestanas [role=tab]{font:600 15px/1.2 var(--tx);color:var(--tinta-2);background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px;min-height:44px;cursor:pointer;margin-bottom:-1px}
.pestanas [role=tab]:hover{color:var(--tinta)}
.pestanas [role=tab][aria-selected=true]{color:var(--tinta);border-color:var(--cobalto)}
:root[data-theme=dark] .pestanas [role=tab][aria-selected=true]{border-color:var(--enlace)}
.panel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:40px;align-items:start}
.js .panel[data-inactivo]{display:none}
html:not(.js) .pestanas,html:not(.js) .paso-a-paso{display:none}
html:not(.js) .panel+.panel{margin-top:56px}
.ampliar{padding:0;border:1px solid var(--raya);border-radius:12px;overflow:hidden;background:var(--superficie);cursor:zoom-in;box-shadow:var(--sombra)}
.panel-texto p{color:var(--tinta-2);margin:10px 0 6px}
.panel-texto h3{font:850 24px/1.15 var(--tit);font-stretch:112%}
.paso-a-paso{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
.contador{font-variant-numeric:tabular-nums;color:var(--tinta-2);min-width:7ch;text-align:center}
.zoom{padding:0;border:0;border-radius:12px;max-width:min(1440px,96vw);background:var(--superficie)}
.zoom::backdrop{background:#070d2ecc}
.zoom img{display:block;width:100%}
.zoom [data-cerrar]{position:absolute;top:12px;right:12px;background:var(--superficie)}

/* Destacado de informes */
.destacado{background:var(--superficie);border-block:1px solid var(--raya)}
.destacado-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--raya)}
.lista li:first-child{border-top:0;padding-top:0}
.lista p{color:var(--tinta-2);margin-top:6px}
.mini{width:36px;height:36px}

.confianza{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0}
.confianza dt{font-weight:700}
.confianza dd{margin:8px 0 0;color:var(--tinta-2);font-size:15px}

.gratis{list-style:none;margin:0 0 24px;padding:0}
.gratis li a{display:flex;flex-direction:column;gap:2px;padding:18px 0;border-top:1px solid var(--raya);color:var(--tinta)}
.gratis li a span{color:var(--tinta-2);font-weight:400}
.gratis li a:hover strong{color:var(--enlace)}
.neutro{font-size:15px}

details{border-top:1px solid var(--raya);padding:4px 0}
details:last-child{border-bottom:1px solid var(--raya)}
summary{cursor:pointer;font-weight:650;padding:16px 0;min-height:44px;list-style-position:outside}
details p{color:var(--tinta-2);padding:0 0 18px}
.seccion .estrecho h2{margin-bottom:24px}

/* Pie */
.pie{background:var(--noche);color:var(--sobre-noche-2);border-top:1px solid #ffffff1a}
.pie .b-fondo{fill:#F4F6FF}
.pie-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding:40px 0 56px}
.pie p{margin-top:10px;font-size:14px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.pie nav a{color:var(--sobre-noche);font-weight:550}
.pie nav a:hover{color:#fff}

/* 404 */
.nf{padding:96px 0 120px}
.nf-muro{width:72px;height:72px;margin-bottom:24px}
.nf h1{font-size:clamp(34px,5vw,56px);line-height:1.05;font-stretch:118%;font-weight:900}
.nf .boton{margin-top:28px}

/* Paginas legales (0.25.0, sitio/legal.mjs): indice a un lado, texto de lectura a 72 caracteres */
.legal{padding:72px 0 96px}
.legal-in{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:64px;align-items:start}
.legal-lado{position:sticky;top:96px;display:grid;gap:28px;font-size:15px}
.legal-docs{display:grid;gap:2px}
.legal-docs a,.legal-indice nav a{color:var(--tinta-2);font-weight:550;padding:7px 0;border-left:3px solid transparent;padding-left:12px;min-height:36px;display:flex;align-items:center}
.legal-docs a:hover,.legal-indice nav a:hover{color:var(--tinta)}
.legal-docs a[aria-current=page]{color:var(--tinta);border-color:var(--cobalto)}
:root[data-theme=dark] .legal-docs a[aria-current=page]{border-color:var(--enlace)}
.legal-indice,.legal-indice:last-child{border:0;padding:0}
.legal-indice summary{padding:0 0 8px;min-height:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}
.legal-indice nav{display:grid;gap:0;border-top:1px solid var(--raya);padding-top:8px}
.legal-indice nav a{font-size:14px;min-height:32px;padding-block:5px}
.legal-texto{max-width:72ch}
.legal-texto h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;font-stretch:118%;font-weight:900}
.legal-meta{color:var(--tinta-2);font-size:14px;margin-top:14px;padding-bottom:24px;border-bottom:1px solid var(--raya)}
.legal-aviso{margin-top:20px;padding:14px 18px;border-radius:10px;background:var(--aviso-bg);color:var(--aviso)}
.legal-aviso a{color:inherit;font-weight:700}
.legal-texto h2{font-size:24px;line-height:1.25;font-stretch:112%;margin-top:48px;scroll-margin-top:96px}
.legal-texto h3{font-size:18px;margin-top:28px}
.legal-texto p,.legal-texto li{color:var(--tinta-2)}
.legal-texto p{margin-top:14px}
.legal-texto ul,.legal-texto ol{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.legal-texto strong{color:var(--tinta)}
.legal-texto code{font-size:.92em;background:var(--suave);padding:1px 6px;border-radius:5px}
.tabla{overflow-x:auto;margin-top:18px;border:1px solid var(--raya);border-radius:12px;background:var(--superficie)}
.tabla table{border-collapse:collapse;width:100%;font-size:15px}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:12px 16px;border-top:1px solid var(--raya)}
.tabla thead th{border-top:0;background:var(--suave);color:var(--tinta);font-weight:700;white-space:nowrap}
.tabla td{color:var(--tinta-2)}
.tabla td:first-child{color:var(--tinta)}

/* 0.26.0 (T10): /status, dentro del marco del sitio (.estado-pagina: .estado ya es la etiqueta de un bloque de la portada). El estado va en texto y en forma (punto lleno, anillo o punto discontinuo), nunca solo
   en color; lo desconocido es "Sin datos recientes" (decision 19). */
.estado-main{padding:72px 0 96px}
.estado-pagina h1{font:900 clamp(32px,4vw,44px)/1.1 var(--tit);font-stretch:118%;letter-spacing:-.02em}
.estado-pagina .intro{max-width:60ch}
.estado-general{display:flex;align-items:center;gap:10px;margin-top:32px;padding:16px 20px;border:1px solid var(--raya);border-radius:12px;background:var(--superficie);font-weight:650}
.estado-lista{list-style:none;margin:20px 0 0;padding:0;border:1px solid var(--raya);border-radius:12px;background:var(--superficie)}
.estado-fila{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.estado-fila + .estado-fila{border-top:1px solid var(--raya)}
.estado-fila h2{font:700 16px/1.35 var(--tx)}
.estado-fila p{margin-top:4px;font-size:14px;color:var(--tinta-2);max-width:52ch}
.estado-chip{display:inline-flex;align-items:center;gap:8px;flex:none;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:650;background:var(--suave);color:var(--tinta)}
.estado-chip.estado-operativo{background:var(--ok-bg);color:var(--ok)}
.estado-chip.estado-degradado{background:var(--aviso-bg);color:var(--aviso)}
.estado-punto{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.estado-degradado .estado-punto{background:transparent;border:2.5px solid currentColor}
.estado-sin_datos .estado-punto{background:transparent;border:2px dashed currentColor}
.estado-general.estado-operativo .estado-punto{color:var(--ok)}
.estado-general.estado-degradado .estado-punto{color:var(--aviso)}
.estado-pie{margin-top:20px;font-size:14px;color:var(--tinta-2)}

@media (max-width:1024px){
 .nav{display:none}
 .acciones-top{margin-left:auto}
 .confianza{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 .hero{padding:48px 0 64px}
 .hero-in,.dos,.destacado-in,.panel{grid-template-columns:minmax(0,1fr)}
 .muro{left:-8px;width:min(400px,92%)}
 .verbos-in,.pasos{grid-template-columns:minmax(0,1fr);gap:28px}
 .vigila{grid-template-columns:minmax(0,1fr)}
 .seccion{padding:64px 0}
 .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
 .pestanas [role=tab]{white-space:nowrap}
 .legal{padding:48px 0 72px}
 .legal-in{grid-template-columns:minmax(0,1fr);gap:32px}
 .legal-lado{position:static}
 /* En el movil cada fila de una tabla legal es un bloque y cada celda lleva el nombre de su columna (data-col). */
 .tabla{border:0;background:none;overflow:visible}
 .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .tabla tr{display:block;border:1px solid var(--raya);border-radius:12px;background:var(--superficie);padding:6px 0;margin-top:12px}
 .tabla td{display:block;border:0;padding:6px 16px}
 .tabla td::before{content:attr(data-col);display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
}
@media (max-width:520px){
 .ancho,.estrecho{width:calc(100% - 32px)}
 .top-in{gap:12px;min-height:64px}
 .logo{height:28px}
 /* 0.26.0 (T10): con "Create account" la cabecera no cabe en una fila: arriba la marca, el idioma y el tema; debajo, Entrar y Crear
    cuenta a lo ancho. En dos filas deja de ser fija (ocuparia un sexto de la pantalla). */
 html{scroll-padding-top:16px}
 .top{position:static}
 .top-in{flex-wrap:wrap;row-gap:10px;padding-block:10px}
 .acciones-top{display:contents}
 .idioma{margin-left:auto}
 .acciones-top .boton{flex:1 1 calc(50% - 6px);padding:10px 12px;font-size:14px}
 .estado-main{padding:48px 0 72px}
 .estado-fila{flex-direction:column;align-items:flex-start;gap:10px}
 .idioma{padding-inline:4px}
 .escena{padding-bottom:0}
 .muro{position:static;width:100%;margin-top:-28px;padding-inline:8px}
 .nota-ejemplo{position:static;margin-top:10px}
 .confianza{grid-template-columns:minmax(0,1fr)}
 .ladrillo b{font-size:22px}
 .paso-a-paso .boton{padding-inline:12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 0.26.0 (T15, carril D): precios sacados de los planes (app/src/plataforma/precios.ts). Pestanas con radios, sin script. */
.precios-radio{position:absolute;opacity:0;pointer-events:none}
.precios-pestanas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.precios-pestanas label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--raya);border-radius:10px;cursor:pointer;font-weight:600}
.precios-panel{display:none}
#precios-mes:checked~.precios-pestanas label[for=precios-mes],#precios-anio:checked~.precios-pestanas label[for=precios-anio],#precios-vida:checked~.precios-pestanas label[for=precios-vida]{border-color:var(--cobalto);color:var(--cobalto)}
#precios-mes:focus-visible~.precios-pestanas label[for=precios-mes],#precios-anio:focus-visible~.precios-pestanas label[for=precios-anio],#precios-vida:focus-visible~.precios-pestanas label[for=precios-vida]{outline:2px solid var(--cobalto);outline-offset:2px}
#precios-mes:checked~.precios-mes,#precios-anio:checked~.precios-anio,#precios-vida:checked~.precios-vida{display:block}
.precios-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.precio-plan{display:flex;flex-direction:column;gap:8px;border:1px solid var(--raya);border-radius:14px;background:var(--superficie);padding:24px}
.precio-plan h3{margin:0}
.precio-plan ul{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:6px;flex:1}
.precio-cifra strong{font-size:32px}
.precio-prueba{font-weight:600;color:var(--cobalto)}
.precio-nota{color:var(--tinta-2);margin-top:16px}