@font-face {
font-family: 'Instrument Sans';
src: url('/assets/fonts/instrument-sans-var.woff2?v=76988f8e6d') format('woff2');
font-weight: 400 700;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('/assets/fonts/plex-mono-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Reserva';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
size-adjust: 97%;
ascent-override: 96%;
descent-override: 25%;
}
:root {
--tinta: #0F1F2A;
--tinta-2: #243746;
--gris: #56666F;
--borde: #7B8790;
--linea: #D8DCD5;
--papel: #F6F5EF;
--papel-2: #ECEBE3;
--blanco: #FFFFFF;
--voltio: #C9F24D;
--voltio-hover: #B8E332;
--voltio-suave: #EEF9CF;
--voltio-texto: #4D6400;
--traza: #147A6E;
--traza-oscuro: #0E5E55;
--traza-suave: #E7F3F0;
--traza-claro: #2FB5A3;
--alerta: #B42318;
--alerta-suave: #FDECEA;
--aviso: #7A5200;
--aviso-suave: #FFF4D6;
--ok: #1B7F3B;
--ok-suave: #E6F4EA;
--foco: #0E5E55;
--f-texto: 'Instrument Sans', 'Instrument Reserva', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--t-xs: 0.875rem;
--t-s: 0.9375rem;
--t-m: 1.0625rem;
--t-l: 1.25rem;
--t-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
--t-2xl: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
--t-3xl: clamp(2rem, 1.3rem + 3vw, 3.25rem);
--e-1: 4px;
--e-2: 8px;
--e-3: 12px;
--e-4: 16px;
--e-5: 24px;
--e-6: 32px;
--e-7: 48px;
--e-8: 64px;
--e-9: 96px;
--r-s: 8px;
--r-m: 14px;
--r-l: 22px;
--r-xl: 32px;
--sombra: 6px 6px 0 var(--linea);
--sombra-oscura: 6px 6px 0 var(--tinta);
--ancho: 1180px;
--ancho-texto: 44rem;
--gutter: clamp(16px, 4vw, 32px);
--cabecera: 68px;
--objetivo: 44px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 16px); scroll-behavior: smooth; }
body {
margin: 0;
background: var(--papel);
color: var(--tinta);
font-family: var(--f-texto);
font-size: var(--t-m);
line-height: 1.6;
font-kerning: normal;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4 {
font-family: var(--f-texto);
font-stretch: 92%;
font-weight: 650;
line-height: 1.12;
letter-spacing: -0.018em;
margin: 0 0 var(--e-4);
text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: -0.028em; }
h2 { font-size: var(--t-2xl); margin-top: var(--e-7); }
h3 { font-size: var(--t-l); margin-top: var(--e-6); letter-spacing: -0.01em; }
h2:first-child, h3:first-child { margin-top: 0; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--e-4); }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: var(--e-1); }
li::marker { color: var(--traza); }
strong, b { font-weight: 650; }
small { font-size: var(--t-s); }
hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e-6) 0; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
a {
color: var(--traza-oscuro);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--traza-oscuro) 45%, transparent);
transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--tinta); text-decoration-color: currentColor; }
:focus-visible {
outline: 3px solid var(--foco);
outline-offset: 3px;
border-radius: 4px;
}
.oscuro :focus-visible, .pie :focus-visible { outline-color: var(--voltio); }
.num, .cifra, td, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.saltar {
position: absolute;
left: 16px;
top: -100px;
z-index: 100;
background: var(--tinta);
color: var(--blanco);
padding: 12px 18px;
border-radius: var(--r-s);
font-weight: 600;
}
.saltar:focus { top: 12px; color: var(--blanco); }
.envoltura { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.envoltura-texto { width: min(100% - 2 * var(--gutter), var(--ancho-texto)); margin-inline: auto; }
.seccion { padding-block: clamp(48px, 7vw, 88px); }
.seccion-apretada { padding-block: clamp(32px, 5vw, 56px); }
.oscuro { background: var(--tinta); color: var(--papel); }
.oscuro a { color: var(--voltio); text-decoration-color: color-mix(in srgb, var(--voltio) 50%, transparent); }
.oscuro a:hover { color: var(--blanco); }
.fondo-blanco { background: var(--blanco); }
.fondo-traza { background: var(--traza-suave); }
.icono { width: 24px; height: 24px; }
.icono-s { width: 18px; height: 18px; }
.sin-js .solo-js { display: none !important; }
.con-js .solo-sin-js { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.btn {
--sombra-btn: 4px 4px 0 var(--tinta);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: 0 22px;
border: 2px solid var(--tinta);
border-radius: 12px;
background: var(--blanco);
color: var(--tinta);
font: 650 1.0313rem/1.15 var(--f-texto);
font-stretch: 96%;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.btn:hover { color: var(--tinta); }
.btn .icono { width: 20px; height: 20px; }
.btn-primario { background: var(--voltio); box-shadow: var(--sombra-btn); }
.btn-primario:hover { background: var(--voltio-hover); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.btn-primario:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.btn-secundario:hover { background: var(--papel-2); }
.btn-oscuro { background: var(--tinta); color: var(--papel); }
.btn-oscuro:hover { background: var(--tinta-2); color: var(--blanco); }
.btn-s { min-height: 44px; padding: 0 16px; font-size: .9688rem; }
.btn-bloque { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.oscuro .btn-secundario { background: transparent; color: var(--papel); border-color: var(--papel); }
.oscuro .btn-secundario:hover { background: var(--tinta-2); }
.oscuro .btn-primario { border-color: var(--voltio); box-shadow: 4px 4px 0 var(--traza-claro); }
.boton-texto {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--objetivo);
padding: 0 6px;
background: none; border: 0;
color: var(--traza-oscuro);
font: 600 var(--t-s)/1.2 var(--f-texto);
text-decoration: underline; text-underline-offset: 3px;
cursor: pointer;
}
.boton-texto:hover { color: var(--tinta); }
.boton-texto .icono { width: 18px; height: 18px; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); align-items: center; }
.nota-salida {
display: flex; gap: 8px; align-items: flex-start;
margin: var(--e-3) 0 0;
font-size: var(--t-s);
line-height: 1.5;
color: var(--gris);
max-width: 34rem;
}
.nota-salida .icono { width: 16px; height: 16px; margin-top: 2px; color: var(--traza); }
.oscuro .nota-salida { color: #B9C4CB; }
.oscuro .nota-salida .icono { color: var(--voltio); }
.etiqueta {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px;
border: 1.5px solid currentColor;
border-radius: 6px;
font: 500 .8125rem/1.4 var(--f-mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tinta-2);
white-space: nowrap;
}
.etiqueta-voltio { background: var(--voltio); color: var(--tinta); border-color: var(--tinta); }
.etiqueta-traza { color: var(--traza-oscuro); background: var(--traza-suave); }
.etiqueta-aviso { color: var(--aviso); background: var(--aviso-suave); }
.oscuro .etiqueta { color: var(--papel); }
.antetitulo {
display: flex; align-items: center; gap: 10px;
margin: 0 0 var(--e-4);
font: 500 .8125rem/1.3 var(--f-mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--traza-oscuro);
}
.antetitulo::before { content: ""; width: 26px; height: 2px; background: currentColor; box-shadow: 26px 0 0 -0px transparent; }
.oscuro .antetitulo { color: var(--voltio); }
.cabecera {
position: sticky; top: 0; z-index: 50;
background: var(--papel);
border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; gap: var(--e-4); min-height: var(--cabecera); width: min(100% - 2 * var(--gutter), 1360px); }
.marca { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 10px; }
.marca svg { height: 34px; width: auto; }
.nav { flex: 1; min-width: 0; }
.nav-lista { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; margin: 0; }
.nav-enlace {
display: inline-flex; align-items: center;
min-height: var(--objetivo);
padding: 0 8px 0 12px;
border-radius: 10px;
color: var(--tinta);
font-weight: 600; font-size: .9688rem;
text-decoration: none;
white-space: nowrap;
}
.nav-enlace:hover, .nav-item[data-actual] > .nav-enlace { color: var(--traza-oscuro); }
.nav-item[data-actual] > .nav-enlace { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--voltio-texto); }
.nav-abrir {
display: inline-grid; place-items: center;
width: 30px; height: 36px;
margin-left: -4px;
background: none; border: 0; border-radius: 8px;
color: var(--tinta-2);
cursor: pointer;
}
.nav-abrir:hover { background: var(--papel-2); }
.nav-abrir svg { width: 16px; height: 16px; transition: transform .15s; }
.nav-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel {
position: absolute; top: calc(100% + 10px); left: 0;
width: 330px;
padding: var(--e-3);
background: var(--blanco);
border: 2px solid var(--tinta);
border-radius: var(--r-l);
box-shadow: var(--sombra);
}
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li + li { margin-top: 2px; }
.nav-panel a {
display: block;
padding: 10px 12px;
border-radius: 12px;
color: var(--tinta);
text-decoration: none;
line-height: 1.3;
}
.nav-panel a:hover { background: var(--traza-suave); }
.nav-panel a span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--gris); }
.nav-panel a strong { font-weight: 600; }
.cabecera-acciones { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; }
.menu-boton {
display: none;
align-items: center; gap: 8px;
min-height: var(--objetivo);
padding: 0 14px;
background: var(--blanco);
border: 2px solid var(--tinta);
border-radius: 12px;
color: var(--tinta);
font: 650 .9688rem/1 var(--f-texto);
text-decoration: none;
cursor: pointer;
}
.menu-boton svg { width: 22px; height: 22px; }
.menu-movil {
position: fixed; inset: var(--cabecera) 0 0 0;
z-index: 49;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--e-5) var(--gutter) calc(var(--e-8) + env(safe-area-inset-bottom));
background: var(--papel);
border-top: 1px solid var(--linea);
}
.menu-movil h2 { margin: var(--e-5) 0 var(--e-2); font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--traza-oscuro); }
.menu-movil h2:first-child { margin-top: 0; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil li { margin: 0; border-bottom: 1px solid var(--linea); }
.menu-movil li a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); font-weight: 600; text-decoration: none; }
.menu-movil .acciones { margin-top: var(--e-6); }
.menu-movil .acciones .btn { flex: 1 1 100%; }
@media (max-width: 1379px) {
.cabecera-acciones .btn-secundario { display: none; }
}
@media (max-width: 1199px) {
.nav { display: none; }
.menu-boton { display: inline-flex; }
}
@media (max-width: 560px) {
.cabecera-acciones .btn { display: none; }
.marca svg { height: 30px; }
}
@media (min-width: 1200px) {
.menu-movil { display: none !important; }
}
.barra-movil { display: none; }
@media (max-width: 760px) {
.barra-movil {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: flex; gap: 10px;
padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
background: var(--blanco);
border-top: 1px solid var(--linea);
box-shadow: 0 -6px 18px rgb(15 31 42 / 8%);
}
.barra-movil .btn { flex: 1; min-height: 46px; padding: 0 10px; font-size: .9688rem; }
body.con-barra { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.escribiendo .barra-movil, body.menu-abierto .barra-movil { display: none; }
}
.migas { margin-bottom: var(--e-4); font-size: var(--t-xs); }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.migas li { display: inline-flex; align-items: center; margin: 0; color: var(--gris); }
.migas li + li::before { content: "/"; margin: 0 8px; color: var(--borde); }
.migas a { color: var(--tinta-2); text-decoration-color: var(--linea); }
.migas a:hover { color: var(--traza-oscuro); }
.cabeza-pagina { position: relative; padding: var(--e-6) 0 var(--e-7); }
.cabeza-pagina h1 { max-width: 22ch; }
.cabeza-pagina .entradilla { max-width: 40rem; font-size: var(--t-l); line-height: 1.5; color: var(--tinta-2); margin-bottom: var(--e-4); }
.cabeza-pagina .sello { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0; font-size: var(--t-xs); color: var(--gris); }
.traza-separador { display: block; width: 100%; height: 24px; color: var(--tinta); }
.traza-separador path { vector-effect: non-scaling-stroke; }
.tarjeta {
background: var(--blanco);
border: 1.5px solid var(--linea);
border-radius: var(--r-l);
padding: clamp(20px, 3vw, 28px);
}
.tarjeta-marcada { border: 2px solid var(--tinta); box-shadow: var(--sombra); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta h3 { margin-top: 0; font-size: var(--t-l); }
.rejilla { display: grid; gap: var(--e-5); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.enlace-tarjeta { display: flex; flex-direction: column; gap: 8px; height: 100%; color: var(--tinta); text-decoration: none; }
.enlace-tarjeta:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.enlace-tarjeta p { color: var(--gris); font-size: var(--t-s); margin: 0; }
.enlace-tarjeta .icono { color: var(--traza); }
.nota, .aviso, .respuesta-corta, .ejemplo-linea { --nodo: var(--traza); position: relative; }
.nota, .aviso, .respuesta-corta {
margin: var(--e-5) 0;
padding: var(--e-4) var(--e-5) var(--e-4) calc(var(--e-5) + 4px);
border-radius: var(--r-m);
border: 1.5px solid color-mix(in srgb, var(--traza) 45%, transparent);
background: var(--traza-suave);
}
.nota::before, .aviso::before, .respuesta-corta::before, .ejemplo-linea::before {
content: "";
position: absolute; left: -7px; top: 20px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--blanco);
border: 2.5px solid var(--nodo);
}
.aviso { --nodo: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); background: var(--aviso-suave); }
.nota > :last-child, .aviso > :last-child { margin-bottom: 0; }
.respuesta-corta { --nodo: var(--tinta); background: var(--blanco); font-size: var(--t-l); line-height: 1.5; font-weight: 500; box-shadow: var(--sombra); border: 2px solid var(--tinta); }
.respuesta-corta::before { background: var(--voltio); top: 24px; }
.alerta-caja { padding: var(--e-4) var(--e-5); border-radius: var(--r-m); background: var(--alerta-suave); color: var(--alerta); border: 1.5px solid currentColor; }
.aviso-colaborador {
display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
margin: var(--e-5) 0;
padding: var(--e-4) var(--e-5);
border: 2px dashed var(--traza);
border-radius: var(--r-m);
background: var(--blanco);
}
.aviso-colaborador .icono { color: var(--traza); margin-top: 2px; }
.aviso-colaborador p { margin: 0; }
.aviso-colaborador p + p { margin-top: var(--e-2); }
.tabla-scroll { position: relative; overflow-x: auto; margin: 0 0 var(--e-5); border-radius: var(--r-m); border: 1.5px solid var(--linea); background: var(--blanco); }
.tabla-scroll:focus-visible { outline-offset: 2px; }
.tabla-scroll .tabla { margin: 0; border: 0; }
.tabla-pista { display: none; margin: -12px 0 var(--e-4); font-size: var(--t-xs); color: var(--gris); }
.tabla {
width: 100%;
border-collapse: collapse;
background: var(--blanco);
font-size: var(--t-s);
line-height: 1.45;
}
.tabla caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font-weight: 650; font-size: var(--t-s); color: var(--tinta); background: var(--blanco); }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--linea); }
.tabla thead th { background: var(--papel-2); font-weight: 650; font-size: var(--t-xs); text-transform: none; border-top: 0; }
.tabla tbody th { font-weight: 600; }
.tabla .num, .tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla tfoot td, .tabla tfoot th { font-weight: 650; border-top: 2px solid var(--tinta); }
.tabla tr.destacada td, .tabla tr.destacada th { background: var(--voltio-suave); }
.tabla-scroll .tabla:not(.tabla-apilable) tbody th:first-child, .tabla-scroll .tabla:not(.tabla-apilable) thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--blanco); box-shadow: 1px 0 0 var(--linea); }
.tabla-scroll .tabla:not(.tabla-apilable) thead th:first-child { background: var(--papel-2); }
@media (max-width: 640px) {
.tabla-pista { display: block; }
.tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td, .tabla-apilable th { display: block; width: 100%; }
.tabla-apilable tr { padding: 10px 0; border-top: 1px solid var(--linea); }
.tabla-apilable tbody th { padding: 6px 16px 2px; border: 0; }
.tabla-apilable td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 16px; border: 0; text-align: right; }
.tabla-apilable td::before { content: attr(data-etiqueta); font-weight: 500; color: var(--gris); text-align: left; }
.tabla-scroll:has(.tabla-apilable) + .tabla-pista { display: none; }
}
.preguntas { margin: var(--e-5) 0; border-top: 1.5px solid var(--tinta); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
position: relative;
display: block;
padding: 18px 48px 18px 0;
font-weight: 650;
font-size: var(--t-m);
line-height: 1.4;
cursor: pointer;
list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::before, .preguntas summary::after {
content: ""; position: absolute; right: 12px; top: 50%;
width: 16px; height: 2.5px; border-radius: 2px;
background: var(--tinta);
transition: transform .18s ease;
}
.preguntas summary::after { transform: rotate(90deg); }
.preguntas details[open] summary::after { transform: rotate(0); }
.preguntas summary:hover { color: var(--traza-oscuro); }
.preguntas details > :not(summary) { margin: 0 0 var(--e-4); max-width: 42rem; }
.preguntas details > :last-child { padding-bottom: var(--e-2); }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: var(--e-5) 0; }
.pasos > li {
counter-increment: paso;
position: relative;
margin: 0;
padding: 0 0 var(--e-5) 56px;
min-height: 52px;
}
.pasos > li::before {
content: counter(paso);
position: absolute; left: 0; top: -2px;
display: grid; place-items: center;
width: 36px; height: 36px;
border: 2.5px solid var(--tinta);
border-radius: 50%;
background: var(--blanco);
font: 500 .9375rem/1 var(--f-mono);
z-index: 1;
}
.pasos > li::after {
content: "";
position: absolute; left: 17px; top: 34px; bottom: 0;
width: 2.5px;
background: var(--tinta);
}
.pasos > li:last-child { padding-bottom: 0; }
.pasos > li:last-child::after { display: none; }
.pasos > li:last-child::before { background: var(--voltio); }
.pasos > li > strong:first-child { display: block; margin-bottom: 2px; font-size: var(--t-m); }
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-xl); margin-top: var(--e-7); scroll-margin-top: calc(var(--cabecera) + 16px); }
.prosa h3 { font-size: var(--t-l); }
.prosa table { width: 100%; }
.prosa dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 8px 20px; }
.prosa dt { font-weight: 650; }
.prosa dd { margin: 0; }
@media (max-width: 560px) { .prosa dl { grid-template-columns: 1fr; gap: 2px; } .prosa dd { margin-bottom: 10px; } }
.indice {
margin: 0 0 var(--e-6);
padding: var(--e-4) var(--e-5);
border: 1.5px solid var(--linea);
border-radius: var(--r-m);
background: var(--blanco);
}
.indice h2 { margin: 0 0 var(--e-2); font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--traza-oscuro); }
.indice ol { margin: 0; padding-left: 1.4em; }
.indice li { margin: 4px 0; }
.pie-articulo { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1.5px solid var(--tinta); font-size: var(--t-s); }
.pie-articulo h2 { font-size: var(--t-l); margin: 0 0 var(--e-3); }
.fuentes { padding-left: 1.2em; }
.fuentes li { margin: 6px 0; }
.firma { display: grid; gap: 4px; margin: var(--e-5) 0; padding: var(--e-4) var(--e-5); background: var(--papel-2); border-radius: var(--r-m); font-size: var(--t-s); }
.firma p { margin: 0; }
.ext::after {
content: "";
display: inline-block;
width: .8em; height: .8em;
margin-left: .25em;
vertical-align: -.05em;
background: currentColor;
-webkit-mask: url('/assets/brand/icons/externo.svg') center / contain no-repeat;
mask: url('/assets/brand/icons/externo.svg') center / contain no-repeat;
}
.correo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.correo .copiar { min-height: 40px; padding: 0 8px; font-size: var(--t-xs); border: 1.5px solid var(--linea); border-radius: 8px; background: var(--blanco); color: var(--tinta-2); text-decoration: none; }
.correo .copiar:hover { border-color: var(--tinta); }
.correo .copiar .icono { width: 15px; height: 15px; }
.copiado { color: var(--ok); font-size: var(--t-xs); font-weight: 600; }
.version-doc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: var(--e-5); }
.relacionadas { margin-top: var(--e-7); }
.relacionadas h2 { font-size: var(--t-xl); }
.relacionadas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.relacionadas li { margin: 0; }
.relacionadas a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 100%;
min-height: 64px;
padding: 14px 18px;
border: 1.5px solid var(--linea);
border-radius: var(--r-m);
background: var(--blanco);
color: var(--tinta);
font-weight: 600;
line-height: 1.35;
text-decoration: none;
}
.relacionadas a:hover { border-color: var(--tinta); }
.relacionadas a .icono { width: 20px; height: 20px; color: var(--traza); }
.contacto-caja { display: grid; gap: var(--e-4); margin: var(--e-5) 0; }
.contacto-caja dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 10px 20px; margin: 0; }
.contacto-caja dt { font-weight: 650; }
.contacto-caja dd { margin: 0; }
@media (max-width: 560px) { .contacto-caja dl { grid-template-columns: 1fr; gap: 2px; } .contacto-caja dd { margin-bottom: 12px; } }
.campo { display: grid; gap: 6px; margin: 0 0 var(--e-5); }
.campo > label, .campo legend, .etiqueta-campo { font-weight: 650; font-size: var(--t-s); }
.pista { font-size: var(--t-xs); color: var(--gris); margin: 0; }
.entrada {
display: flex; align-items: center;
min-height: 52px;
border: 2px solid var(--borde);
border-radius: 12px;
background: var(--blanco);
transition: border-color .15s;
}
.entrada:focus-within { border-color: var(--tinta); outline: 3px solid color-mix(in srgb, var(--traza) 35%, transparent); outline-offset: 1px; }
.entrada input {
flex: 1; min-width: 0;
height: 48px;
padding: 0 14px;
border: 0; border-radius: 12px;
background: transparent;
color: var(--tinta);
font: 650 1.25rem/1 var(--f-texto);
font-variant-numeric: tabular-nums;
}
.entrada input:focus { outline: none; }
.entrada .sufijo { padding: 0 14px 0 4px; color: var(--gris); font-weight: 600; }
.campo[data-error] .entrada { border-color: var(--alerta); }
.error-campo { display: none; margin: 0; color: var(--alerta); font-size: var(--t-s); font-weight: 600; }
.campo[data-error] .error-campo { display: block; }
input[type="range"] {
-webkit-appearance: none; appearance: none;
width: 100%; height: 36px;
margin: 0;
background: transparent;
cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--traza) var(--lleno, 50%), var(--linea) var(--lleno, 50%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--linea); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--traza); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--voltio); border: 3px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--voltio); border: 3px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--foco); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--foco); outline-offset: 3px; }
.limites { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--gris); font-variant-numeric: tabular-nums; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmento { display: flex; flex-wrap: nowrap; gap: 6px; padding: 5px; border: 2px solid var(--tinta); border-radius: 14px; background: var(--blanco); }
.segmento label { position: relative; flex: 1 1 0; min-width: 0; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span {
display: flex; align-items: center; justify-content: center;
min-height: 44px; padding: 6px 10px;
border-radius: 10px;
font-weight: 600; font-size: var(--t-s);
text-align: center;
line-height: 1.2;
color: var(--tinta-2);
transition: background-color .15s;
}
.segmento input:hover + span { background: var(--papel-2); }
.segmento input:checked + span { background: var(--tinta); color: var(--papel); }
.segmento input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.segmento input:disabled + span { opacity: .5; }
.segmento-legend { margin-bottom: 8px; font-weight: 650; font-size: var(--t-s); }
.calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
border: 2px solid var(--tinta);
border-radius: var(--r-xl);
background: var(--tinta);
box-shadow: 8px 8px 0 var(--tinta);
overflow: hidden;
}
.calc-marco { container-type: inline-size; }
@container (min-width: 620px) {
.calc-ancha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.calc-form { padding: clamp(20px, 3.5vw, 32px); background: var(--blanco); }
.calc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: var(--e-5); }
.calc-cab h2, .calc-cab .calc-titulo { margin: 0; font-size: var(--t-xl); }
.calc-fila { display: grid; gap: var(--e-4); }
.calc-club { margin: 0 0 var(--e-5); padding: var(--e-4); border-radius: var(--r-m); background: var(--traza-suave); }
.calc-club .pista { margin-top: 8px; }
.calc-res {
display: flex; flex-direction: column; gap: var(--e-4);
padding: clamp(20px, 3.5vw, 32px);
background: var(--tinta);
color: var(--papel);
}
.calc-res-etiqueta { margin: 0; font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--voltio); }
.calc-total { margin: 0; }
.calc-total .grande { display: block; white-space: nowrap; font: 650 clamp(2.4rem, 1.8rem + 2.4vw, 3.25rem)/1.05 var(--f-texto); font-stretch: 90%; letter-spacing: -0.02em; color: var(--voltio); font-variant-numeric: tabular-nums; }
.calc-total .pie-total { display: block; margin-top: 6px; color: #C9D3D9; font-size: var(--t-s); }
.calc-desglose { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0; font-size: var(--t-s); }
.calc-desglose dt, .calc-desglose dd { padding: 9px 0; border-top: 1px solid #2E4252; }
.calc-desglose dt { color: #C9D3D9; }
.calc-desglose dt { padding-right: 12px; }
.calc-desglose dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.calc-desglose .resalte { color: var(--voltio); }
.calc-desglose .tachado { text-decoration: line-through; color: #9FB0BA; font-weight: 500; margin-right: 8px; }
.barra-coste { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: #2E4252; }
.medidor { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: #C9D3D9; }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda .l-capital { background: var(--papel); }
.leyenda .l-interes { background: var(--voltio); }
.leyenda .l-ahorro { background: var(--traza-claro); }
.calc-mensaje { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: var(--t-s); line-height: 1.45; background: #1B3140; border: 1.5px solid #3A5163; }
.calc-mensaje strong { color: var(--voltio); }
.calc-mensaje.error { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta); }
.calc-mensaje.error strong { color: var(--alerta); }
.calc[data-estado="error"] .calc-cifras { display: none; }
.calc[data-estado="cargando"] .calc-cifras { opacity: .6; }
.calc-acciones { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.calc-acciones .boton-texto { color: var(--papel); }
.calc-acciones .boton-texto:hover { color: var(--voltio); }
.calc-res .btn-primario { width: 100%; }
.calc-cuadro summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); min-height: var(--objetivo); display: flex; align-items: center; }
.calc-cuadro .tabla-scroll { border-color: #2E4252; }
.calc-estatico { font-size: var(--t-xs); color: #C9D3D9; margin: 0; }
.impresion-calculo { display: none; }
.comparar { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: var(--e-5) 0; }
.opcion {
display: flex; flex-direction: column; gap: 10px;
padding: var(--e-5);
border: 2px solid var(--tinta);
border-radius: var(--r-l);
background: var(--blanco);
}
.opcion[data-elegida] { background: var(--voltio-suave); box-shadow: var(--sombra-oscura); }
.opcion h3 { margin: 0; font-size: var(--t-l); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.opcion .total { margin: 0; font: 650 1.75rem/1.1 var(--f-texto); font-variant-numeric: tabular-nums; }
.opcion dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: var(--t-s); }
.opcion dt { color: var(--gris); }
.opcion dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.opcion .btn { margin-top: auto; }
.niveles { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); margin: var(--e-5) 0; }
.nivel {
display: flex; flex-direction: column; gap: var(--e-3);
padding: var(--e-5);
border: 2px solid var(--tinta);
border-radius: var(--r-l);
background: var(--blanco);
}
.nivel-cab { display: flex; align-items: center; gap: var(--e-4); }
.nivel-cab img, .nivel-cab svg { width: 64px; height: 64px; }
.nivel h3 { margin: 0; font-size: var(--t-xl); }
.nivel .ventaja { margin: 0; font: 650 1.375rem/1.25 var(--f-texto); }
.nivel .ventaja small { display: block; font-size: var(--t-s); font-weight: 500; color: var(--gris); }
.nivel ul { margin: 0; padding-left: 1.2em; font-size: var(--t-s); }
.nivel .criterio { margin: 0; font-size: var(--t-s); padding: 10px 12px; border-radius: 10px; background: var(--papel); }
.nivel[data-nivel="linea"] { border-color: var(--traza); }
.nivel[data-nivel="circuito"] { background: var(--tinta); color: var(--papel); }
.nivel[data-nivel="circuito"] .ventaja small, .nivel[data-nivel="circuito"] .criterio { color: #D5DEE3; }
.nivel[data-nivel="circuito"] .criterio { background: var(--tinta-2); }
.buscador { margin: var(--e-5) 0; }
.buscador-caja { display: flex; gap: 8px; }
.buscador-caja .entrada { flex: 1; }
.buscador-caja .entrada svg { margin-left: 14px; color: var(--gris); width: 22px; height: 22px; }
.buscador-caja input { font-size: 1.0625rem; font-weight: 500; }
.buscador-estado { margin: var(--e-3) 0 0; font-size: var(--t-s); color: var(--gris); min-height: 1.5em; }
.resultados { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 8px; }
.resultados li { margin: 0; }
.resultados a { display: block; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: var(--r-m); background: var(--blanco); color: var(--tinta); text-decoration: none; }
.resultados a:hover, .resultados a:focus-visible { border-color: var(--tinta); }
.resultados strong { display: block; font-weight: 650; }
.resultados span { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--gris); }
.resultados mark { background: var(--voltio-suave); color: inherit; border-radius: 3px; padding: 0 1px; }
.categorias { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.categoria h2, .categoria h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t-l); margin: 0 0 var(--e-3); }
.categoria h2 .icono, .categoria h3 .icono { color: var(--traza); }
.categoria ul { list-style: none; padding: 0; margin: 0; }
.categoria li { margin: 0; border-top: 1px solid var(--linea); }
.categoria li a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; font-weight: 600; }
.banner {
display: grid; gap: var(--e-5);
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: clamp(20px, 4vw, 40px);
border: 2px solid var(--tinta);
border-radius: var(--r-xl);
background: var(--blanco);
}
.banner h2 { margin: 0 0 var(--e-3); font-size: var(--t-2xl); }
.banner p { color: var(--tinta-2); }
.banner-arte img { width: 100%; height: auto; border-radius: var(--r-l); }
.banner-arte .arte-movil { display: block; }
.banner-arte .arte-escritorio { display: none; }
@media (min-width: 761px) {
.banner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.banner-arte .arte-movil { display: none; }
.banner-arte .arte-escritorio { display: block; }
}
.banner-club { background: var(--voltio-suave); }
.banner-ayuda { background: var(--traza-suave); }
.pie { background: var(--tinta); color: #D5DEE3; font-size: var(--t-s); padding: var(--e-8) 0 var(--e-7); }
.pie a { color: var(--papel); text-decoration-color: rgb(246 245 239 / 35%); }
.pie a:hover { color: var(--voltio); }
.pie-rejilla { display: grid; gap: var(--e-6) var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pie h2 { margin: 0 0 var(--e-3); font: 500 .8125rem/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--voltio); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-marca svg { height: 34px; width: auto; margin-bottom: var(--e-4); }
.pie-legal { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid #2E4252; display: grid; gap: var(--e-3); color: #B9C4CB; font-size: var(--t-xs); line-height: 1.6; }
.pie-legal p { margin: 0; max-width: 62rem; }
.pie-ejemplo { color: var(--papel); }
.pie-traza { display: block; width: 100%; height: 24px; color: #2E4252; margin-bottom: var(--e-6); }
.sello .etiqueta, .version-doc .etiqueta { white-space: normal; }
.version-doc { flex-wrap: wrap; }
.calc-res .nota-salida { color: #C3CDD3; }
.calc-res .nota-salida .icono { color: var(--voltio); }
.nivel[data-nivel="circuito"] .etiqueta { color: var(--papel); }
.indice ol.sin-numero { list-style: none; padding-left: 0; }
.correo .copiar { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; cursor: pointer; font-family: var(--f-texto); }
.correo .copiar .icono { display: inline-block; }
.contacto-caja a { display: inline-flex; align-items: center; min-height: 44px; }
@media (pointer: coarse) {
.correo .copiar { min-height: 44px; }
.migas a { display: inline-block; padding-block: 11px; margin-block: -11px; }
input[type="range"] { height: 44px; }
input[type="range"]::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -12px; }
}
.sin-corte { white-space: nowrap; }
@media (max-width: 560px) {
.cabeza-pagina { padding: var(--e-5) 0 var(--e-5); }
.cabeza-pagina .entradilla { font-size: 1.125rem; }
[data-vista="simulador"] .cabeza-pagina .sello { display: none; }
.pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
.pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.tabla-apilable caption { display: block; width: 100%; }
}
.barra-movil-nota { display: none; }
@media (max-width: 760px) {
.barra-movil { flex-wrap: wrap; row-gap: 6px; }
.barra-movil-nota { display: block; flex: 1 1 100%; margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--gris); text-align: center; }
.barra-movil .btn-primario { box-shadow: 3px 3px 0 var(--tinta); margin-right: 3px; }
body.con-barra { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
.barra-movil .btn { font-size: .875rem; padding: 0 6px; }
.barra-movil .btn-secundario { flex: 0 0 36%; }
}
.portada { position: relative; padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.portada-rejilla { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1200px) {
.portada-rejilla { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.portada h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); max-width: 14ch; margin-bottom: var(--e-4); }
.portada h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--voltio) 62%, var(--voltio) 92%, transparent 92%); padding: 0 .06em; }
.portada .entradilla { font-size: var(--t-l); line-height: 1.5; color: var(--tinta-2); max-width: 34rem; }
.datos-clave { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--e-5) 0; padding: 0; list-style: none; }
.datos-clave li {
display: inline-flex; align-items: center; gap: 8px;
margin: 0;
padding: 8px 12px;
border: 1.5px solid var(--tinta);
border-radius: 10px;
background: var(--blanco);
font-weight: 600; font-size: var(--t-s);
font-variant-numeric: tabular-nums;
}
.datos-clave .icono { width: 18px; height: 18px; color: var(--traza); }
.ejemplo-linea { --nodo: var(--tinta); max-width: 36rem; padding: 12px 16px 12px 20px; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 12px; font-size: var(--t-s); line-height: 1.5; }
.ejemplo-linea::before { top: 16px; background: var(--voltio); }
.ejemplo-linea strong { font-weight: 650; }
.portada-arte { margin-top: var(--e-5); }
.portada-arte .arte-escritorio { display: none; }
@media (min-width: 1200px) {
.portada-arte .arte-escritorio { display: block; max-width: 460px; }
.portada-arte .arte-movil { display: none; }
}
.portada-arte .arte-movil { max-width: 420px; width: 100%; }
@media (max-width: 1199px) {
.portada-arte { order: 3; }
}
.banda-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-6); }
.banda-cab h2 { margin: 0; max-width: 20ch; }
.banda-cab p { margin: 0; max-width: 34rem; color: var(--tinta-2); }
.desglose-precio { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .desglose-precio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.grafico-precio { padding: var(--e-5); border: 2px solid var(--tinta); border-radius: var(--r-l); background: var(--blanco); }
.grafico-precio figcaption { font-weight: 650; margin-bottom: var(--e-4); }
.columnas-precio { display: flex; align-items: flex-end; gap: var(--e-4); height: 220px; padding: 0 var(--e-2); border-bottom: 2px solid var(--tinta); }
.columna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; text-align: center; }
.columna .pila { display: flex; flex-direction: column-reverse; border: 2px solid var(--tinta); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.columna .pila span { display: block; }
.columna .p-capital { background: var(--tinta-2); }
.columna .p-interes { background: var(--voltio); }
.columna .rotulo { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-grafico { display: flex; gap: var(--e-4); padding: 8px var(--e-2) 0; }
.pie-grafico span { flex: 1; text-align: center; font-size: var(--t-xs); color: var(--gris); }
.requisitos-lista { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.requisitos-lista li { display: flex; gap: var(--e-3); align-items: flex-start; margin: 0; padding: var(--e-4); border-radius: var(--r-m); background: var(--blanco); border: 1.5px solid var(--linea); }
.requisitos-lista .icono { width: 28px; height: 28px; color: var(--traza); margin-top: 2px; }
.requisitos-lista strong { display: block; }
.requisitos-lista span { font-size: var(--t-s); color: var(--gris); }
.recorrido { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: etapa; }
.recorrido li { margin: 0; counter-increment: etapa; }
.recorrido img { width: 100%; height: auto; }
.recorrido h3 { display: flex; gap: 10px; align-items: baseline; margin: var(--e-3) var(--e-3) 6px; font-size: var(--t-l); }
.recorrido h3::before { content: counter(etapa, decimal-leading-zero); font: 500 .8125rem/1 var(--f-mono); color: var(--traza-oscuro); }
.recorrido p { margin: 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
@media (max-width: 999px) {
.recorrido { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-6); }
}
@media (max-width: 560px) {
.recorrido { grid-template-columns: minmax(0, 1fr); }
.recorrido img { max-width: 360px; }
}
.dos-columnas { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dos-columnas.invertida > :first-child { order: 2; } }
.dos-columnas img { width: 100%; height: auto; max-width: 480px; }
.metodo { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.metodo li { margin: 0; padding: var(--e-4); border-top: 3px solid var(--voltio); }
.metodo strong { display: block; margin-bottom: 4px; color: var(--blanco); }
.metodo span { font-size: var(--t-s); color: #C9D3D9; }
.guias-lista { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.guias-lista li { margin: 0; }
.guia-tarjeta { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--tinta); border-radius: var(--r-l); background: var(--blanco); overflow: hidden; color: var(--tinta); text-decoration: none; }
.guia-tarjeta img { width: 100%; height: auto; aspect-ratio: 800 / 420; object-fit: cover; border-bottom: 2px solid var(--tinta); }
.guia-tarjeta div { display: flex; flex-direction: column; gap: 8px; padding: var(--e-4) var(--e-5) var(--e-5); }
.guia-tarjeta h3 { margin: 0; font-size: var(--t-l); }
.guia-tarjeta p { margin: 0; font-size: var(--t-s); color: var(--gris); }
.guia-tarjeta:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.guia-tarjeta:hover { color: var(--tinta); }
.pagina { padding-bottom: var(--e-9); }
.pagina-cuerpo { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
.pagina-cuerpo.con-lateral { grid-template-columns: minmax(0, 1fr) 300px; }
.lateral { position: sticky; top: calc(var(--cabecera) + 24px); align-self: start; }
}
.lateral .tarjeta + .tarjeta { margin-top: var(--e-4); }
.lateral h2 { font-size: var(--t-l); margin: 0 0 var(--e-3); }
.portada-guia { margin: 0 0 var(--e-6); border: 2px solid var(--tinta); border-radius: var(--r-l); overflow: hidden; }
.portada-guia img { width: 100%; height: auto; }
.cta-bloque { margin: var(--e-6) 0; padding: var(--e-5); border: 2px solid var(--tinta); border-radius: var(--r-l); background: var(--voltio-suave); }
.cta-bloque h2, .cta-bloque h3 { margin-top: 0; font-size: var(--t-l); }
.cta-bloque .nota-salida { color: var(--tinta-2); }
.producto-cab { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .producto-cab { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.hechos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--e-5) 0; padding: 0; list-style: none; border: 2px solid var(--tinta); border-radius: var(--r-m); overflow: hidden; background: var(--tinta); }
.hechos li { margin: 0; padding: 14px 16px; background: var(--blanco); }
.hechos span { display: block; font-size: var(--t-xs); color: var(--gris); }
.hechos strong { display: block; font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.club-cab { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .club-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.club-cab img { width: 100%; max-width: 560px; height: auto; }
.estado-programa { display: inline-flex; align-items: center; gap: 8px; }
.error-404 { text-align: left; }
.error-404 img { max-width: 460px; width: 100%; margin: var(--e-5) 0; }
.leyenda-clara { margin-top: var(--e-3); color: var(--tinta-2); }
.leyenda-clara .l-cap-claro { background: var(--tinta-2); }
.relacionadas-lista { display: grid; gap: 8px; padding: 0; list-style: none; max-width: 30rem; }
.relacionadas-lista li { margin: 0; }
.relacionadas-lista a { display: block; padding: 12px 16px; border: 1.5px solid var(--linea); border-radius: var(--r-m); background: var(--blanco); font-weight: 600; }
.columna svg { display: block; width: 100%; }
.tabla th img { display: inline-block; vertical-align: middle; margin-right: 8px; }
.calc-acciones-form { margin: 0; }
.grafico-svg { width: 100%; height: auto; overflow: visible; }
.grafico-svg .g-valor { font: 650 19px var(--f-texto); fill: var(--tinta); font-variant-numeric: tabular-nums; }
.grafico-svg .g-eje { font: 500 16px var(--f-texto); fill: var(--gris); }
.calc-mensaje .boton-texto { color: var(--voltio); padding: 0; min-height: var(--objetivo); }
.calc-mensaje .boton-texto:hover { color: var(--blanco); }
@media (min-width: 600px) { .hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hechos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.datos-clave { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.datos-clave li { padding: 6px 10px; font-size: .875rem; line-height: 1.3; }
.recorrido li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.recorrido img { grid-row: span 2; width: 96px; max-width: 96px; border-radius: 12px; }
.recorrido h3, .recorrido p { margin-inline: 0; }
.recorrido h3 { margin-top: 0; }
.portada-guia { display: none; }
}
.portada .acciones-portada { margin: var(--e-4) 0 0; }
@media (min-width: 1200px) { .portada .acciones-portada { display: none; } }
.sello-empresa { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--gris); max-width: 36rem; }
.sello-empresa a { white-space: nowrap; }
@media print {
@page { margin: 16mm 14mm; }
html { font-size: 11pt; }
body { background: #fff; color: #000; padding: 0 !important; }
.cabecera, .menu-movil, .barra-movil, .pie, .migas, .relacionadas, .lateral, .solo-pantalla, .banner,
.calc-form, .calc-acciones, .btn, .nota-salida, .buscador, .saltar, .aviso-colaborador, .portada-arte, nav { display: none !important; }
a { color: #000; text-decoration: none; }
.prosa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #333; }
h1 { font-size: 20pt; }
h2 { font-size: 14pt; break-after: avoid; }
h3 { font-size: 12pt; break-after: avoid; }
table, tr, .preguntas details, .nivel, .opcion { break-inside: avoid; }
.tabla-scroll { overflow: visible !important; border: 1px solid #999; }
.tabla { font-size: 9.5pt; }
.tabla th, .tabla td { padding: 5px 8px; border-top: 1px solid #999; }
.preguntas details > * { display: block !important; }
.preguntas summary::before, .preguntas summary::after { display: none; }
.envoltura, .envoltura-texto, .prosa { width: 100% !important; max-width: none !important; }
.cabeza-pagina { padding: 0 0 8mm; }
.traza-separador, .pie-traza { display: none; }
.respuesta-corta, .nota, .aviso, .tarjeta { box-shadow: none !important; border: 1px solid #999 !important; background: #fff !important; }
body.imprimiendo-calculo main > *:not(.imprimible) { display: none !important; }
body.imprimiendo-calculo .imprimible > *:not(.calc) { display: none !important; }
body.imprimiendo-calculo .calc { border: 0; box-shadow: none; display: block; }
body.imprimiendo-calculo .calc > *:not(.impresion-calculo) { display: none !important; }
.impresion-calculo { display: none; }
body.imprimiendo-calculo .impresion-calculo { display: block !important; color: #000; }
.impresion-calculo h2 { margin-top: 0; }
.impresion-calculo dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; }
.impresion-calculo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.impresion-calculo .aclaracion { margin-top: 8mm; font-size: 9pt; border-top: 1px solid #999; padding-top: 4mm; }
}