/* ==========================================================================
   Gestión Mi Taller — Landing
   Paleta alineada con la identidad pública de MiTallerCR (login / paginaWEB.css)
   ========================================================================== */

:root {
    /* Superficies oscuras */
    --landing-bg-950: #070d14;
    --landing-bg-900: #0d1623;
    --landing-bg-800: #16253a;
    --landing-linea-oscura: rgba(132, 157, 184, 0.22);

    /* Texto sobre oscuro */
    --landing-texto-100: #f4f8fd;
    --landing-texto-300: #c8d5e4;
    --landing-texto-500: #92a8bf;

    /* Superficies claras */
    --landing-fondo: #ffffff;
    --landing-fondo-alt: #f5f7fa;
    --landing-tinta: #0f172a;
    --landing-tinta-suave: #475569;
    --landing-borde: #e2e8f0;

    /* Acento de marca */
    --landing-acento: #f59e0b;
    --landing-acento-fuerte: #f97316;
    --landing-acento-texto: #92400e;
    --landing-acento-suave: rgba(245, 158, 11, 0.12);
    --landing-sobre-acento: #1a1002;
    --landing-cian: #0ea5e9;

    /* Forma */
    --landing-radio-sm: 10px;
    --landing-radio: 16px;
    --landing-radio-lg: 24px;
    --landing-sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
    --landing-sombra: 0 12px 32px rgba(15, 23, 42, 0.10);
    --landing-sombra-oscura: 0 24px 60px rgba(0, 0, 0, 0.45);
    --landing-foco: 0 0 0 3px rgba(245, 158, 11, 0.45);

    /* Tipografía */
    --landing-fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --landing-fuente-titulos: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;

    --landing-navbar-alto: 72px;
    --landing-transicion: 0.2s ease;
}

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

html {
    scroll-padding-top: calc(var(--landing-navbar-alto) + 8px);
}

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

body {
    font-family: var(--landing-fuente);
    color: var(--landing-tinta);
    background-color: var(--landing-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--landing-fuente-titulos);
    letter-spacing: -0.02em;
}

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

a {
    color: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: var(--landing-foco);
    border-radius: 6px;
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 0.6rem 1rem;
    border-radius: var(--landing-radio-sm);
    background: var(--landing-acento);
    color: var(--landing-sobre-acento);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

.texto-acento {
    background: linear-gradient(135deg, var(--landing-acento), var(--landing-acento-fuerte));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Botones ---------- */

.btn-landing-primary,
.btn-landing-outline,
.btn-landing-outline-claro,
.btn-landing-ghost,
.btn-landing-whatsapp,
.btn-landing-whatsapp-ghost {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 12px;
    --bs-btn-focus-box-shadow: var(--landing-foco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color var(--landing-transicion), border-color var(--landing-transicion),
        color var(--landing-transicion), transform var(--landing-transicion), box-shadow var(--landing-transicion);
}

.btn-lg.btn-landing-primary,
.btn-lg.btn-landing-outline {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.85rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 14px;
}

.btn-landing-primary {
    --bs-btn-color: var(--landing-sobre-acento);
    --bs-btn-bg: var(--landing-acento);
    --bs-btn-border-color: var(--landing-acento);
    --bs-btn-hover-color: var(--landing-sobre-acento);
    --bs-btn-hover-bg: #fbb33a;
    --bs-btn-hover-border-color: #fbb33a;
    --bs-btn-active-color: var(--landing-sobre-acento);
    --bs-btn-active-bg: #e48f06;
    --bs-btn-active-border-color: #e48f06;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.28);
}

.btn-landing-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.36);
}

.btn-landing-primary .bi-arrow-right {
    transition: transform var(--landing-transicion);
}

.btn-landing-primary:hover .bi-arrow-right {
    transform: translateX(3px);
}

.btn-landing-outline {
    --bs-btn-color: var(--landing-texto-100);
    --bs-btn-bg: rgba(255, 255, 255, 0.04);
    --bs-btn-border-color: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.10);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.40);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.40);
}

.btn-landing-outline-claro {
    --bs-btn-color: var(--landing-tinta);
    --bs-btn-bg: var(--landing-fondo);
    --bs-btn-border-color: var(--landing-borde);
    --bs-btn-hover-color: var(--landing-tinta);
    --bs-btn-hover-bg: var(--landing-fondo-alt);
    --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-active-color: var(--landing-tinta);
    --bs-btn-active-bg: var(--landing-borde);
    --bs-btn-active-border-color: #cbd5e1;
}

.btn-landing-ghost {
    --bs-btn-color: var(--landing-texto-300);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.10);
    --bs-btn-active-border-color: transparent;
}

/* WhatsApp: verde de la marca con texto oscuro (el texto blanco sobre #25d366 no alcanza 4.5:1). */
.btn-landing-whatsapp {
    --bs-btn-color: #052e16;
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: #25d366;
    --bs-btn-hover-color: #052e16;
    --bs-btn-hover-bg: #4ade80;
    --bs-btn-hover-border-color: #4ade80;
    --bs-btn-active-color: #052e16;
    --bs-btn-active-bg: #1fb457;
    --bs-btn-active-border-color: #1fb457;
}

