/*
   Landing de Centralia
   ==========================================================================

   Misma receta que las landings de MOTHERLINE y True Duel: una sola hoja, sin
   build, sin dependencias y sin fuentes externas. El contenedor sirve tres
   ficheros.

   Aquí sí hay identidad propia inventada, porque el proyecto plataforma-core
   no tiene ninguna: su panel usa Bootstrap por CDN y su hoja de estilos son
   tres líneas. Lo que se ha elegido es lo que pide un producto de
   infraestructura: fondo casi negro, un degradado de índigo a cian para lo
   que es marca, y ámbar solo para las cifras de dinero, que son el argumento
   del producto.
*/

:root {
    --fondo: #0B0E14;
    --fondo-suave: #10141D;
    --superficie: #161B26;
    --superficie-alta: #1D2331;
    --borde: #242C3B;
    --borde-suave: rgba(36, 44, 59, 0.7);

    --texto: #E8ECF5;
    --texto-suave: #8B96AC;
    --texto-tenue: #5F6A7E;

    --indigo: #6366F1;
    --cian: #22D3EE;
    --ambar: #F5A524;
    --verde: #34D399;
    --rosa: #F472B6;

    /* El degradado de marca. Se usa en el logotipo, en dos titulares y en
       nada más: si aparece en todas partes deja de significar nada. */
    --marca: linear-gradient(135deg, #818CF8 0%, #22D3EE 100%);

    --indigo-tenue: rgba(99, 102, 241, 0.12);
    --cian-tenue: rgba(34, 211, 238, 0.1);
    --ambar-tenue: rgba(245, 165, 36, 0.12);

    --ancho: 74rem;
    --lectura: 40rem;

    --t-portada: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
    --t-seccion: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    --t-tarjeta: 1.0625rem;
    --t-base: 1rem;
    --t-pequeno: 0.875rem;
    --t-minimo: 0.75rem;

    --cuerpo: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;

    --radio: 10px;
    --radio-pequeno: 6px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* La cabecera es fija. Sin este margen, un ancla deja el titular tapado. */
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background-color: var(--fondo);
    color: var(--texto);
    font-family: var(--cuerpo);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

ul, ol, dl, dd {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

:focus-visible {
    outline: 2px solid var(--cian);
    outline-offset: 3px;
}

.ancho {
    position: relative;
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding-inline: var(--e4);
}

@media (min-width: 48rem) {
    .ancho {
        padding-inline: var(--e6);
    }
}

/* El texto con el degradado de marca. Se recorta sobre las letras, así que
   necesita color transparente. */
.degradado {
    background: var(--marca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Halo de fondo. Es un degradado radial, no una imagen: pesa cero y escala a
   cualquier pantalla. */
.brillo {
    position: absolute;
    top: -14rem;
    left: 50%;
    width: min(70rem, 130vw);
    height: 42rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.18) 0%, rgba(34, 211, 238, 0.06) 38%, transparent 68%);
    pointer-events: none;
}

.brillo--cierre {
    top: auto;
    bottom: -18rem;
    height: 34rem;
}

/* ==========================================================================
   Piezas repetidas
   ========================================================================== */

.antetitulo {
    display: inline-block;
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borde);
    border-radius: 999px;
    background-color: var(--indigo-tenue);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cian);
    margin-bottom: var(--e4);
}

.seccion {
    position: relative;
    padding-block: var(--e7);
    border-top: 1px solid var(--borde-suave);
}

@media (min-width: 48rem) {
    .seccion {
        padding-block: 5.5rem;
    }
}

/* Bandas alternas. Sin ellas la página es un único bloque oscuro y deja de
   notarse dónde acaba un tema y empieza el siguiente. */
.seccion--clara {
    background-color: var(--fondo-suave);
}

.seccion__cabecera {
    max-width: var(--lectura);
    margin-bottom: var(--e6);
}

/* Algunas entradillas explican un modelo económico y necesitan más de una
   línea larga para no quedar picadas. */
.seccion__cabecera--ancha {
    max-width: 46rem;
}

.seccion__titulo {
    font-size: var(--t-seccion);
    font-weight: 650;
}

.seccion__intro {
    color: var(--texto-suave);
    margin-top: var(--e4);
}

.nota {
    max-width: 46rem;
    margin-top: var(--e6);
    padding-left: var(--e4);
    border-left: 2px solid var(--indigo);
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.barra {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde-suave);
}

.barra__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 3.75rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.marca__icono {
    color: var(--cian);
}

.marca__nombre {
    font-size: 1.0625rem;
}

.barra__enlaces {
    display: none;
    gap: var(--e5);
}

/* Por debajo de 64rem los seis enlaces no caben sin apretarse. En móvil la
   página se recorre desplazando y el menú sobra. */
@media (min-width: 64rem) {
    .barra__enlaces {
        display: flex;
    }
}

.barra__enlace {
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
    transition: color 150ms ease;
}

.barra__enlace:hover {
    color: var(--texto);
}

/* ==========================================================================
   Portada
   ========================================================================== */

.portada {
    position: relative;
    overflow: hidden;
    padding-block: var(--e7) 4rem;
}

@media (min-width: 62rem) {
    .portada {
        padding-block: 5rem 5.5rem;
    }
}

.portada__rejilla {
    display: grid;
    gap: var(--e7);
    align-items: center;
    margin-bottom: 4rem;
}

@media (min-width: 62rem) {
    .portada__rejilla {
        grid-template-columns: 1fr 26rem;
        gap: 3.5rem;
    }
}

.portada__titulo {
    font-size: var(--t-portada);
    font-weight: 700;
    margin-bottom: var(--e5);
}

.portada__entrada {
    max-width: var(--lectura);
    font-size: 1.125rem;
    color: var(--texto);
}

.portada__apoyo {
    max-width: var(--lectura);
    margin-top: var(--e4);
    color: var(--texto-suave);
}

.datos-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-top: var(--e6);
}

