/*PALETA DE COLORES DEL PROYECTO - CLUB DE LOS GRANDES*/
:root {
    --isp-color-negro: #010206;
    --isp-color-azul-negro: #0D113AFF;
    --isp-color-morado: #3C038C;
    --isp-color-morado-isp: #292655FF;
    --isp-color-azul: #1C418C;
    --isp-color-azul-sigob: #11308C;
    --isp-color-celeste: #B6DBF2;
    --isp-color-amarillo: #FADD52FF;
    --isp-color-rosa: #F55379FF;
    --isp-color-gris: #D1D2D2;
    --isp-color-blanco: #FFFFFF;
    --isp-color-celeste2: #569ff7;
    --los-arcos-primary: #000;
    --los-arcos-secundary: #6391d3;
}

.fondo-hero img {
    padding: 1% 0 0 0;
    width: 15vh;
}

.fondo-hero {
    !important;
    position: relative;
    !important;
    padding: 0px 0 10px 0;
}

.fondo-hero::after {
    content: " ";
    background: rgb(245, 83, 121);
    background: -moz-linear-gradient(90deg, rgba(245, 83, 121, 1) 0%, rgba(250, 221, 82, 1) 5%, rgba(41, 38, 85, 1) 6%, rgba(13, 17, 58, 1) 50%);
    background: -webkit-linear-gradient(90deg, rgba(245, 83, 121, 1) 0%, rgba(250, 221, 82, 1) 5%, rgba(41, 38, 85, 1) 6%, rgba(13, 17, 58, 1) 50%);
    background: linear-gradient(90deg, rgba(245, 83, 121, 1) 0%, rgba(250, 221, 82, 1) 5%, rgba(41, 38, 85, 1) 6%, rgba(13, 17, 58, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f55379", endColorstr="#0d113a", GradientType=1);
    position: absolute;
    -webkit-transform: skewY(-3deg);
    transform: skewY(-3deg)
}

.isp-color-text-morado {
    color: var(--isp-color-morado);
}

.isp-color-text-morado-isp {
    color: var(--isp-color-morado-isp);
}

.isp-color-text-negro {
    color: var(--isp-color-negro);
}

.isp-color-text-azul {
    color: var(--isp-color-azul);
}

.isp-color-text-azul-sigob {
    color: var(--isp-color-azul-sigob);
}

.isp-color-text-celeste {
    color: var(--isp-color-celeste);
}

.isp-color-text-amarillo {
    color: var(--isp-color-amarillo);
}

.isp-color-text-rosa {
    color: var(--isp-color-rosa);
}

.isp-color-text-azul-negro {
    color: var(--isp-color-azul-negro);
}

.sip-color-text-gris {
    color: var(--isp-color-gris);
}

.isp-color-text-blanco {
    color: var(--isp-color-blanco);
}

.isp-color-text-celeste2 {
    color: var(--isp-color-celeste2);
}

.los-arcos-text-primary {
    color: var(--los-arcos-primary);
}

.los-arcos-text-secondary {
    color: var(--los-arcos-secundary);
}

/*BACKGROUND*/
.los-arcos-bg-primary {
    background: var(--los-arcos-primary);
}

.los-arcos-bg-secondary {
    background: var(--los-arcos-secundary);
}

.isp-bg-morado {
    background: var(--isp-color-morado);
}

.isp-bg-morado-isp {
    background: var(--isp-color-morado-isp);
}

.isp-bg-negro {
    background: var(--isp-color-negro);
}

.isp-bg-azul {
    background: var(--isp-color-azul);
}

.isp-bg-azul-sigob {
    background: var(--isp-color-azul-sigob);
}

.isp-bg-celeste {
    background: var(--isp-color-celeste);
}

.isp-bg-amarillo {
    background: var(--isp-color-amarillo);
}

.isp-bg-rosa {
    background: var(--isp-color-rosa);
}

.isp-bg-azul-negro {
    background: var(--isp-color-azul-negro);
}

.isp-bg-gris {
    background: var(--isp-color-gris);
}

.isp-bg-blanco {
    background: var(--isp-color-blanco);
}

.isp-bg-celeste2 {
    background: var(--isp-color-celeste2);
}

.isp-bg-gradient {
    background: var(--isp-color-negro);
    background: -moz-linear-gradient(90deg, var(--isp-color-negro) 0%, var(--isp-color-azul) 100%);
    background: -webkit-linear-gradient(90deg, var(--isp-color-negro) 0%, var(--isp-color-azul) 100%);
    background: linear-gradient(90deg, var(--isp-color-negro) 0%, var(--isp-color-azul) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--isp-color-negro), endColorstr=var(--isp-color-azul), GradientType=1);
}

.isp-bg-gradient-morado {
    background: var(--isp-color-morado-isp);
    background: -moz-linear-gradient(90deg, var(--isp-color-morado-isp) 0%, var(--isp-color-azul-negro) 100%);
    background: -webkit-linear-gradient(90deg, var(--isp-color-morado-isp) 0%, var(--isp-color-azul-negro) 100%);
    background: linear-gradient(90deg, var(--isp-color-morado-isp) 0%, var(--isp-color-azul-negro) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--isp-color-morado-isp), endColorstr=var(--isp-color-azul-negro), GradientType=1);
}

