/* ===== Astor — Tema oscuro portado de Astor.py ===== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cinzel:wght@400;700&family=Inter:wght@400;700;900&family=Montserrat:wght@300;400;600;700;900&family=Special+Elite&display=swap');

:root {
    --bg: #080A0F;
    --sidebar-bg: #050505;
    --text: #FEFFFF;
    --accent: #6BA4A4;
    --accent-soft: #72A5A5;
    --gold: #d4af37;
    --card-bg: #1c2026;
    --card-bg-2: #252932;
    --input-bg: #13161C;
    --expander-bg: #052429;
    --sunset: #E6C200;
    --border: rgba(107, 164, 164, 0.13);
    --green: #34D399;
    --yellow: #FBBF24;
    --red: #F87171;
    --neon-green: #00FF9D;
    --neon-yellow: #FFDD00;
    --neon-red: #FF3131;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #000;
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Marca de agua del logo =====
   Activa UNA opción a la vez para comparar cuál queda mejor.
   Todas usan el mismo patrón base (fixed, repeat, rotado, opacidad baja).
   Opciones disponibles en /static/img/brand/:
     A) logo-ring.png            → solo el aro luminoso, muy sutil
     B) logo-watermark.png       → versión multi-anillo gris (más "marca de agua")
     C) logo-cyan-dark.png       → neón cyan completo con texto
     D) logo-cyan-light.png      → cyan sobre claro (requiere quitar invert)
     E) logo-pink-dark.png       → neón rosa con texto
*/
body::before { display: none; }

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* ===== Navbar ===== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 1rem;
}
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent);
    width: 42px;
    height: 42px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 920px) {
    .navbar { padding: .85rem 1rem; flex-wrap: nowrap; }
    .nav-toggle { display: flex; }
    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--gold);
        flex-direction: column;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .navbar.open .navbar-menu { max-height: 600px; }
    .navbar-menu li { width: 100%; }
    .navbar-menu li a {
        display: block;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border);
        font-size: .95rem;
    }
    .navbar-user { gap: .35rem; flex-shrink: 0; }
    .navbar-user form button, .navbar-user a { font-size: .68rem !important; padding: .35rem .55rem !important; }
    .navbar-brand a { font-size: 1.1rem; letter-spacing: 1px; }
}
.navbar-brand a {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: 2px;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(223, 191, 114, 0.3);
}
.navbar-brand .brand-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.navbar-brand .brand-logo {
    width: 95px;
    height: 95px;
    object-fit: contain;
    border-radius: 50%;
    /*filter: drop-shadow(0 0 8px rgba(64, 224, 208, 0.45));*/
    transition: transform .25s ease, filter .25s ease;
    left: 30px;
    position: relative;
}
.navbar-brand .brand-text {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #d4af37;
    letter-spacing: 4px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    text-transform: uppercase;
}
.navbar-brand .brand-link:hover .brand-logo {
    transform: rotate(-8deg) scale(1.05);
    filter: drop-shadow(0 0 14px rgba(64, 224, 208, 0.7));
}
@media (max-width: 600px) {
    .navbar-brand .brand-logo { width: 34px; height: 34px; }
    .navbar-brand .brand-text { font-size: 1rem; }
}
.navbar-menu {
    list-style: none;
    display: flex;
    gap: 1.75rem;
    margin: 0; padding: 0;
}
.navbar-menu a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    transition: color .15s;
}
.navbar-menu a:hover { color: var(--accent); }
.navbar-user { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--accent); }

/* ===== Hero ===== */
.hero {
    text-align: center;
    padding: 3rem 0 2rem;
}
.hero h1 {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0;
    background: linear-gradient(120deg, var(--text) 0%, var(--accent) 50%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(107, 164, 164, 0.2);
}
.hero .subtitle {
    color: var(--accent);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: .5rem;
}
.hero p { color: var(--text); opacity: 0.75; }

/* ===== HUD Cards (Hub) — animaciones portadas de Astor.py:485-700 ===== */
.hub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin: 3rem auto;
    max-width: 1300px;
}

.hud-card {
    --card-color: var(--accent);
    background: rgba(28, 32, 38, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 40px 30px;
    text-decoration: none;
    color: var(--text);
    position: relative;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.hud-card.gold-card { --card-color: var(--gold); }
.hud-card.green-card { --card-color: var(--green); }
.hud-card.purple-card { --card-color: #A855F7; }

.hud-card:hover {
    border-color: var(--card-color);
    box-shadow: 0 0 70px color-mix(in srgb, var(--card-color) 35%, transparent);
    transform: scale(1.03) translateY(-3px);
    z-index: 10;
}

/* Esquinas tipo HUD */
.hud-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px solid var(--card-color);
    z-index: 5;
    pointer-events: none;
    transition: all .3s;
}
.corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.hud-card:hover .hud-corner {
    box-shadow: 0 0 12px color-mix(in srgb, var(--card-color) 50%, transparent);
}

/* Línea de escaneo (sube y baja) */
.scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--card-color), transparent);
    box-shadow: 0 0 20px var(--card-color);
    z-index: 4;
    pointer-events: none;
    opacity: 0.85;
    top: -10px;
    animation: scan-move 4s ease-in-out infinite alternate;
}
@keyframes scan-move {
    0%   { top: -10px; opacity: 0.6; }
    100% { top: 100%;  opacity: 1; }
}

/* Anillo punteado giratorio */
.tech-ring {
    position: absolute;
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed var(--card-color);
    border-radius: 50%;
    opacity: 0.1;
    animation: rotate-ring 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes rotate-ring { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.hud-card:hover .tech-ring {
    opacity: 0.3;
    border-style: solid;
    border-width: 2px;
}

/* Status labels (top-left + bottom-right) */
.status-label {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6rem;
    color: var(--card-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 4;
    font-weight: bold;
    opacity: 0.7;
    animation: flicker 2s linear infinite;
    pointer-events: none;
}
.stat-tl { top: 14px; left: 22px; }
.stat-br { bottom: 14px; right: 22px; }
@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 0.85; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.25; }
}

/* Ruido / scanlines tipo CRT */
.sc-noise {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.025) 3px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

/* Contenido */
.hud-card-content {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    margin-bottom: auto;
}
.hud-card .label-mini {
    color: var(--card-color);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    opacity: 0.85;
}
.hud-card h2 {
    font-family: 'Cinzel', serif;
    color: var(--text);
    font-size: 2.4rem;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 40%, transparent);
}
.hud-card .question {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0.5rem 0 0;
    max-width: 90%;
}
.hud-card .tech-badge {
    background: transparent;
    color: var(--card-color);
    padding: .55rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--card-color) 40%, transparent);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 1.5rem;
    transition: all .3s;
    border-radius: 4px;
    z-index: 3;
    position: relative;
}
.hud-card:hover .tech-badge {
    background: var(--card-color);
    color: #080A0F;
    box-shadow: 0 0 20px color-mix(in srgb, var(--card-color) 50%, transparent);
}

/* ===== Forms ===== */
.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.form-card h2 {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    margin-top: 0;
    letter-spacing: 1.5px;
    font-size: 1.6rem;
}

.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
}
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=tel],
.form input[type=number],
.form select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .75rem .95rem;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 164, 164, 0.15);
}