.btn-landing-whatsapp:hover {
    transform: translateY(-1px);
}

.btn-landing-whatsapp-ghost {
    --bs-btn-color: #4ade80;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(74, 222, 128, 0.35);
    --bs-btn-hover-color: #86efac;
    --bs-btn-hover-bg: rgba(37, 211, 102, 0.12);
    --bs-btn-hover-border-color: rgba(74, 222, 128, 0.6);
    --bs-btn-active-color: #86efac;
    --bs-btn-active-bg: rgba(37, 211, 102, 0.18);
    --bs-btn-active-border-color: rgba(74, 222, 128, 0.6);
    min-height: 44px;
}

@media (min-width: 1200px) {
    .btn-landing-whatsapp-ghost {
        --bs-btn-padding-x: 0;
        width: 44px;
        font-size: 1.15rem;
    }
}

.hero-whatsapp {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.08);
    color: var(--landing-texto-100);
    text-decoration: none;
    transition: background-color var(--landing-transicion), border-color var(--landing-transicion);
}

.hero-whatsapp:hover {
    border-color: rgba(74, 222, 128, 0.6);
    background: rgba(37, 211, 102, 0.16);
    color: #fff;
}

.hero-whatsapp-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25d366;
    color: #052e16;
    font-size: 1.2rem;
}

.hero-whatsapp strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
}

.hero-whatsapp small {
    color: var(--landing-texto-300);
    font-size: 0.825rem;
}

/* ---------- Navbar ---------- */

.landing-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.landing-navbar {
    min-height: var(--landing-navbar-alto);
    background: rgba(7, 13, 20, 0.9);
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background-color var(--landing-transicion), border-color var(--landing-transicion), box-shadow var(--landing-transicion);
}

.landing-navbar.is-scrolled {
    background: rgba(7, 13, 20, 0.94);
    border-bottom-color: var(--landing-linea-oscura);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    color: var(--landing-texto-100);
    font-family: var(--landing-fuente-titulos);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.landing-brand:hover {
    color: #fff;
}

.landing-brand strong {
    color: var(--landing-acento);
    font-weight: 800;
}

.landing-navbar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem !important;
    color: var(--landing-texto-300);
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px;
    transition: color var(--landing-transicion), background-color var(--landing-transicion);
}

.landing-navbar .nav-link:focus-visible {
    color: #fff;
    box-shadow: var(--landing-foco);
}

.landing-navbar .nav-link:hover,
.landing-navbar .nav-link.active {
    color: #fff;
}

.landing-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--landing-acento);
}

.landing-navbar-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.landing-toggler {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: 12px;
    color: var(--landing-texto-100);
    font-size: 1.5rem;
    line-height: 1;
}

.landing-toggler:focus {
    box-shadow: none;
}

.landing-toggler:focus-visible {
    box-shadow: var(--landing-foco);
}

@media (max-width: 1199.98px) {
    .landing-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--landing-linea-oscura);
        border-radius: var(--landing-radio);
        background: var(--landing-bg-900);
    }

    .landing-navbar .navbar-collapse.show,
    .landing-navbar .navbar-collapse.collapsing {
        max-height: calc(100dvh - var(--landing-navbar-alto) - 1rem);
        overflow-y: auto;
    }

    .landing-navbar .nav-link {
        min-height: 48px;
        padding: 0.75rem 0.9rem !important;
    }

    .landing-navbar .nav-link.active {
        background: rgba(255, 255, 255, 0.05);
    }

    .landing-navbar .nav-link.active::after {
        display: none;
    }

    .landing-navbar-acciones {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--landing-linea-oscura);
    }
}

@media (min-width: 1200px) {
    .landing-navbar-acciones {
        flex-direction: row;
        align-items: center;
    }

    .landing-navbar-acciones .btn {
        white-space: nowrap;
    }
}

/* Entre 1200 y 1399 px el menú completo entra justo: se compactan los espacios. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .landing-navbar .nav-link {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        font-size: 0.95rem;
    }

    .landing-navbar .nav-link.active::after {
        left: 0.6rem;
        right: 0.6rem;
    }

    .landing-navbar-acciones {
        gap: 0.35rem;
    }

    .landing-navbar .navbar-nav {
        margin-left: 1.25rem;
    }
}

/* ---------- Secciones ---------- */

.seccion {
    padding: 4.5rem 0;
}

@media (min-width: 992px) {
    .seccion {
        padding: 6.5rem 0;
    }
}

.seccion-clara {
    background: var(--landing-fondo-alt);
}

.seccion-oscura {
    background:
        radial-gradient(900px 480px at 85% 0%, rgba(14, 165, 233, 0.10), transparent 60%),
        var(--landing-bg-950);
    color: var(--landing-texto-300);
}

.seccion-encabezado {
    max-width: 680px;
    margin: 0 auto 3rem;
    text-align: center;
}

.seccion-titulo {
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--landing-tinta);
}

.seccion-subtitulo {
    margin-bottom: 0;
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--landing-tinta-suave);
}

.seccion-oscura .seccion-titulo {
    color: var(--landing-texto-100);
}

