/* ============================================================================
   legacykey.com.ar — la página pública. Mismo aspecto que la app: slate oscuro, el ámbar como pizca,
   Inter para todo y Fraunces sólo en los títulos grandes. Sin estilos inline: la CSP no los deja pasar.
   Mobile-first: lo de arriba es el celular; los @media (min-width) suman para pantallas más grandes.
   ============================================================================ */

/* Las fuentes, servidas desde el sitio (sin Google Fonts: nadie de afuera ve quién abre la página). Son variables y en dos
   tramos, latin y latin-ext: el segundo se baja sólo si una letra lo pide. Licencia OFL, en fonts/. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/inter-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: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("fonts/fraunces-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: "Fraunces";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens (los de la app) ───────────────────────────────────────────── */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Fraunces", ui-serif, Georgia, serif;

    --canvas: #0a0e15;
    --surface: #111722;
    --raised: #182030;
    --hairline: #243044;
    --rowline: #1b2433;

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-900: #0f172a;

    --brand-200: #fde68a;
    --brand-300: #fcd34d;
    --brand-400: #fbbf24;
    --brand-500: #f59e0b;

    --emerald-400: #34d399;
    --sky-400: #38bdf8;

    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.30);
    --shadow-modal: 0 24px 48px -16px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.04);

    --gutter: 1rem;
    --header: 4rem;
    color-scheme: dark;
}

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

* {
    margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    min-height: 100vh;
    overflow-x: clip;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    background-color: var(--canvas);
    color: var(--slate-200);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* Lo de arriba le ganaba al atributo hidden (el sprite de los íconos ocupaba lugar arriba de todo). */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

summary {
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: rgb(245 158 11 / 0.35);
}

strong {
    color: var(--slate-100);
    font-weight: 600;
}

/* Un link dentro de un texto: claro y subrayado (el ámbar nunca es un link). */
main p a {
    color: var(--slate-100);
    text-decoration: underline;
    text-decoration-color: var(--slate-500);
    text-underline-offset: 3px;
}

main p a:hover {
    color: #ffffff;
    text-decoration-color: currentColor;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.saltar {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: var(--slate-100);
    color: var(--slate-900);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
}

.saltar:focus {
    transform: none;
}

/* "Saltar al contenido" enfoca el <main> (tabindex=-1): sin el anillo alrededor de toda la página. */
main:focus {
    outline: none;
}

.icono {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-sm {
    width: 1rem;
    height: 1rem;
}

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

/* ── Botones (primario claro, como en la app: el ámbar nunca es un botón) ─────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primario {
    background: var(--slate-100);
    color: var(--slate-900);
}

.btn-primario:hover {
    background: #ffffff;
}

.btn-secundario {
    border-color: var(--hairline);
    background: var(--surface);
    color: var(--slate-200);
}

.btn-secundario:hover {
    border-color: #2f3d55;
    background: var(--raised);
    color: var(--slate-50);
}

.btn-chico {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
}

.btn-grande {
    min-height: 3rem;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

/* ── La marca ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    border-radius: 0.5rem;
}

.marca-tecla {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(245 158 11 / 0.30);
    border-radius: 0.5rem;
    background: rgb(245 158 11 / 0.10);
    color: var(--brand-400);
}

.marca-tecla .icono {
    width: 1rem;
    height: 1rem;
}

.marca-nombre {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--slate-50);
}

/* ── La barra de arriba ───────────────────────────────────────────────────────────────────────────────────────────── */
.barra {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--rowline);
    background: rgb(10 14 21 / 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.barra-fila {
    display: flex;
    height: var(--header);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.barra-links {
    display: none;
}

.barra-links a {
    padding: 0.5rem 0.25rem;
    color: var(--slate-400);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.barra-links a:hover {
    color: var(--slate-50);
}

.barra-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.barra-probar {
    display: none;
}

/* El menú del celular: un <details>, así anda sin JavaScript; site.js lo cierra al elegir un link o con Escape. */
.menu {
    position: relative;
}

.menu > summary {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    background: var(--surface);
    color: var(--slate-200);
    list-style: none;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu .icono-cerrar,
.menu[open] .icono-abrir {
    display: none;
}

.menu[open] .icono-cerrar {
    display: block;
}

.menu-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: min(17rem, calc(100vw - 2 * var(--gutter)));
    padding: 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-modal);
}

.menu-panel a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--slate-200);
    font-weight: 500;
    text-decoration: none;
}

.menu-panel a:hover {
    background: var(--raised);
}

.menu-panel .btn {
    width: 100%;
    margin-top: 0.5rem;
    color: var(--slate-900);
}

.menu-panel .btn:hover {
    background: #ffffff;
}

/* ── Secciones ────────────────────────────────────────────────────────────────────────────────────────────────────── */
section[id] {
    scroll-margin-top: calc(var(--header) + 1rem);
}

.seccion {
    padding-block: 4.5rem;
}

.seccion-borde {
    border-top: 1px solid var(--rowline);
}

.seccion-superficie {
    border-block: 1px solid var(--rowline);
    background: linear-gradient(180deg, var(--surface), var(--canvas));
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    color: var(--slate-400);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.etiqueta::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--brand-400);
}

.titulo {
    max-width: 40rem;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--slate-50);
    text-wrap: balance;
}

.bajada {
    max-width: 40rem;
    margin-top: 1rem;
    color: var(--slate-400);
    font-size: 1.05rem;
    text-wrap: pretty;
}

.centrado {
    text-align: center;
}

.centrado .titulo,
.centrado .bajada {
    margin-inline: auto;
}

.tarjeta {
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.icono-caja {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    background: var(--raised);
    color: var(--slate-200);
}

/* ── Portada ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.portada {
    position: relative;
    overflow: hidden;
    padding-block: 2.5rem 3rem;
}

/* El brillo ámbar muy suave de la app, detrás de todo. */
.portada::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 46rem;
    height: 30rem;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(245 158 11 / 0.13), transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.portada-grilla {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
}

.portada-pildora {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--slate-300);
    font-size: 0.8rem;
    font-weight: 500;
}

.punto {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--slate-500);
}

