[hidden]{display:none!important}
/* Marketplace: buscador protagonista, chips de filtro, tarjetas con badge de estado verificado */
:root{
  --azul:#1F2A66; --azul-2:#2E3C86; --azul-suave:#EEF1FA;
  --amarillo:#FFDD00; --amarillo-2:#FFE94D; --amarillo-h:#F0CE00;
  --fondo:#F7F8FC; --sup:#FFFFFF; --sup-2:#FBFCFE;
  --txt:#15193A; --txt-2:#646C91; --txt-3:#8C93B4;
  --borde:#E4E8F4; --borde-2:#D3D9EC;
  --ok:#0E9F6E; --ok-bg:#E7F7F0; --alerta:#D97706; --alerta-bg:#FEF3E2;
  --sombra:0 1px 2px rgba(21,25,58,.05), 0 8px 24px -12px rgba(21,25,58,.14);
  --sombra-alta:0 2px 4px rgba(21,25,58,.06), 0 18px 44px -18px rgba(21,25,58,.26);
  --r:14px; --r-s:10px; --r-pill:999px;
  --f:'Figtree','Helvetica Neue',sans-serif; --m:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --azul:#8FA3FF; --azul-2:#A9B8FF; --azul-suave:#1A2142;
  --fondo:#0C1024; --sup:#141A35; --sup-2:#19203E;
  --txt:#EEF1FA; --txt-2:#A2AAC9; --txt-3:#7B839F;
  --borde:#242C4F; --borde-2:#2E375E;
  --ok:#35C98E; --ok-bg:#12302A; --alerta:#E9A13B; --alerta-bg:#33260F;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 22px 50px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--f);
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.env{max-width:1240px;margin:0 auto;padding-inline:20px}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.022em;line-height:1.1}
img{max-width:100%}

/* barra superior */
.tira{background:var(--azul);color:#fff;font-size:12.5px;font-weight:500}
/* Antes decía :root:not([data-theme="light"]), que coincide tambien cuando no
   hay tema fijado: la franja salia clara en modo claro. Ahora solo en oscuro. */
:root[data-theme="dark"] .tira{background:#10142F;color:rgba(255,255,255,.86)}
.tira .env{display:flex;justify-content:space-between;gap:14px;padding-block:9px;flex-wrap:wrap}
.tira b{color:var(--amarillo)}

/* cabecera */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--sup);
  border-bottom:1px solid var(--borde)}
header .env{display:flex;align-items:center;gap:18px;padding-block:13px;flex-wrap:wrap}
.logo img{height:46px;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:12px;flex-wrap:wrap}
.nav a{padding:9px 13px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;color:var(--txt-2);
  transition:background .15s,color .15s}
.nav a:hover{background:var(--azul-suave);color:var(--txt)}
.der{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:11px 20px;
  font-weight:700;font-size:14.5px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .14s,box-shadow .14s,background .14s}
