/* Web pública de AurumPanel. Negro, un solo oro y la escala de siempre. */
:root {
    --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem;
    --t-1: .75rem; --t-2: .8125rem; --t-3: .875rem; --t-4: 1rem; --t-5: 1.25rem; --t-6: 1.5625rem;
    --p-normal: 400; --p-medio: 500; --p-fuerte: 600;
    --radio: 3px; --linea: 1px;

    --negro: #0B0B0C;      /* fondo */
    --grafito: #18181A;    /* secciones alternas */
    --borde: #2A2A2D;
    --oro: #FFC21A;        /* el único acento: 12.2:1 sobre negro */
    --blanco: #FFFFFF;     /* texto: 19.7:1 */
    --gris: #B9B6AE;       /* texto secundario: 9.7:1 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--negro); color: var(--blanco); font: var(--p-normal) var(--t-4)/1.6 'Inter', system-ui, sans-serif; }
a { color: var(--oro); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.ancho { max-width: 1120px; margin: 0 auto; padding: 0 var(--e-4); }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: var(--e-4); top: var(--e-2); background: var(--oro); color: var(--negro); padding: var(--e-2) var(--e-3); z-index: 10; }

/* Logo: moneda + nombre en dos tonos */
.lk { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; color: var(--blanco); font: 700 var(--t-5)/1 'Outfit', sans-serif; letter-spacing: -.015em; white-space: nowrap; }
.lk svg { width: 1.6em; height: 1.6em; flex: none; display: block; color: var(--oro); }
.lk b { font-weight: 700; color: var(--oro); }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 5; background: var(--negro); border-bottom: var(--linea) solid var(--borde); }
.nav .ancho { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--e-4); }
.nav nav { display: flex; align-items: center; gap: var(--e-5); font: var(--p-medio) var(--t-3) 'Outfit', sans-serif; }
.nav nav a { color: var(--oro); text-decoration: none; }
.nav nav a.blanco { color: var(--blanco); }

.boton { display: inline-block; background: var(--oro); color: var(--negro); padding: var(--e-3) var(--e-5); border-radius: var(--radio); font: var(--p-fuerte) var(--t-4)/1 'Outfit', sans-serif; text-decoration: none; border: var(--linea) solid var(--oro); }
.boton-borde { display: inline-block; background: transparent; color: var(--oro); padding: var(--e-3) var(--e-5); border-radius: var(--radio); font: var(--p-fuerte) var(--t-4)/1 'Outfit', sans-serif; text-decoration: none; border: var(--linea) solid var(--oro); }
.nav nav a.boton { padding: var(--e-2) var(--e-4); font-size: var(--t-3); color: var(--negro); }

/* Portada */
.portada { padding: var(--e-7) 0; border-bottom: var(--linea) solid var(--borde); }
.portada .ancho { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
.portada .lk { font-size: var(--t-6); margin-bottom: var(--e-6); }
h1 { font: var(--p-fuerte) var(--t-6)/1.25 'Outfit', sans-serif; margin: 0 0 var(--e-4); }
h1 b, h2 b { color: var(--oro); font-weight: var(--p-fuerte); }
.entrada { color: var(--gris); font-size: var(--t-4); max-width: 54ch; margin: 0 0 var(--e-5); }
.acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; }
.letra-chica { color: var(--gris); font-size: var(--t-2); margin-top: var(--e-3); }
.moneda-grande { justify-self: center; width: min(100%, 320px); aspect-ratio: 1; color: var(--oro); }
.moneda-grande svg { width: 100%; height: 100%; display: block; }

/* Fila de promesas, dividida por líneas */
.promesas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--linea) solid var(--borde); }
.promesas div { padding: var(--e-5) var(--e-4); border-left: var(--linea) solid var(--borde); }
.promesas div:first-child { border-left: 0; padding-left: 0; }
.promesas strong { display: block; font: var(--p-fuerte) var(--t-4)/1.3 'Outfit', sans-serif; color: var(--oro); margin-bottom: var(--e-1); }
.promesas span { color: var(--gris); font-size: var(--t-3); }

section { padding: var(--e-7) 0; border-bottom: var(--linea) solid var(--borde); }
section.alt { background: var(--grafito); }
h2 { font: var(--p-fuerte) var(--t-6)/1.25 'Outfit', sans-serif; margin: 0 0 var(--e-2); }
h3 { font: var(--p-fuerte) var(--t-5)/1.3 'Outfit', sans-serif; margin: 0 0 var(--e-2); }
.sub { color: var(--gris); max-width: 64ch; margin: 0 0 var(--e-6); }

/* Contadores: cifras reales */
.contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde); }
.contadores div { padding: var(--e-6) var(--e-4); border-left: var(--linea) solid var(--borde); text-align: center; }
.contadores div:first-child { border-left: 0; }
.cifra { display: block; font: 700 var(--t-6)/1.1 'Outfit', sans-serif; color: var(--oro); font-variant-numeric: tabular-nums; }
.contadores span:last-child { color: var(--gris); font-size: var(--t-3); }

/* Funciones: una sola superficie dividida por líneas */
.funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--linea) solid var(--borde); }
.funciones div { padding: var(--e-5); border-right: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde); }
.funciones div:nth-child(3n) { border-right: 0; }
.funciones div:nth-last-child(-n+3) { border-bottom: 0; }
.funciones h3 { font-size: var(--t-4); color: var(--oro); margin-bottom: var(--e-1); }
.funciones p { color: var(--gris); font-size: var(--t-3); margin: 0; }