.seccion-oscura .seccion-subtitulo {
    color: var(--landing-texto-500);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(180, 83, 9, 0.18);
    border-radius: 999px;
    background: var(--landing-acento-suave);
    color: var(--landing-acento-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eyebrow-oscuro {
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.10);
    color: #fbbf24;
}

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

.hero {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 0 3rem;
    background: var(--landing-bg-950);
    color: var(--landing-texto-300);
}

@media (min-width: 768px) {
    .hero {
        padding: 4rem 0 5rem;
    }
}

@media (min-width: 1200px) {
    .hero {
        padding: 5.5rem 0 7rem;
    }
}

.hero-fondo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 620px at 8% -15%, rgba(14, 165, 233, 0.20), transparent 60%),
        radial-gradient(760px 520px at 95% 10%, rgba(245, 158, 11, 0.14), transparent 62%),
        linear-gradient(160deg, #05090f 0%, #0b1521 45%, #0f1b2b 100%);
}

.hero-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%);
}

.hero-titulo {
    margin-bottom: 1.25rem;
    font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--landing-texto-100);
}

.hero-subtitulo {
    max-width: 38rem;
    margin-bottom: 1.5rem;
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.6;
    color: var(--landing-texto-300);
}

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .hero-acciones .btn {
        width: 100%;
    }
}

.hero-ingresar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    margin-top: 0.75rem;
    color: var(--landing-texto-500);
    font-size: 0.95rem;
    text-decoration: none;
}

.hero-ingresar span {
    color: var(--landing-texto-100);
    font-weight: 600;
    border-bottom: 1px solid rgba(245, 158, 11, 0.5);
    transition: border-color var(--landing-transicion), color var(--landing-transicion);
}

.hero-ingresar:hover span {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}

/* Tres beneficios destacados de la portada (enlazan a su sección). */
.hero-beneficios {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .hero-beneficios {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hero-beneficios a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: var(--landing-radio);
    background: rgba(255, 255, 255, 0.04);
    color: var(--landing-texto-100);
    text-decoration: none;
    transition: border-color var(--landing-transicion), background-color var(--landing-transicion);
}

.hero-beneficios a > span:last-child {
    min-width: 0;
}

@media (min-width: 576px) {
    .hero-beneficios a {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }
}

.hero-beneficios a:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
}

.hero-beneficio-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    font-size: 1.1rem;
}

.hero-beneficios strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
}

.hero-beneficios small {
    display: block;
    margin-top: 0.15rem;
    color: var(--landing-texto-300);
    font-size: 0.825rem;
    line-height: 1.35;
}

/* WhatsApp e ingreso, con menos peso visual que la solicitud de demostración. */
.hero-secundarios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
}

.hero-secundarios .hero-whatsapp,
.hero-secundarios .hero-ingresar {
    margin-top: 0;
}

.hero-visual {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hero-visual {
        padding: 1.5rem 0.5rem;
    }
}

@media (min-width: 992px) {
    .hero-visual {
        padding: 0.5rem 0;
    }
}

.ventana-app {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--landing-radio);
    background: var(--landing-bg-900);
    box-shadow: var(--landing-sombra-oscura), 0 0 0 8px rgba(255, 255, 255, 0.03);
}

@media (min-width: 1200px) {
    .ventana-app {
        transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
        transform-origin: left center;
        transition: transform 0.6s ease;
    }

    .hero-visual:hover .ventana-app {
        transform: perspective(1600px) rotateY(-2deg) rotateX(0deg);
    }
}

