:root{
    --apx-red:#FF2800; /* Rojo brillante */
    --apx-white:#ffffff;
    --apx-black:#0A0A0A;
    --apx-grey-900:#121212;
    --apx-grey-700:#2A2A2A;
    --apx-grey-500:#6E6E6E;
    --header-h: 120px;           /* altura del header en reposo (sube/baja para hacer el logo mayor/menor) */
    --header-h-scrolled: 64px;  /* altura del header al hacer scroll */
    --header-pad-y: 10px;       /* padding vertical interno del header */
    --logo-radius: 10px;
}

*{box-sizing:border-box}

body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--apx-black);
    background:#fff;
}

/* Branding */
/* Logo tipográfico principal */
.brand-text-logo{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:3px;
    font-size: 3rem;
    font-weight:400;
    transition: font-size .2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Colores del logo */
.brand-text-logo .text-red {
    color: var(--apx-red);
}

.brand-text-logo .text-light {
    color: #e0e0e0;
}
.fw-800{font-weight:800}
.brand-box{
    display:inline-flex;align-items:center;justify-content:center;
    height:32px;min-width:40px;padding:0 8px;
    background:var(--apx-red);color:#fff;border-radius:6px;letter-spacing:1px
}
.brand-text{
    font-family:'Bebas Neue',sans-serif;letter-spacing:2px;font-size:1.4rem;
    color:#fff;
}

/* ===== Header ===== */
.navbar-brand {
    height: 50px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-hero{
    transition:backdrop-filter .25s ease, background-color .25s ease, box-shadow .25s ease;
    background:rgba(0,0,0,.35);
    padding: 0; /* lo calculamos con min-height del navbar */
}

.header-hero.scrolled{
    backdrop-filter:blur(8px);
    background:rgba(0,0,0,.75);
    box-shadow:0 6px 24px rgba(0,0,0,.25);
    padding: 8px 0;         /* reduce padding cuando hace scroll */
}

/* Navbar styling */
.apx-navbar {
    min-height: var(--header-h);
}

.apx-navbar .nav-link{
    color:#fff;
    font-weight: 500;
    transition: color .2s ease;
}

.apx-navbar .nav-link:hover{
    color: var(--apx-red);
}

.btn-cta{
    background:var(--apx-red);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:.7rem 1.2rem;
    font-weight: 600;
    transition: all .2s ease;
}

.btn-cta:hover{
    filter:brightness(.95);
    color:#fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(225,6,0,.3);
}

/* ===== HERO (móvil estable + parallax en desktop) ===== */
.hero-section{
    /* Altura robusta para móviles con barra dinámica */
    min-height:92vh;
    min-height:100svh;

    /* Capas: degradado + imagen (ruta relativa desde /assets/css/ -> /assets/img/) */
    background-image:
            linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.55) 100%),
            url('../img/hero-apx.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    /* En móvil: NUNCA fixed (evita bug iOS/Android) */
    background-attachment:scroll, scroll;

    position:relative;
}

/* En desktop (>=992px): activa fixed solo para la imagen */
@media (min-width:992px){
    .hero-section{
        /* Gradiente scroll, imagen fija para efecto parallax */
        background-attachment:scroll, fixed;
    }
}

.hero-section .overlay{position:absolute;inset:0;pointer-events:none}
.hero-section h1{font-family:'Bebas Neue',sans-serif;letter-spacing:1px}
.text-brand{color:var(--apx-red)}
.hero-bullets{list-style:none;padding:0;margin:0}
.hero-bullets li {
    margin-bottom: 0.6rem; /* ajusta el valor al gusto: 0.6rem, 0.8rem, 1rem... */
    line-height: 1.5;      /* opcional, mejora la lectura */
}
.hero-bullets li:not(:last-child) {
    margin-bottom: 0.8rem;
}
.hero-bullets li::before{content:'▸';color:var(--apx-red);margin-right:.5rem;font-weight:800}

.text-justificado {
    text-align: justify;   /* ajusta las líneas para que terminen todas al mismo ancho */
    text-indent: 1.5em;    /* sangrado solo en la primera línea */
}

/* Secciones */
.section-title{font-family:'Bebas Neue',sans-serif;letter-spacing:.5px}
.bg-dark{background:var(--apx-grey-900)!important}

.stats .stat-card{
    background:var(--apx-grey-700);color:#fff;border-radius:14px;padding:1rem 1.2rem;min-width:150px
}
.stat-number{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1}
.stat-label{font-size:.9rem;color:#cfcfcf}

/* Pasos con borde marcado */
.step-card{
    border: 2px solid #d9d9d9;              /* borde más visible */
    border-radius: 14px;
    padding: 1.2rem 1.2rem 1rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.step-card:hover{
    border-color: var(--apx-red);            /* cambia a rojo al hacer hover */
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.step-card .step-number{
    width:40px;height:40px;border-radius:10px;background:var(--apx-red);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:.6rem
}

/* Testimonio */
.testimonial {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    position: relative;
    padding: 0 2.25rem; /* espacio a los lados para las comillas */
}

.testimonial::before,
.testimonial::after {
    position: absolute;
    top: -0.6rem;          /* misma altura */
    font-size: 3rem;
    color: var(--apx-red);
    font-weight: 800;
    line-height: 1;
}

.testimonial::before {
    content: '“';          /* comilla de apertura */
    left: 0;
}

.testimonial::after {
    content: '”';          /* comilla de cierre */
    right: 0;
}

.testimonial cite {
    display: block;
    margin-top: .5rem;
    font-style: normal;
    opacity: .8;
}
/* Footer */
.apx-footer{background:var(--apx-black);color:#fff}

/* Formularios */
.form-control:focus{border-color:var(--apx-red);box-shadow:0 0 0 .2rem rgba(225,6,0,.15)}
.btn-outline-dark:hover{background:var(--apx-black);color:#fff;border-color:var(--apx-black)}
.btn-outline-light:hover{background:#fff;color:#000}

/* WhatsApp flotante */
.whatsapp-float{
    position:fixed;right:18px;bottom:18px;z-index:1040;width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);transition:transform .15s ease, filter .15s ease
}
.whatsapp-float:hover{transform:translateY(-2px);filter:brightness(.95)}
.whatsapp-float i{font-size:1.6rem;line-height:1}
@media (prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}

/* Hamburguesa visible en móvil */
@media (max-width:991.98px){
    .apx-navbar .navbar-toggler{
        filter:invert(1);
        border: 1px solid rgba(255,255,255,.2);
    }
}
.navbar-toggler:focus{box-shadow:none}

/* Offcanvas oscuro */
.apx-offcanvas{background:rgba(0,0,0,.92);color:#fff;backdrop-filter:blur(12px)}
.apx-offcanvas .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12)}
.apx-offcanvas .nav-link{color:#fff;font-weight:600;padding:.75rem 0;border-radius:8px;transition:all .2s ease}
.apx-offcanvas .nav-link:hover{color:var(--apx-red);background:rgba(225,6,0,.1)}
.header-hero.scrolled .apx-navbar{
    min-height: var(--header-h-scrolled);
}
/* Logo en el offcanvas también */
.header-hero.scrolled .brand-text-logo{
    font-size: 1.5rem;
}
@media (max-width: 575.98px) {
    .brand-text-logo {
        font-size: 2rem;
        letter-spacing: 2px;
        margin-left: 10px;
    }

    .header-hero.scrolled .brand-text-logo {
        font-size: 1.2rem;
    }

    /* Estos estilos ya estaban, mantenerlos: */
    .image-container {
        height: 200px;
    }

    .image-overlay {
        padding: 2rem 1rem 1rem;
        transform: translateY(20%);
    }

    .stop-indicator {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Ajustes para tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .apx-logo {
        height: 38px;
        width: 38px;
    }
}

/* Evita solape del header fijo con el contenido */
body{ padding-top: calc(var(--header-h) + 4px); }
@media (min-width:992px){
    body{ padding-top: calc(var(--header-h) + 6px); }
    .header-hero.scrolled {
        padding: 6px 0;
    }
    .header-hero.scrolled .apx-logo {
        height: 36px;
        width: 36px;
    }
}
     /* ===== RUTA VIRTUAL ===== */
 .virtual-gallery {
     position: relative;
 }

/* Línea de timeline conectora */


/* Paradas de la ruta */
.gallery-stop {
    position: relative;
    z-index: 2;
}

/* Indicadores numerados */
.stop-indicator {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: var(--apx-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(225,6,0,0.3);
    border: 4px solid white;
}

/* Efecto pulse para el último indicador */
.pulse-effect {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 4px 15px rgba(225,6,0,0.3), 0 0 0 0 rgba(225,6,0,0.4); }
    70% { box-shadow: 0 4px 15px rgba(225,6,0,0.3), 0 0 0 10px rgba(225,6,0,0); }
    100% { box-shadow: 0 4px 15px rgba(225,6,0,0.3), 0 0 0 0 rgba(225,6,0,0); }
}

/* Tarjetas de galería */
.gallery-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    cursor: pointer;
    margin-top: 25px;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Contenedor de imagen */
.image-container {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-card:hover .gallery-image {
    transform: scale(1.08);
}

/* Overlay de información */
.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white;
    padding: 2.5rem 1.5rem 1.5rem;
    transform: translateY(50%);
    transition: transform 0.3s ease;
}

.gallery-card:hover .image-overlay {
    transform: translateY(0);
}

.image-overlay h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.image-overlay p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.4;
    margin: 0;
}

/* Badge deportivo */
.sport-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--apx-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}



.cta-card .stop-indicator {
    background: #28a745;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 4px 15px rgba(40,167,69,0.3), 0 0 0 0 rgba(40,167,69,0.4); }
    70% { box-shadow: 0 4px 15px rgba(40,167,69,0.3), 0 0 0 10px rgba(40,167,69,0); }
    100% { box-shadow: 0 4px 15px rgba(40,167,69,0.3), 0 0 0 0 rgba(40,167,69,0); }
}

/* Marcador de final de ruta */
.route-end-marker {
    font-size: 3rem;
    opacity: 0.8;
}

/* Responsivo */
@media (max-width: 991.98px) {
    .route-timeline {
        display: none !important;
    }

    .stop-indicator {
        top: -10px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .gallery-card {
        margin-top: 20px;
    }

    .image-container {
        height: 240px;
    }

    .image-overlay {
        transform: translateY(30%);
    }
}

@media (max-width: 575.98px) {
    .apx-logo{
        height: calc(var(--header-h) - var(--header-pad-y) * 2 - 8px);
    }
    .image-container {
        height: 200px;
    }

    .image-overlay {
        padding: 2rem 1rem 1rem;
        transform: translateY(20%);
    }

    .stop-indicator {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}
/* === Botones del HERO: mismo tamaño === */
.hero-section .d-flex > .btn{
    /* Igualar ANCHO en fila */
    flex: 1 1 0;
    min-width: 0;                 /* evita desbordes por texto largo */
    /* Igualar ALTURA y centrado del contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;                   /* espacio entre icono y texto */
    min-height: 52px;             /* aprox. altura de .btn-lg */
    text-align: center;
    white-space: nowrap;          /* evita saltos feos en desktop */
}

/* En móviles: que se apilen y sigan ocupando el 100% */
@media (max-width: 575.98px){
    .hero-section .d-flex{
        flex-wrap: wrap;
    }
    .hero-section .d-flex > .btn{
        flex: 1 0 100%;
    }
}

/* Opcional: que el botón outline tenga mismo “peso” visual que el sólido */
.hero-section .btn-outline-light{
    border-width: 2px;
}
.hero-section .btn-cta{
    border-width: 2px;            /* para que ambos tengan mismo grosor de borde */
}