.los-arcos-bg-gradient {
    background: var(--los-arcos-primary);
    background: -moz-linear-gradient(90deg, var(--los-arcos-primary) 0%, var(--isp-color-negro) 100%);
    background: -webkit-linear-gradient(90deg, var(--los-arcos-primary) 0%, var(--isp-color-negro) 100%);
    background: linear-gradient(90deg, var(--los-arcos-primary) 0%, var(--isp-color-negro) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--los-arcos-primary), endColorstr=var(--isp-color-negro), GradientType=1);
}

/**/

/* Botón flotante */
.btn-float {
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: background-color 0.3s ease;
    animation: pulse 2s infinite;
    position: relative;
}

/* Tooltip */
.btn-float::after {
    content: "Chatea con nosotros";
    position: absolute;
    bottom: 70px;
    right: 0;
    background-color: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.btn-float:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Animación pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.floating-button {
    position: fixed;
    bottom: 5vh;
    right: 5vh;
    z-index: 100;
}


.isp-font-museo-w100 {
    font-family: museo-sans-w100, sans-serif;
    font-weight: normal;
}

.isp-font-museo {
    font-family: museo-sans, museo-sans-w100, sans-serif;
    font-weight: normal;
}

.isp-font-museo-100 {
    font-family: museo-sans, sans-serif;
    font-weight: 100;
}

.isp-font-museo-200 {
    font-family: museo-sans, sans-serif;
    font-weight: 200;
}

.isp-font-museo-300 {
    font-family: museo-sans, sans-serif;
    font-weight: 300;
}

.isp-font-museo-400 {
    font-family: museo-sans, sans-serif;
    font-weight: 400;
}

.isp-font-museo-500 {
    font-family: museo-sans, sans-serif;
    font-weight: 500;
}

.isp-font-museo-600 {
    font-family: museo-sans, sans-serif;
    font-weight: 700;
}

.isp-font-museo-600 {
    font-family: museo-sans, sans-serif;
    font-weight: 600;
}

.isp-font-museo-700 {
    font-family: museo-sans, sans-serif;
    font-weight: 700;
}

.isp-font-museo-800 {
    font-family: museo-sans, sans-serif;
    font-weight: 800;
}

.isp-font-museo-900 {
    font-family: museo-sans, sans-serif;
    font-weight: 900;
}

div#toDown {
    min-height: 100dvh;
    grid-template-rows: 1fr auto;
    margin-bottom: 0rem;
}