.ventana-app-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.ventana-app-barra > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.ventana-app-barra > span:nth-child(1) { background: #ef4444; }
.ventana-app-barra > span:nth-child(2) { background: #f59e0b; }
.ventana-app-barra > span:nth-child(3) { background: #22c55e; }

.ventana-app-url {
    flex: 1;
    max-width: 260px;
    margin-left: 0.75rem;
    padding: 0.2rem 0.75rem;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--landing-texto-500);
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ventana-app img {
    display: block;
    width: 100%;
}

/* ---------- Composición del Hero: vehículo en el taller + oportunidades ---------- */

.hero-escena {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    aspect-ratio: 5 / 4;
}

.hero-escena-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    box-shadow: var(--landing-sombra-oscura), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.escena-etiqueta {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(13, 22, 35, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    color: var(--landing-texto-100);
}

.escena-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    font-size: 1.2rem;
}

.escena-icono-frio {
    background: rgba(125, 211, 252, 0.14);
    color: #7dd3fc;
}

.escena-texto {
    display: block;
    min-width: 0;
}

.escena-rotulo {
    display: block;
    margin-bottom: 0.15rem;
    color: #fbbf24;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.escena-seguimiento .escena-rotulo {
    color: #7dd3fc;
}

.escena-etiqueta strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Protagonistas: mantenimiento y seguimiento. */
.escena-mantenimiento {
    top: 7%;
    left: -3%;
    width: 50%;
}

.escena-seguimiento {
    top: 46%;
    right: -3%;
}

/* El dato de seguimiento se lee en una sola línea; en celulares vuelve a ajustarse (ver media query). */
.escena-seguimiento strong {
    white-space: nowrap;
}

.escena-progreso {
    display: block;
    height: 5px;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.escena-progreso span {
    display: block;
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

/* Secundarias: el monto (simulación) y TuTallerCerca, con menos peso visual. */
.escena-oportunidad {
    bottom: 3%;
    left: 4%;
    padding: 0.65rem 0.85rem;
    background: rgba(13, 22, 35, 0.84);
}

.escena-oportunidad .escena-rotulo {
    color: var(--landing-texto-300);
}

.escena-oportunidad strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    color: #fbbf24;
    font-size: 0.95rem;
}

.escena-simulacion {
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 999px;
    color: #bae6fd;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.escena-pin {
    position: absolute;
    top: 6%;
    right: 4%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(13, 22, 35, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--landing-texto-300);
    font-size: 0.8rem;
    white-space: nowrap;
}

.escena-pin i {
    color: #fbbf24;
}

.escena-pin strong {
    color: var(--landing-texto-100);
}

@media (prefers-reduced-motion: no-preference) {
    .escena-mantenimiento,
    .escena-seguimiento {
        animation: flotar 6s ease-in-out infinite;
    }

    .escena-seguimiento {
        animation-delay: -3s;
    }
}

/* Tabletas: sin salirse del contenedor. */
@media (max-width: 991.98px) {
    .hero-visual {
        max-width: 680px;
        margin-top: 1rem;
    }

    .escena-mantenimiento {
        left: 2%;
    }

    .escena-seguimiento {
        right: 2%;
    }
}

@media (max-width: 767.98px) {
    .hero-visual {
        max-width: 560px;
    }

    .hero-escena {
        max-width: 560px;
    }

    .escena-etiqueta {
        max-width: calc(100% - 1.5rem);
    }

    .escena-seguimiento strong {
        white-space: normal;
    }
}

/* Celulares xs: la ilustración queda limpia y las tarjetas se leen debajo sin superponerse. */
@media (max-width: 575.98px) {
    .hero .eyebrow {
        max-width: 100%;
        flex-wrap: wrap;
        font-size: 0.72rem;
        white-space: normal;
    }

    .hero-titulo {
        font-size: 2rem;
        letter-spacing: 0;
    }

    .hero-acciones .btn {
        white-space: normal;
    }

    .hero-escena {
        display: grid;
        gap: 0.75rem;
        aspect-ratio: auto;
    }

    .hero-escena-svg {
        position: relative;
        aspect-ratio: 5 / 4;
        border-radius: 20px;
    }

    .escena-etiqueta {
        position: static;
        width: 100%;
        max-width: none;
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
    }

    .escena-icono {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 0.95rem;
    }

    .escena-rotulo {
        font-size: 0.6rem;
    }

    .escena-etiqueta strong {
        font-size: 0.8rem;
    }

    .escena-mantenimiento {
        order: 2;
    }

    .escena-seguimiento {
        order: 3;
    }

    .escena-oportunidad {
        order: 4;
        padding: 0.65rem 0.75rem;
    }

    .escena-pin {
        position: static;
        order: 5;
        display: inline-flex;
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ---------- Funcionalidades ---------- */

.tarjeta-funcion {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--landing-borde);
    border-radius: var(--landing-radio);
    background: var(--landing-fondo);
    box-shadow: var(--landing-sombra-sm);
    transition: transform var(--landing-transicion), box-shadow var(--landing-transicion), border-color var(--landing-transicion);
}

.tarjeta-funcion:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: var(--landing-sombra);
}

.tarjeta-icono {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: var(--landing-bg-900);
    color: var(--landing-acento);
    font-size: 1.35rem;
    transition: background-color var(--landing-transicion), color var(--landing-transicion);
}

.tarjeta-funcion:hover .tarjeta-icono {
    background: var(--landing-acento);
    color: var(--landing-sobre-acento);
}

.tarjeta-funcion h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.tarjeta-funcion p {
    margin: 0;
    color: var(--landing-tinta-suave);
    line-height: 1.6;
}

/* ---------- Beneficios ---------- */

.lista-check {
    display: grid;
    gap: 0.75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.lista-check li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lista-check i {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--landing-acento-suave);
    color: var(--landing-acento-texto);
    font-size: 0.95rem;
}

.tarjeta-beneficio {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--landing-borde);
    border-radius: var(--landing-radio);
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    transition: transform var(--landing-transicion), box-shadow var(--landing-transicion);
}

.tarjeta-beneficio:hover {
    transform: translateY(-4px);
    box-shadow: var(--landing-sombra);
}

.tarjeta-beneficio > i {
    display: block;
    margin-bottom: 1rem;
    color: var(--landing-acento-texto);
    font-size: 1.75rem;
}

.tarjeta-beneficio h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.tarjeta-beneficio p {
    margin: 0;
    color: var(--landing-tinta-suave);
    line-height: 1.6;
}

/* ---------- Cómo funciona ---------- */

.pasos {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

@media (min-width: 992px) {
    .pasos {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.paso {
    position: relative;
    padding: 2rem 1.75rem;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: var(--landing-radio);
    background: rgba(255, 255, 255, 0.025);
    transition: border-color var(--landing-transicion), background-color var(--landing-transicion);
}

.paso:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

@media (min-width: 992px) {
    .paso:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 3.1rem;
        right: -2rem;
        width: 2rem;
        height: 1px;
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.6), transparent);
    }
}

.paso-numero {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--landing-acento), var(--landing-acento-fuerte));
    color: var(--landing-sobre-acento);
    font-weight: 800;
    font-size: 1.1rem;
}

.paso-icono {
    position: absolute;
    top: 2rem;
    right: 1.75rem;
    color: rgba(255, 255, 255, 0.14);
    font-size: 2rem;
}

.paso h3 {
    margin-bottom: 0.5rem;
    color: var(--landing-texto-100);
    font-size: 1.2rem;
    font-weight: 700;
}

.paso p {
    margin: 0;
    color: var(--landing-texto-500);
    line-height: 1.6;
}

/* Pasos sobre fondo claro (sección Cómo funciona) */
.pasos-claros .paso {
    border-color: var(--landing-borde);
    background: var(--landing-fondo);
    box-shadow: var(--landing-sombra-sm);
}

.pasos-claros .paso:hover {
    border-color: rgba(245, 158, 11, 0.45);
    background: var(--landing-fondo);
}

.pasos-claros .paso h3 {
    color: var(--landing-tinta);
}

.pasos-claros .paso p {
    color: var(--landing-tinta-suave);
}

.pasos-claros .paso-icono {
    color: rgba(15, 23, 42, 0.14);
}

/* ---------- Oportunidades (campaña "El dinero que estás dejando ir") ---------- */

.oportunidades .seccion-titulo {
    font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
}

.oportunidades-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-areas:
        "texto"
        "calculadora"
        "accion";
}

