@font-face {
font-family: 'Space Grotesk';
src: url('/assets/fuentes/space-grotesk-variable.woff2') format('woff2');
font-weight: 300 700;
font-display: swap}
:root {
--color-papel: #F2F1EC;
--color-papel-2: #E9E8E0;
--color-blanco: #FFFFFF;
--color-tinta: #0E0E12;
--color-tinta-2: #17171D;
--color-lima: #C8F04B;
--color-lima-2: #B6E13B;
--color-gris: #4B4B52;
--color-gris-claro: #B9B9B3;
--color-exito: #226127;
--color-error: #A02318;
--linea-clara: rgba(242, 241, 236, 0.25);
--fuente-display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fuente-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--texto--1: 0.8rem;
--texto-0: 1rem;
--texto-1: 1.25rem;
--texto-2: 1.563rem;
--texto-3: 1.953rem;
--texto-4: 2.441rem;
--texto-5: 3.052rem;
--texto-6: 3.815rem;
--texto-7: 4.768rem;
--esp-1: 0.25rem;  --esp-2: 0.5rem;  --esp-3: 0.75rem; --esp-4: 1rem;
--esp-6: 1.5rem;   --esp-8: 2rem;    --esp-12: 3rem;   --esp-16: 4rem;  --esp-24: 6rem;
--ancho-maximo: 72rem;
--ancho-texto: 65ch;
--radio: 6px;
--borde: 2px solid var(--color-tinta);
--sombra-dura: 6px 6px 0 var(--color-tinta);
--sombra-dura-mas: 8px 8px 0 var(--color-tinta);
--sombra-dura-menos: 2px 2px 0 var(--color-tinta);
--sombra-lima: 8px 8px 0 var(--color-lima);
--transicion: 140ms ease;
--sombra-chica: 3px 3px 0 var(--color-tinta);
--ast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 4v20M5.4 9l17.2 10M22.6 9 5.4 19' fill='none' stroke='%230E0E12' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E")}
*, *::before, *::after { box-sizing: border-box}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--color-tinta) var(--color-papel-2)}
body {
margin: 0;
font-family: var(--fuente-cuerpo);
font-size: var(--texto-0);
line-height: 1.55;
color: var(--color-tinta);
background: var(--color-papel)}
h1, h2, h3, h4 {
font-family: var(--fuente-display);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 var(--esp-4);
color: var(--color-tinta);
text-wrap: balance}
h1 { font-size: var(--texto-4)}
h2 { font-size: var(--texto-3)}
h3 { font-size: var(--texto-1)}
h4 { font-size: var(--texto--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gris)}
@media (min-width: 48rem) { h1 { font-size: var(--texto-5)} h2 { font-size: var(--texto-4)} }
p, ul, ol { margin: 0 0 var(--esp-4); max-width: var(--ancho-texto)}
a { color: var(--color-tinta); text-decoration-thickness: 2px; text-decoration-color: var(--color-lima); text-underline-offset: 0.18em; transition: color var(--transicion), background-color var(--transicion)}
p a:hover, li a:hover { background: var(--color-lima); text-decoration-color: var(--color-tinta)}
img, svg { max-width: 100%; height: auto}
:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: 2px}
::selection { background: var(--color-lima); color: var(--color-tinta)}
.evidencia :focus-visible, .pie :focus-visible, .banda-oscura :focus-visible { outline-color: var(--color-lima)}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto}
*, *::before, *::after { transition: none !important; animation: none !important}
}
.visualmente-oculto {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0}
.saltar {
position: absolute; left: var(--esp-4); top: -100%; z-index: 100;
padding: var(--esp-2) var(--esp-4);
background: var(--color-tinta); color: var(--color-lima);
font-family: var(--fuente-display); font-weight: 700}
.saltar:focus-visible { top: 0}
.aviso-modal {
border: var(--borde); border-radius: var(--radio);
box-shadow: var(--sombra-dura-mas);
background: var(--color-papel); color: var(--color-tinta);
padding: var(--esp-8);
max-width: min(26rem, calc(100vw - 3rem));
text-align: left}
.aviso-modal::backdrop { background: rgba(14, 14, 18, 0.62)}
.aviso-modal p { max-width: none}
.aviso-modal .boton { width: 100%; margin-top: var(--esp-2)}
.accion-secundaria { margin-top: var(--esp-4)}
.bloque-extras { margin-top: var(--esp-16)}
.titulo-bloque { font-size: var(--texto-2)}
.titulo-bloque-menor { font-size: var(--texto-1)}
.nota-bloque { margin-top: var(--esp-6)}
.entradilla-pegada { margin-top: calc(-1 * var(--esp-4))}
.cabecera-separada { margin-top: var(--esp-8)}
.cabecera {
position: sticky; top: 0; z-index: 50;
background: var(--color-papel);
border-bottom: var(--borde)}
.cabecera-interior {
max-width: var(--ancho-maximo); margin-inline: auto;
min-height: 4rem;
padding: var(--esp-2) var(--esp-4);
display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4)}
.marca {
display: inline-flex; align-items: center; gap: var(--esp-2);
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-1); letter-spacing: -0.02em;
color: var(--color-tinta); text-decoration: none; min-height: 2.75rem}
.marca-logo { flex: none}
.marca-nombre { text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap}
summary { list-style: none}
summary::marker { content: ""}
summary::-webkit-details-marker { display: none}
.nav-escritorio { display: none}
@media (min-width: 48rem) {
.nav-escritorio { display: flex; align-items: stretch; gap: var(--esp-4); margin-inline: auto}
.menu-movil { display: none}
}
.nav-escritorio a {
position: relative;
display: inline-flex; align-items: center;
min-height: 2.75rem; padding: var(--esp-2) var(--esp-1);
color: var(--color-tinta); text-decoration: none;
font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto--1);
text-transform: uppercase; letter-spacing: 0.06em}
.nav-escritorio a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0.375rem;
height: 4px; background: var(--color-lima); border: 1px solid var(--color-tinta);
transform: scaleX(0); transform-origin: left;
transition: transform var(--transicion)}
.nav-escritorio a:hover::after, .nav-escritorio a[aria-current="page"]::after { transform: scaleX(1)}
.cabecera-acciones { display: flex; align-items: center; gap: var(--esp-3)}
.boton-cabecera { min-height: 2.5rem; padding: var(--esp-1) var(--esp-4); font-size: var(--texto--1); box-shadow: var(--sombra-chica)}
.boton-cabecera:hover { box-shadow: 5px 5px 0 var(--color-tinta)}
@media (max-width: 29.9rem) { .cabecera-acciones .boton-cabecera { display: none} }
.desplegable { position: relative}
.control-cabecera {
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
min-width: 2.75rem; min-height: 2.75rem;
padding: var(--esp-2) var(--esp-3);
border: var(--borde); border-radius: var(--radio);
background: var(--color-blanco);
color: var(--color-tinta);
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto--1);
box-shadow: var(--sombra-chica);
transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion)}
.control-cabecera:hover { background: var(--color-lima)}
.control-cabecera .chevron { transition: transform var(--transicion)}
.desplegable[open] > .control-cabecera { background: var(--color-lima); transform: translate(1px, 1px); box-shadow: var(--sombra-dura-menos)}
.desplegable[open] > .control-cabecera .chevron { transform: rotate(180deg)}
.control-cabecera .icono-cerrar { display: none}
.desplegable[open] > .control-cabecera .icono-abrir { display: none}
.desplegable[open] > .control-cabecera .icono-cerrar { display: block}
.desplegable-panel {
position: absolute; right: 0; top: calc(100% + var(--esp-3));
min-width: 13rem;
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
box-shadow: var(--sombra-dura);
padding: var(--esp-2);
display: grid; gap: 2px;
z-index: 60}
.desplegable-panel a {
display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
min-height: 2.75rem; padding: var(--esp-2) var(--esp-3);
color: var(--color-tinta); text-decoration: none;
font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto--1)}
.desplegable-panel a:hover { background: var(--color-lima)}
.desplegable-panel a[aria-current="true"], .desplegable-panel a[aria-current="page"] { font-weight: 700}
.menu-panel { width: min(calc(100vw - 2.5rem), 22rem)}
.menu-panel nav { display: grid; gap: 2px}
.idiomas { display: flex; gap: var(--esp-1)}
.menu-panel .idiomas { border-top: var(--borde); padding-top: var(--esp-2); margin-top: var(--esp-2)}
.menu-panel .idiomas a { justify-content: center; min-width: 2.75rem; flex: 1}
.menu-panel .idiomas a[aria-current="true"] { background: var(--color-tinta); color: var(--color-lima)}
.menu-cta { margin-top: var(--esp-3); width: 100%}
@media (min-width: 48rem) { .idioma-desplegable { display: block} }
@media (max-width: 47.9375rem) { .idioma-desplegable { display: none} }
main { display: block; counter-reset: sec}
.seccion { max-width: var(--ancho-maximo); margin-inline: auto; padding: var(--esp-16) var(--esp-4)}
@media (min-width: 48rem) { .seccion { padding: var(--esp-24) var(--esp-4)} }
.banda-arena { background: var(--color-papel-2); border-block: var(--borde)}
.seccion-cabecera { max-width: var(--ancho-texto); margin-bottom: var(--esp-8)}
.seccion-cabecera .entradilla { color: var(--color-gris); font-size: var(--texto-1)}
.seccion-cabecera h2::before {
counter-increment: sec;
content: counter(sec, decimal-leading-zero) / "";
display: block; width: fit-content;
margin-bottom: var(--esp-3); padding: 0 var(--esp-2);
background: var(--color-lima); border: var(--borde);
box-shadow: var(--sombra-dura-menos);
color: var(--color-tinta);
font-size: var(--texto-1); line-height: 1.5; letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
rotate: -1.2deg}
.eyebrow {
display: inline-flex; align-items: center; gap: var(--esp-2);
font-family: var(--fuente-display); font-size: var(--texto--1); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--color-tinta); margin-bottom: var(--esp-3)}
.eyebrow::before, .heroe-puntos li::before, .lista-incluye li::before,
.eslogan::before, .pie-eslogan::before, .dato-fuente::before,
.preview-barra::before, .boton-principal::after {
content: ""; flex: none;
background: currentColor;
-webkit-mask: var(--ast) center/contain no-repeat;
mask: var(--ast) center/contain no-repeat}
.eyebrow::before { width: 0.8rem; height: 0.8rem}
.heroe-puntos li::before { width: 0.7rem; height: 0.7rem}
.lista-incluye li::before { position: absolute; left: 0; top: 0.3em; width: 0.75em; height: 0.75em}
.eslogan::before, .pie-eslogan::before, .dato-fuente::before { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.35em}
.eslogan::before { background: var(--color-tinta)}
.preview-barra::before { width: 0.7rem; height: 0.7rem}
.boton-principal::after { width: 0.6em; height: 0.6em; transition: rotate var(--transicion)}
.boton-principal:hover::after { rotate: 90deg}
.heroe { border-bottom: var(--borde)}
.heroe, .evidencia, .banda-oscura { position: relative; isolation: isolate; overflow: hidden}
.heroe::before, .evidencia::before, .banda-oscura::before {
content: ""; position: absolute; z-index: -1;
top: -4rem; right: -4rem; width: 24rem; height: 24rem;
background: currentColor; opacity: 0.05;
-webkit-mask: var(--ast) center/contain no-repeat;
mask: var(--ast) center/contain no-repeat}
.evidencia::before, .banda-oscura::before { background: var(--color-lima); opacity: 0.08}
.heroe-interior {
max-width: var(--ancho-maximo); margin-inline: auto;
padding: var(--esp-12) var(--esp-4) var(--esp-16);
display: grid; gap: var(--esp-8); align-items: center}
@media (min-width: 64rem) {
.heroe-interior { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: var(--esp-16)}
}
.heroe h1 {
font-size: var(--texto-5); line-height: 1.0; letter-spacing: -0.03em; max-width: 20ch}
@media (min-width: 48rem) { .heroe h1 { font-size: var(--texto-6)} }
@media (min-width: 64rem) { .heroe h1 { font-size: var(--texto-7)} }
.heroe h1::after {
content: ""; display: block;
width: 9.25rem; height: 0.875rem;
margin-top: var(--esp-4);
background:
var(--ast) right center/0.875rem no-repeat,
linear-gradient(var(--color-lima) 0 0) 2px 2px/calc(7rem - 4px) calc(100% - 4px) no-repeat,
linear-gradient(var(--color-tinta) 0 0) 0 0/7rem 100% no-repeat}
.heroe .subtitulo { font-size: var(--texto-1); color: var(--color-gris); max-width: 52ch}
.heroe-puntos { display: flex; flex-wrap: wrap; gap: var(--esp-3); padding: 0; margin: var(--esp-6) 0; list-style: none; max-width: none}
.heroe-puntos li {
display: inline-flex; align-items: center; gap: var(--esp-2);
font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto--1);
color: var(--color-tinta);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-2) var(--esp-3);
background: var(--color-blanco);
box-shadow: var(--sombra-chica)}
.heroe-acciones { display: flex; gap: var(--esp-4); flex-wrap: wrap; margin-top: var(--esp-4)}
.heroe-arte { display: none}
@media (min-width: 48rem) { .heroe-arte { display: block; margin-inline: auto; width: min(100%, 26rem)} }
@media (min-width: 64rem) { .heroe-arte { width: 100%} }
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
min-height: 3rem; padding: var(--esp-2) var(--esp-6);
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-0);
text-transform: uppercase; letter-spacing: 0.04em;
text-decoration: none;
border: var(--borde); border-radius: var(--radio); cursor: pointer;
box-shadow: var(--sombra-dura);
transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion)}
.boton:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-dura-mas)}
.boton:active { transform: translate(2px, 2px); box-shadow: var(--sombra-dura-menos)}
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--sombra-dura)}
.boton-principal { background: var(--color-lima); color: var(--color-tinta)}
.boton-principal:hover { background: var(--color-lima-2)}
.boton-secundario { background: var(--color-blanco); color: var(--color-tinta)}
.boton-secundario:hover { background: var(--color-tinta); color: var(--color-papel)}
.parrilla-packs { display: grid; gap: var(--esp-8) var(--esp-6); grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr))}
.parrilla-destacados { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr))}
.accion-seccion { display: flex; justify-content: center; margin-top: var(--esp-12)}
.tarjeta-pack, .tarjeta-resultado {
display: flex; flex-direction: column; gap: var(--esp-3);
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-6);
box-shadow: var(--sombra-dura);
transition: transform var(--transicion), box-shadow var(--transicion)}
.tarjeta-pack:hover, .tarjeta-resultado:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-dura-mas)}
.insignia-oferta {
display: inline-block;
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto--1);
text-transform: uppercase; letter-spacing: 0.08em;
background: var(--color-lima); border: 1px solid var(--color-tinta);
padding: 2px var(--esp-2); margin-bottom: var(--esp-2);
rotate: -1.5deg}
.tarjeta-pack h3 { margin-bottom: var(--esp-1); font-size: var(--texto-2)}
.tarjeta-pack-oficios { color: var(--color-gris); font-size: var(--texto--1); margin: 0}
.tarjeta-pack-precio {
display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap;
margin: 0; padding: var(--esp-3) 0;
border-block: var(--borde)}
.precio-actual { font-family: var(--fuente-display); font-size: var(--texto-3); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-tinta)}
.precio-desde { color: var(--color-gris); font-size: var(--texto--1)}
.precio-tarifa { color: var(--color-gris); font-size: var(--texto-1)}
.precio-fiscal { font-size: var(--texto--1); color: var(--color-gris); margin: 0}
.tarjeta-pack-plazo { margin: 0}
.tarjeta-pack-nota { margin: 0; padding: var(--esp-2) var(--esp-3); background: var(--color-papel-2); border: 1px solid var(--color-tinta); font-size: var(--texto--1)}
.tarjeta-pack-listas h4 { margin: var(--esp-3) 0 var(--esp-2)}
.lista-incluye { list-style: none; padding: 0; margin: 0; font-size: var(--texto--1)}
.lista-incluye li { padding-inline-start: var(--esp-6); position: relative; margin-bottom: var(--esp-1)}
.tarjeta-pack-acciones { margin-top: auto; display: flex}
.tarjeta-pack-acciones .boton { width: 100%}
.eslogan {
font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto-1);
letter-spacing: -0.01em; color: var(--color-gris);
margin: var(--esp-4) 0 0; max-width: none}
.pie-eslogan { font-family: var(--fuente-display); font-weight: 600; color: var(--color-lima); margin: var(--esp-2) 0 0}
.parrilla-resultados { display: grid; gap: var(--esp-8) var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr))}
.tarjeta-resultado h3 { font-size: var(--texto-2); margin-bottom: 0}
.tarjeta-resultado p { color: var(--color-gris); margin-bottom: var(--esp-2)}
.tarjeta-resultado .boton { margin-top: auto; align-self: flex-start}
#hablamos { text-align: left}
.entradilla-oscura { color: var(--color-gris-claro); font-size: var(--texto-1); max-width: 52ch; margin-bottom: var(--esp-6)}
.panel-nota { font-size: var(--texto--1); color: var(--color-gris); margin: 0; padding: var(--esp-1) var(--esp-3); max-width: 16rem}
.resumen-pack { max-width: 40rem; margin-bottom: var(--esp-12)}
.resumen-pack .hitos { font-weight: 600; border-top: 1px solid var(--color-tinta); padding-top: var(--esp-3)}
.opciones-plegable[open] > summary { margin-bottom: var(--esp-4)}
.opciones-plegable { margin-bottom: var(--esp-6)}
.parrilla-extras { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr))}
.tarjeta-extra {
background: var(--color-blanco); border: var(--borde); border-radius: var(--radio);
padding: var(--esp-4) var(--esp-6);
box-shadow: var(--sombra-chica)}
.tarjeta-extra h3 { font-size: var(--texto-0); margin-bottom: var(--esp-2)}
.tarjeta-extra .precio-actual { margin: 0}
.parrilla-planes { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); max-width: 46rem}
.plan-precio { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0}
.plan-trimestre { color: var(--color-gris); font-size: var(--texto--1); margin: 0 0 var(--esp-2)}
.nota-franja {
margin-top: var(--esp-8); max-width: none;
border: var(--borde); border-left-width: 8px;
background: var(--color-blanco);
padding: var(--esp-3) var(--esp-6);
font-size: var(--texto--1)}
.tarjeta-preview { text-decoration: none; padding: 0; overflow: hidden}
.preview-marco { display: block; border-bottom: var(--borde)}
.preview-barra {
display: flex; align-items: center; gap: var(--esp-2);
padding: var(--esp-2) var(--esp-3); border-bottom: var(--borde);
background: var(--color-papel-2);
font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto--1); letter-spacing: 0.06em}
.preview-marco img { display: block; width: 100%; height: auto}
.preview-info { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-4) var(--esp-6) var(--esp-6); color: var(--color-tinta)}
.preview-info > span { color: var(--color-gris)}
.preview-cta { font-family: var(--fuente-display); font-weight: 700; margin-top: var(--esp-2); color: var(--color-tinta)}
.tarjeta-preview:hover .preview-cta { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--color-lima)}
.parrilla-evidencia { display: grid; gap: var(--esp-6); grid-template-columns: 1fr}
@media (min-width: 64rem) {
.parrilla-evidencia { grid-template-columns: repeat(6, 1fr)}
.parrilla-evidencia .dato-evidencia { grid-column: span 2}
.parrilla-evidencia .dato-evidencia:nth-child(4), .parrilla-evidencia .dato-evidencia:nth-child(5) { grid-column: span 3}
}
.dato-evidencia {
border: 2px solid rgba(242, 241, 236, 0.16); border-radius: var(--radio);
padding: var(--esp-6);
display: flex; flex-direction: column; gap: var(--esp-2)}
.dato-numero { font-family: var(--fuente-display); font-size: var(--texto-5); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--color-lima); margin: 0; font-variant-numeric: tabular-nums}
.dato-texto { color: var(--color-papel); line-height: 1.4; margin: 0; max-width: 44ch}
.dato-fuente { font-size: var(--texto--1); color: var(--color-gris-claro); margin: var(--esp-2) 0 0; max-width: none}
.dato-fuente a { color: var(--color-lima)}
.dato-fuente a:hover { background: var(--color-lima); color: var(--color-tinta)}
.dos-columnas { display: grid; gap: var(--esp-8); align-items: start}
@media (min-width: 64rem) {
.dos-columnas { grid-template-columns: 3fr 2fr}
.dos-columnas .garantia { position: sticky; top: 5.5rem}
}
.cta-movil {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
padding: var(--esp-2) var(--esp-4);
padding-bottom: calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
background: var(--color-papel);
border-top: var(--borde)}
.cta-movil-precio { font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-1); white-space: nowrap}
.cta-movil .boton { min-height: 2.75rem; padding: var(--esp-1) var(--esp-6); box-shadow: var(--sombra-chica)}
body:has(.cta-movil) { padding-bottom: 4.25rem}
@media (min-width: 48rem) {
.cta-movil { display: none}
body:has(.cta-movil) { padding-bottom: 0}
}
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; max-width: var(--ancho-texto)}
.pasos li {
counter-increment: paso; position: relative;
padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-16);
margin-bottom: var(--esp-4);
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
box-shadow: var(--sombra-chica)}
.pasos li::before {
content: counter(paso);
position: absolute; left: var(--esp-3); top: var(--esp-4);
width: 2.75rem; height: 2.75rem;
display: grid; place-items: center;
background: var(--color-lima); color: var(--color-tinta);
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-1);
border: var(--borde); border-radius: var(--radio);
box-shadow: var(--sombra-chica)}
.pasos li:nth-child(odd)::before { rotate: -3deg}
.pasos li:nth-child(even)::before { rotate: 3deg}
.pasos h3 { margin-bottom: var(--esp-2)}
.pasos p { margin: 0}
.bloque-condiciones { display: grid; gap: var(--esp-8) var(--esp-6); grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); margin-top: var(--esp-8)}
.condicion {
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-6);
box-shadow: var(--sombra-dura)}
.condicion p { font-size: var(--texto--1); margin: 0}
.condicion p + p { margin-top: var(--esp-2)}
.tabla-envoltura { overflow-x: auto; scrollbar-width: thin; padding: 0 8px 8px 0; margin-bottom: var(--esp-8)}
.tabla {
border-collapse: collapse; width: 100%; max-width: 40rem;
background: var(--color-blanco);
border: var(--borde);
box-shadow: var(--sombra-dura)}
.tabla thead th { background: var(--color-tinta); color: var(--color-papel); font-family: var(--fuente-display); font-size: var(--texto--1); text-transform: uppercase; letter-spacing: 0.08em}
.tabla th, .tabla td { text-align: left; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-tinta)}
.tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap}
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0}
.tabla .fila-total { background: var(--color-lima); font-weight: 700}
.garantia {
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-8);
max-width: var(--ancho-texto);
box-shadow: var(--sombra-lima)}
.garantia ul { font-size: var(--texto--1)}
.sello-lighthouse { margin: var(--esp-6) 0 0; display: grid; gap: var(--esp-3)}
.sello-marco { display: block; overflow: hidden; border: var(--borde); border-radius: var(--radio); background: var(--color-blanco); box-shadow: var(--sombra-chica)}
.sello-marco img { display: block; width: 100%; height: auto}
.sello-etiqueta { display: inline-block; vertical-align: top; padding: 2px var(--esp-2); background: var(--color-tinta); color: var(--color-lima); font-family: var(--fuente-display); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom-right-radius: var(--radio)}
.sello-comprobar { margin: 0; font-size: var(--texto--1)}
.campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-4)}
.campo label { font-family: var(--fuente-display); font-weight: 600; font-size: var(--texto--1)}
.campo .opcional { font-weight: 400; color: var(--color-gris); font-family: var(--fuente-cuerpo)}
.campo input, .campo select, .campo textarea {
font: inherit; color: var(--color-tinta);
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-2) var(--esp-3);
min-height: 2.75rem; max-width: 28rem;
transition: box-shadow var(--transicion)}
.campo textarea { min-height: 8rem; max-width: 40rem}
.campo input:hover, .campo select:hover, .campo textarea:hover { box-shadow: var(--sombra-dura-menos)}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { box-shadow: var(--sombra-dura-menos)}
.campo .ayuda { font-size: var(--texto--1); color: var(--color-gris); margin: 0; max-width: 40rem}
.campo [aria-invalid="true"] { border-color: var(--color-error); border-width: 3px}
.campo .error { color: var(--color-error); font-size: var(--texto--1); font-weight: 700; margin: 0}
.campo-casilla { flex-direction: row; align-items: flex-start; gap: var(--esp-3); max-width: 40rem}
.campo-casilla input { min-height: 0; width: 1.375rem; height: 1.375rem; margin-top: 0.125rem; flex: none; accent-color: var(--color-tinta)}
.campo-casilla label { font-weight: 400; font-family: var(--fuente-cuerpo)}
fieldset.fiscal, fieldset.opciones {
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-4); margin: 0 0 var(--esp-6); max-width: 40rem;
background: var(--color-blanco);
box-shadow: var(--sombra-dura)}
fieldset legend { font-family: var(--fuente-display); font-weight: 700; padding-inline: var(--esp-2); background: var(--color-lima); border: 1px solid var(--color-tinta)}
.fiscal-campos { display: flex; gap: var(--esp-4); flex-wrap: wrap}
.fiscal-campos .campo { margin-bottom: 0; flex: 1 1 12rem}
.fiscal-resultado { font-size: var(--texto--1); color: var(--color-gris); margin: var(--esp-3) 0 0; max-width: none}
.fiscal-plegable { margin: 0 0 var(--esp-8); max-width: 40rem}
.fiscal-plegable > summary {
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--esp-2);
min-height: 2.75rem; padding: var(--esp-2) var(--esp-4);
border: var(--borde); border-radius: var(--radio);
background: var(--color-blanco); color: var(--color-tinta);
font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto--1);
box-shadow: var(--sombra-chica);
transition: background-color var(--transicion), transform var(--transicion), box-shadow var(--transicion)}
.fiscal-plegable > summary:hover { background: var(--color-lima)}
.fiscal-plegable > summary svg { transition: transform var(--transicion)}
.fiscal-plegable[open] > summary svg { transform: rotate(180deg)}
.fiscal-plegable[open] > summary { margin-bottom: var(--esp-4); transform: translate(1px, 1px); box-shadow: var(--sombra-dura-menos)}
.fiscal-plegable fieldset.fiscal { margin-bottom: 0}
.estado-envio { margin-top: var(--esp-4); max-width: 40rem}
.aviso-caja {
border: var(--borde); border-left-width: 8px; border-radius: var(--radio);
padding: var(--esp-4) var(--esp-6);
background: var(--color-papel-2);
margin-bottom: var(--esp-4)}
.aviso-caja.exito { border-left-color: var(--color-exito); background: #E7EFE4}
.aviso-caja.error { border-left-color: var(--color-error); background: #F4E3E0}
.aviso-caja h3, .aviso-caja h4 { margin-bottom: var(--esp-2)}
.aviso-caja p { margin-bottom: var(--esp-2)}
.aviso-caja :last-child { margin-bottom: 0}
.calculadora-parrilla { display: grid; gap: var(--esp-8); grid-template-columns: 1fr; align-items: start}
@media (min-width: 48rem) { .calculadora-parrilla { grid-template-columns: 1fr 1fr} }
.desglose {
background: var(--color-blanco);
border: var(--borde); border-radius: var(--radio);
padding: var(--esp-6);
position: sticky; top: 5rem;
box-shadow: var(--sombra-dura)}
.desglose dl { margin: 0}
.desglose .linea { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-2) 0; border-bottom: 1px dashed var(--color-tinta)}
.desglose .linea dt, .desglose .linea dd { margin: 0}
.desglose .linea dd { font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--fuente-display)}
.desglose .linea-total { border-bottom: 0; padding-top: var(--esp-4); font-family: var(--fuente-display); font-size: var(--texto-1); font-weight: 700}
.desglose-accion { margin: var(--esp-6) 0 0}
.desglose-accion .boton { width: 100%}
.campo-numero { display: flex; align-items: center; gap: var(--esp-2)}
.campo-numero input[type="number"] { width: 6rem}
.evidencia, .banda-oscura { background: var(--color-tinta); color: var(--color-papel); border-block: var(--borde)}
.evidencia h2, .evidencia h3, .banda-oscura h2, .banda-oscura h3 { color: var(--color-papel)}
.evidencia .eyebrow, .banda-oscura .eyebrow { color: var(--color-lima)}
.evidencia .seccion-cabecera .entradilla, .banda-oscura .seccion-cabecera .entradilla { color: var(--color-gris-claro)}
.lista-frontera { list-style: none; padding: 0; margin: 0 0 var(--esp-8); display: flex; flex-wrap: wrap; gap: var(--esp-3); max-width: none}
.lista-frontera li {
border: 2px solid var(--linea-clara); border-radius: var(--radio);
padding: var(--esp-2) var(--esp-4);
color: var(--color-gris-claro); font-family: var(--fuente-display); font-size: var(--texto--1); font-weight: 600}
.sin-tu-caso { border-top: 2px solid var(--linea-clara); padding-top: var(--esp-8); max-width: var(--ancho-texto)}
.sin-tu-caso p { color: var(--color-gris-claro)}
.banda-oscura .boton-principal { box-shadow: 6px 6px 0 var(--color-lima); background: var(--color-papel)}
.banda-oscura .boton-principal:hover { background: var(--color-lima); box-shadow: 8px 8px 0 var(--color-papel)}
.banda-oscura a { color: var(--color-lima)}
.banda-oscura a:hover { background: var(--color-lima); color: var(--color-tinta)}
.banda-oscura .boton { color: var(--color-tinta)}
.prosa { max-width: var(--ancho-texto)}
.cajita-prelanzamiento {
border: var(--borde); border-left-width: 8px;
background: var(--color-papel-2);
padding: var(--esp-4) var(--esp-6);
margin-bottom: var(--esp-8);
font-size: var(--texto--1)}
.divisor-eslogan {
background: var(--color-papel);
border-block: var(--borde);
display: flex; align-items: center; justify-content: center; gap: var(--esp-4);
padding: var(--esp-6) var(--esp-4)}
.divisor-eslogan span { font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-1); letter-spacing: 0.04em; white-space: nowrap}
.divisor-eslogan svg { flex: none}
.divisor-linea { flex: 1; max-width: 12rem; height: 2px; background: var(--color-tinta)}
@media (max-width: 35rem) { .divisor-eslogan span { white-space: normal; font-size: var(--texto-0)} }
.pie { background: var(--color-tinta); color: var(--color-gris-claro); border-top: 0}
.pie-interior { max-width: var(--ancho-maximo); margin-inline: auto; padding: var(--esp-16) var(--esp-4) var(--esp-8); display: grid; gap: var(--esp-8)}
@media (min-width: 48rem) { .pie-interior { grid-template-columns: 2fr 1fr; align-items: start} }
.pie-marca { display: inline-flex; align-items: center; gap: var(--esp-2); font-family: var(--fuente-display); font-weight: 700; font-size: var(--texto-1); color: var(--color-papel)}
.pie-marca .marca-logo { color: var(--color-lima)}
.pie-resumen { max-width: 38ch; font-weight: 600; color: var(--color-papel); margin-top: var(--esp-3)}
.pie nav { display: grid; gap: var(--esp-1); justify-items: start}
.pie nav a { color: var(--color-lima); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; font-family: var(--fuente-display); font-size: var(--texto--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em}
.pie nav a:hover { background: var(--color-lima); color: var(--color-tinta)}
.pie-derechos {
max-width: var(--ancho-maximo); margin-inline: auto;
padding: var(--esp-4); font-size: var(--texto--1);
border-top: 2px solid var(--linea-clara)}