:root {
    --brand-primary: #C60000;
    /* Rojo */
    --brand-secondary: #780000;
    /* Rojo oscuro */
    --brand-black: #000814;
    /* Negro azulado */
    --accent: #0EA5E9;
}

body {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.fw-800 {
    font-weight: 800
}

/* Brand dot */
.brand-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: radial-gradient(60% 60% at 40% 40%, #ff9999 0%, var(--brand-primary) 50%, var(--brand-secondary) 100%);
    display: inline-block;
}

/* HERO */
.hero {
    background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary), var(--brand-black));
    padding: 64px 0 40px;
    color: #fff;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .15);
}

.hero-checks li {
    margin: .25rem 0;
}

.hero-checks i {
    color: #10B981;
    margin-right: .5rem;
    font-size: 1.1rem;
}


/* Buttons */
.btn-warning {
    --bs-btn-bg: #FACC15;
    --bs-btn-border-color: #FACC15;
    --bs-btn-hover-bg: #eab308;
    --bs-btn-hover-border-color: #eab308;
    --bs-btn-color: #0b1026;
}

.navbar .nav-link {
    font-weight: 600;
    color: #111827
}

.navbar .nav-link:hover {
    color: var(--brand-primary)
}

.navbar .btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-secondary);
    --bs-btn-hover-border-color: var(--brand-secondary);
}

.object-fit-cover {
    object-fit: cover
}

.qh-section {
    position: relative;
    padding: 80px 0;
    background:
        radial-gradient(900px 600px at -10% -10%, rgba(198, 0, 0, 0.08) 0, rgba(198, 0, 0, 0) 60%),
        radial-gradient(900px 600px at 110% 110%, rgba(120, 0, 0, 0.08) 0, rgba(120, 0, 0, 0) 60%),
        #fff;
}

.badge-soft {
    display: inline-block;
    font-weight: 700;
    color: var(--brand-primary);
    background: rgba(198, 0, 0, .08);
    border: 1px solid rgba(198, 0, 0, .18);
    padding: 8px 14px;
    border-radius: 999px;
    letter-spacing: .2px;
}

.qh-intro {
    max-width: 920px;
}

/* Cards */
.qh-card {
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    padding: 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.qh-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 8, 20, .12);
    box-shadow: 0 16px 36px rgba(0, 8, 20, .08);
}

.qh-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 8px 20px rgba(198, 0, 0, .25);
}

/* Decorative blobs */
.qh-blob {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .25;
    z-index: 0;
    pointer-events: none;
}

.qh-blob--1 {
    left: -80px;
    top: -60px;
    background: rgba(198, 0, 0, .35);
}

.qh-blob--2 {
    right: -80px;
    bottom: -60px;
    background: rgba(0, 8, 20, .35);
}

/* =========== BENEFICIOS =========== */
.benefits-section {
    position: relative;
    padding: 80px 0;
    background: #f8f9fb;
}

.benefit-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 24px;
    transition: all .25s ease;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 8, 20, .08);
    border-color: rgba(198, 0, 0, .25);
}

.benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 8px 20px rgba(198, 0, 0, .25);
}

.use-case-box {
    background: linear-gradient(135deg, var(--brand-black), var(--brand-secondary));
    border-radius: 20px;
}

.use-case-box ul i {
    color: var(--brand-primary);
}

/* =========== INTEGRACIÓN =========== */
.integration-section {
    position: relative;
    padding: 80px 0;
    background: #fff;
}

.integration-intro {
    max-width: 800px;
}

.integration-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 28px;
    transition: all .25s ease;
}

.integration-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 8, 20, .08);
    border-color: rgba(198, 0, 0, .25);
}

.integration-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: 0 8px 20px rgba(198, 0, 0, .25);
}

/* Librerías box */
.integration-libs {
    border-radius: 24px;
    background: linear-gradient(135deg, var(--brand-black), var(--brand-secondary));
    box-shadow: 0 12px 36px rgba(0, 8, 20, .25);
}

.integration-libs p {
    max-width: 640px;
    margin: 0 auto;
}