@media (min-width: 992px) {
    .oportunidades-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "texto calculadora"
            "accion calculadora";
        column-gap: 3rem;
        row-gap: 1.5rem;
        align-items: start;
    }

    .oportunidades-calculadora {
        align-self: center;
    }
}

.oportunidades-texto {
    grid-area: texto;
}

.oportunidades-calculadora {
    grid-area: calculadora;
}

.oportunidades-accion {
    grid-area: accion;
}

/* Destino de "Descubrí cómo funciona": se suma al scroll-padding-top del documento para compensar los 18 px
   que la animación de aparición desplaza la tarjeta y dejarla completa debajo del menú fijo. */
#funcionalidad-mantenimientos {
    scroll-margin-top: 24px;
}

.oportunidades-lista {
    display: grid;
    gap: 0.9rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.oportunidades-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.oportunidades-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--landing-acento-suave);
    color: var(--landing-acento-texto);
    font-size: 1.2rem;
}

.oportunidades-lista h3 {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.oportunidades-lista p {
    margin: 0;
    color: var(--landing-tinta-suave);
    font-size: 0.95rem;
    line-height: 1.55;
}

.oportunidades-cierre {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--landing-acento);
    border-radius: 0 var(--landing-radio-sm) var(--landing-radio-sm) 0;
    background: var(--landing-fondo-alt);
    color: var(--landing-tinta);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .oportunidades .btn-lg {
        width: 100%;
    }

    /* En celular se priorizan los títulos y la calculadora para no alargar la página. */
    .oportunidades-lista p,
    .calculadora-formula {
        display: none;
    }

    .oportunidades-lista li {
        align-items: center;
    }

    .oportunidades-lista h3 {
        margin: 0;
    }
}

/* Calculadora */

.calculadora {
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: var(--landing-radio-lg);
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(245, 158, 11, 0.16), transparent 70%),
        linear-gradient(160deg, #0b1521 0%, #101d2e 100%);
    box-shadow: var(--landing-sombra);
    color: var(--landing-texto-300);
}

@media (min-width: 992px) {
    .calculadora {
        padding: 2rem;
    }
}

.calculadora-encabezado {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.calculadora-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--landing-acento);
    color: var(--landing-sobre-acento);
    font-size: 1.25rem;
}

.calculadora-encabezado h3 {
    margin: 0;
    color: var(--landing-texto-100);
    font-size: 1.25rem;
    font-weight: 800;
}

.calculadora-encabezado p {
    margin: 0;
    color: var(--landing-texto-500);
    font-size: 0.9rem;
}

.calculadora-etiqueta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.calculadora-etiqueta label {
    color: var(--landing-texto-100);
    font-size: 0.95rem;
    font-weight: 600;
}

.calculadora-etiqueta output {
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Deslizador accesible: 44 px de área táctil, barra con el recorrido pintado. */
.calculadora input[type="range"] {
    --progreso: 50%;
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.calculadora input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--landing-acento) var(--progreso), rgba(255, 255, 255, 0.16) var(--progreso));
}

.calculadora input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.calculadora input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--landing-acento);
}

.calculadora input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -9px;
    border: 3px solid var(--landing-bg-900);
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 2px #fbbf24;
    -webkit-appearance: none;
    appearance: none;
}

.calculadora input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--landing-bg-900);
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 2px #fbbf24;
}

.calculadora input[type="range"]:focus {
    outline: none;
}

.calculadora input[type="range"]:focus-visible {
    border-radius: 8px;
    box-shadow: var(--landing-foco);
}