.btn-y{background:var(--amarillo);color:#15193A}
.btn-y:hover{background:var(--amarillo-h);transform:translateY(-1px);box-shadow:var(--sombra)}
.btn-g{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1.5px var(--borde-2)}
.btn-g:hover{background:var(--azul-suave)}
.btn-az{background:var(--azul);color:#fff}
:root[data-theme="dark"] .btn-az,:root:not([data-theme="light"]) .btn-az{color:#0C1024}
.btn-az:hover{transform:translateY(-1px);box-shadow:var(--sombra)}

/* hero con buscador */
.hero{padding-block:46px 34px;background:
  radial-gradient(1100px 380px at 12% -15%,rgba(255,221,0,.22),transparent 62%),
  radial-gradient(900px 340px at 92% 0%,rgba(31,42,102,.10),transparent 60%)}
.hero h1{font-size:clamp(33px,5.4vw,52px);font-weight:900;max-width:15ch}
.hero h1 .sub{display:block;font-size:clamp(17px,2.4vw,23px);font-weight:600;color:var(--txt-2);
  margin-top:12px;letter-spacing:-.01em;max-width:30ch;line-height:1.35}
.buscador{display:flex;gap:9px;margin-top:26px;background:var(--sup);padding:9px;
  border-radius:var(--r-pill);box-shadow:var(--sombra-alta);max-width:660px;align-items:center}
.buscador input{flex:1;min-width:0;border:0;background:transparent;color:var(--txt);
  font-family:inherit;font-size:16px;padding:11px 16px;outline:none}
.buscador input::placeholder{color:var(--txt-3)}
.chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{border:1.5px solid var(--borde-2);background:var(--sup);border-radius:var(--r-pill);
  padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--txt-2);cursor:pointer;
  font-family:inherit;transition:all .14s}
.chip:hover{border-color:var(--azul);color:var(--txt)}
.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#0C1024}

/* métricas */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px;margin-top:30px}
.met{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:16px 17px;
  box-shadow:var(--sombra)}
.met .n{font-size:27px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.met .t{font-size:12.5px;color:var(--txt-2);margin-top:7px;font-weight:500;line-height:1.35}
.met.ac{background:var(--amarillo)}
.met.ac .n,.met.ac .t{color:#15193A}

/* secciones */
section{padding-block:40px}
.titulo{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.titulo h2{font-size:clamp(23px,3.2vw,31px);font-weight:800}
.titulo .pill{background:var(--amarillo);color:#15193A;border-radius:var(--r-pill);
  padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.02em}
.desc{color:var(--txt-2);max-width:66ch;margin:0 0 24px;font-size:15.5px}

/* tarjetas con filas etiquetadas, al estilo del nicho */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:18px}
.card{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.card .visual{height:138px;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#2B3A80,var(--azul))}
.card .visual svg{width:54px;height:54px;color:rgba(255,255,255,.55)!important}
.card .visual .cod{position:absolute;left:11px;top:11px;background:rgba(255,255,255,.92);color:#15193A;
  border-radius:var(--r-pill);padding:4px 11px;font-family:var(--m);font-size:11.5px;font-weight:600}
.card .fav{position:absolute;right:11px;top:11px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--azul);display:grid;place-items:center;font-size:16px;cursor:pointer}
.card .cuerpo{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:13.5px;font-weight:800;line-height:1.3;letter-spacing:.01em;color:var(--azul);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
:root[data-theme="dark"] .card h3,:root:not([data-theme="light"]) .card h3{color:var(--azul-2)}
.card .lote{margin-top:6px;display:flex;flex-direction:column;gap:3px;font-size:11.5px}
.card .lote-et{align-self:flex-start;font-weight:700;letter-spacing:.02em;color:var(--azul);
  background:rgba(27,42,65,.08);border-radius:10px;padding:2px 9px}
:root[data-theme="dark"] .card .lote-et,:root:not([data-theme="light"]) .card .lote-et{color:var(--azul-2);background:rgba(216,178,102,.14)}
.card .lote-otros{color:var(--txt-2);line-height:1.5}
.card .lote-otros a{display:inline-block;margin:2px 5px 0 0;padding:1px 8px;border:1px solid var(--borde,#0003);
  border-radius:10px;color:var(--azul);font-weight:600;text-decoration:none}
:root[data-theme="dark"] .card .lote-otros a,:root:not([data-theme="light"]) .card .lote-otros a{color:var(--azul-2)}
.card .lote-otros a:hover{background:rgba(27,42,65,.08)}
.card.resaltada{outline:3px solid var(--oro,#A88029);outline-offset:3px}
.banda-aviso{margin:0 0 14px;padding:12px 16px;border-left:4px solid var(--oro,#A88029);background:rgba(168,128,41,.08);border-radius:8px;font-size:14px}
.banda-aviso p{margin:4px 0 8px;color:var(--txt-2)}.banda-aviso a{font-weight:700}
.card .dir{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--txt-2);
  text-decoration:underline;text-decoration-color:var(--borde,currentColor);text-underline-offset:3px;
  overflow-wrap:anywhere}
.card .dir:hover{color:var(--azul)}
.card .ubic{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt-2);margin-top:7px;font-weight:600}
.card .ubic i{color:var(--alerta);font-style:normal}
.filas{margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.filas>div{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-block:7px;border-bottom:1px dotted var(--borde-2);font-size:12.5px}
.filas>div:last-of-type{border-bottom:0}
.filas dt{display:flex;align-items:center;gap:7px;color:var(--txt-2);margin:0}
.filas dd{margin:0;font-family:var(--m);font-size:12.5px;font-weight:600;text-align:right}
.filas dd.verde{color:var(--ok);font-weight:700}
.filas .pc{background:var(--ok-bg);color:var(--ok);border-radius:4px;padding:1px 5px;font-size:11px;font-weight:800}
.ic{width:16px;height:16px;border-radius:4px;display:inline-block;flex:none}
.ic-cal{background:var(--azul-suave);box-shadow:inset 0 0 0 1.5px var(--azul)}
.ic-av{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok)}
.ic-pos{background:var(--azul-suave);box-shadow:inset 0 0 0 1.5px var(--ok)}
.ic-rel{background:var(--alerta-bg);box-shadow:inset 0 0 0 1.5px var(--alerta);border-radius:50%}
.ic-ver{background:var(--amarillo)}
.fila-est dd{font-weight:800}
.fila-est.ver dd{color:var(--ok)}.fila-est.seg dd{color:var(--alerta)}
.fila-est.sus dd{color:var(--alerta)}.fila-est.adj dd{color:var(--txt-3)}.fila-est.nv dd{color:var(--txt-3)}
.card .exc{display:block;background:var(--amarillo);color:#15193A;border-radius:6px;
  padding:5px 9px;font-size:11px;font-weight:800;margin-top:11px;text-align:center}
.card .vermas{display:block;margin-top:14px;background:var(--amarillo);color:#15193A;text-align:center;
  padding:12px;border-radius:var(--r-s);font-size:13px;font-weight:900;letter-spacing:.04em}
.card .vermas:hover{background:var(--amarillo-h)}

/* dos columnas: filtros al lado */
.layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}
.lateral{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.caja-f{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:18px;
  box-shadow:var(--sombra)}
.caja-f h4{margin:0 0 14px;font-size:15.5px;font-weight:800}
.campo-f{margin-bottom:13px}
.campo-f label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--txt-2);margin-bottom:6px}
.campo-f label i{color:var(--alerta);font-style:normal}
.campo-f select,.campo-f input{width:100%;font-family:inherit;font-size:13.5px;color:var(--txt);
  background:var(--sup);border:1.5px solid var(--borde-2);border-radius:var(--r-s);padding:9px 11px}
.acciones-m{display:flex;flex-direction:column;gap:9px}
.acc{display:flex;align-items:center;gap:11px;border-radius:var(--r-s);padding:12px 14px;
  font-size:13.5px;font-weight:700;color:#fff;transition:transform .14s}
.acc:hover{transform:translateX(3px)}
.acc span{margin-left:auto;font-weight:900}
.acc-1{background:#3B6FE0}.acc-2{background:#18A5A5}.acc-3{background:#7B52D6}
.acc-4{background:var(--amarillo);color:#15193A}.acc-5{background:#E0574B}.acc-6{background:#17A867}
.tira-dep{display:flex;gap:7px;overflow-x:auto;padding-block:12px;margin-bottom:16px;
  border-block:1px solid var(--borde);scrollbar-width:thin}
.tira-dep button{flex:none;background:none;border:0;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--txt-2);padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap}
.tira-dep button:hover{background:var(--azul-suave);color:var(--txt)}
.tira-dep button[aria-pressed="true"]{background:var(--azul);color:#fff}
:root[data-theme="dark"] .tira-dep button[aria-pressed="true"]{color:#0C1024}

/* ficha destacada */
.ficha{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra-alta);overflow:hidden}
.ficha .cab{padding:24px;display:flex;gap:18px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;background:linear-gradient(135deg,var(--azul-suave),transparent 70%)}
.ficha h3{font-size:clamp(21px,3vw,28px);font-weight:800}
.ficha .cab .meta{font-family:var(--m);font-size:12.5px;color:var(--txt-2);margin-top:7px}
.sello{background:var(--amarillo);color:#15193A;border-radius:var(--r-s);padding:11px 15px;text-align:center;flex:none}
.sello b{display:block;font-size:12px;font-weight:900;letter-spacing:.06em}
.sello span{font-size:11px;font-weight:600;opacity:.75}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));border-top:1px solid var(--borde)}
.dato{padding:16px 18px;border-right:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.dato dt{font-size:11.5px;color:var(--txt-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.dato dd{margin:7px 0 0;font-family:var(--m);font-size:14.5px;font-weight:500;word-break:break-word}
.dato dd.gr{font-size:20px;font-weight:600}
.linea-t{padding:22px 24px}
.linea-t h4{margin:0 0 16px;font-size:13px;font-weight:700;color:var(--txt-2);text-transform:uppercase;letter-spacing:.07em}
.paso-t{display:grid;grid-template-columns:18px 92px 1fr;gap:13px;align-items:start;padding-block:9px}
.paso-t .pt{width:11px;height:11px;border-radius:50%;background:var(--borde-2);margin-top:6px;justify-self:center}
.paso-t.hi .pt{background:var(--amarillo);box-shadow:0 0 0 4px var(--amarillo-2)}
.paso-t time{font-family:var(--m);font-size:12.5px;color:var(--txt-2);padding-top:2px}
.paso-t p{margin:0;font-size:15px}
.paso-t.hi p{font-weight:600}

/* pasos requisitos */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:14px}
.paso{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:19px;box-shadow:var(--sombra)}
.paso .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:var(--r-pill);background:var(--amarillo);color:#15193A;font-weight:900;font-size:13.5px}
.paso h4{margin:13px 0 7px;font-size:16px;font-weight:700}
.paso p{margin:0;font-size:14.5px;color:var(--txt-2);line-height:1.45}

/* comparacion */
.tabla-env{overflow-x:auto;background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;min-width:580px;font-size:15px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--borde)}
thead th{font-size:12.5px;font-weight:700;color:var(--txt-2);text-transform:uppercase;letter-spacing:.05em}
thead th:last-child{background:var(--amarillo);color:#15193A}
tbody tr:last-child td{border-bottom:0}
td.si{color:var(--ok);font-weight:700}
td.no{color:var(--txt-3)}

/* planes */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.plan{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--sombra);position:relative}
.plan.top{border:2px solid var(--amarillo);box-shadow:var(--sombra-alta)}
.plan .cinta-vieja{position:absolute;top:-12px;left:26px;background:var(--amarillo);color:#15193A;
  border-radius:var(--r-pill);padding:4px 13px;font-size:11.5px;font-weight:900;letter-spacing:.03em}
.plan h3{font-size:19px;font-weight:800}
.plan .p{font-size:36px;font-weight:900;letter-spacing:-.04em;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.plan .p small{font-size:14px;font-weight:600;color:var(--txt-2);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;display:flex;flex-direction:column;gap:10px;font-size:14.8px}
.plan li{display:flex;gap:9px;align-items:flex-start;color:var(--txt-2)}
.plan li b{color:var(--txt);font-weight:700}
.plan li::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--ok-bg);
  box-shadow:inset 0 0 0 2px var(--ok);margin-top:4px}
.plan .btn{margin-top:auto;justify-content:center;font-size:14px}
.banner-mem{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--azul) 0%,#2B3A80 100%);border-radius:var(--r);
  padding:30px 32px;margin-bottom:26px;color:#fff;box-shadow:var(--sombra-alta)}
.banner-mem h2{font-size:clamp(25px,4vw,38px);font-weight:900;color:#fff;margin:12px 0 10px}
.banner-mem h2 span{color:var(--amarillo)}
.banner-mem h2 i{font-style:normal;opacity:.4;font-weight:300}
.banner-mem>div>p{margin:0;max-width:52ch;opacity:.86;font-size:15.5px}
.lock{display:inline-block;background:rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:6px 14px;font-size:13px;font-weight:600}
.pills-b{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.pills-b span{background:rgba(255,255,255,.12);border-radius:var(--r-pill);padding:6px 14px;font-size:13.5px}
.pills-b b{color:var(--amarillo)}
.medallon-grande{flex:none}
.medallon-grande svg{width:124px;height:124px}
.plan{padding:0;overflow:hidden}
.plan-cab{background:linear-gradient(160deg,var(--azul) 0%,#2B3A80 100%);padding:16px 20px 44px;
  position:relative;text-align:center}
.ubi{display:inline-block;background:rgba(255,255,255,.15);color:#fff;border-radius:var(--r-pill);
  padding:4px 12px;font-size:11.5px;font-weight:600}
.medalla{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);width:66px;height:66px;
  border-radius:50%;display:grid;place-items:center;border:4px solid var(--sup);
  background:radial-gradient(circle at 34% 30%,var(--amarillo-2),var(--amarillo) 62%,var(--amarillo-h));
  box-shadow:0 4px 12px rgba(21,25,58,.22)}
.medalla span{font-size:10.5px;font-weight:900;color:var(--azul);letter-spacing:.02em}
.medalla.m-2{background:radial-gradient(circle at 34% 30%,#FFF3A8,var(--amarillo) 58%,#D9A400)}
.medalla.m-3{background:radial-gradient(circle at 34% 30%,#FFE9A0,#E8B400 60%,#A87A00)}
.medalla.m-4{background:radial-gradient(circle at 34% 30%,#9FB2FF,var(--azul) 62%,#121A48)}
.medalla.m-4 span{color:#fff}
.plan h3{text-align:center;margin-top:38px;font-size:20px}
.acceso{text-align:center;margin:8px auto 0;background:var(--azul-suave);border-radius:var(--r-pill);
  padding:5px 14px;font-size:12.5px;font-weight:600;color:var(--txt-2);width:fit-content}
.plan ul{margin:18px 20px 0;padding:0;gap:11px;font-size:14.2px;line-height:1.45}
.plan li::before{content:"✓";flex:none;color:var(--ok);font-weight:900;font-size:14px;line-height:1.5}
.extra{margin:14px 20px 0;background:#FFF9DB;border:1px solid var(--amarillo);border-radius:var(--r-s);
  padding:10px 13px;font-size:13.5px;color:#15193A}
:root[data-theme="dark"] .extra,:root:not([data-theme="light"]) .extra{background:#2E2A12;color:var(--txt)}
.extra .est{color:var(--alerta);font-weight:900}
.caja-p{margin:16px 20px 18px;background:var(--sup-2);border:1px solid var(--borde);
  border-radius:var(--r-s);padding:15px;text-align:center}
.caja-p .p{font-size:32px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:0}
.caja-p .p small{font-size:12.5px;font-weight:700;color:var(--txt-2);margin-left:5px;letter-spacing:0}
.equiv{font-size:12.5px;color:var(--txt-2);margin-top:5px}
.equiv .ah{color:var(--ok);font-weight:800}
.contra{font-size:12px;color:var(--txt-3);margin-top:7px;padding-top:7px;border-top:1px dashed var(--borde-2)}
.plan .btn{margin:0 20px 22px}
.cinta-d{position:absolute;top:13px;right:-34px;transform:rotate(45deg);background:var(--amarillo);
  color:#15193A;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:5px 42px;z-index:3}
.cinta-d.az{background:var(--azul);color:#fff}
:root[data-theme="dark"] .cinta-d.az{background:var(--azul-2);color:#0C1024}
.plan.top{position:relative}
.premium-plan{position:relative;border-color:var(--azul)}
.planes{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.plan .vs{font-size:12.5px;font-weight:600;color:var(--txt-3);margin-bottom:2px}
.premium{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(255px,1fr);gap:0;margin-top:22px;
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra-alta);overflow:hidden}
.premium-txt{padding:28px}
.premium-txt h3{font-size:clamp(20px,2.8vw,26px);font-weight:800;margin:14px 0 10px}
.premium-txt>p{margin:0;color:var(--txt-2);max-width:56ch}
.premium-lista{list-style:none;padding:0;margin:20px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:11px;font-size:14.5px}
.premium-lista li{display:flex;gap:9px;align-items:flex-start;color:var(--txt-2)}
.premium-lista li b{color:var(--txt);font-weight:700}
.premium-lista li::before{content:"";width:15px;height:15px;border-radius:50%;
  background:var(--amarillo);margin-top:3px}
.premium-caja{background:var(--azul-suave);padding:28px;display:flex;flex-direction:column;
  justify-content:center;border-left:1px solid var(--borde)}
.premium-caja .p{font-size:38px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.premium-caja .vs{font-size:14px;color:var(--txt-2);font-weight:600;margin-bottom:14px}
.mini{font-size:13px;color:var(--txt-2);margin:0 0 18px;line-height:1.45}
@media (max-width:780px){.premium{grid-template-columns:1fr}.premium-caja{border-left:0;border-top:1px solid var(--borde)}}
.nota{font-size:14px;color:var(--txt-2);margin-top:20px;max-width:70ch}
footer{background:var(--sup);border-top:1px solid var(--borde);padding-block:28px 40px;margin-top:20px}
footer .env{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--txt-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.nav a.on{background:var(--azul-suave);color:var(--txt)}
.enl{color:var(--azul);font-weight:700}
.enl:hover{text-decoration:underline}

.hero-img{background:linear-gradient(135deg,rgba(31,42,102,.92),rgba(43,58,128,.88)),
  radial-gradient(900px 300px at 20% 0%,rgba(255,221,0,.3),transparent 60%);
  color:#fff;padding-block:40px 36px;margin-bottom:4px}
.hero-img h1{font-size:clamp(27px,4.4vw,42px);font-weight:900;color:#fff;text-align:center}
.hero-img p{max-width:70ch;margin:14px auto 0;text-align:center;opacity:.88;font-size:16px}

.ic-mat{background:var(--borde);box-shadow:inset 0 0 0 1.5px var(--txt-3)}
/* contraste: la tarjeta se separa del fondo por borde y no por color */
.card{border-color:var(--borde-2)}
.filas dt{font-weight:500}
.filas dd{color:var(--txt)}
.check{width:100%;justify-content:flex-start}
.check input{flex:none}
.caja-f .check{margin-bottom:9px;font-size:13px}
.lateral .caja-f form input::placeholder{color:var(--txt-3)}
.tira-dep{position:relative}
.conteo{font-size:14.5px}

.filas dd.ocu{color:var(--txt-2);letter-spacing:.04em}
.candado{display:inline-flex;align-items:center;margin-left:5px;opacity:.72}
/* candado dibujado en CSS: nada de emoji, que cambia de forma en cada sistema */
.ic-candado{display:inline-block;width:7px;height:6px;border-radius:1.5px;
  background:currentColor;position:relative;margin-top:3px}
.ic-candado::before{content:"";position:absolute;left:1px;bottom:5px;width:3px;height:3.5px;
  border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.card .juzg{font-size:11.5px;color:var(--txt-3);margin-top:5px;font-family:var(--m);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* interruptor de tema */
.tema{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--borde-2);
  border-radius:var(--r-pill);padding:9px 13px;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--txt-2);cursor:pointer;transition:background .15s}
.tema:hover{background:var(--azul-suave);color:var(--txt)}

/* paginación numerada */
.paginacion{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
.pg{min-width:40px;height:40px;padding:0 13px;border:1.5px solid var(--borde-2);background:var(--sup);
  color:var(--txt-2);border-radius:var(--r-s);font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .14s}
.pg:hover:not(:disabled){border-color:var(--azul);color:var(--txt)}
.pg[aria-current="page"]{background:var(--azul);border-color:var(--azul);color:#fff}
:root[data-theme="dark"] .pg[aria-current="page"]{color:#0C1024}
.pg.nav{font-size:13px}
.pg:disabled{opacity:.38;cursor:default}
.pg-sep{color:var(--txt-3);padding-inline:3px;font-weight:700}
.por-pag{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt-2);font-weight:600}
.por-pag select{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--txt);background:var(--sup);
  border:1.5px solid var(--borde-2);border-radius:var(--r-s);padding:7px 10px;cursor:pointer}
.barra-res{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}

/* datos bloqueados y ventana del muro */
.bloq{cursor:pointer;border-bottom:1px dashed var(--borde-2)}
.bloq:hover{color:var(--azul)}
:root[data-theme="dark"] .bloq:hover{color:var(--azul-2)}
.muro-fondo:not([hidden]){display:grid}
.muro-fondo{position:fixed;inset:0;z-index:90;background:rgba(10,14,36,.62);backdrop-filter:blur(3px);
  place-items:center;padding:20px}
.muro-caja{background:var(--sup);border-radius:var(--r);box-shadow:var(--sombra-alta);max-width:470px;
  width:100%;overflow:hidden;position:relative}
.muro-cab{background:linear-gradient(135deg,var(--azul),#2B3A80);color:#fff;padding:24px;text-align:center}
.muro-cab .cand{display:flex;justify-content:center;color:var(--azul)}
.muro-cab h3{color:#fff;font-size:20px;font-weight:800;margin-top:8px}
.muro-cab p{margin:8px 0 0;opacity:.88;font-size:14.5px}
.muro-cuerpo{padding:22px 24px 24px}
.muro-item{display:flex;justify-content:space-between;gap:12px;padding-block:9px;
  border-bottom:1px dotted var(--borde-2);font-size:14px}
.muro-item:last-of-type{border-bottom:0}
.muro-item b{font-family:var(--m);font-weight:600}
.muro-lista{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.muro-lista li{display:flex;gap:9px;color:var(--txt-2)}
.muro-lista li::before{content:"🔒";font-size:12px}
.muro-lista li b{color:var(--txt);font-weight:700}
.muro-cerrar{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.2);color:#fff;font-size:17px;cursor:pointer;line-height:1}
.muro-cerrar:hover{background:rgba(255,255,255,.34)}
.muro-precio{text-align:center;margin-bottom:16px}
.muro-precio .pp{font-size:30px;font-weight:900;letter-spacing:-.03em}
.muro-precio .pm{font-size:13px;color:var(--txt-2)}

/* con membresía activa los candados desaparecen */
body.miembro .candado{display:none}
body.miembro .bloq{border-bottom:0;cursor:auto}
body.miembro .bloq:hover{color:inherit}
body.miembro .barra-sesion{display:flex;align-items:center;gap:10px;background:var(--ok-bg);color:var(--ok);
  border:1px solid var(--ok);border-radius:var(--r-s);padding:10px 14px;font-size:13.5px;
  font-weight:700;margin-bottom:14px}
.barra-sesion button{margin-left:auto;background:transparent;border:1.5px solid currentColor;color:inherit;
  border-radius:var(--r-pill);padding:5px 12px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}

.muro-caja{animation:sube .18s ease-out}
@keyframes sube{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.muro-caja{animation:none}}

.cand .ic-candado.grande{width:20px;height:17px;border-radius:3px;margin:0}
.cand .ic-candado.grande::before{left:3.5px;bottom:14px;width:9px;height:9px;border-width:3px;border-radius:7px 7px 0 0}

/* Alertas del expediente. Rojo lo que puede tumbar el remate (tutela, nulidad),
   ámbar lo que lo encarece o lo pone en duda. Van sobre la postura mínima
   porque es la cifra que el comprador mira antes de decidir. */
.alertas{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.alerta{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 8px;
  border-radius:999px;border:1.5px solid;white-space:nowrap}
.alerta.rojo{color:#8c1d18;border-color:#e8b4b0;background:#fdf0ef}
.alerta.ambar{color:#7a5200;border-color:#ecd9a8;background:#fdf8ec}
:root[data-theme="dark"] .alerta.rojo{color:#ffb4ab;border-color:#5c2520;background:#2a1513}
:root[data-theme="dark"] .alerta.ambar{color:#f0c96b;border-color:#5c4a20;background:#2a2313}

/* Página legal: texto para leer, no para escanear. Medida de línea corta y
   jerarquía clara, porque aquí el usuario busca una respuesta concreta. */
.env h3{font-size:16px;margin:22px 0 7px;color:var(--txt)}
.env p,.env li{max-width:72ch;line-height:1.62}
.env ul{margin:8px 0 8px 20px}
.env ul li{margin-bottom:5px}
.tabla-env table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0}
.tabla-env th{text-align:left;padding:9px 10px;background:var(--azul-suave);
  border-bottom:2px solid var(--borde-2);font-size:13px;letter-spacing:.02em}
.tabla-env td{padding:9px 10px;border-bottom:1px solid var(--borde)}
footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Semáforo y puntaje. El semáforo va primero porque el riesgo manda sobre el
   precio: de nada sirve un descuento del 50% en un bien con nulidad decretada. */
.puntajes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.sem{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;border:1.5px solid}
.sem i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.sem-v{color:#1b5e20;border-color:#b7dbb9;background:#f1f8f1}
.sem-a{color:#7a5200;border-color:#ecd9a8;background:#fdf8ec}
.sem-r{color:#8c1d18;border-color:#e8b4b0;background:#fdf0ef}
.sem-g{color:var(--txt-3);border-color:var(--borde-2);background:transparent}
.opo{font-size:12px;color:var(--txt-2)}
.opo b{color:var(--azul);font-size:13.5px}
:root[data-theme="dark"] .sem-v{color:#9ed5a1;border-color:#2a4a2c;background:#132114}
:root[data-theme="dark"] .sem-a{color:#f0c96b;border-color:#5c4a20;background:#2a2313}
:root[data-theme="dark"] .sem-r{color:#ffb4ab;border-color:#5c2520;background:#2a1513}

/* Alcance del servicio. Va en todas las páginas y con marco propio porque es
   una advertencia, no contenido: tiene que leerse distinto del resto. */
/* Este bloque es letra pequeña a propósito. La advertencia que tiene que
   verse va arriba, en la franja; esta es la versión extensa para quien quiera
   el detalle, y compitiendo con el contenido le quitaba sitio a los remates. */
.aviso-marco{border-top:1px solid var(--borde);padding:16px 0 4px;margin:30px 0 0;
  background:transparent}
.aviso-marco h2{font-size:12.5px;margin:0 0 8px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-3);font-weight:700}
.aviso-dos{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px}
.aviso-marco p{font-size:12px;line-height:1.55;margin:0 0 6px;max-width:70ch;
  color:var(--txt-3)}
.aviso-marco b{color:var(--txt-2);font-weight:700}
.aviso-no b{color:#8c1d18}
.aviso-si b{color:#1b3a6b}
.aviso-pie{margin-top:8px;padding-top:7px;font-size:11.5px;color:var(--txt-3)}
.aviso-pie a{color:var(--azul);font-weight:700}
:root[data-theme="dark"] .aviso-no b{color:#ffb4ab}
:root[data-theme="dark"] .aviso-si b{color:#a8c7fa}
@media (max-width:720px){.aviso-dos{grid-template-columns:1fr}}

/* Franja de alcance. Va pegada al menú, antes de cualquier contenido, porque
   la advertencia tiene que verse antes que los remates — no después de que el
   visitante ya escogió uno. */
.franja-aviso{background:#8c1d18;color:#fff;font-size:13.5px;line-height:1.45;
  padding:9px 0;position:relative;z-index:5}
.franja-aviso .env{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.franja-aviso b{font-weight:800}
.franja-aviso a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;font-weight:700}
.fa-punto{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.22)}
:root[data-theme="dark"] .franja-aviso{background:#6e1712}
@media (max-width:620px){.franja-aviso{font-size:12.5px;padding:8px 0}}

/* Nota de cómo se produce el servicio. Va dentro de la página que lo vende,
   no solo en términos: quien está a punto de pagar tiene que leer ahí mismo
   con qué se hizo y qué no garantiza. */
.nota-servicio{border:1.5px solid var(--borde-2);border-radius:10px;
  padding:18px 20px;margin:28px 0 6px;background:var(--fondo-2,transparent)}
.nota-servicio h3{font-size:15.5px;margin:0 0 10px}
.nota-servicio p{font-size:13.5px;line-height:1.6;margin:0 0 8px;max-width:66ch;
  color:var(--txt-2)}
.nota-servicio b{color:var(--txt)}
.nota-pie{border-top:1px solid var(--borde);padding-top:9px;margin-top:10px!important;
  font-size:12.5px!important}
.nota-pie a{color:var(--azul);font-weight:700}

/* Tablas en pantalla angosta. El cuadro del caso real mide 580 px y en un
   teléfono de 390 se salía, empujando la página entera hacia la izquierda:
   el usuario veía el contenido cortado y tenía que arrastrar para leer.
   Ahora la tabla se desplaza dentro de su propia caja y la página no se mueve. */
.tabla-env, .caso-tabla, .env table{max-width:100%}
.tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .env table{display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch}
  .env table th,.env table td{white-space:normal;min-width:118px}
}
/* Red de seguridad: nada puede empujar la página de lado. */
html,body{overflow-x:hidden;max-width:100%}

/* ═══════════════════════════════════════════════════════════════════════════
   RITMO Y PANTALLA ANGOSTA
   
   El sitio se diseñó para escritorio y en el teléfono cada bloque ponía sus
   propios márgenes: el menú se partía en tres filas, la cabecera se comía
   155 px antes del primer contenido y las tarjetas de cifras quedaban
   desparejas. No era un problema de un componente sino de que no había
   escala: por eso se veía desarmado.
   
   Aquí se fija una escala de espaciado y se aplica de forma pareja.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --e1:6px;  --e2:10px; --e3:16px; --e4:24px;
  --e5:36px; --e6:52px; --e7:72px;
  --medida:68ch;          /* ancho máximo de lectura cómoda */
}

/* Ritmo vertical entre secciones: una sola regla en vez de márgenes sueltos. */
main > section,
main > .env{ padding-block:var(--e6) }
main > section > .env{ padding-block:0 }
.titulo{ margin-bottom:var(--e4) }
.titulo h2{ font-size:clamp(21px,2.6vw,30px) }
.env > p{ max-width:var(--medida) }

@media (max-width:760px){
  :root{ --e5:26px; --e6:34px; --e7:44px }

  /* Cabecera: de 155 px a una sola fila de 56. El menú se desplaza de lado
     en vez de partirse, que es lo que hace cualquier app en el teléfono. */
  .tira .env{ padding-block:7px; gap:4px; font-size:11.5px; justify-content:center;
    text-align:center }
  .tira .env span:last-child{ width:100% }

  /* Dos filas: logo y acciones arriba, menú abajo. Con nowrap en el
     contenedor el menú se metía en la misma fila que los botones y empujaba
     el logo fuera de la pantalla. */
  header .env{ padding-block:9px; gap:8px; flex-wrap:wrap; align-items:center }
  .logo{ flex:none }
  .logo img{ height:32px }
  .nav{ order:3; width:100%; margin-left:0; flex-wrap:nowrap; overflow-x:auto;
    gap:2px; padding:2px 0 0; border-top:1px solid var(--borde);
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .nav::-webkit-scrollbar{ display:none }
  .nav a{ padding:7px 11px; font-size:13.5px; white-space:nowrap; flex:none }
  .der{ margin-left:auto; gap:6px; flex-wrap:nowrap }
  .der .btn, .der button{ padding:7px 12px!important; font-size:13px!important }

  /* Portada: ocupaba 678 px —cuatro quintas partes de la pantalla— antes de
     mostrar un solo remate. */
  .hero, .hero-img{ padding-block:var(--e5) var(--e4) }
  .hero h1, .hero-img h1{ font-size:clamp(25px,7.2vw,32px); text-align:left }
  .hero p, .hero-img p{ font-size:15px; text-align:left; margin-top:var(--e2);
    max-width:40ch }
  .hero .env{ padding-block:0 }
  .buscador{ margin-top:var(--e4) }

  /* Cifras: cinco tarjetas de 102 px en dos columnas dejaban una huérfana.
     En tira horizontal caben todas y se lee de corrido. */
  .metricas{ display:flex; gap:var(--e2); margin-top:var(--e4);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .metricas::-webkit-scrollbar{ display:none }
  .met{ flex:0 0 46%; scroll-snap-align:start; padding:13px 14px }
  .met .n{ font-size:24px }
  .met .t{ font-size:11.5px; margin-top:5px }

  /* Tipografía y medida de lectura */
  h2{ font-size:clamp(20px,5.4vw,26px) }
  h3{ font-size:16px }
  .env{ padding-inline:var(--e3) }
  .env p, .env li{ font-size:14.5px }

  .pasos{ gap:var(--e2) }
  .paso{ padding:var(--e3) }
  .card{ padding:var(--e3) }
}

/* Teléfonos estrechos: las cifras pasan a tarjeta casi completa. */
@media (max-width:420px){
  .met{ flex:0 0 62% }
  .hero h1, .hero-img h1{ font-size:26px }
}

/* ── Cabecera con color de marca ───────────────────────────────────────────
   Estaba en blanco sobre fondo casi blanco y el menú quedaba sin peso: el
   blanco ahí no era aire, era vacío. En azul la cabecera se lee como una
   pieza sólida, el logo amarillo resalta y el botón de suscribirse —que es
   la acción que importa— deja de competir con el fondo. */
header{ background:var(--azul); border-bottom:0;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 10px 30px -18px rgba(21,25,58,.5) }
header .logo{ filter:none }

.nav a{ color:rgba(255,255,255,.82) }
.nav a:hover{ background:rgba(255,255,255,.12); color:#fff }
.nav a.on{ background:var(--amarillo); color:var(--azul); font-weight:800 }

/* El botón secundario tenía borde gris sobre blanco; sobre azul necesita
   borde propio para no desaparecer. */
/* El CTA amarillo (.btn-y) se deja intacto: es la accion que vende y sobre
   azul es justamente donde mas resalta. Solo se reviste el secundario. */
header .der .btn-g,
header .tema{
  background:rgba(255,255,255,.08); color:#fff;
  border:1.5px solid rgba(255,255,255,.28) }
header .der .btn-g:hover,
header .tema:hover{ background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.45) }

/* La franja superior ya era azul: se separa con un filo para que no se lean
   como una sola mancha. */
.tira{ border-bottom:1px solid rgba(255,255,255,.14) }

@media (max-width:760px){
  .nav{ border-top:1px solid rgba(255,255,255,.16) }
}

/* En tema oscuro la cabecera no puede ser el mismo azul del fondo. */
:root[data-theme="dark"] header{ background:#161B3D;
  box-shadow:0 1px 0 rgba(255,255,255,.06) }
:root[data-theme="dark"] .tira{ background:#10142F; color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.08) }
:root[data-theme="dark"] .tira b{ color:var(--amarillo) }

/* ── Letra menuda del pie ──────────────────────────────────────────────────
   El alcance del servicio va al final de todo y en cuerpo mínimo: la
   advertencia que debe verse ya está arriba, en la franja. Aquí queda la
   versión extensa, para quien la busque, sin robarle sitio al contenido. */
.legal-min{ padding-top:var(--e3); margin-top:var(--e3);
  border-top:1px solid rgba(255,255,255,.14) }
.legal-min .aviso-marco{ border:0; padding:0; margin:0 }
.legal-min .aviso-marco h2{ font-size:10.5px; letter-spacing:.09em; opacity:.6;
  margin-bottom:6px }
.legal-min .aviso-marco p{ font-size:10.5px; line-height:1.5; opacity:.68;
  margin-bottom:5px; max-width:none }
.legal-min .aviso-marco b{ opacity:.85 }
.legal-min .aviso-dos{ gap:2px 24px }
.legal-min .aviso-pie{ font-size:10px; opacity:.6; padding-top:6px }
@media (max-width:760px){ .legal-min .aviso-dos{ grid-template-columns:1fr } }

/* ── Escala tipográfica y color de los filtros ─────────────────────────────
   Los rótulos del filtro llevaban un punto naranja (--alerta) que no está en
   la paleta: azul y amarillo. Un tercer color sin función hace que el bloque
   se lea desordenado aunque la alineación esté bien.
   
   Y los tamaños no guardaban proporción entre sí —17, 15.5, 13.5, 12.5—
   variaciones tan pequeñas que no crean jerarquía, solo ruido. Se fija una
   escala con saltos que se noten. */
:root{
  --t-xs:11.5px; --t-s:13px; --t-base:15px;
  --t-m:18px;    --t-l:23px; --t-xl:30px;
}

.campo-f label i{ color:var(--azul) }
.campo-f label{ font-size:var(--t-xs); letter-spacing:.04em;
  text-transform:uppercase; color:var(--txt-3); font-weight:700 }
.campo-f select,.campo-f input{ font-size:var(--t-s) }
.caja-f h4{ font-size:var(--t-m); margin-bottom:var(--e3) }
.check{ font-size:var(--t-s) }

/* Un solo punto de acento por bloque, no uno por rótulo. */
.caja-f h4::before{ content:""; display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--amarillo); margin-right:8px;
  vertical-align:middle }

/* La franja de alcance ocupaba tres renglones en el teléfono. */
@media (max-width:760px){
  .franja-aviso{ font-size:11.5px; padding:7px 0; line-height:1.4 }
  .franja-aviso .env{ gap:6px }
  .franja-aviso b{ display:block; width:100% }
}

/* ── Pie ───────────────────────────────────────────────────────────────────
   Franja al cierre, en el azul de la cabecera: la página abre y cierra con el
   mismo color y queda enmarcada. El bloque extenso de alcance se eliminó
   porque repetía lo que ya dice esta línea, y ocupaba media pantalla. */
.pie{ background:var(--azul); color:rgba(255,255,255,.72); margin-top:var(--e6) }
.pie .env{ padding-block:var(--e4); text-align:center }
.pie-legal{ font-size:11px; line-height:1.55; max-width:76ch; margin:0 auto;
  color:rgba(255,255,255,.52) }
.pie-linea{ font-size:12.5px; margin:var(--e3) 0 0; color:rgba(255,255,255,.72) }
.pie-linea a{ color:#fff; text-decoration:none; font-weight:600 }
.pie-linea a:hover{ text-decoration:underline; text-underline-offset:3px }
:root[data-theme="dark"] .pie{ background:#10142F }

@media (max-width:760px){
  .pie .env{ padding-block:var(--e4) var(--e5) }
  .pie-legal{ font-size:10.5px }
  .pie-linea{ font-size:12px; line-height:2 }
}

/* Nota de procedencia: distingue lo que sale de la norma de lo que es práctica.
   La página afirmaba cosas sin fuente —y una era falsa: decía que se pierde el
   20% del depósito cuando el art. 453 dice la mitad—. */
.nota-fuente{ font-size:12.5px; color:var(--txt-3); line-height:1.55;
  border-left:3px solid var(--borde-2); padding-left:12px; margin-top:var(--e3);
  max-width:72ch }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETA OFICIAL DE LA MARCA
   Recibida de IMPANOVA el 2026-10-03. Reemplaza los colores aproximados que
   se venían usando: el azul era #1F2A66 y el oficial es más oscuro; el
   amarillo era #FFDD00 y el oficial es más cálido.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --azul:#0B1B3D;  --azul-2:#15284F;  --azul-suave:#EDF0F7;
  --amarillo:#FFD700; --amarillo-2:#F5D000; --amarillo-h:#E6C200;
  --negro:#000000;
}
:root[data-theme="dark"]{ --azul:#0B1B3D; --azul-2:#15284F }

/* ── Cabecera en amarillo ──────────────────────────────────────────────────
   Ninguna variante del logotipo oficial trae el texto en blanco: las seis
   llevan el texto en azul marino. Sobre cabecera azul el logotipo no se lee, y
   en blanco la cabecera queda sin peso. El amarillo es el color primario de la
   paleta y es justamente el fondo para el que existe la variante entregada. */
header{ background:var(--amarillo); border-bottom:3px solid var(--azul);
  box-shadow:0 8px 24px -18px rgba(11,27,61,.6) }
header .logo img{ height:40px; width:auto; display:block }

.nav a{ color:rgba(11,27,61,.72); font-weight:700 }
.nav a:hover{ background:rgba(11,27,61,.10); color:var(--azul) }
.nav a.on{ background:var(--azul); color:var(--amarillo); font-weight:800 }

/* Sobre amarillo, el boton principal no puede ser amarillo. Se invierte: el
   CTA pasa a azul, que es donde mas contrasta. */
header .der .btn-y{ background:var(--azul); color:var(--amarillo);
  border:1.5px solid var(--azul) }
header .der .btn-y:hover{ background:#15284F }
header .der .btn-g, header .tema{ background:transparent; color:var(--azul);
  border:1.5px solid rgba(11,27,61,.32) }
header .der .btn-g:hover, header .tema:hover{ background:rgba(11,27,61,.08);
  border-color:var(--azul) }

@media (max-width:760px){
  .nav{ border-top:1px solid rgba(11,27,61,.18) }
  header .logo img{ height:30px }
}
:root[data-theme="dark"] header{ background:var(--amarillo-2) }

/* ── Página de cuenta ──────────────────────────────────────────────────── */
.hero-cuenta{ background:var(--azul); color:#fff; padding-block:var(--e5) var(--e4) }
.hero-cuenta h1{ font-size:clamp(24px,4vw,34px); color:#fff }
.hero-cuenta p{ color:rgba(255,255,255,.78); margin-top:var(--e2); max-width:56ch;
  font-size:15px }
.cuenta-caja{ max-width:440px; margin:var(--e5) auto var(--e6);
  background:var(--sup); border:1.5px solid var(--borde-2); border-radius:var(--r);
  padding:var(--e4); box-shadow:var(--sombra) }
.pestanas{ display:flex; gap:4px; background:var(--azul-suave);
  border-radius:var(--r-pill); padding:4px; margin-bottom:var(--e4) }
.pestana{ flex:1; border:0; background:transparent; font:inherit; font-size:13.5px;
  font-weight:700; color:var(--txt-2); padding:9px; border-radius:var(--r-pill);
  cursor:pointer }
.pestana.on{ background:var(--sup); color:var(--txt); box-shadow:var(--sombra) }
.form-cuenta{ display:flex; flex-direction:column; gap:var(--e3) }
.form-cuenta label{ display:flex; flex-direction:column; gap:6px; font-size:12px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-3) }
.form-cuenta input{ font:inherit; font-size:15px; color:var(--txt);
  background:var(--sup); border:1.5px solid var(--borde-2);
  border-radius:var(--r-s); padding:11px 13px }
.form-cuenta input:focus{ outline:2px solid var(--azul); outline-offset:1px;
  border-color:var(--azul) }
.btn.ancho{ width:100%; justify-content:center; padding:12px }
.aviso-form{ font-size:13.5px; margin:0; min-height:1.2em }
.aviso-form.malo{ color:#8c1d18 }
.aviso-form.bueno{ color:var(--txt-2) }
.letra-chica{ font-size:11.5px; color:var(--txt-3); line-height:1.5; margin:0 }
.letra-chica a{ color:var(--azul); font-weight:700 }
.datos-cuenta{ margin:var(--e3) 0 var(--e4) }
.datos-cuenta > div{ display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--borde) }
.datos-cuenta dt{ font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--txt-3); font-weight:700 }
.datos-cuenta dd{ margin:0; font-size:14.5px; font-weight:600; text-align:right }
.acciones-cuenta{ display:flex; flex-direction:column; gap:var(--e2) }
.acciones-cuenta .btn{ justify-content:center }
:root[data-theme="dark"] .aviso-form.malo{ color:#ffb4ab }