.datos-rapidos__item {
    padding: var(--e1) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background-color: var(--superficie);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

/* --- La consola con la llamada de API. --- */

.consola {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--fondo-suave);
    overflow: hidden;
    /* La sombra despega el bloque del fondo sin necesitar un marco más grueso,
       que competiría con el titular. */
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
}

.consola--ancha {
    max-width: 46rem;
    margin-top: var(--e6);
}

.consola__barra {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--borde);
    background-color: var(--superficie);
}

.consola__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--borde);
}

.consola__ruta {
    margin-left: var(--e2);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-tenue);
    /* En móvil la ruta es más larga que el ancho disponible y no debe empujar
       la caja. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codigo {
    margin: 0;
    padding: var(--e5) var(--e4);
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    line-height: 1.7;
    color: var(--texto);
    /* El código no se parte: si no cabe, se desplaza dentro de su caja y la
       página nunca hace scroll horizontal. */
    overflow-x: auto;
}

.c-com { color: var(--texto-tenue); }
.c-cla { color: var(--cian); }
.c-str { color: var(--verde); }
.c-num { color: var(--ambar); }
.c-key { color: var(--rosa); }
.c-met { color: var(--indigo); font-weight: 700; }

.consola__nota {
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--borde);
    background-color: var(--superficie);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

/* --- Las tres cifras bajo la portada. --- */

.cifras {
    display: grid;
    gap: var(--e4);
    padding-top: var(--e6);
    border-top: 1px solid var(--borde-suave);
}

@media (min-width: 48rem) {
    .cifras {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--e6);
    }
}

.cifra {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
}