.punto-ambar {
    background: var(--brand-400);
}

.punto-verde {
    background: var(--emerald-400);
}

.punto-celeste {
    background: var(--sky-400);
}

.portada h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--slate-50);
    text-wrap: balance;
}

.portada h1 .tenue {
    display: block;
    color: var(--slate-400);
}

.portada-bajada {
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--slate-300);
    font-size: 1rem;
    text-wrap: pretty;
}

.portada-botones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Un poco más angostos que los grandes de siempre, para que entren en fila en la columna del texto. */
.portada-botones .btn-grande {
    padding-inline: 1.15rem;
    font-size: 0.95rem;
}

.portada-nota {
    margin-top: 0.75rem;
    color: var(--slate-400);
    font-size: 0.8rem;
}

/* ── Laura en dos familias: en el celular, un árbol hacia abajo; desde la tablet, una T con las dos al costado ──────── */
.dos-familias {
    position: relative;
}

.df-cabeza {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.df-cabeza b {
    color: var(--brand-300);
    font-size: 0.95rem;
    font-weight: 600;
}

.df-cabeza span {
    color: var(--slate-400);
    font-size: 0.875rem;
}

.df-persona {
    position: relative;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.75rem;
}

.df-avatar {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-400);
    color: var(--canvas);
    font-weight: 700;
}

.df-persona-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.df-persona-texto b {
    color: var(--slate-50);
}

.df-persona-texto span {
    color: var(--slate-400);
    font-size: 0.85rem;
}

.df-familias {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 0 1.25rem;
    padding-left: 1.25rem;
}

.df-familia {
    position: relative;
    padding: 1.25rem;
}

/* El hilo del árbol: cada familia lo trae desde arriba y la última lo corta a la altura de su rama. */
.df-familia::before,
.df-familia::after {
    content: "";
    position: absolute;
    border-color: var(--slate-500);
    border-style: solid;
    border-width: 0;
}