.form-steps-container {
    position: relative;
    bottom: auto;
    left: 0;
    right: 0;
    /*background-color: rgba(255, 255, 255, 0.363) ;*/
    padding: 10px 0;
    /*box-shadow: 0 -2px 10px rgba(0,0,0,0.1);*/
    z-index: 1000;
    width: 100%;
}

.form-step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step-indicator {
    cursor: pointer;
    display: inline-block;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 50%;
    background-color: #9c9c9c;
    margin: 0 5px;
    border-style: solid;
    border-color: var(--ct-blue) !important;
}

.step-indicator.active {
    background-color: var(--ct-dark);
}

.form-section {
    display: none;
}

.form-section.active {
    display: block;
}


@media (min-width: 576px) {
    .footer-cita>.menu {
        background: var(--isp-color-azul-negro);
        !important;
        display: inline;
        !important;
        margin: 0;
        !important;
    }

    .menu {
        justify-content: center;
    }

    .menu a {
        position: relative;
        display: block;
        overflow: hidden;
    }

    .menu a span {
        transition: transform 0.2s ease-out;
    }

    .menu a span:first-child {
        display: inline-block;
        padding: 10px;
    }

    .menu a span:last-child {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
        transform: translateY(-100%);
    }

    .menu i {
        font-size: 30px;
    }

    .menu a:hover span:first-child {
        transform: translateY(100%);
    }

    .menu a:hover span:last-child,
    .menu[data-animation] a:hover span:last-child {
        transform: none;
    }

    /* MENU ANIMACIÓN
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .menu[data-animation="to-top"] a span:last-child {
        transform: translateY(100%);
    }

    .menu[data-animation="to-top"] a:hover span:first-child {
        transform: translateY(-100%);
    }
}

.menu .logo-img {
    max-height: 50px;
    object-fit: contain;
}

@media (max-width: 576px) {
    .menu {
        display: none;
    }

    .footer-cita>.menu {
        background: var(--isp-color-azul-negro);
        !important;
        display: none;
        !important;
    }
}

/*body {*/
/*    height: 100%;*/
/*}*/
main {
    padding-bottom: 0.55%;
}

/*FOOTER CITAS*/
.footer-cita {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    color: white;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*height: 10dvmin;*/
}

.footer-cita a {
    /*color: white;*/
    font-size: 1.5rem;
    margin: 0 0.3rem;
}

/*.footer-cita > .menu{*/
/*    background: var(--isp-color-azul-negro); !important;*/
/*    display: inline; !important;*/
/*    margin: 0; !important;*/
/*}*/

.footer-cita>.menu>div>a>span {
    font-size: 12px;
    !important;
}

.menu-cita {
    display: flex;
    justify-content: center;
}

.menu-colapse {
    display: inline-grid;
    justify-items: end;
    justify-content: center;
}

div#menuClubDeLosGrandes {
    font-size: x-large;
}

/*ESTILOS ROUNDED*/

.isp-rounded {
    border-radius: 10px 10px 10px 10px;
}

.bd-example>.dropdown-menu {
    position: static;
    display: block;
}

/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #2A5779 #DFE9EB;
}*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

*::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #DFE9EB;
}

*::-webkit-scrollbar-track:hover {
    background-color: #B8C0C2;
}

*::-webkit-scrollbar-track:active {
    background-color: #B8C0C2;
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--los-arcos-primary);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #3A78A6;
}