.calculadora-limites {
    display: flex;
    justify-content: space-between;
    margin-top: -0.35rem;
    color: var(--landing-texto-500);
    font-size: 0.8rem;
}

.calculadora-resultados {
    display: grid;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
}

@media (min-width: 576px) {
    .calculadora-resultados {
        grid-template-columns: 1fr 1fr;
    }
}

.calculadora-resultado {
    padding: 0.9rem 1rem;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: var(--landing-radio);
    background: rgba(255, 255, 255, 0.04);
}

.calculadora-resultado dt {
    color: var(--landing-texto-300);
    font-size: 0.85rem;
    font-weight: 600;
}

.calculadora-resultado dd {
    margin: 0.2rem 0 0;
    color: var(--landing-texto-100);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.calculadora-resultado-destacado {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
}

.calculadora-resultado-destacado dd {
    color: #fbbf24;
}

.calculadora-aviso {
    display: flex;
    gap: 0.55rem;
    margin: 0;
    color: var(--landing-texto-300);
    font-size: 0.875rem;
    line-height: 1.5;
}

.calculadora-aviso i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #7dd3fc;
}

.calculadora-formula {
    margin: 0;
    color: var(--landing-texto-500);
    font-size: 0.8rem;
}

/* ---------- TuTallerCerca ---------- */

.tutallercerca-pasos {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.tutallercerca-pasos li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.tutallercerca-icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 1.15rem;
}

.tutallercerca-pasos h3 {
    margin: 0 0 0.15rem;
    color: var(--landing-texto-100);
    font-size: 1.05rem;
    font-weight: 700;
}

.tutallercerca-pasos p {
    margin: 0;
    color: var(--landing-texto-500);
    font-size: 0.95rem;
    line-height: 1.55;
}

.tutallercerca-nota {
    display: flex;
    gap: 0.55rem;
    margin: 0 0 1.5rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: var(--landing-radio-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--landing-texto-300);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tutallercerca-nota i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #7dd3fc;
}

@media (max-width: 575.98px) {
    .tutallercerca .btn-lg {
        width: 100%;
    }
}

.captura-real {
    position: relative;
    margin: 0;
}

.captura-real .ventana-app {
    transform: none;
}

.captura-real img {
    display: block;
    width: 100%;
    height: auto;
}

.captura-ficha {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--landing-radio);
    background: #fff;
    box-shadow: var(--landing-sombra-oscura);
}

@media (min-width: 768px) {
    .captura-ficha {
        position: absolute;
        left: -1.25rem;
        bottom: 3rem;
        width: 64%;
        margin-top: 0;
    }
}

.captura-real figcaption {
    margin-top: 0.85rem;
    color: var(--landing-texto-500);
    font-size: 0.825rem;
}

@media (min-width: 768px) {
    .captura-real figcaption {
        text-align: right;
    }
}

/* ---------- Demostración ---------- */

.demo-marco {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--landing-borde);
    border-radius: var(--landing-radio-lg);
    background: var(--landing-bg-950);
    box-shadow: var(--landing-sombra);
}

.demo-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.demo-pendiente {
    position: relative;
    width: 100%;
    height: 100%;
}

.demo-pendiente img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0.35;
    filter: blur(2px) saturate(0.8);
}

.demo-pendiente-contenido {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(7, 13, 20, 0.55), rgba(7, 13, 20, 0.85));
    color: var(--landing-texto-300);
    text-align: center;
}

.demo-play {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.16);
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.08);
    color: var(--landing-acento);
    font-size: 2rem;
}

.demo-pendiente-titulo {
    margin-bottom: 0.25rem;
    color: var(--landing-texto-100);
    font-size: 1.25rem;
    font-weight: 700;
}

.demo-pendiente-contenido p:not(.demo-pendiente-titulo) {
    margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
    .demo-marco {
        aspect-ratio: 4 / 5;
    }
}

/* ---------- Registro ---------- */

.registro-panel {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 1.5rem;
    border-radius: var(--landing-radio-lg);
    background: var(--landing-bg-950);
    color: var(--landing-texto-300);
    box-shadow: var(--landing-sombra-oscura);
}

@media (min-width: 992px) {
    .registro-panel {
        padding: 4rem;
    }
}

.registro-fondo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 320px at 100% 0%, rgba(245, 158, 11, 0.22), transparent 65%),
        radial-gradient(520px 320px at 0% 100%, rgba(14, 165, 233, 0.16), transparent 65%);
}

