/* ==========================================================================
   getkipu.app — hoja única para las seis páginas.

   Los colores y las medidas no se inventan aquí: salen de la app, de
   kipuapp/kipuapp/DesignSystem/Palette.swift y Theme.swift. La web y la app se
   parecen porque comparten los valores, no porque se hayan mirado de lejos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía

   Archivo es variable en dos ejes: peso (400–700) y ancho (62–125 %). Ese
   segundo eje es el que hace el trabajo: los titulares van anchos y las
   etiquetas pequeñas van estrechas, con la misma familia. Es la relación de un
   libro de cuentas —rótulo ancho arriba, columnas apretadas debajo— y no se
   consigue con dos fuentes distintas.

   El cuerpo usa la pila del sistema: en un iPhone es la misma San Francisco que
   ve el usuario dentro de la app.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Color. La regla que ya resolvió Palette.swift: #91CFA4 con texto blanco
       da 1,80:1 y como texto sobre blanco da 1,65:1. Ninguna de las dos cosas
       se hace. En claro el acento de texto es #2E7241 (5,44:1); el verde claro
       solo rellena, y encima lleva #0F3D22 (6,82:1). */
    --canvas: #ffffff;
    --surface: #f2f2f5;
    --ink: #111312;
    --muted: #5b615d;
    --brand: #2e7241;
    --brand-fill: #91cfa4;
    --on-brand: #0f3d22;
    --line: #dcdedd;
    --shadow: 22px 60px rgba(17, 19, 18, 0.13);

    /* Espaciado en múltiplos de 4 y radios 8/12/20, los de Theme.swift. */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 64px;
    --sp-3xl: 112px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;

    --wrap: 1120px;
    --gutter: 24px;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --display: "Archivo", var(--sans);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #0e100f;
        --surface: #191c1a;
        --ink: #f2f4f3;
        --muted: #a6ada8;
        --brand: #91cfa4;
        --line: #2a2f2c;
        --shadow: 22px 60px rgba(0, 0, 0, 0.5);
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* La cabecera es pegajosa: sin esto, un enlace #ancla deja el titular debajo. */
[id] {
    scroll-margin-top: 88px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: var(--gutter);
    top: var(--sp-md);
    z-index: 10;
    background: var(--canvas);
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Tipos
   -------------------------------------------------------------------------- */

.eyebrow {
    margin: 0 0 var(--sp-md);
    font-family: var(--display);
    font-stretch: 72%;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
}

.h1 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 115%;
    font-weight: 650;
    font-size: clamp(2.6rem, 6.4vw, 4.5rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
}

.h2 {
    margin: 0 0 var(--sp-md);
    font-family: var(--display);
    font-stretch: 108%;
    font-weight: 620;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.h3 {
    margin: 0 0 var(--sp-sm);
    font-family: var(--display);
    font-stretch: 100%;
    font-weight: 620;
    font-size: 1.1875rem;
    line-height: 1.25;
}

.lede {
    margin: var(--sp-lg) 0 0;
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: 46ch;
}

.prose {
    color: var(--muted);
    max-width: 62ch;
}

.prose a {
    color: var(--brand);
}

.small {
    font-size: 0.875rem;
    color: var(--muted);
}

/* Marcador de dato pendiente. Se ve, y se ve mal a propósito: la web no debe
   publicarse con ninguno puesto. */
.todo {
    background: #fff2b2;
    color: #4a3a00;
    padding: 0 var(--sp-xs);
    border-radius: var(--r-sm);
    font-family: var(--display);
    font-stretch: 80%;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}

.top__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--display);
    font-stretch: 108%;
    font-weight: 650;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin-right: auto;
}

.brand__mark {
    width: 30px;
    height: 30px;
}

.top__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
    font-size: 0.9375rem;
}

.top__nav a {
    color: var(--ink);
    text-decoration: none;
}

.top__nav a:hover {
    color: var(--brand);
}

.lang {
    font-family: var(--display);
    font-stretch: 72%;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px var(--sp-sm) 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    background: var(--brand-fill);
    color: var(--on-brand);
    text-decoration: none;
    font-family: var(--display);
    font-stretch: 100%;
    font-weight: 620;
    font-size: 0.9375rem;
    padding: 10px var(--sp-lg);
    border-radius: 999px;
    min-height: 44px;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    color: var(--on-brand);
}