.df-familia::before {
    top: -1rem;
    bottom: 0;
    left: -1.25rem;
    border-left-width: 1px;
}

.df-familia:last-child::before {
    bottom: auto;
    height: 2.75rem;
}

.df-familia::after {
    top: 1.75rem;
    left: -1.25rem;
    width: 1.25rem;
    border-top-width: 1px;
}

.df-familia-nombre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.df-familia-nombre .icono {
    color: var(--brand-300);
}

.df-papel {
    margin-top: 0.25rem;
    color: var(--slate-400);
    font-size: 0.85rem;
}

.df-papel-admin {
    color: var(--brand-300);
}

.df-miembros {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rowline);
}

.df-miembros li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    color: var(--slate-100);
    font-size: 0.9rem;
}

.df-miembros small {
    color: var(--slate-400);
    font-size: 0.8rem;
}

.df-miembros .df-yo {
    margin-inline: -0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: rgb(251 191 36 / 0.1);
    color: var(--brand-200);
    font-weight: 600;
}

.df-miembros .df-yo small {
    color: var(--brand-300);
}

.df-nota {
    margin-top: 1rem;
    color: var(--slate-400);
    font-size: 0.85rem;
}

/* ── La comparación, al pie de la portada ─────────────────────────────────────────────────────────────────────────── */
.portada-comparar-titulo {
    position: relative;
    margin-top: 3rem;
    color: var(--slate-200);
    font-size: 1rem;
    font-weight: 600;
}

.comparar {
    position: relative;
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.comparar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
}

.comparar-item .icono-caja {
    flex-shrink: 0;
}