/* ===== Number stepper (input numérico con +/-) ===== */
.number-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.number-stepper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 164, 164, 0.15);
}
.number-stepper input[type=number] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: var(--text);
    text-align: center;
    font-size: 1rem;
    font-family: inherit;
    padding: .75rem .5rem;
    -moz-appearance: textfield;
    appearance: textfield;
    box-shadow: none !important;
}
.number-stepper input[type=number]:focus { outline: none; }
.number-stepper input[type=number]::-webkit-outer-spin-button,
.number-stepper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.number-stepper .stepper-btn {
    flex: 0 0 44px;
    background: rgba(107, 164, 164, 0.08);
    border: none;
    color: var(--accent);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
}
.number-stepper .stepper-btn:hover {
    background: rgba(223, 191, 114, 0.15);
    color: var(--gold);
}
.number-stepper .stepper-btn:active { background: rgba(223, 191, 114, 0.25); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 800px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.form .checkbox {
    flex-direction: row;
    align-items: center;
    color: var(--text);
    text-transform: none;
    font-weight: 500;
    font-size: 0.95rem;
}
.form .checkbox input { margin-right: .5rem; }

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: .85rem 1.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .9rem;
    transition: all .25s;
    text-align: center;
}
.btn:active { transform: scale(.98); }
.btn-primary {
    background: rgba(28, 32, 38, 0.8);
    backdrop-filter: blur(10px);
    color: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover {
    background: rgba(28, 32, 38, 0.95);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 8px 30px rgba(223, 191, 114, 0.2);
    transform: translateY(-2px);
}
.btn-gold {
    background: var(--gold);
    color: #080A0F;
    border-color: var(--gold);
    text-shadow: none;
    border-radius: 30px;
}
.btn-gold:hover {
    box-shadow: 0 10px 30px rgba(223, 191, 114, 0.4);
    transform: translateY(-2px);
}
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-cyan {
    background: #22d3ee;
    color: #06121A;
    border-color: #22d3ee;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.45), inset 0 0 12px rgba(255,255,255,0.08);
}
.btn-cyan:hover {
    background: #67e8f9;
    border-color: #67e8f9;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.6);
    transform: translateY(-2px);
}

/* Botón "Acceso miembros" arriba a la derecha */
.btn-member-access {
    color: #d4af37;
    border: 1px solid #d4af37;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    transition: all .2s;
    background: transparent;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.btn-member-access:hover {
    background: #d4af37;
    color: #080A0F;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.35);
    text-shadow: none;
}

/* ===== Sidebar Proyecto Costos: brand mark cyan ===== */
.sidebar-brand {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}
.sidebar-brand-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 50%;
    /*filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.45));*/
    /*animation: brand-pulse 4s ease-in-out infinite;*/
}
.sidebar-brand-mark {
    width: 130px; height: 130px;
    border-radius: 50%;
    border: 2px solid #22d3ee;
    box-shadow:
        0 0 25px rgba(34, 211, 238, 0.45),
        inset 0 0 25px rgba(34, 211, 238, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: brand-pulse 4s ease-in-out infinite;
    color: #fff;
    font-family: 'Special Elite', 'Cinzel', monospace;
    font-size: .9rem;
    letter-spacing: 2px;
}
.sidebar-brand-mark::before {
    content: "";
    position: absolute; inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(34, 211, 238, 0.4);
    animation: brand-rotate 30s linear infinite;
}
.sidebar-brand-mark-top { line-height: 1; }
.sidebar-brand-mark-bottom { font-size: 1.4rem; line-height: 1; margin-top: .25rem; color: #22d3ee; }
.sidebar-h {
    text-align: center;
    color: #fff;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 2px;
    margin: 0 0 .25rem !important;
    text-transform: uppercase;
}
.sidebar-sub {
    text-align: center;
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-size: .7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 1.5rem;
}

/* ===== Sidebar — Edad de retiro fija + lock de avanzados ===== */
.locked-chip {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.4);
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    border-radius: 10px;
    padding: .65rem .85rem;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
}
.adv-locked-hint {
    color: #fff;
    opacity: .55;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-style: italic;
    margin: 0 0 .85rem;
    text-align: center;
}
.adv-locked-hint strong { color: #d4af37; opacity: 1; font-style: normal; }
.adv-locked-banner {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    padding: .65rem .85rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    text-align: center;
    margin: 0 0 1rem;
}
fieldset.adv-fields {
    border: none;
    margin: 0;
    padding: 0;
    transition: opacity .25s ease;
}
fieldset.adv-fields.sidebar-box {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
fieldset.adv-fields.is-locked {
    opacity: .55;
    pointer-events: none;
    position: relative;
}
fieldset.adv-fields.is-locked::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    pointer-events: none;
}

/* ===== Tarjetas principales (Meta / Retiro / Aportación) ===== */
.cost-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 0 0 3rem;
}
@media (max-width: 980px) { .cost-card-row { grid-template-columns: 1fr; } }
.cost-card {
    --c-color: #d4af37;
    --c-rgb: 212, 175, 55;
    background: linear-gradient(145deg, rgba(20,20,20,0.9) 0%, rgba(5,5,5,1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid rgba(var(--c-rgb), 0.35);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
    box-shadow: 0 0 0 rgba(var(--c-rgb), 0);
    opacity: 0;
    transform: translateY(20px);
}
.cost-card.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease, box-shadow .35s, border-color .25s;
}
.cost-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(var(--c-rgb), 0.18), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.cost-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--c-rgb), 0.85);
    box-shadow: 0 0 35px rgba(var(--c-rgb), 0.35), inset 0 0 30px rgba(var(--c-rgb), 0.05);
}
.cost-card:hover::before { opacity: 1; }
.cost-card.gold-card  { --c-color: #d4af37; --c-rgb: 212, 175, 55; }
.cost-card.cyan-card  { --c-color: #22d3ee; --c-rgb: 34, 211, 238; }
.cost-card.white-card { --c-color: #fff;    --c-rgb: 255, 255, 255; border-color: rgba(255,255,255,0.18); }
.cost-card-label {
    color: var(--c-color);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .8rem;
    margin: 0 0 1.25rem;
    text-shadow: 0 0 10px rgba(var(--c-rgb), 0.3);
}
.cost-card.white-card .cost-card-label { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
/* Textos (títulos y subtítulos) en blanco; montos por posición: izquierda
   dorado, derecha cyan (igual que el PDF). */
.cost-card-row .cost-card:nth-child(odd)  { --c-color: #d4af37; --c-rgb: 212, 175, 55; }
.cost-card-row .cost-card:nth-child(even) { --c-color: #22d3ee; --c-rgb: 34, 211, 238; }
.cost-card-label, .cost-card-sub,
.cost-card.white-card .cost-card-label { color: #fff !important; }
.cost-card-value {
    color: var(--c-color);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    letter-spacing: -.02em;
    line-height: 1;
    text-shadow:
        0 0 12px rgba(var(--c-rgb), 0.35),
        0 0 28px rgba(var(--c-rgb), 0.18);
    transition: text-shadow .35s ease, transform .35s ease;
}
.cost-card:hover .cost-card-value {
    transform: scale(1.04);
    text-shadow:
        0 0 18px rgba(var(--c-rgb), 0.55),
        0 0 40px rgba(var(--c-rgb), 0.3);
}
.cost-card-sub {
    margin-top: .55rem;
    color: var(--c-color);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .82;
    text-shadow: 0 0 10px rgba(var(--c-rgb), 0.3);
}

/* ===== Overlay "Analizando tu libertad financiera" ===== */
.analisis-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgba(3, 7, 12, 0.92);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}
.analisis-loader.is-active {
    opacity: 1;
    visibility: visible;
}
.analisis-loader__core {
    position: relative;
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
}
.analisis-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(34, 211, 238, 0.12);
    border-top-color: #22d3ee;
    border-right-color: #d4af37;
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.35), inset 0 0 22px rgba(34, 211, 238, 0.18);
    animation: analisis-spin 1s linear infinite;
}
.analisis-loader__pct {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.1rem;
    color: #22d3ee;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.6);
    animation: analisis-pulse 1.6s ease-in-out infinite;
}
.analisis-loader__text {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: .28em;
    font-size: .95rem;
    color: #fefeff;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(34, 211, 238, 0.3);
    animation: analisis-pulse 1.6s ease-in-out infinite;
}
.analisis-loader__dots::after {
    content: '';
    animation: analisis-dots 1.4s steps(4, end) infinite;
}
@keyframes analisis-spin { to { transform: rotate(360deg); } }
@keyframes analisis-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes analisis-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
    .analisis-loader__ring { animation-duration: 2s; }
    .analisis-loader__pct,
    .analisis-loader__text { animation: none; opacity: 1; }
}

/* ===== Story block: "Deja de comprar el mismo retiro cada vez más caro" ===== */
.story-block {
    text-align: center;
    max-width: 980px;
    margin: 4rem auto 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.story-block.in-view { opacity: 1; transform: none; }
.story-greeting {
    color: #d4af37;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    margin: 0 0 .75rem;
    line-height: 1.1;
}
.story-eyebrow {
    color: #fff;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    font-size: .95rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.story-h2 {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.45;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    max-width: 760px;
    margin: 0 auto;
}
.story-h2 .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
}

/* ===== Narrative flow: 1, 2, 3 ===== */
.narrative-flow {
    max-width: 880px;
    margin: 3rem auto;
    text-align: center;
}
.narrative-step {
    padding: 2rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.narrative-step.in-view { opacity: 1; transform: none; }
.narrative-num {
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    margin: 0 0 .75rem;
}
.narrative-num .w-gold,
.never-ends-title .w-gold { color: #d4af37; text-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }
.narrative-body {
    color: #d1d5db;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.35;
    max-width: 640px;
    margin: 0 auto;
}
.narrative-body .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
    font-weight: 900;
}
.narrative-body .cyan-em.big { font-size: 1.05em; }
.narrative-note {
    margin: 1rem 0 0;
    color: #fff;
    opacity: .55;
    font-style: italic;
    font-size: .95rem;
}
.narrative-divider {
    width: 1px; height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(34, 211, 238, 0.4));
    margin: 0 auto 1.5rem;
}

/* ===== El dinero nunca se acaba ===== */
.never-ends {
    max-width: 880px;
    margin: 3rem auto;
    padding: 2.5rem 2.25rem;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 20px;
    background: rgba(255,255,255,0.02);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(34, 211, 238, 0.07);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease, border-color .35s ease, box-shadow .35s ease;
}
.never-ends.in-view { opacity: 1; transform: none; }
.never-ends:hover {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 45px rgba(34, 211, 238, 0.18);
}
.never-ends-title {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    letter-spacing: -.02em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}
.never-ends-body {
    color: #fff;
    opacity: .9;
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}
.never-ends-em {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: clamp(.95rem, 1.4vw, 1.125rem);
    margin: 1.5rem 0 0;
    animation: never-ends-pulse 3s ease-in-out infinite;
}
@keyframes never-ends-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ===== Aportación final ===== */
.aporte-final {
    text-align: center;
    margin: 4rem auto 3rem;
    max-width: 880px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.aporte-final.in-view { opacity: 1; transform: none; }
.aporte-eyebrow {
    color: #fff;
    opacity: .55;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .8rem;
    font-weight: 800;
    margin: 0 0 .85rem;
}
.aporte-italic {
    color: #fff;
    opacity: .8;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1rem;
    margin: 0 0 1.25rem;
}
.aporte-amount {
    color: #d4af37;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 8.5vw, 6rem);
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: 2rem;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    animation: aporte-pulse 3.5s ease-in-out infinite;
}
@keyframes aporte-pulse {
    0%, 100% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.55), 0 0 50px rgba(212, 175, 55, 0.25); }
    50%      { text-shadow: 0 0 28px rgba(212, 175, 55, 0.78), 0 0 65px rgba(212, 175, 55, 0.42); }
}
.aporte-note {
    color: #fff;
    opacity: .55;
    font-style: italic;
    font-size: .85rem;
    line-height: 1.6;
    max-width: 760px;
    margin: 2rem auto 0;
}

/* ===== Telemetría "Análisis de Rendimiento Real" ===== */
.telemetria-card {
    background: #0c0c0e;
    border: 1px solid rgba(63, 63, 70, 0.8);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    margin: 3rem auto 0;
    max-width: 760px;
    text-align: left;
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.04),
        0 0 40px rgba(34, 211, 238, 0.06);
}
.telemetria-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid rgba(39, 39, 42, 0.7);
}
.telemetria-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
    animation: telemetria-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes telemetria-dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.telemetria-label {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: .72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
}
.telemetria-body p {
    color: #d4d4d8;
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 600;
    margin: 0 0 1.25rem;
}
.telemetria-body p:last-child { margin-bottom: 0; }
.telemetria-body .gold-em { color: #d4af37; font-weight: 900; }
.telemetria-body .cyan-em { color: #22d3ee; font-weight: 900; }
.telemetria-body .white-em { color: #fff; font-weight: 900; }
.telemetria-quote {
    border-left: 4px solid #22d3ee;
    background: rgba(34, 211, 238, 0.025);
    border-radius: 0 10px 10px 0;
    padding: .85rem 1.1rem;
    margin: 0;
}
.telemetria-quote p { margin: 0; }

/* ===== Costo de Postergar — sección ===== */
.cost-section {
    max-width: 1180px;
    margin: 4rem auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.cost-section.in-view { opacity: 1; transform: none; }
.cost-section-title {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: -.02em;
    margin: 0 0 1rem;
}
.cost-section-sub {
    color: #22d3ee;
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.55);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(1.15rem, 2.5vw, 1.75rem);
    margin: 0 0 2rem;
}
.cost-section-lede {
    color: #fff;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    font-size: .95rem;
    margin: 0 0 2.5rem;
}
.cost-section-lede .loss-em {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
    border-bottom: 1px solid rgba(248, 113, 113, 0.6);
    padding-bottom: 1px;
}
.loss-em {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

.cost-table-wrap {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 0 1.25rem 1.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    overflow: visible;
}
/* En móvil las tablas anchas necesitan scroll horizontal (el header sticky
   contra la página solo aplica en desktop, donde .app-main es el scroller). */
@media (max-width: 1024px) {
    .cost-table-wrap, .table-wrap { overflow-x: auto; }
}
.cost-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
}
.cost-table thead th {
    text-align: left;
    padding: 1.25rem 1.25rem 1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    position: sticky;
    top: -25px;
    z-index: 5;
    background: #0b0b0b;
}
.cost-table thead th.th-gold {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.cost-table tbody td {
    padding: 1.15rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    transition: background .2s ease;
}
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-table tbody tr:hover td { background: rgba(34, 211, 238, 0.04); }
.cost-table .num { font-variant-numeric: tabular-nums; }
.cost-table .gold-num { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.cost-table .loss-num { color: #f87171; text-shadow: 0 0 12px rgba(248, 113, 113, 0.3); font-weight: 800; }
.cost-table .muted-em { color: #fff; opacity: .35; }
.cost-table .cost-row-now td {
    background: rgba(34, 211, 238, 0.05);
    padding: 2.25rem 1.25rem;
    font-size: 1.1rem;
}
.cost-table .pulse-cell { animation: white-glow-pulse 4s infinite ease-in-out; }
@keyframes white-glow-pulse {
    0%, 100% { color: rgba(255,255,255,0.2); text-shadow: 0 0 0 rgba(255,255,255,0); }
    50%      { color: rgba(255,255,255,1); text-shadow: 0 0 15px #fff, 0 0 30px rgba(255,255,255,0.4); }
}
.cost-table .pulse-cell.gold-num { animation: gold-glow-pulse 4s infinite ease-in-out; }
@keyframes gold-glow-pulse {
    0%, 100% { color: rgba(212,175,55,0.3); text-shadow: 0 0 0 rgba(212,175,55,0); }
    50%      { color: #d4af37; text-shadow: 0 0 15px rgba(212,175,55,0.7); }
}
.cost-section-lede .loss-em-box {
    border: 1px solid rgba(248, 113, 113, 0.4);
    padding: .15rem .5rem;
    border-radius: 6px;
}
.white-em { color: #fff !important; font-weight: 900; }
.cost-section-foot {
    color: #fff;
    opacity: .45;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .72rem;
    font-weight: 700;
    margin: 1.75rem 0 0;
    text-align: left;
    padding: 0 1rem;
}
@media (max-width: 720px) {
    .cost-table thead th, .cost-table tbody td { padding: .75rem .65rem; font-size: .85rem; }
    .cost-table thead th { font-size: .65rem; letter-spacing: .08em; }
}

/* ===== Tracking strip + banners (Proyecto Costos) ===== */
.track-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 0 0 1.25rem;
}
.track-strip .chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.track-strip .chip.cyan {
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.35);
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}
.track-strip .chip.gold {
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.4);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.track-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    margin: 0 0 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
}
.track-banner .track-icon {
    font-size: 1.6rem;
    line-height: 1.1;
    flex-shrink: 0;
}
.track-banner .track-body { flex: 1; }
.track-banner .track-body p { margin: .25rem 0 0; line-height: 1.55; }

.track-banner-blocked {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.06);
}
.track-banner-blocked strong {
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .9rem;
}
.track-banner-blocked p { color: #fff; opacity: .85; }

.track-banner-cost {
    border-color: rgba(34, 211, 238, 0.35);
    border-left: 3px solid #22d3ee;
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.08);
}
.track-banner-cost .track-eyebrow {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 800;
}
.track-banner-cost .track-eyebrow strong { color: #fff; text-shadow: none; }
.track-banner-cost .track-headline {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.55;
}
.track-banner-cost .track-headline .cyan-em { font-weight: 800; }
.track-banner-cost .gold-em-inline {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-weight: 800;
}
.track-banner-cost .track-loss {
    color: #fff;
    opacity: .85;
    font-size: .95rem;
    line-height: 1.55;
    border-top: 1px dashed rgba(34, 211, 238, 0.25);
    padding-top: .65rem;
    margin-top: .65rem !important;
}
.track-banner-cost .track-loss .loss {
    color: #f87171;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
}

/* ===== Métricas / Cards de resultado ===== */
.metric-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.metric-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-top: 5px solid #d4af37;
    border-radius: 14px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
}
.metric-card.accent {
    border-color: rgba(34, 211, 238, 0.55);
    border-top-color: #22d3ee;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 25px rgba(34, 211, 238, 0.12);
}
.metric-card.green {
    border-color: rgba(34, 211, 238, 0.55);
    border-top-color: #22d3ee;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 25px rgba(34, 211, 238, 0.12);
}
.metric-card .label {
    color: var(--text);
    opacity: 0.55;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: 700;
}
.metric-card .value {
    color: #d4af37;
    font-size: 2.3rem;
    font-weight: 800;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-family: 'Inter', 'Montserrat', sans-serif;
}
.metric-card.accent .value { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.metric-card.green .value  { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.metric-card .sublabel { font-size: 0.85rem; opacity: 0.85; font-weight: 600; }

/* ===== Narrative block ===== */
.narrative {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-top: 5px solid #22d3ee;
    border-radius: 14px;
    padding: 2rem;
    margin: 2.5rem 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
    position: relative;
    overflow: hidden;
    font-size: 1.15rem;
    line-height: 1.65;
    backdrop-filter: blur(8px);
}
.narrative::before {
    content: "";
    position: absolute; top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle at top right, rgba(34, 211, 238, 0.18), transparent 70%);
    pointer-events: none;
}
.narrative .accent { color: #d4af37; font-weight: 800; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.narrative .green { color: #22d3ee; font-weight: 800; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.narrative .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), transparent);
    margin: 1.5rem auto;
    width: 70%;
}

/* ===== Tablas ===== */
.section-title {
    text-align: center;
    margin: 3rem 0 1rem;
}
.section-title h3 {
    font-family: 'Cinzel', serif;
    color: var(--text);
    border-bottom: 2px solid #d4af37;
    display: inline-block;
    padding-bottom: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.section-title .lede {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-size: 1rem;
    margin-top: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.section-title .note {
    color: var(--text);
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 5px;
    max-width: 800px;
    margin-left: auto; margin-right: auto;
}

.table-wrap {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 0 0.5rem 0.5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    margin-bottom: 2rem;
    overflow: visible;
    backdrop-filter: blur(8px);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', 'Montserrat', sans-serif;
}
.data-table th {
    padding: 1rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-align: center;
    font-weight: 800;
    position: sticky;
    top: -10px;
    z-index: 5;
    background: #0b0b0b;
    border-bottom: 2px solid #d4af37;
}
.data-table td {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text);
}
.data-table tr.highlight-now {
    background-color: rgba(34, 211, 238, 0.07);
    border-bottom: 2px solid rgba(34, 211, 238, 0.25);
}
.data-table tr.highlight-now td {
    color: #22d3ee !important;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-weight: 800;
    text-transform: uppercase;
}
.data-table tr.highlight-60 td {
    background-color: rgba(212, 175, 55, 0.08) !important;
    color: #d4af37 !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-weight: 800;
}
.data-table tr:nth-child(even) td { background-color: rgba(255,255,255,0.02); }
.data-table .num { font-family: 'Inter', 'Montserrat', sans-serif; font-weight: 800; }
.data-table .pos { color: #22d3ee; font-weight: 700; }
.data-table .neg { color: #ff4b4b; font-weight: 700; }

/* Columnas de detalle: ocultas hasta que el toggle agrega .show-detalle */
.data-table .col-detalle { display: none; }
.data-table.show-detalle .col-detalle { display: table-cell; }

.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
.btn-detalle {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.45);
    color: #22d3ee;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-detalle:hover {
    background: rgba(34, 211, 238, 0.16);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin: 1.5rem 0 1rem;
    flex-wrap: wrap;
}
.tab-btn {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all .15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
}
.tab-btn:hover { color: #22d3ee; }
.tab-btn.active {
    color: #d4af37;
    border-bottom-color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.tab-content { display: none; padding: 1rem 0; }
.tab-content.active { display: block; }

/* ===== Alerts ===== */
.alert {
    padding: 0.85rem 1.15rem;
    border-radius: 8px;
    margin: 1rem 0;
    border-left: 4px solid;
}
.alert-error {
    background: rgba(248, 113, 113, 0.08);
    border-color: var(--red);
    color: var(--red);
}
.alert-success {
    background: rgba(52, 211, 153, 0.08);
    border-color: var(--green);
    color: var(--green);
}
.alert ul { margin: 0; padding-left: 1.25rem; }

/* ===== Semáforo (Planificador) ===== */
.semaforo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.glass-card {
    background: rgba(28, 32, 38, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.glass-card.astor-card  { border-left: 8px solid var(--gold); }
.glass-card.semaforo-green  { border-left: 8px solid var(--green); box-shadow: 0 0 25px rgba(52, 211, 153, 0.2); }
.glass-card.semaforo-yellow { border-left: 8px solid var(--yellow); box-shadow: 0 0 25px rgba(251, 191, 36, 0.2); }
.glass-card.semaforo-red    { border-left: 8px solid var(--red); box-shadow: 0 0 25px rgba(248, 113, 113, 0.2); }

.glass-card h4 {
    margin: 0 0 .5rem;
    color: var(--gold);
    font-size: 1.05rem;
}
.glass-card .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem 0;
    font-size: .9rem;
}
.glass-card .row .label-small {
    color: var(--accent);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: 1px;
}
.glass-card .row .val {
    color: var(--gold);
    font-weight: 700;
    font-family: 'Cinzel', serif;
}
.glass-card .estatus { margin-top: .5rem; font-weight: 700; font-size: .9rem; }
.glass-card.semaforo-green .estatus  { color: var(--green); }
.glass-card.semaforo-yellow .estatus { color: var(--yellow); }
.glass-card.semaforo-red .estatus    { color: var(--red); }

/* ===== Misc ===== */
.muted { color: var(--text); opacity: 0.7; font-size: .9rem; }
.code {
    background: var(--input-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: .85rem;
    color: var(--gold);
}

.htmx-indicator { display: none; padding: .5rem 0; color: var(--accent); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

.footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text);
    opacity: 0.5;
    border-top: 1px solid var(--border);
    background: rgba(5, 5, 5, 0.6);
    font-size: .8rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

/* ===== Auth card ===== */
.auth-card {
    max-width: 420px;
    margin: 4rem auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--gold);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.auth-card h2 {
    margin-top: 0;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    letter-spacing: 1.5px;
}

/* ===== Plotly tweak ===== */
.plot-container { background: var(--card-bg); padding: 1rem; border-radius: 12px; border: 1px solid var(--border); }

/* ===== Tab "Costo total por indecisión" — narrativa + gráfica ===== */
.postergar-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    letter-spacing: 1px;
    color: #fff;
    margin: 1.25rem 0 1.75rem;
    text-transform: uppercase;
}
.postergar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
.postergar-chart { background: transparent; border: none; padding: 0; }
.postergar-narrative {
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.postergar-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 .5rem;
}
.postergar-headline .loss-em {
    font-style: italic;
    text-shadow: 0 0 18px rgba(248, 113, 113, 0.45);
}
.postergar-narrative p {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0;
    color: #e5e7eb;
}
.postergar-narrative p strong { color: #fff; }
.postergar-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .75rem;
}
.postergar-cta,
.postergar-recalc {
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}
.postergar-recalc { font-size: .9rem; }
@media (max-width: 900px) {
    .postergar-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .postergar-headline { text-align: center; }
    .postergar-narrative { text-align: center; }
}

/* ===== Layout sidebar + main (clon Streamlit Astor) ===== */
.app-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    height: calc(100vh - 76px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .app-layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .app-sidebar { min-width: 0; border-right: none; border-bottom: 1px solid var(--border); padding: 1.5rem 1rem; height: auto !important; overflow: visible !important; }
    .app-main { padding: 1.5rem 1rem 2rem; height: auto !important; overflow: visible !important; }
    .app-main h1.title { font-size: clamp(2rem, 8vw, 3.5rem); }
}
.app-sidebar {
    background: #050505;
    border-right: 1px solid rgba(34, 211, 238, 0.12);
    padding: 2rem 1.5rem;
    min-width: 360px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: #050505; }
.app-sidebar::-webkit-scrollbar-thumb { background: #22d3ee; border-radius: 10px; }
.app-main {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-main::-webkit-scrollbar { width: 6px; }
.app-main::-webkit-scrollbar-track { background: #050505; }
.app-main::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.5); border-radius: 10px; }
.app-sidebar .brand-img {
    width: 100%;
    max-width: 240px;
    margin: 0 auto 1.5rem;
    display: block;
    opacity: 0.95;
    filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.35));
}
.app-sidebar h2 {
    color: var(--text);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 1rem 0 .25rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(254,255,255,0.2);
}
.app-sidebar h3 {
    color: var(--text);
    font-size: 1.05rem;
    margin: 0 0 1.25rem;
    font-weight: 600;
    opacity: .85;
}
.app-sidebar .live-label {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    display: block;
}
.app-sidebar .live-value {
    color: #d4af37;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .35rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.app-sidebar .field-group { margin-bottom: 1.25rem; }
.app-sidebar input[type=number],
.app-sidebar select {
    width: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: 1rem;
    transition: all .25s ease;
}
.app-sidebar input[type=number]:focus,
.app-sidebar select:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}
.app-sidebar hr { border: none; height: 1px; background: rgba(34, 211, 238, 0.15); margin: 1.25rem 0; }
.app-sidebar .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.app-sidebar .row-3 { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: .5rem; }
.app-sidebar .edad-detected {
    color: rgba(255, 255, 255, 0.6);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-style: italic;
    margin: .55rem 0 0;
    padding: 0;
}
.app-sidebar .edad-detected span { color: #d4af37; font-weight: 900; text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }

/* Stepper de Retiro Mensual en sidebar */
.renta-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.renta-stepper:focus-within {
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}
.renta-stepper .renta-prefix {
    color: #d4af37;
    font-weight: 900;
    padding: 0 .5rem 0 .8rem;
    display: flex;
    align-items: center;
    font-size: .95rem;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}
.renta-stepper .renta-btn {
    background: transparent;
    border: none;
    color: #22d3ee;
    width: 32px;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.renta-stepper .renta-btn:hover { color: #fff; background: rgba(34, 211, 238, 0.08); }
.renta-stepper .renta-btn:active { transform: scale(.94); }
.renta-stepper input[type=number] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    padding: .7rem .25rem !important;
    -moz-appearance: textfield;
}
.renta-stepper input[type=number]::-webkit-outer-spin-button,
.renta-stepper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Toggle Blindar Poder Adquisitivo */
.blindar-toggle { margin: 1rem 0 0; padding: .85rem 0 0; border-top: 1px solid rgba(255,255,255,0.05); }
.blindar-label {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    user-select: none;
}
.blindar-label input[type=checkbox] { position: absolute; left: -9999px; }
.blindar-track {
    position: relative;
    width: 36px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    transition: background .25s;
    flex-shrink: 0;
}
.blindar-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: left .25s, background .25s;
}
.blindar-label input:checked + .blindar-track { background: rgba(34, 211, 238, 0.4); }
.blindar-label input:checked + .blindar-track .blindar-thumb {
    left: 22px;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}
.blindar-text {
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .68rem;
    font-weight: 900;
}
.blindar-hint {
    color: rgba(255,255,255,0.3);
    font-size: .58rem;
    text-transform: uppercase;
    font-style: italic;
    margin: .4rem 0 0;
    line-height: 1.3;
}
.app-sidebar .secret-shield {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #22d3ee;
    padding: .65rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    width: 50px;
    transition: all .2s;
}
.app-sidebar .secret-shield:hover { border-color: #d4af37; color: #d4af37; }

.app-main {
    padding: 2rem 2.5rem 3rem;
    overflow-x: auto;
    background: #000;
}
.app-main h1.title {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
    color: var(--text);
    text-shadow: 0 0 25px rgba(254,255,255,0.18);
}
.app-main .subtitle-gold {
    text-align: center;
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    margin: .5rem 0 2rem;
}

/* Tab títulos en gold con borde */
.tab-section-title {
    text-align: center;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    margin: 1.5rem 0 .75rem;
}
.alert-success-banner {
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.4);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    color: var(--text);
    margin: 1rem 0 1.5rem;
}
.alert-success-banner .accent { color: var(--green); font-weight: 800; }

/* ===== Utilidades home ===== */
.typewriter { font-family: 'Special Elite', monospace; }
.glow-incandescent { text-shadow: 0 0 12px rgba(212, 175, 55, 0.6); }
.white-em { color: #fff; font-weight: 700; }
.italic { font-style: italic; }

/* ===== HOME / Landing de marketing ===== */
.home-hero {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    position: relative;
}

/* Brand mark circle (hero) */
.brand-mark {
    width: 250px;
    height: 250px;
    margin: 0 auto 1.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-mark-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    /*filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.45));
    animation: brand-pulse 4s ease-in-out infinite;*/
}
@keyframes brand-pulse {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.45)); }
    50%      { filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.7)); }
}

.home-eyebrow {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
}
.home-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5.4vw, 3.6rem);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.08;
    color: var(--text);
    text-transform: uppercase;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.home-hero h1 .highlight {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}
.home-hero p.lead {
    font-size: 1.35rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 1.5rem auto 0;
    color: var(--text);
    font-weight: 300;
    padding: .5rem 0 .5rem 1.25rem;
    text-align: center;
}
.home-cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.btn-xl { padding: 1.1rem 2.5rem; font-size: 1.05rem; }

/* Sección estadística debajo del hero */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 3rem auto 4rem;
    padding: 1.5rem;
    background: rgba(28, 32, 38, 0.65);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}
.stats-bar .stat {
    text-align: center;
    padding: .75rem;
    border-right: 1px solid var(--border);
}
.stats-bar .stat:last-child { border-right: none; }
@media (max-width: 700px) { .stats-bar .stat { border-right: none; border-bottom: 1px solid var(--border); } .stats-bar .stat:last-child { border-bottom: none; } }
.stats-bar .stat .num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #d4af37;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.stats-bar .stat .desc {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: .25rem;
}

/* Sección de pasos / cómo funciona */
.section-block {
    max-width: 1200px;
    margin: 5rem auto;
    padding: 0 1rem;
    text-align: center;
}
.section-block h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    color: var(--text);
    letter-spacing: 2px;
    margin: 0;
}
.section-block h2 .gold-em { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.section-block p.section-lede {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .95rem;
    margin-top: .5rem;
    font-weight: 700;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.step-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.step-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}
.step-card .step-num {
    font-family: 'Special Elite', monospace;
    font-size: 3rem;
    color: #22d3ee;
    line-height: 1;
    margin-bottom: .5rem;
    animation: pulse-cyan 3s infinite ease-in-out;
}
@keyframes pulse-cyan {
    0%, 100% {
        text-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
        opacity: 0.85;
    }
    50% {
        text-shadow: 0 0 25px rgba(34, 211, 238, 1), 0 0 40px rgba(34, 211, 238, 0.4);
        opacity: 1;
    }
}
.step-card p strong { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.step-card p em { color: #fff; opacity: 0.95; }
.step-card h3 {
    color: #fff;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: .75rem 0 .75rem;
    letter-spacing: .5px;
}
.step-card p {
    color: #9ca3af;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    font-size: .9rem;
}

/* Bloque de propuesta destacada */
.value-prop {
    max-width: 1100px;
    margin: 5rem auto;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(28,32,38,0.95) 0%, rgba(8,10,15,0.95) 100%);
    border: 1px solid var(--gold);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.value-prop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(223,191,114,0.12), transparent 50%);
    pointer-events: none;
}
.value-prop h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--gold);
    letter-spacing: 1.5px;
    margin: 0 0 1rem;
}
.value-prop p {
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    opacity: 0.92;
}

/* Diferenciadores en grid 2x2 */
.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
}
.diff-card {
    background: rgba(28, 32, 38, 0.7);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 1.5rem;
}
.diff-card.gold { border-left-color: var(--gold); }
.diff-card.green { border-left-color: var(--green); }
.diff-card .icon {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: .5rem;
    display: block;
}
.diff-card h4 {
    color: var(--text);
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}
.diff-card p { color: var(--text); opacity: 0.8; font-size: .95rem; line-height: 1.55; margin: 0; }

/* Testimonio / quote */
.quote-block {
    max-width: 850px;
    margin: 5rem auto;
    padding: 2rem 2.5rem;
    text-align: center;
    border-left: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    background: rgba(28, 32, 38, 0.55);
}
.quote-block blockquote {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text);
    letter-spacing: 1px;
    font-style: italic;
}
.quote-block .quote-source {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: .85rem;
    margin-top: 1.25rem;
}

/* CTA final */
.final-cta {
    text-align: center;
    margin: 5rem auto 3rem;
    padding: 3rem 2rem;
    max-width: 900px;
    background: rgba(28, 32, 38, 0.55);
    border: 1px solid var(--border);
    border-radius: 18px;
}
.final-cta h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    color: #d4af37;
    margin: 0 0 .5rem;
    letter-spacing: 1.5px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.final-cta .final-eyebrow {
    color: var(--text);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: .8rem;
    margin: 0 0 1.5rem;
}
.final-cta .final-quote {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    opacity: 0.85;
    max-width: 720px;
    font-style: italic;
}
.final-cta .final-quote strong { color: #22d3ee; font-style: normal; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
/* Título final multicolor (diseño image 13) */
.final-cta h2.final-h2-multi { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,0.12); }
.final-cta h2.final-h2-multi .loss-em { color: #ff4b4b; text-shadow: 0 0 16px rgba(255,75,75,0.45); }
.final-cta h2.final-h2-multi .cyan-em { color: #22d3ee; text-shadow: 0 0 16px rgba(34,211,238,0.45); }
/* Cita final con color por término */
.final-cta .final-quote .q-white { color: #fff; font-style: normal; font-weight: 800; }
.final-cta .final-quote .q-cyan  { color: #22d3ee; font-style: normal; font-weight: 800; text-shadow: 0 0 15px rgba(34,211,238,0.3); }
.final-cta .final-quote .q-red   { color: #ff4b4b; font-style: normal; font-weight: 800; text-shadow: 0 0 15px rgba(255,75,75,0.3); }
.final-cta .final-quote .q-gold  { color: #d4af37; font-style: normal; font-weight: 800; text-shadow: 0 0 12px rgba(212,175,55,0.3); }
.final-cta-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .final-cta-row { flex-direction: column; align-items: stretch; }
}

/* ===== Bloque Allianz / Filtro de Selección Riguroso ===== */
.allianz-block {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 2.75rem 2.5rem;
    background: linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(10,30,40,1) 50%, rgba(5,5,5,1) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1.7fr 1px 1fr;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
}
.allianz-divider {
    width: 1px;
    height: 75%;
    align-self: center;
    background: linear-gradient(to bottom, transparent, #27272a, transparent);
}
@media (max-width: 900px) {
    .allianz-block { grid-template-columns: 1fr; padding: 2rem 1.25rem; margin: 3rem 1rem; }
    .allianz-divider { display: none; }
}
.allianz-tags {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.allianz-tags .tag {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: .35rem .75rem;
    border-radius: 4px;
}
.allianz-tags .tag-cyan {
    background: #22d3ee;
    color: #06121A;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}
.allianz-tags .tag-muted {
    color: var(--text);
    opacity: 0.6;
}
.allianz-h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 1.25rem;
    line-height: 1.1;
}
.allianz-h2 .cyan-em { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.allianz-body {
    color: var(--text);
    line-height: 1.65;
    margin: 0 0 1rem;
    font-size: 1rem;
    opacity: 0.92;
}
.allianz-body.subtle { opacity: 0.65; font-size: .9rem; font-style: italic; }
.allianz-body strong { color: var(--text); }
.allianz-body em { color: #22d3ee; font-style: italic; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.allianz-body strong, .home-hero p.lead strong { color: #22d3ee; font-style: italic; }
.allianz-stats {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-left: 1.5rem;
}
.allianz-stat {
    border-left: 4px solid #22d3ee;
    padding-left: 1rem;
}
@media (max-width: 900px) {
    .allianz-stats { border-top: 1px solid var(--border); padding-left: 0; padding-top: 1.5rem; }
}
.allianz-stat .label {
    display: block;
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.allianz-stat .value {
    display: block;
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.allianz-stat .value .hl-cyan { color: #22d3ee; text-shadow: 0 0 12px rgba(34,211,238,0.35); }
.allianz-stat .value .hl-gold { color: #d4af37; text-shadow: 0 0 12px rgba(212,175,55,0.35); }

/* Certificado de auditoría — medalla rosette + eyebrow cyan (diseño 1.20) */
.allianz-cert {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.allianz-cert-medal svg { width: 72px; height: 99px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.allianz-cert-text {
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .82rem;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(34,211,238,0.35);
}
.allianz-h2 .allianz-h2-line2 {
    display: block;
    margin-top: .25rem;
    text-shadow: 0 0 25px rgba(34,211,238,0.45);
}
.allianz-body strong { color: #22d3ee; font-style: normal; font-weight: 700; }

/* ===== Proyecto Costos — Calculadora de Libertad ===== */
.costos-page {
    background-color: #050505;
    background-image: radial-gradient(circle at 50% 50%, #0a1a1f 0%, #050505 70%);
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    margin: -1.5rem -1.25rem -2.5rem;
    position: relative;
    z-index: 2;
}

.costos-wrap {
    width: 100%;
    max-width: 720px;
}
.costos-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.costos-h1 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
}
.cyan-em { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
#renta-live-amt { font-size: 0.7rem; }
.costos-retire-hint {
    color: #d4af37;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    margin: 0 0 1.55rem;
    line-height: 1.4;
}
.phone-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .5rem;
}
.phone-row .phone-code {
    padding-right: 1.75rem;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: .82rem;
}
.phone-row .phone-number { width: 100%; }
@media (max-width: 480px) {
    .phone-row { grid-template-columns: 100px 1fr; }
}
.costos-eyebrow {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: -.02em;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    margin: 1rem 0 0;
    font-family: 'Special Elite', 'Cinzel', monospace;
    font-weight: 400;
}

.costos-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    position: relative;
    overflow: hidden;
}
.costos-card-shine {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}
.costos-card-h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    color: #d4af37;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 2.5rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.costos-alert-box {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    margin: 0 0 2.5rem;
}
.costos-alert-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.costos-alert-box li {
    color: #ef4444;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .82rem;
    line-height: 1.4;
}
.costos-alert-box .costos-alert-icon {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}

.costos-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.costos-form label,
.costos-form .block-label {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.costos-row {
    display: grid;
    gap: 2rem;
}
.costos-row.two { grid-template-columns: 1fr 1fr; }
.costos-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
    .costos-row.two, .costos-row.three { grid-template-columns: 1fr; gap: 1.25rem; }
}
.costos-label {
    display: block;
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.costos-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    transition: all .25s ease;
    box-shadow: none;
}
.costos-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    letter-spacing: .08em;
}
.costos-input:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}
.costos-input.upper { text-transform: uppercase; }
.costos-input.center { text-align: center; }
.costos-input.heavy { font-size: 1.05rem; font-weight: 900; }

select.costos-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
select.costos-input option { background: #050505; color: #fff; }

.costos-cta {
    width: 100%;
    background: #22d3ee;
    color: #000;
    border: none;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    font-family: inherit;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .85rem;
    cursor: pointer;
    margin-top: .5rem;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
    transition: all .3s ease;
}
.costos-cta:hover {
    background: #06b6d4;
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.5);
}

.costos-foot-note {
    text-align: center;
    color: #4b5563;
    font-size: 10px;
    margin: 2rem 0 0;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
}

/* Stepper en form Proyecto Costos */
.costos-stepper {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s ease;
}
.costos-stepper:focus-within {
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}
.costos-stepper .costos-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 1rem .5rem;
}
.costos-stepper .stepper-btn {
    background: transparent;
    border: none;
    color: #22d3ee;
    font-size: 1.4rem;
    font-weight: 800;
    width: 48px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
}
.costos-stepper .stepper-btn:hover {
    background: rgba(34, 211, 238, 0.12);
    color: #fff;
}
.costos-stepper .stepper-btn:active { background: rgba(34, 211, 238, 0.25); }

.costos-cta.inline {
    display: inline-flex;
    width: auto;
    padding: 1rem 2.25rem;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ===== Brand pages: About / FAQs ===== */
.brand-page {
    background: #000;
    min-height: calc(100vh - 80px);
    padding: 3rem 1rem;
    margin: -1.5rem -1.25rem -2.5rem;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}
.brand-page-wrap {
    width: 100%;
    max-width: 880px;
}
.brand-page-wrap.narrow { max-width: 760px; }

.brand-page-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.brand-page-eyebrow {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: .8rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}
.brand-page-h1 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.brand-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    position: relative;
    overflow: hidden;
}
.brand-card-shine {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}
.brand-card-h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    line-height: 1.1;
}
.brand-card-intro {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    text-align: center;
    opacity: .92;
}
.brand-card-intro strong { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.brand-card-body {
    color: #fff;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    opacity: .8;
}
.brand-card-body em { color: #fff; }
.brand-card-body span[style*="accent"], .brand-card-body .accent {
    color: #22d3ee !important;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

.brand-callout {
    background: rgba(34, 211, 238, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-left: 3px solid #22d3ee;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    text-align: center;
}
.brand-callout .callout-line {
    color: #fff;
    opacity: .8;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}
.brand-callout .callout-em {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: .5rem 0 0;
}
.brand-callout .callout-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), transparent);
    margin: 1.25rem auto;
    width: 80%;
}
.brand-callout .callout-body {
    color: #fff;
    opacity: .85;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}
.brand-callout .callout-body .green { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); font-weight: 700; }
.brand-callout .callout-body .accent { color: #d4af37; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); font-weight: 700; }

.brand-quote {
    text-align: center;
    margin: 2.5rem 0 1rem;
}
.brand-quote .quote-eyebrow {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1rem;
    margin: 0 0 1rem;
}
.brand-quote .quote-line {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 600;
}
.brand-quote .quote-line.muted { opacity: .65; font-weight: 400; margin-top: .35rem; }
.brand-quote .quote-final {
    margin: .75rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.brand-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.brand-cta-row.split {
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}
.brand-cta-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .85rem;
    text-decoration: none;
    transition: all .25s ease;
}
.brand-cta-ghost:hover {
    border-color: #22d3ee;
    color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}

/* ===== Banner Allianz en FAQs (Auditoría Técnica) ===== */
.faqs-banner {
    background: linear-gradient(180deg, #050505 0%, #0d0d0d 100%);
    padding: 4rem 1.25rem 3rem;
    position: relative;
    z-index: 1;
}
.faqs-banner-wrap {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.faqs-banner-eyebrow {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .82rem;
    margin: 0 0 1rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}
.faqs-banner-h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 4vw, 3rem);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    margin: 0 0 2.25rem;
    line-height: 1.1;
}
.faqs-banner-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 50px rgba(34, 211, 238, 0.1);
    text-align: center;
}
.faqs-banner-icon {
    color: #22d3ee;
    margin: 0 auto 1.25rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.45));
}
.faqs-banner-body {
    color: #d1d5db;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto 1.75rem;
}
.faqs-banner-body strong { color: #fff; font-weight: 700; }
.faqs-banner-body .cyan-em {
    color: #22d3ee;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}
.faqs-banner-bullets {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .78rem;
    font-weight: 700;
}
.faqs-banner-bullet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.faqs-banner-bullet .dot-gold {
    color: #d4af37;
    font-style: normal;
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.faqs-section { padding-top: 3rem; }

/* FAQ accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 0;
    transition: all .25s ease;
    overflow: hidden;
}
.faq-item:hover {
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.08);
}
.faq-item[open] {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.12);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-q {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.35;
}
.faq-item .faq-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.5);
    color: #22d3ee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: #22d3ee;
    color: #000;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}
.faq-item .faq-a {
    padding: 0 1.5rem 1.5rem;
    color: #fff;
    opacity: .85;
    line-height: 1.7;
    font-size: .98rem;
}
.faq-item .faq-a p { margin: 0; }
@media (max-width: 700px) {
    .brand-page { padding: 2rem .85rem; }
    .brand-card { padding: 1.5rem 1.25rem; border-radius: 20px; }
    .faq-item summary { padding: 1rem 1.15rem; }
    .faq-item .faq-a { padding: 0 1.15rem 1.25rem; }
    .faq-item .faq-q { font-size: .9rem; }
    .brand-cta-row.split .costos-cta.inline,
    .brand-cta-row.split .brand-cta-ghost { width: 100%; }
}

/* ===== Footer brand row (PROYECTO 5) ===== */
.footer-brand .brand-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .25rem;
}
.footer-brand .brand-name {
    font-family: 'Cinzel', serif;
    color: #d4af37;
    font-size: 1.15rem;
    letter-spacing: 4px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    text-transform: uppercase;
}
.footer-brand .desc {
    text-transform: uppercase;
    font-size: .72rem;
    line-height: 1.65;
    letter-spacing: .5px;
    opacity: 0.55;
}

/* ============== FOOTER MODERNO ============== */
.site-footer {
    background: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 5rem 1.5rem 2.5rem;
    margin-top: 5rem;
    position: relative;
    z-index: 1;
}
.footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3rem;
    margin-bottom: 3.5rem;
}
@media (max-width: 1024px) {
    .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
@media (max-width: 720px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
.footer-col h5 {
    color: #fff;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}
.footer-col ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.footer-col ul a {
    color: #6b7280;
    text-decoration: none;
    font-size: .88rem;
    transition: color .15s;
}
.footer-col ul a:hover { color: #22d3ee; }
.footer-lang-stack {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-lang-pill {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #6b7280;
    padding: .55rem .85rem;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: .82rem;
    text-align: left;
    width: 100%;
    transition: all .2s;
}
.footer-lang-pill:hover { color: #fff; }
.footer-lang-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
}
.footer-lang-pill.active {
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.3);
}
.footer-lang-pill.active .dot { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }

/* Disclaimer card */
.footer-disclaimer-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 3rem;
}
.footer-disc-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.footer-disc-icon {
    padding: .55rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-disc-head h6 {
    color: #d4af37;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}
.footer-disc-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.footer-disc-body p {
    color: #9ca3af;
    font-size: .72rem;
    line-height: 1.65;
    margin: 0;
    text-align: justify;
    font-weight: 500;
    letter-spacing: .2px;
}
.footer-disc-body p strong { color: #fff; font-weight: 700; text-transform: uppercase; }
.footer-disc-body p .white-em { color: #fff; font-weight: 700; }
.footer-disc-body p .white-em.underline-thin {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 3px;
    letter-spacing: 1.5px;
}
.footer-disc-body p .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}
.footer-disc-body p .cyan-em.underline-thin {
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(34, 211, 238, 0.3);
    text-underline-offset: 3px;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.footer-disc-tagline { text-transform: uppercase; }
.footer-disc-tagline {
    text-align: center !important;
    font-style: italic;
    font-weight: 700 !important;
    color: #6b7280 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
    margin-top: .5rem !important;
}

/* Barra inferior */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    gap: 1.25rem;
}
.footer-brand-mini {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.footer-brand-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: #6b7280;
    flex-shrink: 0;
}
.footer-brand-text {
    color: #4b5563;
    font-size: .85rem;
    font-style: italic;
    letter-spacing: 2px;
}
.footer-bottom-tag {
    color: #374151;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}
@media (max-width: 600px) {
    .footer-bottom-row { justify-content: center; text-align: center; }
    .footer-brand-mini { flex-direction: column; gap: .5rem; }
}

/* ============== COOKIE BANNER ============== */
.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
    background: rgba(28, 32, 38, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 25px 70px rgba(0,0,0,0.7), 0 0 30px rgba(223,191,114,0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    animation: cookie-up .4s ease-out;
}
@keyframes cookie-up { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner h4 {
    margin: 0;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    letter-spacing: 1px;
}
.cookie-banner p {
    margin: 0;
    color: var(--text);
    opacity: 0.85;
    font-size: .9rem;
    line-height: 1.5;
}
.cookie-banner .actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-top: .25rem;
}
.cookie-banner a.policy-link {
    color: var(--accent);
    text-decoration: underline;
    font-size: .85rem;
    margin-right: auto;
}
.cookie-banner button {
    padding: .55rem 1.25rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    transition: all .2s;
}
.cookie-banner .accept {
    background: var(--gold);
    color: #080A0F;
    border-color: var(--gold);
}
.cookie-banner .accept:hover { box-shadow: 0 6px 20px rgba(223,191,114,0.35); }
.cookie-banner .reject {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.cookie-banner .reject:hover { border-color: var(--accent); color: var(--accent); }

/* Páginas legales */
.legal-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.legal-page h1 {
    font-family: 'Inter', 'Archivo Black', sans-serif;
    font-weight: 900;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -.02em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(34, 211, 238, 0.25);
    padding-bottom: .75rem;
    margin: 0 0 .5rem;
}
.legal-page .updated {
    color: #22d3ee;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    margin-bottom: 2rem;
    font-weight: 800;
}
.legal-page h2 {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    font-family: 'Inter', 'Archivo Black', sans-serif;
    margin-top: 2.25rem;
    font-size: 1.2rem;
    letter-spacing: .02em;
    font-weight: 900;
    text-transform: uppercase;
}
.legal-page h3 {
    color: #22d3ee !important;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .95rem !important;
    margin-top: 1.5rem !important;
}
.legal-page p, .legal-page li {
    color: #fff;
    opacity: 0.85;
    line-height: 1.7;
    font-size: 1rem;
}
.legal-page ul { padding-left: 1.25rem; }
.legal-page strong { color: #fff; font-weight: 800; }
.legal-page a { color: #22d3ee; text-decoration: underline; }
.legal-page a:hover { text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.legal-page code {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #22d3ee;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .9em;
}
.legal-toggle {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.legal-toggle a {
    padding: .4rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    opacity: .65;
    text-decoration: none;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 800;
    transition: all .25s ease;
}
.legal-toggle a:hover {
    border-color: #22d3ee;
    color: #22d3ee;
    opacity: 1;
}
.legal-toggle a.active {
    background: #22d3ee;
    color: #000;
    border-color: #22d3ee;
    opacity: 1;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

/* ===== Mobile general ===== */
@media (max-width: 700px) {
    .container { padding: 1rem .85rem 2rem; }
    .home-hero { padding: 1.5rem 1rem 1rem; }
    .home-hero h1 { font-size: clamp(1.6rem, 7.5vw, 2.4rem); letter-spacing: .5px; }
    .home-hero p.lead { font-size: 1rem; }
    .home-cta-row { flex-direction: column; gap: .75rem; }
    .home-cta-row .btn-xl { width: 100%; }
    .brand-mark { width: 140px; height: 140px; }
    .stats-bar { gap: .5rem; padding: 1rem; margin: 2rem 1rem; }
    .stats-bar .stat .num { font-size: 1.4rem; }
    .section-block { margin: 3rem auto; }
    .section-block h2 { font-size: 1.6rem; }
    .final-cta { padding: 2rem 1.25rem; margin: 3rem 1rem; }
    .allianz-block { margin: 3rem 1rem; padding: 1.75rem 1.25rem; }
    .allianz-h2 { font-size: 1.5rem; }
    .costos-h1 { letter-spacing: 1px; }
    .data-table th, .data-table td { padding: .55rem .35rem; font-size: .8rem; }
    .table-wrap { padding: 0; }
    .metric-card .value { font-size: 1.7rem; }
    .form-card { padding: 1.25rem; margin: 1.5rem .5rem; }
    .footer-cols { gap: 2rem; }
    .site-footer { padding: 3.5rem 1rem 1.5rem; }
    .footer-disclaimer-card { padding: 1.5rem 1.25rem; border-radius: 18px; }
    .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; padding: 1rem; }
    .cookie-banner .actions { flex-direction: column; align-items: stretch; }
    .cookie-banner .actions a.policy-link { margin-right: 0; text-align: center; }
    .cookie-banner button { width: 100%; }
    .navbar-brand a { font-size: 1rem; }
    .auth-card { margin: 2rem 1rem; padding: 1.5rem; }
    .hero h1 { font-size: 2rem !important; letter-spacing: 1px; }
    .hud-card { padding: 1.75rem 1.25rem; min-height: 340px; }
    .hud-card h2 { font-size: 1.7rem; }
    .legal-page { padding: 0 1rem; }
    .legal-page h1 { font-size: 1.6rem; }
    .legal-page h2 { font-size: 1.1rem; }
}

/* ===== Privacy Policy ===== */
.privacy-page {
    background: #050505;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    padding-bottom: 4rem;
}
.privacy-hero {
    padding: 4rem 1.25rem 2rem;
    text-align: center;
}
.privacy-logo {
    width: 96px;
    height: 96px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    border: 2px solid #22d3ee;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.3);
}
.privacy-logo .typewriter { color: #22d3ee; font-size: 2.25rem; font-weight: 400; text-transform: none; }
.privacy-h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw, 6rem);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 1rem;
}
.privacy-h1 .cyan-em { color: #22d3ee; text-shadow: 0 0 18px rgba(34, 211, 238, 0.4); }
.privacy-tagline {
    color: #d4af37;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: -0.04em;
    margin: 0 0 .75rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}
.privacy-updated {
    color: #6b7280;
    font-weight: 400;
    text-transform: none;
    font-size: .85rem;
    letter-spacing: normal;
    margin: 0 0 1rem;
}
.privacy-page .legal-toggle {
    display: inline-flex;
    gap: .5rem;
    margin-top: .25rem;
}
.privacy-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.privacy-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}
.privacy-watermark {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 4rem;
    color: #fff;
    opacity: 0.08;
    text-transform: none;
    font-weight: 400;
    pointer-events: none;
}
.privacy-block { margin-bottom: 2.75rem; }
.privacy-block.bordered-top {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
}
.privacy-h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.privacy-num {
    background: #22d3ee;
    color: #000;
    padding: .25rem .65rem;
    border-radius: 6px;
    font-size: .9em;
    flex-shrink: 0;
}
.privacy-h3 {
    color: #22d3ee;
    font-size: 1rem;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
.privacy-h4 {
    color: #d4af37;
    font-size: .82rem;
    letter-spacing: 3px;
    font-style: italic;
    margin: 0 0 1rem;
    font-weight: 700;
}
.privacy-quote {
    color: #9ca3af;
    font-style: italic;
    line-height: 1.25;
    border-left: 8px solid #22d3ee;
    padding: .35rem 0 .35rem 1.5rem;
    font-size: clamp(1rem, 1.7vw, 1.4rem);
    margin: 0;
    letter-spacing: -0.04em;
}
.privacy-quote .privacy-brand,
.privacy-brand { color: #fff; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; }
.privacy-brand-sm { color: #d1d5db; font-weight: 400 !important; text-transform: none !important; font-size: .85em; letter-spacing: normal !important; }
.privacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
    margin-bottom: 2rem;
}
@media (max-width: 720px) {
    .privacy-grid { grid-template-columns: 1fr; }
}
.privacy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.privacy-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #e5e7eb;
    font-size: .92rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.privacy-list .bullet-cyan { color: #22d3ee; flex-shrink: 0; }
.privacy-body {
    color: #d1d5db;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.05;
    margin: 0 0 2rem;
    letter-spacing: -0.04em;
}
.privacy-body .cyan-em { color: #22d3ee; text-transform: none; letter-spacing: normal; font-weight: 700; }
.privacy-body--sentence { text-transform: none; letter-spacing: normal; line-height: 1.45; font-weight: 500; }
.privacy-vault {
    background: rgba(0, 0, 0, 0.5);
    padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.privacy-vault p {
    color: #9ca3af;
    font-size: .82rem;
    line-height: 1.45;
    margin: 0 0 1rem;
    text-transform: uppercase;
    font-weight: 700;
}
.privacy-vault p:last-child { margin: 0; }
.privacy-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.privacy-contact-grid > div {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.15rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}
.privacy-label {
    color: #6b7280;
    font-size: .68rem;
    letter-spacing: 3px;
    font-weight: 700;
}
.privacy-value {
    color: #fff;
    font-size: .92rem;
    text-transform: none;
    letter-spacing: -0.02em;
    word-break: break-word;
}
.privacy-foot {
    text-align: center;
    color: #4b5563;
    font-size: .72rem;
    line-height: 1.45;
    max-width: 720px;
    margin: 0 auto;
}
.privacy-foot .privacy-brand-sm { color: #6b7280; }
@media (max-width: 600px) {
    .privacy-card { padding: 1.75rem 1.25rem; }
    .privacy-quote { padding-left: 1rem; border-left-width: 5px; }
}

/* ===================================================================
   ABOUT — Quiénes Somos
   =================================================================== */
.about-page {
    background: #050505;
    color: #fff;
    padding: 4rem 1.5rem 5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero italic gigante */
.about-hero {
    text-align: left;
    margin-bottom: 5rem;
    max-width: 1100px;
}
.about-hero-h1 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 2rem;
}
.about-hero-h1 .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.45);
}
.about-hero-h1 .gold-em {
    color: #d4af37;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}
.about-hero-lead {
    color: #6b7280;
    font-weight: 700;
    font-size: clamp(.85rem, 1.3vw, 1.05rem);
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    max-width: 900px;
    margin: 2.5rem auto 0;
}
.about-hero-lead .typewriter {
    color: #fff;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* 2 columnas */
.about-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 5rem;
}
@media (max-width: 900px) {
    .about-twocol { grid-template-columns: 1fr; gap: 2rem; }
}
.about-col {
    padding: 1.25rem 1.5rem;
}
.about-col-bordered {
    border-left: 3px solid #22d3ee;
    padding-left: 2rem;
}
.about-col-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.05);
}
.about-col-eyebrow {
    color: #22d3ee;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
    line-height: 1.05;
}
.about-col-h {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
}
.about-col-h .white-em { color: #fff; font-weight: 900; }
.about-col-h .gold-em { color: #d4af37; text-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }
.about-col-body {
    color: #6b7280;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0;
}
.about-col-body .white-em { color: #fff; font-weight: 900; }
.about-col-body .typewriter {
    color: #fff;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Generando conciencia */
.about-gen {
    margin-bottom: 5rem;
}
.about-gen-h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.025em;
    text-align: center;
    color: #fff;
    margin: 0 0 3rem;
}
.about-gen-h2 .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 25px rgba(34, 211, 238, 0.55);
}
.about-gen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 900px) {
    .about-gen-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.about-gen-body {
    color: #9ca3af;
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
}
.about-gen-body .white-em { color: #fff; font-weight: 900; }
.about-gen-quote {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    color: #fff;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.06);
}

/* Disciplina del 5% */
.about-disc {
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(34,211,238,0.04) 100%);
    border-top: 1px solid rgba(34, 211, 238, 0.15);
    border-bottom: 1px solid rgba(34, 211, 238, 0.15);
    padding: 4rem 1.5rem;
    border-radius: 24px;
}
.about-disc-h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.75rem);
    color: #22d3ee;
    text-shadow: 0 0 25px rgba(34, 211, 238, 0.5);
    margin: 0 0 1.5rem;
    letter-spacing: -0.025em;
}
.about-disc-body {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto 2.5rem;
    letter-spacing: -0.01em;
}
.about-disc-body .cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
}
.about-disc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 auto 2.5rem;
    max-width: 1000px;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@media (max-width: 700px) {
    .about-disc-stats { grid-template-columns: 1fr; gap: 1.5rem; }
}
.about-disc-stat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.about-disc-stat:last-child { border-right: none; }
@media (max-width: 700px) {
    .about-disc-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem; }
    .about-disc-stat:last-child { border-bottom: none; }
}
.about-disc-stat .k {
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.about-disc-stat .k.gold-em {
    color: #d4af37;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
}
.about-disc-stat .k.cyan-em {
    color: #22d3ee;
    text-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
}
.about-disc-stat .v {
    color: #6b7280;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}
.about-disc-foot {
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .5px;
    margin: 0 0 2rem;
}
.about-disc-foot .typewriter {
    color: #fff;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.about-disc-cta {
    display: inline-block;
    background: #22d3ee;
    color: #000;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 1.15rem 3rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 0 35px rgba(34, 211, 238, 0.5);
    transition: transform .25s, box-shadow .25s;
    font-size: 1.05rem;
}
.about-disc-cta:hover {
    transform: scale(1.04);
    box-shadow: 0 0 45px rgba(34, 211, 238, 0.7);
}

/* ===================================================================
   PROYECTO COSTOS — Resultado: bloque cierre con fecha + tabs láser
   =================================================================== */
.aporte-fecha-block {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem 1rem;
    margin: 0 auto 3rem;
    max-width: 760px;
}
.aporte-fecha-line1,
.aporte-fecha-line2,
.aporte-fecha-line3 {
    color: #fff;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.25;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    margin: 0 0 1rem;
}
.aporte-fecha-line2 .cyan-em { font-style: italic; }
.aporte-fecha-line3 {
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    animation: aporte-pulse 3.5s ease-in-out infinite;
    margin: 0;
}

/* Tabs láser color-coded */
.tabs.tabs-laser {
    justify-content: center;
    flex-wrap: wrap;
    border: none;
    gap: .65rem;
    margin: 2.5rem 0 2rem;
}
.tabs.tabs-laser .tab-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    padding: .85rem 1.5rem;
    font-size: .72rem;
    letter-spacing: .15em;
    font-weight: 900;
    text-transform: uppercase;
    transition: all .25s ease;
}
.tabs.tabs-laser .tab-btn.tab-red.active {
    border-color: #ff5f5f;
    background: rgba(255, 95, 95, 0.05);
    color: #ff5f5f;
    box-shadow: 0 0 15px rgba(255, 95, 95, 0.2);
}
.tabs.tabs-laser .tab-btn.tab-blue.active {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.05);
    color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}
.tabs.tabs-laser .tab-btn.tab-gold.active {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.05);
    color: #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Tab section headers refinados */
.tab-section-title {
    text-align: center;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
}
.tab-section-sub {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    margin: 0 0 2rem;
}
.tab-section-sub .gold-em-glow {
    color: #d4af37;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.4);
}
.tab-section-sub .cyan-em-big {
    color: #22d3ee;
    font-size: 1.6em;
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
    display: inline-block;
    margin: 0 .35em;
}
.tab-section-sub-small {
    display: block;
    margin-top: .75rem;
    font-size: .85em;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

/* Tab CTA row + footer */
.tab-cta-row {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0 1.5rem;
}
.btn-pulse {
    display: inline-block;
    padding: 1.1rem 3rem;
    border-radius: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .82rem;
    text-decoration: none;
    color: #000;
    transition: all .25s ease;
    animation: btn-glow-anim 3s infinite ease-in-out;
}
.btn-pulse-cyan { background: #22d3ee; box-shadow: 0 0 25px rgba(34, 211, 238, 0.4); }
.btn-pulse-gold { background: #d4af37; box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); border-radius: 30px;}
.btn-pulse:hover { transform: scale(1.04); }
@keyframes btn-glow-anim {
    0%, 100% { opacity: 1; filter: brightness(1.1); }
    50%      { opacity: .85; filter: brightness(.95); }
}
.tab-foot {
    text-align: center;
    color: #6b7280;
    font-size: .72rem;
    font-style: italic;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.25rem;
    margin: 1.5rem 0 0;
}

/* Sidebar Recalcular pill */
.sidebar-recalc-btn {
    width: 100%;
    margin-top: 1.5rem;
    background: #22d3ee;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 1.05rem 1rem;
    font-family: inherit;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .82rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
    transition: all .25s;
}
.sidebar-recalc-btn:hover {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.5);
    filter: brightness(1.08);
}
.sidebar-recalc-btn:active { transform: scale(.97); }

/* Animación flujo láser sobre la curva roja del chart Plotly */
#chart-postergar .laser-flow-line {
    stroke-dasharray: 12 24;
    animation: laser-flow-stream 2.5s linear infinite;
}
@keyframes laser-flow-stream {
    from { stroke-dashoffset: 360; }
    to   { stroke-dashoffset: 0; }
}
.sidebar-version {
    margin-top: 2rem;
    text-align: center;
    color: rgba(255,255,255,0.18);
    font-size: .58rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 700;
}





/* ===================================================================
   AUTH (login + registro) — diseño glass cyan
   =================================================================== */
.auth-page {
    background: #050505;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    margin: -1.5rem -1.25rem -2.5rem;
}
.auth-wrap { width: 100%; max-width: 460px; }
.auth-wrap-wide { max-width: 640px; }
.auth-brand { text-align: center; margin: 0 0 2rem; }
.auth-brand-title {
    font-family: "Special Elite", monospace;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    color: #fff;
}
.auth-brand-tag {
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .72rem;
    font-weight: 800;
    opacity: .8;
    margin: 0;
}
.auth-card-glass {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid #22d3ee;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    color: #fff;
}
.auth-card-wide { padding: 2.5rem 2.25rem; }
.auth-card-h2 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 1.75rem;
    line-height: 1.05;
    color: #fff;
}
.auth-card-h2.left { text-align: left; }
.auth-alert {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #f87171;
    padding: .75rem 1rem;
    border-radius: 10px;
    font-size: .85rem;
    margin: 0 0 1.25rem;
    text-align: center;
    font-weight: 700;
}
.auth-form { display: flex; flex-direction: column; gap: 1.15rem; }
.auth-form-wide { gap: 1.05rem; }
.auth-row { display: grid; gap: 1rem; }
.auth-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
    .auth-row.two { grid-template-columns: 1fr; }
}
.auth-field { display: flex; flex-direction: column; gap: .5rem; }
.auth-label, .auth-label-w {
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .68rem;
    font-weight: 900;
}
.auth-label-w { color: #fff; }
.auth-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: .95rem 1rem;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    transition: all .25s ease;
    width: 100%;
}
.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.18);
    font-weight: 900;
}
.auth-input:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}
.auth-input.upper { text-transform: uppercase; }
.auth-input.center { text-align: center; }
.auth-input.gold-text { color: #d4af37; }
.auth-cta {
    background: #d4af37;
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    font-family: inherit;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all .25s ease;
    margin-top: .35rem;
}
.auth-cta:hover { background: #b8962e; transform: scale(1.02); }
.auth-cta:active { transform: scale(.97); }
.auth-cta-xl {
    background: #22d3ee;
    color: #000;
    font-size: 1.25rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.4);
}
.auth-cta-xl:hover { background: #fff; }
.auth-stepper {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}
.auth-step-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22d3ee;
    width: 48px;
    height: 56px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 900;
    cursor: pointer;
    transition: all .2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.auth-step-btn.small { width: 40px; }
.auth-step-btn:hover { border-color: #22d3ee; box-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
.auth-step-btn:active { transform: scale(.94); }
.auth-stepper-input { position: relative; flex: 1; }
.auth-stepper-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #d4af37;
    font-weight: 900;
}
.auth-stepper-num { padding-left: 2.25rem; text-align: center; }
.auth-foot-note {
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: .82rem;
    margin: 1.5rem 0 0;
}
.auth-foot-note a { color: #22d3ee; text-decoration: none; font-weight: 700; }
.auth-foot-note a:hover { text-decoration: underline; }

/* ===================================================================
   CONTACTO — Selección de Estratega
   =================================================================== */
.contacto-page {
    background: #050505;
    color: #fff;
    padding: 4rem 1.25rem 5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.contacto-hero { text-align: center; margin: 0 0 3rem; }
.contacto-brand {
    font-family: "Special Elite", monospace;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
}
.contacto-tag {
    color: #22d3ee;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: clamp(.85rem, 1.5vw, 1.1rem);
}
.contacto-intro { max-width: 880px; margin: 0 auto 3rem; text-align: center; }
.contacto-intro h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 3.5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}
.contacto-intro h2 .cyan-em { color: #22d3ee; text-shadow: 0 0 18px rgba(34, 211, 238, 0.5); }
.contacto-intro p {
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    line-height: 1.55;
    margin: 0 0 .85rem;
    font-weight: 500;
}
.contacto-intro .gold-em { color: #d4af37; }
.contacto-cta-line { color: #22d3ee !important; letter-spacing: .25em !important; font-size: .82rem !important; }
.contacto-cta-line .white-em { color: #fff; }
.advisor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 900px) {
    .advisor-grid { grid-template-columns: 1fr; }
}
.advisor-card {
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .35s ease;
    filter: drop-shadow(0 0 15px rgba(3, 211, 238, 0.25));
}
.advisor-card:hover { border-color: #22d3ee; }
.advisor-card-featured { border: 2px solid rgba(34, 211, 238, 0.3); }
.advisor-photo-wrap {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #1f2937;
    margin: 0 0 1.5rem;
    transition: border-color .35s ease;
}
.advisor-card:hover .advisor-photo-wrap { border-color: #22d3ee; }
.advisor-photo-featured { border-color: #22d3ee; }
.advisor-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all .6s cubic-bezier(.4,0,.2,1);
}
.advisor-card:hover .advisor-photo { filter: grayscale(0%); transform: scale(1.05); }
.advisor-name {
    color: #d4af37;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0 0 .35rem;
}
.advisor-role {
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.advisor-body {
    color: #d1d5db;
    font-size: .82rem;
    line-height: 1.55;
    text-transform: uppercase;
    margin: 0 0 1.75rem;
    font-weight: 500;
}
.advisor-body .white-em { color: #fff; font-weight: 900; }
.advisor-cta {
    margin-top: auto;
    width: 100%;
    border: 1px solid #22d3ee;
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all .3s ease;
}
.advisor-cta:hover {
    background: #22d3ee;
    color: #050505;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

/* ===================================================================
   MODAL DE CONFIRMACIÓN (calcular libertad)
   =================================================================== */
body.no-scroll { overflow: hidden; }
.confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 9999;
    overflow-y: auto;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal-bg-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(#22d3ee 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.08;
    pointer-events: none;
}
.confirm-modal-card {
    position: relative;
    background: #050505;
    border: 2px solid #22d3ee;
    border-radius: 18px;
    box-shadow: 0 0 60px rgba(34, 211, 238, 0.25);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 600px;
    text-align: center;
    color: #fff;
}
.confirm-modal-h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0 0 1.75rem;
}
.confirm-modal-h2 .cyan-em { color: #22d3ee; text-shadow: 0 0 18px rgba(34, 211, 238, 0.55); }
.confirm-modal-data {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1.75rem;
    margin: 0 0 1.75rem;
}
.confirm-name {
    color: #22d3ee;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 .65rem;
    line-height: 1.05;
}
.confirm-age-line {
    color: #9ca3af;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}
.confirm-age-line .white-em { color: #fff; }
.confirm-age-line .gold-em { color: #d4af37; }
.confirm-optimal {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.confirm-optimal-label {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .68rem;
    font-weight: 900;
    margin: 0 0 .35rem;
}
.confirm-optimal-value {
    color: #d4af37;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1;
    margin: 0;
}
.confirm-optimal-sub {
    color: #9ca3af;
    font-style: italic;
    font-size: .85rem;
    font-weight: 900;
    margin: .35rem 0 0;
}
.confirm-warning { padding: 0 .5rem; margin: 0 0 1.75rem; }
.confirm-warn-title {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 0 0 .85rem;
}
.confirm-warn-body {
    color: #d1d5db;
    font-size: .92rem;
    line-height: 1.55;
    font-weight: 700;
    margin: 0;
}
.confirm-warn-body .cyan-em { color: #22d3ee; text-transform: uppercase; }
.confirm-warn-body .loss-em { color: #f87171; }
.confirm-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
}
.confirm-cta {
    background: #22d3ee;
    color: #050505;
    border: none;
    border-radius: 12px;
    width: 100%;
    padding: 1.25rem 1rem;
    font-family: inherit;
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.3);
    transition: all .25s ease;
}
.confirm-cta:hover { background: #fff; transform: translateY(-1px); }
.confirm-cta:active { transform: scale(.97); }
.confirm-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: .65rem 1rem;
    font-family: inherit;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    border-radius: 10px;
    transition: all .2s;
}
.confirm-cancel:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }


/* ===================================================================
   COTIZADOR — rediseño tarjetas (4) + CTAs gemelos + atención + cierre
   =================================================================== */
.cost-card-row.cost-card-row-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
    .cost-card-row.cost-card-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cost-card-row.cost-card-row-4 { grid-template-columns: 1fr; }
}

/* 2x2 grid para META, MENSUALIDAD, APORTACIÓN HOY, BONO POR ACCIÓN */
.cost-card-row.cost-card-row-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 600px) {
    .cost-card-row.cost-card-row-2x2 { grid-template-columns: 1fr; }
}

/* Sidebar fields locked (informativos) */
.field-locked select:disabled {
    background: #1a1a1a !important;
    color: #6b7280 !important;
    border-color: #2a2a2a !important;
    cursor: not-allowed;
}
.field-locked .live-label { opacity: .55; }

/* CTAs gemelos */
.cta-twins-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 3rem;
}
.cta-twins-row--solo { grid-template-columns: 1fr; }
@media (max-width: 760px) {
    .cta-twins-row { grid-template-columns: 1fr; }
}
.cta-twin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    transition: all .25s ease;
    text-align: center;
}
.cta-twin-pdf {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}
.cta-twin-pdf:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.4);
}
.cta-twin-pdf .cta-twin-icon { color: #22d3ee; flex-shrink: 0; display: flex; }
.cta-twin-pdf .cta-twin-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: .35rem;
}
.cta-twin-pdf .cta-twin-text strong {
    font-size: .95rem;
    letter-spacing: .08em;
    color: #fff;
}
.cta-twin-pdf .cta-twin-text small {
    font-size: .68rem;
    letter-spacing: .25em;
    opacity: .4;
    transition: opacity .2s;
}
.cta-twin-pdf:hover .cta-twin-text small { opacity: 1; }
.cta-twin-plan {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    letter-spacing: .15em;
    font-size: .85rem;
}
.cta-twin-plan:hover {
    background: #d4af37;
    color: #050505;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
}
.cta-twin-plan-final {
    background: #22d3ee;
    color: #050505;
    border: none;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    letter-spacing: -.01em;
    text-align: center;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    transition: all .3s ease;
}
.cta-twin-plan-final:hover {
    box-shadow: 0 0 50px rgba(34, 211, 238, 0.7);
    filter: brightness(1.1);
    transform: scale(1.01);
}
.cta-twins-final { margin-top: 2rem; }
.cta-twins-final .cta-twin { padding: 2rem 1.5rem; }

/* Atención glass card */
.atencion-card {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 2.25rem 2rem;
    margin: 0 auto 3rem;
    max-width: 1100px;
    text-align: center;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.05);
}
.atencion-eyebrow {
    color: #d4af37;
    font-weight: 700;
    letter-spacing: .3em;
    font-size: .85rem;
    margin: 0 0 1rem;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}
.atencion-h3 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.3125rem);
    line-height: 1.25;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 1rem;
}
.atencion-h3 .gold-em { color: #d4af37; }
.atencion-h3 .cyan-em { color: #22d3ee; }
.atencion-sub {
    color: #fff;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.45;
    font-weight: 900;
    margin: 1.5rem 0 0;
}
.atencion-sub .cyan-em { color: #22d3ee; text-shadow: 0 0 12px rgba(34, 211, 238, 0.4); }
.atencion-sub + .atencion-sub { margin-top: 1.25rem; }
.atencion-sub .loss-em { color: #f87171; text-shadow: 0 0 12px rgba(248, 113, 113, 0.45); }
.atencion-eyebrow--alert {
    color: #ef4444;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    letter-spacing: .3em;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}
.atencion-cta-row {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* ===================================================================
   AUTH OTP — extensiones para acceso miembros + ingreso código
   =================================================================== */
.auth-wrap-narrow { max-width: 420px; }
.auth-card-gold { border-color: #d4af37; box-shadow: 0 0 30px rgba(212, 175, 55, 0.4); }
.auth-card-gold .auth-card-h2 .gold-em { color: #d4af37; text-shadow: 0 0 18px rgba(212, 175, 55, 0.5); }
.auth-cta-white {
    background: #fff;
    color: #000;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
}
.auth-cta-white:hover { background: #d4af37; color: #fff; }
.auth-subtle {
    color: rgba(255, 255, 255, 0.55);
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: -.5rem 0 1.5rem;
    text-align: center;
    font-weight: 700;
}
.auth-subtle.italic { font-style: italic; letter-spacing: .1em; }
.auth-info {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.4);
    color: #22d3ee;
    padding: .75rem 1rem;
    border-radius: 10px;
    font-size: .82rem;
    margin: 0 0 1.25rem;
    text-align: center;
    font-weight: 700;
}
.otp-row {
    display: flex;
    justify-content: center;
    gap: .65rem;
    margin: 1rem 0 1.5rem;
}
.otp-digit {
    width: 48px;
    height: 64px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 12px;
    color: #22d3ee;
    font-family: 'Inter', sans-serif;
    font-size: 1.85rem;
    font-weight: 900;
    transition: all .2s;
}
.otp-digit:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.05);
}
@media (max-width: 480px) {
    .otp-digit { width: 38px; height: 54px; font-size: 1.5rem; }
    .otp-row { gap: .35rem; }
}
.auth-foot-resend {
    text-align: center;
    margin: 1rem 0 0;
}
.auth-link-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    padding: .5rem;
}
.auth-link-btn:hover { color: #22d3ee; }

/* Modal detección de cliente existente */
.detection-card .detection-eyebrow {
    color: #22d3ee;
    letter-spacing: .4em;
    font-size: .68rem;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    margin: 0 0 1.5rem;
    text-align: center;
}
.detection-card .confirm-modal-h2 { font-style: italic; }
.detection-card .confirm-actions { margin-top: 1.75rem; }

/* Toast feedback (PDF / acciones) */
.p5-toast-host {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.p5-toast {
    background: rgba(5, 5, 5, 0.95);
    border: 1px solid rgba(34, 211, 238, 0.4);
    color: #fff;
    padding: .85rem 1.25rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
    max-width: 480px;
    text-align: center;
}
.p5-toast.show { opacity: 1; transform: translateY(0); }
.p5-toast-err { border-color: rgba(239, 68, 68, 0.5); color: #f87171; }
.cta-twin-loading { opacity: .6; pointer-events: none; }

/* =====================================================================
   SIDEBAR BOXES — agrupa visualmente Monto, Fecha+Edad y Avanzados
   ===================================================================== */
.sidebar-box {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.sidebar-box-cyan {
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.03);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.1), inset 0 0 14px rgba(34, 211, 238, 0.04);
}
.sidebar-box-dim {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.025);
}
.sidebar-box-soft {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
}
.sidebar-box .field-group:last-child { margin-bottom: 0; }
.sidebar-box hr:last-of-type { display: none; }

/* =====================================================================
   CTA PDF GLOW (rediseño mockup 1.18 — botón de descarga premium)
   ===================================================================== */
.cta-pdf-glow {
    width: 100%;
    height: 100%;
    background: #0b0b0d;
    border: 1.5px solid rgba(34, 211, 238, 0.22);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    box-shadow: 0 0 35px rgba(34, 211, 238, 0.1);
    transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.cta-pdf-glow:hover {
    border-color: rgba(34, 211, 238, 0.8);
    box-shadow: 0 0 45px rgba(34, 211, 238, 0.5);
    transform: scale(1.01);
    background-color: rgba(34, 211, 238, 0.03);
}
.cta-pdf-glow:disabled, .cta-pdf-glow.cta-twin-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}
.cta-pdf-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22d3ee;
    flex-shrink: 0;
}
.cta-pdf-icon svg {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 8px #22d3ee);
}
.cta-pdf-icon-halo {
    position: absolute;
    inset: -6px;
    background: rgba(34, 211, 238, 0.2);
    border-radius: 12px;
    filter: blur(4px);
    animation: cta-pdf-pulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes cta-pdf-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.08); }
}
.cta-pdf-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
}
.cta-pdf-primary {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    transition: color .3s ease;
}
.cta-pdf-glow:hover .cta-pdf-primary { color: #22d3ee; }
.cta-pdf-secondary {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .4em;
    color: #22d3ee;
    text-transform: uppercase;
    line-height: 1;
    animation: cta-pdf-secondary-pulse 2.5s ease-in-out infinite;
}
@keyframes cta-pdf-secondary-pulse {
    0%, 100% { opacity: .85; }
    50% { opacity: 1; text-shadow: 0 0 12px rgba(34, 211, 238, 0.6); }
}
/* Variante para la posición final (más compacta dentro de cta-twins) */
.cta-pdf-glow-final {
    padding: 1.4rem 1.25rem;
}
.cta-pdf-glow-final .cta-pdf-primary { font-size: 1.05rem; }
@media (max-width: 600px) {
    .cta-pdf-glow { padding: 1.2rem 1rem; gap: 1rem; flex-direction: column; }
    .cta-pdf-primary { font-size: 1rem; }
}

/* Validación visual del input WhatsApp */
.phone-hint {
    display: block;
    margin-top: .35rem;
    color: #f87171;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}
[data-phone-input].phone-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 0 12px rgba(239, 68, 68, 0.2) !important;
}

/* Timer expiración del OTP */
.otp-timer {
    color: #22d3ee;
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 1.25rem;
    text-align: center;
    opacity: .85;
}
.otp-timer strong {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}
.otp-timer-expired {
    color: #f87171;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    margin: 0 0 1.25rem;
    text-align: center;
}
#otp-resend-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Botones miembro: Perfil + Cerrar sesión */
.btn-member-profile { margin-right: .25rem; }
.btn-member-logout {
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #f87171;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: .15em;
    font-size: .68rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}
.btn-member-logout:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #fff;
    border-color: #f87171;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
}

/* ===== Perfil del cliente ===== */
.perfil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.75rem;
}
.perfil-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}
.perfil-label {
    color: #22d3ee;
    font-size: .65rem;
    letter-spacing: .25em;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 .35rem;
}
.perfil-value {
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    margin: 0;
    word-break: break-word;
}
.perfil-divider {
    border: none;
    height: 1px;
    background: rgba(34, 211, 238, 0.15);
    margin: 1.75rem 0;
}
.perfil-section-title {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .15em;
    margin: 0 0 .75rem;
}
.perfil-section-title .gold-em { color: #d4af37; text-shadow: 0 0 12px rgba(212, 175, 55, 0.4); }
.perfil-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer de la pantalla OTP: Reenviar + Cambiar número */
.otp-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.otp-foot .auth-foot-resend { margin: 0; }
.otp-foot-sep {
    color: rgba(255,255,255,0.2);
    font-weight: 700;
}

/* Bloque "Tu PDF" en /perfil */
.perfil-pdf-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: .25rem 0 0;
    flex-wrap: wrap;
}
.perfil-pdf-info { flex: 1; min-width: 260px; }
.perfil-pdf-info .perfil-section-title { margin: 0 0 .35rem; }
.perfil-pdf-info .auth-subtle { margin: 0; text-align: left; opacity: .75; }
.perfil-pdf-btn {
    background: #d4af37;
    color: #050505;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .82rem;
    padding: .95rem 1.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    transition: all .25s;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    white-space: nowrap;
}
.perfil-pdf-btn:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.55);
    transform: translateY(-1px);
}
.perfil-pdf-icon { display: inline-flex; }

/* ===================================================================
   PANEL ADMIN
   =================================================================== */
.admin-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    color: #e5e7eb;
}
.admin-hero { margin: 0 0 2rem; }
.admin-h1 {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -0.01em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}
.admin-sub { color: #9ca3af; margin: 0; font-size: .92rem; }
.admin-sub strong { color: #fff; }
.admin-role {
    color: #d4af37;
    font-weight: 900;
    letter-spacing: .15em;
    font-size: .78rem;
    margin-left: .35rem;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.admin-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.admin-stat-label {
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .68rem;
    font-weight: 700;
}
.admin-stat-value { color: #fff; font-weight: 900; font-size: 2rem; line-height: 1; }
.admin-stat-value.cyan-em { color: #22d3ee; text-shadow: 0 0 12px rgba(34,211,238,0.4); }
.admin-stat-value.gold-em { color: #d4af37; text-shadow: 0 0 12px rgba(212,175,55,0.4); }

.admin-actions {
    display: flex; gap: .85rem; flex-wrap: wrap; margin: 0 0 2.25rem;
}
.admin-cta {
    background: #22d3ee;
    color: #050505;
    border: none;
    padding: .75rem 1.25rem;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: all .2s;
}
.admin-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.admin-cta-gold { background: #d4af37; }
.admin-cta-danger { background: #f87171; color: #fff; }

.admin-section-title {
    color: #fff;
    text-transform: uppercase;
    font-size: .95rem;
    letter-spacing: .15em;
    margin: 2rem 0 1rem;
    font-weight: 800;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    font-size: .88rem;
    margin: 0 0 1.75rem;
}
.admin-table thead th {
    background: rgba(34,211,238,0.08);
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem;
    text-align: left;
    padding: .85rem .9rem;
    border-bottom: 1px solid rgba(34,211,238,0.2);
}
.admin-table tbody td {
    padding: .85rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #e5e7eb;
}
.admin-table tbody tr:hover { background: rgba(34,211,238,0.04); }
.admin-table tbody tr.inactive { opacity: .45; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-link { color: #22d3ee; text-decoration: none; font-weight: 700; }
.admin-link:hover { color: #fff; }
.admin-link-danger { color: #f87171; background: transparent; border: none; cursor: pointer; }

.admin-search {
    display: flex; gap: .65rem; margin: 0 0 1.5rem; flex-wrap: wrap;
}
.admin-input {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: .65rem .85rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: .9rem;
    width: 100%;
}
.admin-input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,0.2); }
.admin-search .admin-input { flex: 1; min-width: 220px; }

.admin-sim-quick {
    background: linear-gradient(135deg, rgba(212,175,55,0.10), rgba(34,211,238,0.06));
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.6rem;
    margin: 0 0 2rem;
}
.admin-sim-quick .admin-section-title { margin: 0 0 .35rem; }
.admin-sim-quick .admin-sub { margin: 0 0 1rem; }
.admin-sim-form {
    display: flex; gap: .65rem; flex-wrap: wrap; align-items: stretch;
}
.admin-sim-input {
    flex: 1; min-width: 240px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: .8rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: .04em;
}
.admin-sim-input:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.25); }
.admin-sim-form .admin-cta { padding-left: 1.4rem; padding-right: 1.4rem; }
.admin-sim-error {
    color: #fca5a5;
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.25);
    padding: .65rem .85rem;
    border-radius: 10px;
    margin: .85rem 0 0;
    font-size: .88rem;
}
.admin-link-sim { color: #d4af37; }
.admin-link-sim:hover { color: #fff; }
.admin-link-sep { color: rgba(255,255,255,0.2); margin: 0 .35rem; }
.admin-sim-hint {
    color: #9ca3af;
    font-size: .82rem;
    margin: 1rem 0 0;
    line-height: 1.5;
}
.admin-back { margin: 1.5rem 0 0; }

.admin-form { margin: 0 0 1.75rem; }
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.admin-form-grid label {
    display: flex; flex-direction: column; gap: .35rem;
}
.admin-form-grid label span {
    color: #22d3ee;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .15em;
    font-weight: 800;
}

.admin-divider {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 2rem 0;
}
.admin-actions-row {
    display: flex; gap: .85rem; flex-wrap: wrap; align-items: stretch;
}
.admin-inline-form {
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.admin-inline-form .admin-input { min-width: 200px; }

.admin-link-btn {
    display: inline-block;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: .82rem;
    margin-top: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
}
.admin-link-btn:hover { color: #fff; }

.admin-info {
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.4);
    color: #22d3ee;
    padding: .75rem 1rem;
    border-radius: 10px;
    margin: 0 0 1rem;
    font-size: .88rem;
    font-weight: 700;
}
.admin-error {
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.5);
    color: #f87171;
    padding: .75rem 1rem;
    border-radius: 10px;
    margin: 0 0 1rem;
    font-size: .88rem;
    font-weight: 700;
}
.admin-empty {
    color: #6b7280;
    font-style: italic;
    padding: 1.5rem 0;
}

.badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.badge.ok    { background: rgba(34,211,238,0.15); color: #22d3ee; }
.badge.gold  { background: rgba(212,175,55,0.15); color: #d4af37; }
.badge.muted { background: rgba(255,255,255,0.06); color: #6b7280; }

.btn-member-admin {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.6);
    color: #d4af37 !important;
    margin-right: .35rem;
    font-weight: 900;
}
.btn-member-admin:hover {
    background: #d4af37;
    color: #050505 !important;
}

.btn-member-simular {
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.6);
    color: #22d3ee !important;
    margin-right: .35rem;
    font-weight: 900;
}
.btn-member-simular:hover {
    background: #22d3ee;
    color: #050505 !important;
}

/* Banner cuando el admin está viendo la simulación de un cliente */
.admin-view-banner {
    background: rgba(212, 175, 55, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    text-align: center;
    padding: .75rem 1rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.admin-view-banner strong { color: #fff; }
.admin-view-banner a {
    color: #22d3ee;
    text-decoration: none;
    border: 1px solid rgba(34, 211, 238, 0.4);
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
}
.admin-view-banner a:hover { background: #22d3ee; color: #050505; }
.admin-view-banner .admin-view-save {
    color: #d4af37;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.55);
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    cursor: pointer;
}
.admin-view-banner .admin-view-save:hover { background: #d4af37; color: #050505; }
.admin-view-banner .admin-view-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
}

/* =========================================================================
   Botón flotante de WhatsApp (FAB) — visible en páginas públicas
   ========================================================================= */
.wa-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1.2rem .85rem 1rem;
    border-radius: 999px;
    background: #25D366;                /* verde WhatsApp oficial */
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .14em;
    text-decoration: none;
    box-shadow:
        0 8px 24px rgba(37,211,102,0.45),
        0 2px 8px rgba(0,0,0,0.4);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-float:hover {
    background: #1ebe5d;
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 12px 32px rgba(37,211,102,0.55),
        0 4px 12px rgba(0,0,0,0.45);
    color: #fff;
}
.wa-float:active { transform: translateY(0) scale(0.98); }

.wa-float svg {
    width: 28px; height: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.wa-float-text {
    line-height: 1;
    /* En pantallas pequeñas escondemos el texto y dejamos sólo el ícono */
}

/* Pulso animado para llamar la atención */
.wa-float-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(37,211,102,0.6);
    pointer-events: none;
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* En móvil mostramos sólo el ícono redondo */
@media (max-width: 640px) {
    .wa-float {
        padding: .85rem;
        right: 1rem;
        bottom: 1rem;
    }
    .wa-float-text { display: none; }
}

/* Respeta el preferences del usuario que no quiere movimiento */
@media (prefers-reduced-motion: reduce) {
    .wa-float-pulse { animation: none; display: none; }
    .wa-float:hover { transform: none; }
}