*::-webkit-scrollbar-thumb:active {
    background-color: #3A78A6;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

nav a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


button {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

footer {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.icono-pequeno {
    font-size: 0.4em;
    bottom: 0.4rem;
    padding: 0 0 0 0rem;
}

.text-justify {
    text-align: justify;
}

.card {
    background-color: var(--isp-color-gris);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}


/* 1. CONFIGURACIÓN DE LA TARJETA (Efecto Subir) */
.shake {
    /* Suavizamos el movimiento y la sombra */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.shake:hover {
    /* Sube 10 pixeles */
    transform: translateY(-10px);
    /* Agrega una sombra sutil abajo para dar sensación de altura */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* Opcional: cambiar borde */
    border-color: rgba(0, 0, 0, 0.1);
}

/* 2. ANIMACIÓN DEL ICONO (El Zoom) */
.shake:hover .fa-stack {
    animation: zoomInOut 0.8s ease forwards;
}

/* 3. CAMBIO DE COLOR DEL ICONO INTERNO */
/* .fa-stack-1x es el icono del centro (el edificio, casco, etc.) */
.shake:hover .fa-stack-1x {
    /* Cambia este color por el que gustes. 
       Ejemplo: #fff (blanco) para contraste o #ffc107 (amarillo/dorado) */
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* (Opcional) Si quieres cambiar también el color del CIRCULO de fondo */

.shake:hover .fa-stack-2x {
    color: #000 !important;
}


/* 4. DEFINICIÓN DE LA ANIMACIÓN */
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        /* 1.5 puede ser muy brusco, 1.3 es más elegante */
    }

    100% {
        transform: scale(1);
    }
}

/* --- ESTILOS TARJETAS INFO (Misión / Visión) --- */

/* --- CONTENEDOR PRINCIPAL --- */
.info-cards {
    display: flex;
    /* CAMBIO CLAVE: row para que estén lado a lado */
    flex-direction: row; 
    /* IMPORTANTE: wrap permite que baje uno si la pantalla es muy chica (móvil) */
    flex-wrap: wrap;     
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 40px;
}

/* --- EL ENLACE QUE ENVUELVE LA TARJETA --- */
.info-cards a {
    /* flex: 1 hace que ambos intenten ocupar el mismo ancho disponible */
    flex: 1;
    /* Evita que se hagan demasiado pequeños antes de bajar de línea */
    min-width: 300px; 
    /* Evita que se estiren demasiado en pantallas gigantes */
    max-width: 600px;
    
    text-decoration: none;
    display: flex; /* Para que la tarjeta interna ocupe todo el alto */
}

/* --- LA TARJETA INDIVIDUAL --- */
.info-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Aseguramos que ocupe todo el espacio que le da el enlace padre */
    width: 100%; 
    height: 100%; /* Para que ambas tarjetas tengan la misma altura visual */
}

/* ... El resto del CSS (iconos, hover, tipografía) se mantiene igual ... */

/* Capa de degradado invisible */
.info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    z-index: 0; 
    transition: opacity 0.3s ease;
}

.info-cards a:hover .info-card{
    transform: translateY(-5px);
    border-color: var(--isp-color-azul-sigob);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    background-color: var(--los-arcos-primary);
}

/* --- ICONO CIRCULAR --- */
.info-icon {
    position: relative;
    z-index: 1;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--isp-color-negro, #333), var(--los-arcos-secundary, #0056b3));
    background-size: 200% 100%;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 25px;
    transition: all 0.5s ease;
}

.info-cards a:hover .info-icon {
    background: white;
    color: var(--los-arcos-secundary);
    /*transform: scale(1.1) rotate(5deg); /* Pequeño efecto extra */
}

/* --- TIPOGRAFÍA --- */
.info-card h3 {
    position: relative;
    z-index: 1;
    color: #6c757d;
    transition: color 0.3s ease;
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.info-cards a:hover h3 {
    color: white;
}

.info-card p {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

.info-cards a:hover p {
    color: #D2D6D9;
}

.menu-cita > a.los-arcos-text-secondary.mt-3 {
    min-width: fit-content;
    max-width: fit-content;
}

.map-shadow {
    /* Sombra suave y difusa */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* Asegura que el mapa no se salga de los bordes redondeados */
    overflow: hidden; 
    
    /* Borde blanco opcional para resaltar el mapa del fondo */
    border: 5px solid white; 
}