.cifra__valor {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    background: var(--marca);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cifra__etiqueta {
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

/* ==========================================================================
   Rejillas de tarjetas
   ========================================================================== */

.tarjetas {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 48rem) {
    .tarjetas--tres {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarjetas--cuatro {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62rem) {
    .tarjetas--tres {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Las seis piezas del núcleo
   ========================================================================== */

.pieza {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    transition: border-color 180ms ease, transform 180ms ease;
}

.pieza:hover {
    border-color: var(--indigo);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .pieza:hover {
        transform: none;
    }
}

.pieza__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background-color: var(--indigo-tenue);
    color: var(--cian);
}

.pieza__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
    margin-bottom: var(--e3);
}

.pieza__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Fórmulas
   ========================================================================== */

.formulas {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 62rem) {
    .formulas {
        grid-template-columns: repeat(3, 1fr);
    }
}

.formula {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.formula__nombre {
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
    margin-bottom: var(--e3);
}

.formula__cuerpo {
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    line-height: 1.6;
    color: var(--cian);
}

/* ==========================================================================
   Tabla de márgenes
   ========================================================================== */

/* La tabla tiene seis columnas y en móvil no cabe. Se desplaza dentro de su
   marco en lugar de romper el ancho de la página. */
.tabla-marco {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    overflow-x: auto;
}

.tabla {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    font-size: var(--t-pequeno);
}

.tabla th,
.tabla td {
    padding: var(--e3) var(--e4);
    text-align: left;
    border-bottom: 1px solid var(--borde);
}

.tabla th {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.tabla td {
    color: var(--texto-suave);
}

.tabla tbody tr:last-child td {
    border-bottom: none;
}

.tabla__pie {
    caption-side: bottom;
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--borde);
    font-size: var(--t-minimo);
    text-align: left;
    color: var(--texto-tenue);
}

.num {
    font-family: var(--mono);
    white-space: nowrap;
}

.num strong {
    color: var(--texto);
}

/* El dinero que ganas es el argumento del producto, así que va en ámbar y en
   ningún otro sitio. */
.dinero {
    color: var(--ambar);
}

.slug {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto);
}

/* ==========================================================================
   Bloque destacado
   ========================================================================== */

.destacado {
    margin-top: var(--e6);
    padding: var(--e6);
    border: 1px solid rgba(245, 165, 36, 0.35);
    border-radius: var(--radio);
    background-color: var(--ambar-tenue);
}

.destacado__etiqueta {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ambar);
    margin-bottom: var(--e4);
}

.destacado__texto {
    max-width: 46rem;
    font-size: 1.0625rem;
}

.destacado__texto strong {
    color: var(--ambar);
}

.destacado__cierre {
    max-width: 46rem;
    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid rgba(245, 165, 36, 0.25);
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

/* ==========================================================================
   Palancas de precio
   ========================================================================== */

.palancas {
    display: grid;
    gap: var(--e4);
    margin-top: var(--e6);
}

@media (min-width: 48rem) {
    .palancas {
        grid-template-columns: repeat(2, 1fr);
    }
}

.palanca {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--indigo);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.palanca__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
    margin-bottom: var(--e3);
}

.palanca__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Lotes de saldo
   ========================================================================== */

.lotes-explicacion {
    display: grid;
    gap: var(--e6);
    align-items: start;
}

@media (min-width: 62rem) {
    .lotes-explicacion {
        grid-template-columns: 22rem 1fr;
        gap: var(--e7);
    }
}

.lotes {
    display: grid;
    gap: var(--e4);
}

.lote {
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

/* El color del borde superior distingue de dónde vienen las Units: del plan
   o de una recarga comprada. */
.lote--plan {
    border-top: 3px solid var(--indigo);
}

.lote--recarga {
    border-top: 3px solid var(--verde);
}

.lote__origen {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.lote__cantidad {
    margin-top: var(--e1);
    font-size: 1.375rem;
    font-weight: 650;
}

.lote__caducidad {
    margin-top: var(--e1);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

.lote__barra {
    height: 6px;
    margin-top: var(--e4);
    border-radius: 3px;
    background-color: var(--borde);
    overflow: hidden;
}

.lote__relleno {
    display: block;
    height: 100%;
    background-color: var(--indigo);
}

.lote__relleno--recarga {
    background-color: var(--verde);
}

.lote__restante {
    margin-top: var(--e2);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

.lotes-texto {
    display: grid;
    gap: var(--e4);
    max-width: var(--lectura);
    color: var(--texto-suave);
}

.lotes-texto__aparte {
    padding: var(--e4);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Pasos para conectar
   ========================================================================== */

.pasos {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 62rem) {
    .pasos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.paso {
    display: flex;
    gap: var(--e4);
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.paso__numero {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--marca);
    color: var(--fondo);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
}

.paso__contenido {
    display: grid;
    gap: var(--e2);
}

.paso__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
}

.paso__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Planes
   ========================================================================== */

.planes {
    display: grid;
    gap: var(--e4);
}

@media (min-width: 48rem) {
    .planes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62rem) {
    .planes {
        grid-template-columns: repeat(4, 1fr);
    }
}

.plan {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

/* El plan del ejemplo económico se resalta porque es al que se refieren las
   cuentas de la sección de márgenes. */
.plan--destacado {
    border-color: var(--indigo);
    background-color: var(--superficie-alta);
}

/* El acuerdo a medida no está a la venta, así que se pinta apagado. */
.plan--oculto {
    border-style: dashed;
    background-color: transparent;
}

.plan__insignia {
    display: inline-block;
    align-self: flex-start;
    padding: 2px var(--e2);
    margin-bottom: var(--e3);
    border-radius: 999px;
    background-color: var(--indigo-tenue);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--cian);
}

.plan__insignia--oculta {
    background-color: transparent;
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
}

.plan__nombre {
    font-size: var(--t-tarjeta);
    font-weight: 650;
}

.plan__precio {
    margin-top: var(--e2);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.plan__units {
    margin-top: var(--e1);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--ambar);
}

.plan__descripcion {
    margin-top: var(--e4);
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

/* La lista de servicios queda pegada abajo aunque las tarjetas midan
   distinto. */
.plan__servicios {
    display: grid;
    gap: var(--e2);
    margin-top: auto;
    padding-top: var(--e5);
}

.plan__servicios li {
    position: relative;
    padding-left: var(--e4);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

.plan__servicios li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--verde);
}

/* ==========================================================================
   Escenarios de beneficio
   ========================================================================== */

.escenarios {
    margin-top: var(--e6);
    padding: var(--e6);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.escenarios__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
    margin-bottom: var(--e5);
}

.escenarios__lista {
    display: grid;
    gap: var(--e3);
}

.escenario {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borde);
}

.escenario:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.escenario__caso {
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

.escenario__valor {
    font-family: var(--mono);
    font-weight: 700;
    white-space: nowrap;
    color: var(--ambar);
}

/* Los extremos del rango se marcan para que se lea de un vistazo cuál es el
   mejor caso y cuál el peor. */
.escenario__valor--alto {
    color: var(--verde);
}

.escenario__valor--bajo {
    color: var(--texto-suave);
}

.escenarios__nota {
    margin-top: var(--e5);
    padding-top: var(--e4);
    border-top: 1px solid var(--borde);
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

/* ==========================================================================
   Garantías y extras
   ========================================================================== */

.garantia {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-top: 2px solid var(--verde);
    border-radius: var(--radio);
    background-color: var(--superficie);
}

.garantia__titulo {
    font-size: var(--t-tarjeta);
    font-weight: 650;
    margin-bottom: var(--e3);
}

.garantia__texto {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* La línea de prueba queda pegada abajo aunque las tarjetas midan distinto. */
.garantia__prueba {
    margin-top: auto;
    padding-top: var(--e4);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    color: var(--verde);
}

.garantia__texto + .garantia__prueba {
    margin-top: var(--e4);
}

.extras {
    margin-top: var(--e6);
    padding: var(--e6);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background-color: var(--fondo-suave);
}

.extras__titulo {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: var(--e4);
}

.extras__lista {
    display: grid;
    gap: var(--e3);
}

@media (min-width: 62rem) {
    .extras__lista {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--e4) var(--e6);
    }
}

.extra {
    position: relative;
    padding-left: var(--e5);
    font-size: var(--t-pequeno);
    color: var(--texto-suave);
}

.extra::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 2px;
    background-color: var(--indigo);
}

/* ==========================================================================
   Ficha técnica
   ========================================================================== */

.ficha {
    display: grid;
    border-top: 1px solid var(--borde);
}

.ficha__fila {
    display: grid;
    gap: var(--e1);
    padding-block: var(--e4);
    border-bottom: 1px solid var(--borde);
}

@media (min-width: 48rem) {
    .ficha__fila {
        grid-template-columns: 14rem 1fr;
        gap: var(--e5);
        align-items: baseline;
    }
}

.ficha__nombre {
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.ficha__valor {
    color: var(--texto-suave);
    font-size: var(--t-pequeno);
}

/* ==========================================================================
   Cierre y pie
   ========================================================================== */

.cierre {
    position: relative;
    overflow: hidden;
    padding-block: 6rem;
    border-top: 1px solid var(--borde-suave);
    text-align: center;
}

.cierre__interior {
    position: relative;
}

.cierre__frase {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.cierre__sello {
    margin-top: var(--e5);
    font-family: var(--mono);
    font-size: var(--t-minimo);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.pie {
    padding-block: var(--e6);
    border-top: 1px solid var(--borde-suave);
}

.pie__interior {
    display: grid;
    gap: var(--e1);
}

.pie__texto {
    font-size: var(--t-minimo);
    color: var(--texto-suave);
}

.pie__texto--suave {
    color: var(--texto-tenue);
}