.comparar-item h3 {
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.comparar-item p {
    margin-top: 0.25rem;
    color: var(--slate-400);
    font-size: 0.875rem;
}

.comparar-destacada {
    border-color: rgb(251 191 36 / 0.45);
    background: linear-gradient(180deg, rgb(251 191 36 / 0.07), var(--surface));
}

.comparar-destacada .icono-caja {
    color: var(--brand-300);
}

/* ── La franja de datos ───────────────────────────────────────────────────────────────────────────────────────────── */
.franja {
    border-block: 1px solid var(--rowline);
    background: var(--surface);
}

.franja-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.franja-lista li {
    padding: 1.25rem 0.75rem;
    border-bottom: 1px solid var(--rowline);
}

.franja-lista li:nth-child(odd) {
    border-right: 1px solid var(--rowline);
}

.franja-lista li:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.franja-lista b {
    display: block;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.franja-lista span {
    display: block;
    margin-top: 0.125rem;
    color: var(--slate-400);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* El detalle técnico, para quien lo quiera: chico, debajo de las cuatro. */
.franja-tecnica {
    padding-block: 0.75rem 1rem;
    border-top: 1px solid var(--rowline);
    color: var(--slate-500);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Qué guardás ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.tipos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.tipo {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
}

.tipo h3 {
    color: var(--slate-50);
    font-size: 0.975rem;
    font-weight: 600;
}

.tipo p {
    margin-top: 0.125rem;
    color: var(--slate-400);
    font-size: 0.875rem;
    line-height: 1.5;
}

.aclaracion {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: 44rem;
    margin-top: 1.5rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

.aclaracion .icono {
    margin-top: 0.15rem;
    color: var(--sky-400);
}

/* ── Cómo funciona: los pasos ─────────────────────────────────────────────────────────────────────────────────────── */
.pasos {
    display: grid;
    gap: 0.75rem;
    margin-top: 2.5rem;
    counter-reset: paso;
}

.paso {
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    counter-increment: paso;
}

.paso::before {
    content: counter(paso);
    position: absolute;
    top: 1.15rem;
    left: 1.25rem;
    display: flex;
    width: 1.875rem;
    height: 1.875rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--raised);
    color: var(--slate-100);
    font-size: 0.85rem;
    font-weight: 600;
}

.paso h3 {
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.paso p {
    margin-top: 0.25rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

/* Debajo de los pasos: lo mismo, con cada grupo de tu vida. */
.grupos-titulo {
    margin-top: 2.5rem;
    color: var(--slate-200);
    font-size: 1rem;
    font-weight: 600;
}

.grupos {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.grupo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--slate-100);
    font-size: 0.95rem;
    font-weight: 500;
}

.grupo .icono {
    flex-shrink: 0;
    color: var(--brand-300);
}

/* ── Si un día faltás: la línea del legado ────────────────────────────────────────────────────────────────────────── */
.subtitulo {
    margin-top: 4rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--slate-50);
}

.linea {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 2rem;
}

.etapa {
    position: relative;
    padding: 0 0 2rem 2.25rem;
}

/* El hilo vertical que une las etapas en el celular. */
.etapa::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    bottom: -0.35rem;
    left: 0.4rem;
    width: 1px;
    background: var(--hairline);
}

.etapa:last-child {
    padding-bottom: 0;
}

.etapa:last-child::before {
    display: none;
}

.etapa > .punto {
    position: absolute;
    top: 0.4rem;
    left: 0.15rem;
    width: 0.55rem;
    height: 0.55rem;
    box-shadow: 0 0 0 4px var(--canvas);
}

.etapa-nombre {
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.etapa-cuando {
    color: var(--slate-400);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.etapa p {
    max-width: 40rem;
    margin-top: 0.5rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

.cancelar {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-top: 2.5rem;
    padding: 1.25rem;
    border-color: rgb(245 158 11 / 0.25);
}

.cancelar .icono-caja {
    border-color: rgb(245 158 11 / 0.30);
    background: rgb(245 158 11 / 0.10);
    color: var(--brand-300);
}

.cancelar h3 {
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.cancelar p {
    margin-top: 0.25rem;
    color: var(--slate-300);
    font-size: 0.925rem;
}

/* ── La herencia ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.herencia {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

.puntos {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

.puntos li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.puntos h3 {
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.puntos p {
    margin-top: 0.125rem;
    color: var(--slate-400);
    font-size: 0.925rem;
}

.recibido {
    padding: 1.25rem;
}

.recibido-cabeza {
    color: var(--slate-400);
    font-size: 0.8rem;
}

.recibido-titulo {
    margin-top: 0.25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--slate-50);
}

.recibido-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rowline);
}

.recibido-texto {
    min-width: 0;
    flex: 1 1 10rem;
}

.recibido-texto b {
    display: block;
    overflow: hidden;
    color: var(--slate-100);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recibido-texto span {
    display: block;
    overflow: hidden;
    color: var(--slate-400);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recibido-acciones {
    display: flex;
    gap: 0.375rem;
}

.recibido-acciones span {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: 0.45rem;
    color: var(--slate-300);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.recibido-acciones span:first-child {
    border-color: transparent;
    background: var(--slate-100);
    color: var(--slate-900);
}

/* ── Lo que puede salir mal ───────────────────────────────────────────────────────────────────────────────────────── */
.casos {
    display: grid;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.caso {
    padding: 1.25rem;
}

.caso h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.caso h3 .icono {
    color: var(--slate-400);
}

.caso p {
    margin-top: 0.5rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

/* ── Seguridad ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.promesa {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-color: #2f3d55;
    background: linear-gradient(135deg, var(--raised), var(--surface));
}

.promesa p:first-child {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--slate-50);
    text-wrap: balance;
}

.promesa p + p {
    margin-top: 0.875rem;
    color: var(--slate-300);
    font-size: 0.95rem;
}

.garantias {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.garantia {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.15rem;
}

.garantia .icono-caja {
    color: var(--emerald-400);
}

.garantia h3 {
    color: var(--slate-50);
    font-size: 0.975rem;
    font-weight: 600;
}

.garantia p {
    margin-top: 0.125rem;
    color: var(--slate-400);
    font-size: 0.875rem;
    line-height: 1.55;
}

.limites {
    margin-top: 0.75rem;
    padding: 1.25rem;
}

.limites h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
}

.limites h3 .icono {
    color: var(--sky-400);
}

.limites ul {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.limites li {
    position: relative;
    padding-left: 1rem;
    color: var(--slate-400);
    font-size: 0.9rem;
}

.limites li::before {
    content: "";
    position: absolute;
    top: 0.62rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--slate-500);
}

/* ── Precio ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.plan {
    display: grid;
    max-width: 56rem;
    margin: 2.5rem auto 0;
    overflow: hidden;
    border-radius: 1rem;
    text-align: left;
}

.plan-precio {
    padding: 1.75rem 1.5rem;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(160deg, var(--raised), var(--surface));
}

.plan-nombre {
    color: var(--slate-300);
    font-size: 0.95rem;
    font-weight: 600;
}

.plan-monto {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 0.75rem;
}

.plan-monto b {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--slate-50);
}

.plan-monto span {
    color: var(--slate-400);
    font-size: 0.95rem;
}

.plan-prueba {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--brand-200);
    font-size: 0.925rem;
    font-weight: 500;
}

.plan-precio .btn {
    width: 100%;
    margin-top: 1.5rem;
}

.plan-pago {
    margin-top: 0.875rem;
    color: var(--slate-400);
    font-size: 0.82rem;
}

.plan-incluye {
    padding: 1.75rem 1.5rem;
}

.plan-incluye h3 {
    color: var(--slate-50);
    font-size: 0.95rem;
    font-weight: 600;
}

.plan-incluye ul {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.plan-incluye li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--slate-300);
    font-size: 0.925rem;
}

.plan-incluye li .icono {
    margin-top: 0.2rem;
    color: var(--emerald-400);
}

.plan-notas {
    display: grid;
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0.75rem auto 0;
    text-align: left;
}

.plan-nota {
    padding: 1.1rem 1.25rem;
}

.plan-nota h3 {
    color: var(--slate-100);
    font-size: 0.925rem;
    font-weight: 600;
}

.plan-nota p {
    margin-top: 0.25rem;
    color: var(--slate-400);
    font-size: 0.875rem;
}

/* ── Preguntas ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.preguntas {
    max-width: 48rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--hairline);
}

.pregunta {
    border-bottom: 1px solid var(--hairline);
}

.pregunta > summary {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 1.1rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
}

.pregunta > summary::-webkit-details-marker {
    display: none;
}

.pregunta > summary .icono {
    color: var(--slate-400);
    transition: transform 0.2s;
}

.pregunta[open] > summary .icono {
    transform: rotate(180deg);
}

.pregunta > summary:hover {
    color: #ffffff;
}

.pregunta > div {
    padding-bottom: 1.35rem;
    color: var(--slate-400);
    font-size: 0.95rem;
}

.pregunta > div p + p {
    margin-top: 0.625rem;
}

/* ── El cierre y el pie ───────────────────────────────────────────────────────────────────────────────────────────── */
.cierre {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 1.25rem;
    border-radius: 1.25rem;
    text-align: center;
}

.cierre::before {
    content: "";
    position: absolute;
    bottom: -10rem;
    left: 50%;
    width: 40rem;
    height: 20rem;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(245 158 11 / 0.10), transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.cierre > * {
    position: relative;
}

.cierre .titulo,
.cierre .bajada {
    margin-inline: auto;
}

.cierre-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.cierre-botones .btn {
    width: 100%;
    max-width: 20rem;
}

/* Las tiendas del celular, para cuando haya app: no son enlaces ni las insignias oficiales (no se usan antes de publicar). */
.tiendas {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rowline);
}

.tiendas-titulo {
    color: var(--slate-200);
    font-size: 0.9rem;
    font-weight: 600;
}

.tiendas-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.tienda {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: 0.75rem;
    background: var(--surface);
    color: var(--slate-400);
    text-align: left;
}

.tienda small {
    display: block;
    color: var(--slate-500);
    font-size: 0.7rem;
}

.tienda b {
    display: block;
    color: var(--slate-200);
    font-size: 0.95rem;
    font-weight: 600;
}

.tiendas-nota {
    margin-top: 0.75rem;
    color: var(--slate-500);
    font-size: 0.8rem;
}

.pie {
    padding-block: 2.5rem;
    border-top: 1px solid var(--rowline);
    color: var(--slate-400);
    font-size: 0.875rem;
}

.pie-fila {
    display: grid;
    gap: 1.5rem;
}

.pie nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.pie nav a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    text-decoration: none;
}

.pie a:hover {
    color: var(--slate-50);
}

.pie-legal {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rowline);
    color: var(--slate-500);
    font-size: 0.8rem;
}

/* El píxel del contador para quien no tiene JavaScript (antes era un style inline). */
.contador-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ── La pantalla "Estamos actualizando" (actualizando.html): la tarjeta centrada, como la de entrar de la app ──────── */
.aviso {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem var(--gutter);
}

.aviso::before {
    content: "";
    position: fixed;
    top: -10rem;
    left: 50%;
    width: 42rem;
    height: 24rem;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(245 158 11 / 0.12), transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.aviso-marca {
    position: relative;
    margin-bottom: 2rem;
}

.aviso-tarjeta {
    position: relative;
    width: 100%;
    max-width: 28rem;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-modal);
}

.aviso-icono {
    width: 3rem;
    height: 3rem;
    border-color: rgb(245 158 11 / 0.30);
    background: rgb(245 158 11 / 0.10);
    color: var(--brand-300);
}

.aviso-icono .icono {
    width: 1.5rem;
    height: 1.5rem;
}

.aviso-tarjeta h1 {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--slate-50);
    text-wrap: balance;
}

.aviso-bajada {
    margin-top: 0.875rem;
    color: var(--slate-300);
}

.aviso-lista {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rowline);
}

.aviso-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--slate-300);
    font-size: 0.925rem;
}

.aviso-lista .icono {
    margin-top: 0.2rem;
    color: var(--emerald-400);
}

.aviso-boton {
    width: 100%;
    margin-top: 1.75rem;
}

.aviso-contacto {
    margin-top: 1.25rem;
    color: var(--slate-400);
    font-size: 0.875rem;
    text-align: center;
}

/* ── De 640 px para arriba ────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 40rem) {
    :root {
        --gutter: 1.5rem;
    }

    .portada-botones {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .barra-probar {
        display: inline-flex;
    }

    .franja-lista {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .franja-lista li,
    .franja-lista li:nth-last-child(-n + 2) {
        padding: 1.5rem 1.25rem;
        border-bottom: 0;
        border-right: 1px solid var(--rowline);
    }

    .franja-lista li:last-child {
        border-right: 0;
    }

    .tipos,
    .casos,
    .garantias,
    .plan-notas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pasos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cierre {
        padding: 3.5rem 2.5rem;
    }

    .cierre-botones {
        flex-direction: row;
        justify-content: center;
    }

    .cierre-botones .btn {
        width: auto;
    }

    .pie-fila {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}

/* ── De 768 px para arriba ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
    .seccion {
        padding-block: 6rem;
    }

    .plan {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .plan-precio {
        padding: 2.25rem 2rem;
        border-right: 1px solid var(--hairline);
        border-bottom: 0;
    }

    .plan-incluye {
        padding: 2.25rem 2rem;
    }

    .promesa {
        padding: 2rem 2.25rem;
    }

    .grupos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Laura en dos familias: de árbol a T. El tronco baja desde Laura y la T cae al medio de cada familia (el medio de
       cada columna está a un cuarto del ancho, menos un cuarto del espacio entre las dos). */
    .df-cabeza {
        align-items: center;
        text-align: center;
    }

    .df-persona {
        margin-inline: auto;
    }

    .df-persona::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        height: 1.25rem;
        border-left: 1px solid var(--slate-500);
    }

    .df-familias {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        margin: 1.25rem 0 0;
        padding: 1.5rem 0 0;
    }

    .df-familias::before {
        content: "";
        position: absolute;
        top: 0;
        right: calc(25% - 0.375rem);
        left: calc(25% - 0.375rem);
        height: 1.5rem;
        border: 1px solid var(--slate-500);
        border-bottom: 0;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .df-familia::before,
    .df-familia::after {
        content: none;
    }
}

/* ── De 1024 px para arriba ───────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 64rem) {
    :root {
        --gutter: 2rem;
    }

    .barra-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .menu {
        display: none;
    }

    /* La portada ocupa la pantalla entera: el texto angosto a la izquierda, Laura a la derecha y la comparación abajo. */
    .portada {
        display: flex;
        min-height: calc(100svh - var(--header));
        flex-direction: column;
        justify-content: center;
        padding-block: 2.5rem;
    }

    .portada-grilla {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 3rem;
    }

    .portada-comparar-titulo {
        margin-top: 2.5rem;
    }

    .comparar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tipos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tipo {
        flex-direction: column;
        gap: 0.875rem;
        padding: 1.25rem;
    }

    .pasos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .paso {
        padding: 4rem 1.25rem 1.25rem;
    }

    .paso::before {
        top: 1.25rem;
    }

    /* La línea del legado, de costado: el hilo pasa a ser horizontal. */
    .linea {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .etapa {
        padding: 2rem 0 0;
    }

    .etapa::before {
        top: 0.27rem;
        right: -1.5rem;
        bottom: auto;
        left: 0.5rem;
        width: auto;
        height: 1px;
    }

    .etapa > .punto {
        top: 0;
        left: 0;
    }

    .herencia {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 4rem;
    }

    .recibido {
        margin-top: 3.5rem;
    }

    .casos,
    .garantias {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Notebooks (de 1024 px para arriba, pero bajas: 1366×768) ─────────────────────────────────────────────────────── */
/* Los mismos bloques de la portada, más apretados, para que la comparación entre entera en la primera pantalla. */
@media (min-width: 64rem) and (max-height: 50rem) {
    .portada {
        padding-block: 1.25rem;
    }

    .portada-pildora {
        margin-bottom: 0.875rem;
    }

    .portada-comparar-titulo {
        margin-top: 1.25rem;
    }

    .df-cabeza {
        margin-bottom: 0.625rem;
    }

    .df-familia {
        padding: 1rem 1.125rem;
    }

    .df-miembros {
        gap: 0.25rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .df-nota {
        margin-top: 0.75rem;
    }

    .comparar-item {
        padding-block: 0.875rem;
    }
}

/* ── Los textos legales: terminos.html y privacidad.html ──────────────────────────────── */
.legal {
    padding-block: 3rem 4.5rem;
}

.legal-cuerpo {
    max-width: 46rem;
}

.legal h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--slate-50);
    text-wrap: balance;
}

.legal-version {
    margin-top: 0.75rem;
    color: var(--slate-400);
    font-size: 0.875rem;
}

.legal-borrador {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgb(245 158 11 / 0.35);
    border-radius: 0.75rem;
    background: rgb(245 158 11 / 0.06);
    color: var(--slate-200);
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-indice {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    background: var(--surface);
}

.legal-indice ol {
    margin-top: 0;
    gap: 0.35rem;
}

.legal h2 {
    margin-top: 2.75rem;
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--slate-50);
    scroll-margin-top: calc(var(--header) + 1rem);
}

.legal p,
.legal li {
    color: var(--slate-300);
    font-size: 0.975rem;
    line-height: 1.7;
}

.legal p {
    margin-top: 0.9rem;
}

.legal ul,
.legal ol {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding-left: 1.25rem;
}

.legal ul {
    list-style: disc;
}

.legal ol {
    list-style: decimal;
}

.legal li::marker {
    color: var(--slate-500);
}

.legal strong {
    color: var(--slate-100);
    font-weight: 600;
}

.legal a {
    color: var(--slate-100);
    text-decoration: underline;
    text-decoration-color: var(--slate-500);
    text-underline-offset: 2px;
}

.legal a:hover {
    text-decoration-color: var(--slate-300);
}

.legal-leyenda {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-left: 2px solid var(--hairline);
    color: var(--slate-400);
    font-size: 0.9rem;
}