@media (max-width: 700px) {
    .top__nav .top__link {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    padding-block: clamp(48px, 8vw, 104px) var(--sp-2xl);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}

.hero__price {
    margin: var(--sp-lg) 0 0;
    font-family: var(--display);
    font-stretch: 90%;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}

/* La insignia oficial. No se toca: ni color, ni proporciones, ni animación.
   40 px de alto es el mínimo que fijan las Marketing Guidelines, y el margen
   libre alrededor es 1/4 de esa altura. */
.badge {
    display: inline-block;
    margin-top: var(--sp-lg);
    /* 12 px por encima del cuarto de altura que exigen las guidelines: la
       insignia mide 44 y el mínimo sale a 11. */
    padding: 12px;
    line-height: 0;
}

.badge img {
    display: block;
    height: 44px;
    width: auto;
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Capturas

   Sin marco de dispositivo: las Marketing Guidelines prohíben los gráficos
   propios que representen un producto Apple, y un iPhone dibujado con
   border-radius es exactamente eso. Queda la captura, sus esquinas y su sombra.
   -------------------------------------------------------------------------- */

.shot {
    margin: 0;
    width: min(300px, 78vw);
    /* La proporción exacta de la captura del simulador (1206×2622 reducido a
       780 de ancho). Con el 9/19,5 aproximado, `cover` recortaba una franja. */
    aspect-ratio: 780 / 1696;
    border-radius: var(--r-lg);
    overflow: hidden;
    /* El primer valor es una línea de un píxel, no una sombra: la captura tiene
       el fondo blanco de la app y sin ella se derrama en el lienzo, que también
       es blanco. */
    box-shadow: 0 0 0 1px var(--line), 0 var(--shadow);
    justify-self: center;
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shot--todo {
    display: grid;
    place-items: center;
    padding: var(--sp-lg);
    text-align: center;
    background: var(--surface);
    border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow: none;
}

.shot__todo {
    margin: 0;
    font-family: var(--display);
    font-stretch: 85%;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

.shot__todo b {
    display: block;
    color: var(--brand);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    margin-bottom: var(--sp-sm);
}

/* --------------------------------------------------------------------------
   El quipu

   La firma de la página, y la única licencia que se toma. Un quipu es una
   cuerda maestra de la que cuelgan cuerdas con nudos: el valor de cada nudo
   depende de a qué altura está, igual que una cifra depende de su posición.
   Aquí cada cuerda es una categoría, su largo es proporcional al gasto y sus
   nudos son los dígitos de la cifra. Sustituye a la fila de estadísticas que
   lleva cualquier landing y cuenta lo mismo que el gráfico de la app, con el
   objeto del que la app toma el nombre.
   -------------------------------------------------------------------------- */

.quipu {
    padding-block: var(--sp-2xl);
    border-block: 1px solid var(--line);
    background: var(--surface);
}

.quipu__head {
    max-width: 52ch;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.quipu__fig {
    margin: 0;
}

/* La cuerda maestra. */
.quipu__bar {
    height: 5px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.85;
}

.quipu__cords {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-md);
}

.cord {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* El largo cuelga de --len (0–1): 96 px fijos más 200 px repartidos. El mínimo
   existe para que los nudos de las cifras pequeñas sigan cabiendo. */
.cord__line {
    position: relative;
    width: 2px;
    height: calc(96px + var(--len) * 200px);
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.9;
    transform-origin: top center;
}

/* Un grupo de nudos = un dígito. --at es su altura en la cuerda, o sea su
   posición decimal: cuanto más arriba, más vale. */
.knots {
    position: absolute;
    left: 50%;
    top: var(--at);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* El nudo tiene que leerse contra su propia cuerda, y las dos son del mismo
   verde: lo que los separa es el ancho —siete veces la cuerda— y el aro del
   color del fondo. */
.knot {
    display: block;
    width: 14px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--surface);
}

.cord__cat {
    margin: var(--sp-md) 0 0;
    font-size: 1.375rem;
    line-height: 1;
}

.cord__name {
    display: block;
    margin-top: var(--sp-sm);
    font-size: 0.8125rem;
    color: var(--muted);
}

.cord__amount {
    display: block;
    margin-top: var(--sp-xs);
    font-family: var(--display);
    font-stretch: 88%;
    font-weight: 620;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.quipu__caption {
    margin: clamp(32px, 5vw, 48px) 0 0;
    max-width: 58ch;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (max-width: 760px) {
    .quipu__cords {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--sp-sm);
    }

    /* Las cuerdas se acortan en el móvil, pero no tanto como para que los
       grupos de nudos se junten: si se tocan, dejan de leerse como cifras. */
    .cord__line {
        height: calc(80px + var(--len) * 150px);
    }

    .cord__name {
        font-size: 0.6875rem;
    }

    .cord__amount {
        font-size: 0.8125rem;
    }
}

/* Una sola entrada orquestada: las cuerdas caen de la maestra, escalonadas, y
   los nudos aparecen después. Nada más se mueve en toda la página. */
@media (prefers-reduced-motion: no-preference) {
    .cord__line {
        animation: caer 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
        animation-delay: calc(var(--i) * 90ms + 150ms);
    }

    .knots {
        animation: aparecer 0.3s ease backwards;
        animation-delay: calc(var(--i) * 90ms + 500ms);
    }

    @keyframes caer {
        from {
            transform: scaleY(0);
        }
    }

    @keyframes aparecer {
        from {
            opacity: 0;
        }
    }
}

/* --------------------------------------------------------------------------
   Bloques de función
   -------------------------------------------------------------------------- */

.feat {
    padding-block: var(--sp-3xl);
    border-bottom: 1px solid var(--line);
}

.feat__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

/* Alterna el lado de la captura sin duplicar el marcado. */
.feat--flip .feat__text {
    order: 2;
}

.feat__list {
    margin: var(--sp-lg) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-sm);
}

.feat__list li {
    position: relative;
    padding-left: 26px;
    color: var(--muted);
}

/* Un nudo diminuto en lugar de una viñeta: la misma idea que las cuerdas, a
   escala de párrafo. */
.feat__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 9px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

@media (max-width: 860px) {
    .feat {
        padding-block: var(--sp-2xl);
    }

    .feat__inner {
        grid-template-columns: 1fr;
    }

    .feat--flip .feat__text {
        order: 0;
    }
}

/* --------------------------------------------------------------------------
   Franja de detalles
   -------------------------------------------------------------------------- */

.details {
    padding-block: var(--sp-2xl);
    border-bottom: 1px solid var(--line);
}

.details__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-lg);
}

.detail {
    padding: var(--sp-lg);
    background: var(--surface);
    border-radius: var(--r-md);
}

.detail p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

@media (max-width: 860px) {
    .details__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .details__grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.close {
    padding-block: var(--sp-3xl);
    text-align: center;
}

.close .h2 {
    max-width: 20ch;
    margin-inline: auto;
}

.close .lede {
    margin-inline: auto;
    text-align: center;
}

.close__cta {
    margin-top: var(--sp-xl);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.foot {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-block: var(--sp-2xl) var(--sp-xl);
}

.foot__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg) var(--sp-2xl);
    justify-content: space-between;
    align-items: flex-start;
}

.foot__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg);
    font-size: 0.9375rem;
}

.foot__legal {
    margin: var(--sp-xl) 0 0;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--muted);
    max-width: 70ch;
}