/* =========== FOOTER =========== */
.site-footer {
    background: linear-gradient(135deg, var(--brand-black) 0%, #0a1126 40%, var(--brand-secondary) 100%);
    color: #fff;
}

.footer-title {
    line-height: 1.2;
}

.footer-brand-img {
    max-height: 72px;
    /* ajusta el alto del logo en desktop */
    width: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
    opacity: .95;
}

.footer-bottom {
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(0, 0, 0, .08);
}

/* Responsivo: centra la marca y reduce tamaño en móviles */
@media (max-width: 991.98px) {
    .footer-brand-img {
        max-height: 56px;
    }

    .site-footer .text-lg-end {
        text-align: center !important;
    }
}


/* ===== Scroll suave para anclas ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Animaciones on-scroll ===== */
.reveal {
    opacity: 0;
    transform: translateY(22px) scale(.98);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* Micro-interacciones hover */
.qh-card:hover .qh-icon,
.benefit-card:hover .benefit-icon,
.integration-card:hover .integration-icon {
    transform: translateY(-3px) rotate(0.5deg);
    transition: transform .2s ease;
}

/* Acciones con íconos */
.card-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.action-btn {
    --size: 36px;
    width: var(--size);
    height: var(--size);
    border-radius: 10px;
    background: #fff;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: all .2s ease;
}

.action-btn i {
    font-size: 1.1rem;
    color: var(--brand-black);
}

.action-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(198, 0, 0, .35);
    box-shadow: 0 8px 18px rgba(0, 8, 20, .08);
}

.action-btn:active {
    transform: translateY(0);
}

/* ===== Navbar mejoras móviles ===== */
.navbar .nav-link {
    padding: .5rem .75rem;
}

@media (max-width: 991.98px) {
    .navbar .btn-primary {
        margin-top: .5rem;
        width: 100%;
    }
}

/* ===== HERO responsive ===== */
@media (max-width: 1199.98px) {
    .hero {
        padding: 56px 0 32px;
    }
}

@media (max-width: 991.98px) {
    .hero .pill {
        font-size: 13px;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .person-card {
        width: 88% !important;
        border-width: 4px;
    }
}

@media (max-width: 767.98px) {
    .hero {
        text-align: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero .btn {
        width: 100%;
    }

    .person-card {
        width: 92% !important;
        margin-top: 8px;
    }
}

/* ===== Secciones padding responsivo ===== */
@media (max-width: 991.98px) {

    .qh-section,
    .benefits-section,
    .integration-section {
        padding: 64px 0;
    }
}

@media (max-width: 767.98px) {

    .qh-section,
    .benefits-section,
    .integration-section {
        padding: 48px 0;
    }
}

/* ===== Tarjetas responsivas ===== */
@media (max-width: 767.98px) {

    .qh-card,
    .benefit-card,
    .integration-card {
        padding: 18px;
    }

    .qh-icon,
    .benefit-icon,
    .integration-icon {
        width: 52px;
        height: 52px;
    }
}

/* ===== Use-case box: mejor lectura en móviles ===== */
@media (max-width: 767.98px) {
    .use-case-box {
        padding: 24px !important;
    }

    .use-case-box ul {
        font-size: .95rem;
    }
}

/* ===== Footer responsivo ===== */
@media (max-width: 991.98px) {
    .footer-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 767.98px) {
    .site-footer .row {
        text-align: center;
    }

    .footer-brand-img {
        margin-top: 10px;
    }
}

/* ===== Accesibilidad visual (focus visible) ===== */
.action-btn:focus-visible,
.navbar .nav-link:focus-visible,
.btn:focus-visible {
    outline: 3px solid rgba(198, 0, 0, .6);
    outline-offset: 2px;
    border-radius: 12px;
}

/* ===== Pequeños refinamientos visuales ===== */
.badge-soft {
    box-shadow: 0 6px 16px rgba(198, 0, 0, .08);
}

.qh-card,
.benefit-card,
.integration-card {
    backdrop-filter: saturate(1.02);
}

/* Evita scroll horizontal global */
html,
body {
    width: 100%;
    overflow-x: hidden;
    /* fallback amplio */
    overflow-x: clip;
    /* moderno, no reserva scroll */
}

/* Box-sizing consistente para que nada se pase de 100% */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Las secciones con decoraciones/blur no deben “desbordar” */
.hero,
.qh-section,
.benefits-section,
.integration-section,
.site-footer {
    position: relative;
    overflow-x: clip;
    /* recorta lo que se sale a los lados */
    contain: paint;
    /* aísla efectos (blur/sombra) del flujo */
}


/* Ajusta posición para que nunca empujen el ancho del documento */
.qh-blob--1 {
    left: -40px;
}

.qh-blob--2 {
    right: -40px;
}

/* En pantallas muy pequeñas, reduce tamaño y blur */
@media (max-width: 767.98px) {
    .qh-blob {
        width: 200px;
        height: 200px;
        filter: blur(28px);
    }

    .qh-blob--1 {
        left: -24px;
    }

    .qh-blob--2 {
        right: -24px;
    }
}

/* ===== NAVBAR: robustez y capas ===== */
.navbar.sticky-top {
    z-index: 1050;
    /* por encima de secciones con blur/sombras */
    overflow: visible;
    /* evita que el collapse/tooltip se recorte */
    background: #fff;
    /* asegura fondo blanco en scroll */
}

/* Asegura que el ícono hamburguesa sea visible en cualquier contexto */
.navbar-light .navbar-toggler {
    border-color: rgba(0, 0, 0, .15);
}

.navbar-light .navbar-toggler-icon {
    /* SVG oficial de Bootstrap forzado (por si se pierde la variable) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,24,39,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== NAV: que no cause overflow y se vea bien en móvil ===== */
@media (max-width: 991.98px) {

    /* El contenedor del menú ocupa todo el ancho sin provocar scroll */
    .navbar .navbar-collapse {
        width: 100%;
    }

    /* El listado se apila y alinea a la izquierda, sin desbordes */
    .navbar .navbar-nav {
        align-items: flex-start !important;
        padding: .25rem 0;
    }

    .navbar .nav-link {
        width: 100%;
        padding: .6rem .25rem;
        /* más cómodo al tacto */
    }

    /* El botón CTA full width para consistencia visual */
    .navbar .btn-primary {
        width: 100%;
        margin-top: .25rem;
    }
}

/* ===== Protección extra por si el header sufría por los “clips” globales ===== */
header,
.navbar {
    contain: layout paint;
    /* aísla efectos de blur/sombras cercanas */
}

/* ===== CONTACTO ===== */
.contact-section {
    position: relative;
    padding: 80px 0;
    background: #f8f9fb;
}

.contact-intro {
    max-width: 720px;
}

.contact-link {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-form {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 8, 20, .05);
}

.contact-form .form-control {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-form .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(198, 0, 0, .15);
}

.contact-form button {
    font-weight: 700;
}

/* Responsivo */
@media (max-width: 767.98px) {
    .contact-section {
        padding: 56px 0;
    }

    .contact-form {
        padding: 24px !important;
    }
}

/* Contacto: estados de alerta */
#contactAlert {
    border-radius: 12px;
}

#contactAlert.alert-success {
    border: 1px solid rgba(25, 135, 84, .2);
}

#contactAlert.alert-warning {
    border: 1px solid rgba(255, 193, 7, .25);
}

/* FAB volver arriba */
.to-top-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    border: none;
    box-shadow: 0 12px 30px rgba(0, 8, 20, .25);
    cursor: pointer;
    z-index: 1060;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.to-top-btn i {
    font-size: 1.1rem;
}

.to-top-btn.show {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.to-top-btn:hover {
    box-shadow: 0 16px 36px rgba(0, 8, 20, .3);
}

@media (prefers-reduced-motion: reduce) {

    .to-top-btn,
    .reveal {
        transition: none !important;
    }
}

/* Separador entre secciones */
.section-divider {
    height: 64px;
    overflow: hidden;
    background: transparent;
}

.section-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.section-divider path {
    fill: #fff;
    opacity: .96;
    /* color de la siguiente sección (blanco) */
}

.person-card img {
    transition: transform .2s ease;
    will-change: transform;
}

/* Retrasos reutilizables */
.reveal-delay-1 {
    transition-delay: .05s;
}

.reveal-delay-2 {
    transition-delay: .10s;
}

.reveal-delay-3 {
    transition-delay: .15s;
}

.reveal-delay-4 {
    transition-delay: .20s;
}

/* Leve perspectiva en tarjetas para dar vida */
.qh-card,
.benefit-card,
.integration-card {
    transform-style: preserve-3d;
}

.qh-card:hover,
.benefit-card:hover,
.integration-card:hover {
    transform: perspective(800px) rotateX(.8deg) rotateY(-.8deg) translateY(-6px);
}

/* CTA fija solo en móvil */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1055;
    box-shadow: 0 -10px 22px rgba(0, 8, 20, .12);
}

body {
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: 76px;
    }

    /* deja espacio para la barra */
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* Onda del HERO, robusta */
.hero {
    position: relative;
}

/* ya la tienes, pero reforzamos */
.hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    /* puedes subir a 96px si quieres una curva más alta */
    line-height: 0;
    pointer-events: none;
    z-index: 1;
    /* queda por encima del fondo del hero */
}

