/* Pulido visual de las páginas públicas. Las medidas, las secciones y los
   puntos de corte siguen definidos en el estilo original de cada página. */
:root {
    --blue: #0071e3;
    --blue-dark: #0059b3;
    --blue-texto: #0062c4;
    --black: #172b4d;
    --gray: #58677e;
    --gris-texto: #58677e;
    --gray-light: #9aa9bd;
    --bg: #f4f7fc;
    --marketing-border: #e0e7f0;
    --shadow: inset 0 0 0 1px var(--marketing-border),
        0 6px 20px rgba(23, 43, 77, 0.045);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-rendering: optimizeLegibility;
}

.nav {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--marketing-border);
    box-shadow: 0 8px 24px rgba(23, 43, 77, 0.08);
}

.nav-links a,
.nav-login,
.nav-cta,
.btn-big,
.btn-ghost-big {
    transition: background-color 160ms ease, color 160ms ease,
        box-shadow 160ms ease, transform 160ms ease;
}

.nav-login {
    color: var(--blue-texto);
}

.nav-links a:hover,
.nav-login:hover {
    background: #edf4fe;
    color: var(--blue-texto);
}

.hero-badge {
    background: #edf4fe;
    box-shadow: inset 0 0 0 1px #d6e6fb;
}

.hero h1,
.sec-title,
.footer-cta h2 {
    color: var(--black);
}

.hero .hero-claims {
    color: #3a4e6b;
}

.btn-big,
.nav-cta {
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.16);
}

.btn-big:hover,
.nav-cta:hover {
    box-shadow: 0 6px 18px rgba(0, 89, 179, 0.2);
}

.btn-big-secundario {
    background: var(--black);
    box-shadow: 0 4px 12px rgba(23, 43, 77, 0.12);
}

.btn-big-secundario:hover {
    background: #213e66;
    box-shadow: 0 6px 18px rgba(23, 43, 77, 0.16);
}

.btn-ghost-big {
    background: #f1f5fb;
    color: var(--black);
    box-shadow: inset 0 0 0 1px var(--marketing-border);
}

.btn-ghost-big:hover {
    background: #e8eff9;
    box-shadow: inset 0 0 0 1px #c9d8ec;
}

.banner {
    background: var(--bg);
    box-shadow: 0 16px 38px rgba(23, 43, 77, 0.1);
}

.banner-dot {
    background: rgba(23, 43, 77, 0.45);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.stat-num {
    font-variant-numeric: tabular-nums;
}

.contact-side .cs-box,
.pillar,
.lack-list li,
.step-tag {
    box-shadow: inset 0 0 0 1px var(--marketing-border);
}

/* El degradado conserva su marco original y pierde el resplandor intenso. */
.step {
    --background: linear-gradient(135deg, #529be8 0%, #1762b7 100%);
}

.step::after {
    opacity: 0.14;
    filter: blur(14px);
    transition: opacity 160ms ease;
}

.step-info {
    background: var(--black);
    transition: background-color 160ms ease;
}

.step:hover .step-info {
    background: #1d3558;
}

.step-info p {
    color: #d1dcec;
}

.step-info .step-num {
    background: #eef5ff;
    color: #0059b3;
}

.step-line .step-num {
    box-shadow: 0 3px 10px rgba(0, 113, 227, 0.15);
}

.step-bar {
    background: #d6e2f2;
}

.ben-icon {
    background: #edf4fe;
    box-shadow: inset 0 0 0 1px #dae7f8;
}

.ba-col.antes,
.value-chip {
    border-color: var(--marketing-border);
}

.ba-col.despues,
.contact-card,
.after-box {
    background: var(--black);
    box-shadow: 0 8px 24px rgba(23, 43, 77, 0.1);
}

.contact-card .c-sub,
.after-box .after-sub {
    color: #c7d4e6;
}

.contact-ico {
    background: rgba(152, 193, 248, 0.12);
    box-shadow: inset 0 0 0 1px rgba(208, 224, 247, 0.1);
}

.mission-card h3,
.flow-caption span,
.why-close span,
.pillars-claim span {
    color: var(--blue-texto);
}

.faq-item {
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--marketing-border);
}

.faq-q {
    transition: background-color 160ms ease;
}

.faq-q:hover,
.faq-item.open .faq-q {
    background: #edf4fe;
}

.fg input,
.fg select,
.fg textarea {
    background: #f8fafd;
    border-color: var(--marketing-border);
    transition: border-color 160ms ease, background-color 160ms ease,
        box-shadow 160ms ease;
}

.fg input::placeholder,
.fg textarea::placeholder {
    color: #65748a;
    opacity: 1;
}

.fg input:hover,
.fg select:hover,
.fg textarea:hover {
    border-color: #b8c8df;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    border-color: var(--blue);
    background: var(--white);
}

.alta-legal input {
    accent-color: var(--blue);
}

/* La aceptación legal es una fila, no un campo de texto de la rejilla. */
.tarjeta > .alta-legal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: var(--gray);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.tarjeta > .alta-legal input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 0;
}

.tarjeta > .alta-legal span { min-width: 0; }

.zona:focus-within {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .fg input,
    .fg select,
    .fg textarea,
    label.campo input,
    label.campo select,
    label.campo textarea {
        font-size: 16px;
    }
}

.alta-legal a {
    color: var(--blue-texto);
    text-underline-offset: 3px;
}

.alta-legal a:hover {
    color: var(--blue-dark);
}

.nav a:focus-visible,
.btn-big:focus-visible,
.btn-ghost-big:focus-visible,
.faq-q:focus-visible {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--blue);
}

footer {
    color: #c0cede;
}

.footer-links a {
    color: #d1dcec;
    text-underline-offset: 4px;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .btn-big:hover {
        transform: none;
    }
    .step::after {
        transition: none;
    }
}