.foot__legal p {
    margin: 0 0 var(--sp-xs);
}

/* --------------------------------------------------------------------------
   Páginas de texto: privacidad y soporte
   -------------------------------------------------------------------------- */

.doc {
    padding-block: var(--sp-2xl) var(--sp-3xl);
}

.doc__body {
    max-width: 68ch;
}

.doc__body h2 {
    margin: var(--sp-2xl) 0 var(--sp-md);
    font-family: var(--display);
    font-stretch: 104%;
    font-weight: 620;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.doc__body h3 {
    margin: var(--sp-xl) 0 var(--sp-sm);
    font-family: var(--display);
    font-stretch: 100%;
    font-weight: 620;
    font-size: 1.125rem;
}

.doc__body p,
.doc__body li {
    color: var(--muted);
}

.doc__body ul {
    padding-left: var(--sp-lg);
}

.doc__body li {
    margin-bottom: var(--sp-sm);
}

.doc__updated {
    font-size: 0.875rem;
    color: var(--muted);
}

/* El correo de soporte es lo que viene a buscar quien abre la página —y quien
   la revisa en Apple—, así que no se esconde en un párrafo. */
.contact {
    margin: var(--sp-xl) 0;
    padding: var(--sp-lg);
    background: var(--surface);
    border-radius: var(--r-md);
    border-left: 3px solid var(--brand-fill);
}

.contact p {
    margin: 0;
}

.contact__mail {
    font-family: var(--display);
    font-stretch: 100%;
    font-weight: 620;
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Consentimiento de cookies

   Una barra abajo, no una cortina: la ley prohíbe el muro de cookies, así que
   la página se lee y se navega mientras el aviso está puesto.

   Lo que decide el diseño aquí es una regla legal, no estética: rechazar tiene
   que costar lo mismo que aceptar. Los dos botones son el mismo componente con
   la misma caja; lo único que los distingue es el relleno, y el de rechazar no
   es más pálido ni más pequeño ni un enlace de texto.
   -------------------------------------------------------------------------- */

.consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    background: var(--canvas);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 40px rgba(17, 19, 18, 0.1);
}

.consent[hidden] {
    display: none;
}

.consent__inner {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    /* Alto: una barra fija tapa contenido, así que se mide en líneas. Con el
       texto en una sola y el botón de detalle en la misma, el alto lo marcan los
       botones (44 px) más este relleno, y no una pila de párrafos. */
    padding: 12px var(--gutter);
    display: flex;
    gap: var(--sp-sm) var(--sp-xl);
    align-items: center;
    justify-content: space-between;
}

.consent__cuerpo {
    max-width: 92ch;
}

.consent__texto {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Abre el detalle. Es un enlace de texto porque no es una de las dos
   respuestas: no compite con los botones, los acompaña. Y va dentro del propio
   párrafo, para no gastar una línea entera en él. */
.consent__mas {
    white-space: nowrap;
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand);
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.consent__detalle {
    margin-top: var(--sp-md);
    padding: var(--sp-md);
    background: var(--surface);
    border-radius: var(--r-md);
}

.consent__detalle h3 {
    margin: var(--sp-md) 0 var(--sp-xs);
    font-family: var(--display);
    font-stretch: 90%;
    font-weight: 620;
    font-size: 0.875rem;
}

.consent__detalle h3:first-child {
    margin-top: 0;
}

.consent__detalle p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Sin marcar de partida: una casilla premarcada no es consentimiento. */
.consent__toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin: var(--sp-md) 0;
    font-size: 0.9375rem;
}

.consent__toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
}