.hero-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-wave path {
    fill: #fff;
    /* color de la siguiente sección */
    opacity: .98;
}

/* Si la sección siguiente NO es blanca, usa su color de fondo: */
/* .hero-wave path{ fill: #f8f9fb; }  // p. ej., para "benefits-section" */
.section-divider {
    position: relative;
    z-index: 2;
}

.hero {
    z-index: 1;
    /* la onda podrá superponerse visualmente */
}

.section-divider path {
    fill: #fff !important;
    /* fuerza color por si hay overrides */
}

/* Diagonal del HERO */
.hero {
    position: relative;
}

.hero-diagonal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    /* alto de la franja diagonal */
    background: #fff;
    /* color de la sección siguiente (ej. #fff o #f8f9fb) */
    z-index: 1;
    /* Recorta en diagonal: baja en la izquierda, sube en la derecha */
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

/* Variantes rápidas (por si quieres otro ángulo/sentido) */
/* Más inclinada */
.hero-diagonal{ clip-path: polygon(0 100%, 100% 10%, 100% 100%, 0 100%); }
/* Diagonal invertida (baja a la derecha) */
.hero-diagonal{ clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%); }

/* Responsivo: diagonal más delgada en móviles */
@media (max-width: 767.98px) {
    .hero-diagonal {
        height: 56px;
    }
}

.navbar .btn-primary.active,
.navbar .btn-primary:active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}


/* Estado activo de ScrollSpy */
.navbar .nav-link.active {
  color: var(--brand-primary) !important;
  font-weight: 700;
  position: relative;
}

/* Subrayado sutil debajo del link activo */
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background-color: var(--brand-primary);
  border-radius: 2px;
}


.navbar .btn-primary.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}