/* Dos columnas con ilustración de línea */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
.ilustracion { justify-self: center; color: var(--oro); width: min(100%, 220px); }
.ilustracion svg { width: 100%; height: auto; display: block; }
.dos p { color: var(--gris); }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: var(--e-2) 0; border-bottom: var(--linea) solid var(--borde); color: var(--gris); font-size: var(--t-3); }
.lista li b { color: var(--blanco); font-weight: var(--p-medio); }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linea) solid var(--borde); counter-reset: paso; }
.pasos div { padding: var(--e-5) var(--e-5) 0 0; }
.pasos div + div { padding-left: var(--e-5); border-left: var(--linea) solid var(--borde); }
.pasos div::before { counter-increment: paso; content: counter(paso); display: block; font: 700 var(--t-6)/1 'Outfit', sans-serif; color: var(--oro); margin-bottom: var(--e-3); }
.pasos p { color: var(--gris); font-size: var(--t-3); margin: 0; }

/* Pasarelas */
.pasarelas { display: flex; flex-wrap: wrap; border-top: var(--linea) solid var(--borde); border-left: var(--linea) solid var(--borde); }
.pasarelas span { padding: var(--e-3) var(--e-5); border-right: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde); font: var(--p-medio) var(--t-3) 'Outfit', sans-serif; }

/* Planes */
.planes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: var(--linea) solid var(--borde); }
.plan { padding: var(--e-5) var(--e-4); border-left: var(--linea) solid var(--borde); display: flex; flex-direction: column; gap: var(--e-2); }
.plan:first-child { border-left: 0; }
.plan.destacado { background: var(--oro); color: var(--negro); border-color: var(--oro); }
.plan .nombre { font: var(--p-fuerte) var(--t-5)/1.2 'Outfit', sans-serif; }
.plan .marca-plan { font-size: var(--t-1); color: var(--negro); }
.plan .precio { font: 700 var(--t-6)/1.1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; }
.plan .precio small { font: var(--p-normal) var(--t-3) 'Inter', sans-serif; color: var(--gris); }
.plan.destacado .precio small, .plan.destacado .tramo { color: var(--negro); }
.plan .tramo { color: var(--gris); font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.plan .boton, .plan .boton-borde { margin-top: auto; text-align: center; font-size: var(--t-3); padding: var(--e-2) var(--e-3); }
.plan.destacado .boton { background: var(--negro); color: var(--oro); border-color: var(--negro); }
.incluye { columns: 3; column-gap: var(--e-6); list-style: none; padding: 0; margin: var(--e-5) 0 0; }
.incluye li { break-inside: avoid; padding: var(--e-1) 0; color: var(--gris); font-size: var(--t-3); }
.incluye li b { color: var(--blanco); font-weight: var(--p-medio); }

/* Preguntas */
.preguntas { border-top: var(--linea) solid var(--borde); }
.preguntas details { border-bottom: var(--linea) solid var(--borde); }
.preguntas summary { cursor: pointer; padding: var(--e-4) 0; font: var(--p-fuerte) var(--t-4) 'Outfit', sans-serif; list-style: none; display: flex; justify-content: space-between; gap: var(--e-4); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; color: var(--oro); font-weight: 400; }
.preguntas details[open] summary::after { content: '−'; }
.preguntas p { color: var(--gris); font-size: var(--t-3); margin: 0 0 var(--e-4); max-width: 75ch; }

/* Páginas legales */
.legal { padding: var(--e-7) 0; }
.legal .ancho { max-width: 760px; }
.legal h2 { font-size: var(--t-5); margin: var(--e-6) 0 var(--e-2); }
.legal p, .legal li { color: var(--gris); font-size: var(--t-3); }
.legal ul { padding-left: var(--e-5); }
.legal b { color: var(--blanco); font-weight: var(--p-medio); }

/* Franja final en oro */
.franja { background: var(--oro); color: var(--negro); padding: var(--e-7) 0; text-align: center; }
.franja h2 { margin-bottom: var(--e-3); }
.franja p { margin: 0 0 var(--e-5); }
.franja .boton { background: var(--negro); color: var(--oro); border-color: var(--negro); }

/* Pie */
footer { padding: var(--e-6) 0; color: var(--gris); font-size: var(--t-2); }
footer .ancho { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
footer nav { display: flex; gap: var(--e-4); flex-wrap: wrap; }
footer a { color: var(--gris); }

@media (max-width: 900px) {
    .planes { grid-template-columns: minmax(0, 1fr); }
    .plan { border-left: 0; border-top: var(--linea) solid var(--borde); }
    .plan:first-child { border-top: 0; }
    .incluye { columns: 2; }
}
@media (max-width: 760px) {
    .portada .ancho, .dos { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
    .moneda-grande { width: 180px; }
    .promesas, .contadores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .promesas div:nth-child(odd) { border-left: 0; padding-left: 0; }
    .contadores div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: var(--linea) solid var(--borde); }
    .funciones, .pasos { grid-template-columns: minmax(0, 1fr); }
    .funciones div { border-right: 0; }
    .funciones div:nth-last-child(-n+3) { border-bottom: var(--linea) solid var(--borde); }
    .funciones div:last-child { border-bottom: 0; }
    .pasos div + div { padding-left: 0; border-left: 0; border-top: var(--linea) solid var(--borde); margin-top: var(--e-5); }
    .nav nav a:not(.boton):not(.blanco) { display: none; }
    .incluye { columns: 1; }
}