.consent__acciones {
    display: flex;
    gap: var(--sp-sm);
    flex-shrink: 0;
}

.consent__btn {
    min-width: 128px;
    min-height: 44px;
    padding: 10px var(--sp-lg);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--display);
    font-stretch: 100%;
    font-weight: 620;
    font-size: 0.9375rem;
    cursor: pointer;
}

.consent__btn--si {
    background: var(--brand-fill);
    color: var(--on-brand);
}

.consent__btn--neutro {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

.consent__btn:hover {
    filter: brightness(0.96);
}

@media (max-width: 760px) {
    .consent__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .consent__acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .consent__btn {
        min-width: 0;
    }
}

/* Que la barra no tape el final del pie mientras está puesta. */
body.con-consent {
    padding-bottom: 160px;
}

@media (min-width: 761px) {
    body.con-consent {
        padding-bottom: 76px;
    }
}

/* --------------------------------------------------------------------------
   Tabla de cookies

   Se desplaza sola en pantalla estrecha en lugar de encoger las columnas: una
   tabla de cuatro columnas a 375 px no se lee, y el resto de la página nunca
   debe desplazarse en horizontal.
   -------------------------------------------------------------------------- */

.tabla {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: var(--sp-md) 0 var(--sp-lg);
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tabla th,
.tabla td {
    padding: var(--sp-sm) var(--sp-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.tabla th {
    font-family: var(--display);
    font-stretch: 90%;
    font-weight: 620;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    white-space: nowrap;
}

.tabla code {
    font-size: 0.9em;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Precios

   Tres opciones en el cierre, que es donde alguien decide: ha visto lo que hace
   la app y lo siguiente que quiere saber es cuánto cuesta.

   El del medio va destacado a propósito: es el que diferencia a KipuApp de la
   competencia, que solo vende suscripción.
   -------------------------------------------------------------------------- */

.precios {
    list-style: none;
    margin: var(--sp-xl) auto 0;
    padding: 0;
    max-width: 860px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
    text-align: left;
}

.precios li {
    padding: var(--sp-lg);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-md);
}

/* Selector con dos clases a propósito: `.precios li` lleva una clase y un
   elemento, así que gana a un `.precios--destacado` suelto y el destacado no se
   veía. Es el choque de especificidad que más veces pasa desapercibido. */
.precios .precios--destacado {
    border-color: var(--brand-fill);
    background: color-mix(in srgb, var(--brand-fill) 22%, var(--surface));
}

.precios__que {
    display: block;
    font-family: var(--display);
    font-stretch: 72%;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
}

/* No lleva importe: lo pone el App Store en la moneda de cada país, y una cifra
   escrita aquí sería exacta para un mercado y falsa para el resto. Lo que se
   compara es el modelo, que no cambia de país ni envejece. */
.precios__cuanto {
    display: block;
    margin: var(--sp-sm) 0 var(--sp-xs);
    font-family: var(--display);
    font-stretch: 104%;
    font-weight: 650;
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.precios__pie {
    margin-top: var(--sp-md);
}

.precios__nota {
    display: block;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
}

@media (max-width: 760px) {
    .precios {
        grid-template-columns: 1fr;
    }
}