.registro-titulo {
    margin-bottom: 1rem;
    color: var(--landing-texto-100);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.registro-texto {
    max-width: 36rem;
    font-size: 1.075rem;
    line-height: 1.65;
}

.registro-puntos {
    display: grid;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

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

.registro-puntos i {
    flex-shrink: 0;
    line-height: 1.5;
    color: var(--landing-acento);
}

/* Formulario de solicitud de demostración (sobre el panel oscuro) */

.contacto-panel {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--landing-linea-oscura);
    border-radius: var(--landing-radio);
    background: rgba(255, 255, 255, 0.035);
}

@media (min-width: 992px) {
    .contacto-panel {
        padding: 2rem;
    }
}

.contacto-panel-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.contacto-panel-encabezado h3 {
    margin: 0;
    color: var(--landing-texto-100);
    font-size: 1.25rem;
    font-weight: 700;
}

.contacto-ayuda,
.contacto-nota {
    color: var(--landing-texto-500);
    font-size: 0.825rem;
}

.contacto-alerta {
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: var(--landing-radio-sm);
    background: rgba(248, 113, 113, 0.1);
    color: #fecaca;
    font-size: 0.925rem;
}

.contacto-alerta[hidden] {
    display: none;
}

.contacto-alerta:focus {
    outline: none;
    box-shadow: var(--landing-foco);
}

.contacto-alerta i {
    flex-shrink: 0;
    color: #f87171;
}

.contacto-alerta p {
    margin: 0;
}

.contacto-fila {
    display: grid;
    gap: 1rem;
}

@media (min-width: 576px) {
    .contacto-fila {
        grid-template-columns: 1fr 1fr;
    }
}

.contacto-campo {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.contacto-campo label,
.contacto-consentimiento .form-check-label {
    color: var(--landing-texto-100);
    font-size: 0.9rem;
    font-weight: 600;
}

.contacto-opcional {
    color: var(--landing-texto-500);
    font-weight: 400;
}

.contacto-panel .form-control,
.contacto-panel .form-select {
    min-height: 48px;
    border: 1px solid rgba(132, 157, 184, 0.4);
    border-radius: var(--landing-radio-sm);
    background-color: rgba(7, 13, 20, 0.6);
    color: var(--landing-texto-100);
    font-size: 1rem;
}

.contacto-panel .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8d5e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.contacto-panel .form-select option {
    background: #fff;
    color: var(--landing-tinta);
}

.contacto-panel .form-control::placeholder {
    color: var(--landing-texto-500);
    opacity: 1;
}

.contacto-panel .form-control:focus,
.contacto-panel .form-select:focus {
    border-color: var(--landing-acento);
    background-color: rgba(7, 13, 20, 0.75);
    color: var(--landing-texto-100);
    box-shadow: var(--landing-foco);
}

.contacto-panel .form-control.is-invalid {
    border-color: #f87171;
    background-image: none;
    padding-right: 0.75rem;
}

.contacto-panel .form-select.is-invalid {
    border-color: #f87171;
    background-image: var(--bs-form-select-bg-img);
    padding-right: 2.25rem;
}

.contacto-error {
    color: #fca5a5;
    font-size: 0.85rem;
}

.contacto-error:empty {
    display: none;
}

.contacto-consentimiento .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
}

.contacto-consentimiento .form-check-input {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0.1rem 0 0;
    border-color: rgba(132, 157, 184, 0.6);
    background-color: rgba(7, 13, 20, 0.6);
}

.contacto-consentimiento .form-check-input:checked {
    border-color: var(--landing-acento);
    background-color: var(--landing-acento);
}

.contacto-consentimiento .form-check-input:focus {
    border-color: var(--landing-acento);
    box-shadow: var(--landing-foco);
}

.contacto-consentimiento .form-check-input.is-invalid {
    border-color: #f87171;
}

.contacto-consentimiento .form-check-label,
.contacto-consentimiento .form-check-input.is-invalid ~ .form-check-label {
    font-weight: 400;
    color: var(--landing-texto-300);
    line-height: 1.5;
}

.contacto-consentimiento a {
    color: #fbbf24;
}

/* Área táctil de 44px sin alterar el interlineado: el relleno se compensa con margen negativo. */
.contacto-consentimiento .form-check-label a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
}

.contacto-consentimiento .contacto-error {
    display: block;
    margin-top: 0.35rem;
    padding-left: 1.95rem;
}

.contacto-consentimiento .contacto-error:empty {
    display: none;
}

/* Campo trampa (honeypot): fuera de la vista y del árbol de accesibilidad. */
.campo-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.registro-alternativas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--landing-linea-oscura);
}

@media (max-width: 575.98px) {
    .registro-alternativas .btn {
        width: 100%;
    }
}

.registro-alternativas p {
    width: 100%;
    margin: 0 0 0.25rem;
    color: var(--landing-texto-500);
    font-size: 0.925rem;
}

/* Confirmación y documentos */

.error-icono.confirmacion-icono {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.confirmacion-texto {
    max-width: 36rem;
}

.documento-legal .container {
    max-width: 760px;
}

.documento-legal h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.documento-legal p,
.documento-legal li {
    color: var(--landing-tinta-suave);
    line-height: 1.7;
}

.documento-legal a:not(.btn) {
    color: var(--landing-acento-texto);
}

.registro-ingresar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--landing-texto-300);
    font-size: 0.925rem;
    text-decoration: none;
}

.registro-ingresar:hover {
    color: #fbbf24;
    text-decoration: underline;
}

/* ---------- Preguntas frecuentes ---------- */

.faq {
    --bs-accordion-bg: var(--landing-fondo);
    --bs-accordion-color: var(--landing-tinta);
    --bs-accordion-border-color: var(--landing-borde);
    --bs-accordion-border-radius: var(--landing-radio);
    --bs-accordion-inner-border-radius: calc(var(--landing-radio) - 1px);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1.1rem;
    --bs-accordion-btn-color: var(--landing-tinta);
    --bs-accordion-btn-focus-box-shadow: inset 0 0 0 3px rgba(245, 158, 11, 0.45);
    --bs-accordion-active-bg: var(--landing-fondo-alt);
    --bs-accordion-active-color: var(--landing-tinta);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1.1rem;
}

.faq .accordion-button {
    min-height: 56px;
    font-size: 1.025rem;
    font-weight: 600;
}

.faq .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 var(--landing-borde);
}

.faq .accordion-body {
    color: var(--landing-tinta-suave);
    line-height: 1.65;
}

/* ---------- Error ---------- */

.error-pagina {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-icono {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--landing-acento-suave);
    color: var(--landing-acento-texto);
    font-size: 2rem;
}

/* ---------- Footer ---------- */

.landing-footer {
    padding: 4rem 0 2rem;
    background: var(--landing-bg-950);
    border-top: 1px solid var(--landing-linea-oscura);
    color: var(--landing-texto-500);
}

.landing-footer-texto {
    max-width: 24rem;
    margin-top: 1rem;
    line-height: 1.65;
}

.landing-footer-titulo {
    margin-bottom: 0.5rem;
    color: var(--landing-texto-100);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-footer-lista {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-footer-lista a,
.landing-footer-base a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

.landing-footer a {
    color: var(--landing-texto-300);
    text-decoration: none;
    transition: color var(--landing-transicion);
}

.landing-footer a:hover {
    color: #fbbf24;
}

.landing-footer-base {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--landing-linea-oscura);
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .landing-footer-base {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Animaciones al desplazarse ---------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tarjeta-funcion:hover,
    .tarjeta-beneficio:hover,
    .btn-landing-primary:hover {
        transform: none;
    }
}

/* ---------- Beneficios operativos (4 tarjetas) ---------- */

.tarjeta-beneficio > div > h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* ---------- Barra fija de contacto (solo celulares) ---------- */

.barra-contacto {
    display: none;
}

@media (max-width: 767.98px) {
    .barra-contacto {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        display: flex;
        gap: 0.5rem;
        padding:
            0.625rem
            max(0.75rem, env(safe-area-inset-right))
            max(0.625rem, env(safe-area-inset-bottom))
            max(0.75rem, env(safe-area-inset-left));
        border-top: 1px solid var(--landing-linea-oscura);
        background: rgba(7, 13, 20, 0.95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .barra-contacto.is-visible {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }

    .barra-contacto-principal {
        flex: 1;
        min-height: 48px;
    }

    .barra-contacto-whatsapp {
        flex-shrink: 0;
        width: 48px;
        min-height: 48px;
        --bs-btn-padding-x: 0;
        font-size: 1.35rem;
    }

    /* Mientras la barra se ve, el final de la página y el foco por teclado quedan por encima de ella. */
    html.con-barra-contacto {
        scroll-padding-bottom: calc(var(--alto-barra-contacto, 68px) + 8px);
    }

    html.con-barra-contacto body {
        padding-bottom: var(--alto-barra-contacto, 68px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-contacto,
    .barra-contacto.is-visible {
        transition: none;
    }
}

/* ---------- Formato compacto en celulares (mismo contenido, menos espacio) ---------- */

@media (max-width: 575.98px) {
    .seccion {
        padding: 3.25rem 0;
    }

    .seccion-encabezado {
        margin-bottom: 2rem;
    }

    /* Funcionalidades: ícono a la izquierda, título y descripción completa. */
    #funcionalidades .row {
        --bs-gutter-y: 0.75rem;
    }

    .tarjeta-funcion {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 0.85rem;
        padding: 1rem;
    }

    .tarjeta-funcion .tarjeta-icono {
        grid-row: span 2;
        width: 40px;
        height: 40px;
        margin: 0;
        font-size: 1.1rem;
    }

    .tarjeta-funcion h3 {
        margin-bottom: 0.2rem;
        font-size: 1rem;
    }

    .tarjeta-funcion p {
        font-size: 0.925rem;
        line-height: 1.5;
    }

    /* Beneficios: ícono al lado del texto. */
    .tarjeta-beneficio {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem;
    }

    .tarjeta-beneficio > i {
        margin: 0;
        font-size: 1.5rem;
    }

    .tarjeta-beneficio > div > h3 {
        margin-bottom: 0.2rem;
        font-size: 1rem;
    }

    .tarjeta-beneficio p {
        font-size: 0.925rem;
        line-height: 1.5;
    }

    /* Cómo funciona: número y texto en una fila. */
    .pasos {
        gap: 0.75rem;
    }

    .paso {
        display: grid;
        grid-template-columns: 36px 1fr;
        column-gap: 0.85rem;
        padding: 1rem;
    }

    .paso-numero {
        grid-row: span 2;
        width: 36px;
        height: 36px;
        margin: 0;
        font-size: 1rem;
    }

    .paso-icono {
        display: none;
    }

    .paso h3 {
        margin-bottom: 0.2rem;
        font-size: 1rem;
    }

    .paso p {
        font-size: 0.925rem;
    }
}