/* Import Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&display=swap'); */

:root {
    /* Paleta Principal */
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    --isade-red: #D32F2F;
    --isade-red-dark: #B71C1C;

    /* Fondos */
    --light-bg: #F8F9FA;
    --white-bg: #FFFFFF;
    --dark-bg: #222B38;
    --darker-bg: #1A202C; /* Usado como fallback para hero-section */
    --isade-gradient-start: #3E4A5B;
    --isade-gradient-end: #2C3643;


    /* Textos */
    --text-light: #E2E8F0;
    --text-dark: #343a40;
    --text-muted-dark: #6c757d;
    --text-muted-light: #adb5bd;


    /* Fuentes */
    --font-headings: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark); 
    background-color: var(--white-bg); 
    padding-top: 80px; 
    scroll-behavior: smooth;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--text-dark); 
}
section.section-bg-dark h1, section.section-bg-dark h2, section.section-bg-dark h3, section.section-bg-dark h4, section.section-bg-dark h5, section.section-bg-dark h6,
section.section-bg-darker h1, section.section-bg-darker h2, section.section-bg-darker h3, section.section-bg-darker h4, section.section-bg-darker h5, section.section-bg-darker h6,
#nuestra-esencia h1, #nuestra-esencia h2, #nuestra-esencia h3, #nuestra-esencia h4, #nuestra-esencia h5, #nuestra-esencia h6 {
    color: var(--text-light); 
}


.display-3, .display-4, .display-5 {
    font-weight: 900 !important; 
}

.navbar {
    background-color: var(--white-bg) !important; 
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-bottom: 1px solid #e0e0e0; 
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar-brand {
    font-family: var(--font-headings);
    font-weight: 900;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}
.navbar-brand img {
    margin-right: 10px; 
}

.nav-link {
    color: var(--text-dark) !important; 
    font-weight: 600;
    margin-left: 20px;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 8px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--isade-red); 
    transition: width 0.3s ease-in-out;
    border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--isade-red) !important; 
}

.navbar-toggler {
    border-color: rgba(211, 47, 47, 0.5); 
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(211, 47, 47, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); 
}

.isade-nav-login-btn {
    border-width: 2px !important;
    font-weight: 700;
}

/* Hero Section */
.hero-section {
    position: relative;
    color: #fff;
    /* padding-bottom: 0; Se quita si video-showcase no se solapa, se controla con padding de hero-content */
    margin-top: -80px; 
    padding-top: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 70vh; /* Altura mínima base, se ajusta en media queries */
    background-color: var(--darker-bg); /* Color de fallback */
    overflow: hidden; /* Para evitar desbordamientos del carrusel si hay problemas de dimensiones */
}

#heroCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1; 
}

#heroCarousel .carousel-item {
    height: 100%; 
}

#heroCarousel .carousel-item img,
.carousel-video {
    object-fit: cover;
    height: 100%; 
    width: 100%; 
    filter: brightness(0.6);
}

/* Hero Content overlay */
.hero-content {
    position: relative; 
    z-index: 10; 
    padding-top: calc(80px + 3rem); 
    padding-bottom: 4rem; 
    color: #fff;
    width: 100%;
    max-width: 960px; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-section h1 {
    color: #fff; 
    font-size: 1.8rem; 
}
.hero-section .slogan {
    color: var(--secondary-color); 
    font-style: italic;
    font-size: 1.1rem; 
}
.hero-section .lead {
     color: var(--text-light); 
     font-size: 1rem; 
}
.hero-section .btn-primary {
    font-size: 1rem; 
    padding: 0.75rem 1.5rem;
}


#heroCarousel .carousel-caption {
    bottom: 10%; 
    padding: 15px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
}

#heroCarousel .carousel-caption h5 {
    font-size: 1.5rem; 
    font-weight: 900;
    color: var(--secondary-color);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    margin-bottom: 0.5rem;
}

#heroCarousel .carousel-caption p {
    font-size: 0.9rem; 
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    display: none; 
}


/* Video Showcase */
.video-showcase {
    position: relative;
    z-index: 10; 
    background-color: var(--darker-bg); 
    padding-top: 2rem; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px;
    margin-top: 0; 
}
.video-showcase h3 { color: var(--text-light); }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); margin-bottom: 0.5rem; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-showcase p { color: var(--text-light); font-style: italic; }

section { overflow-x: hidden; }
.section-bg-dark { background-color: var(--dark-bg); color: var(--text-light); }
.section-bg-darker { background-color: var(--darker-bg); color: var(--text-light); }
.section-bg-light { background-color: var(--light-bg); color: var(--text-dark); }
.section-bg-white { background-color: var(--white-bg); color: var(--text-dark); } 

.section-bg-light h1, .section-bg-light h2, .section-bg-light h3, .section-bg-light h4, .section-bg-light h5, .section-bg-light h6,
.section-bg-white h1, .section-bg-white h2, .section-bg-white h3, .section-bg-white h4, .section-bg-white h5, .section-bg-white h6 {
    color: var(--text-dark);
}

.highlight { color: var(--isade-red); font-weight: 600; cursor: help; }
.section-bg-dark .highlight-light, 
.section-bg-darker .highlight-light,
#nuestra-esencia .highlight-light {
    color: var(--secondary-color); 
    font-weight: 700;
}

.tooltip-inner { background-color: var(--isade-red); color: #fff; border-radius: 0.25rem; padding: 0.5rem 1rem; font-family: var(--font-body); }
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--isade-red); }
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--isade-red); }
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.bs-tooltip-left .tooltip-arrow::before { border-left-color: var(--isade-red); }
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.tooltip.bs-tooltip-right .tooltip-arrow::before { border-right-color: var(--isade-red); }

/* --- Nueva Sección: Nuestra Esencia --- */
#nuestra-esencia {
    background-color: #2c3e50; 
    color: var(--text-light);
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden; 
}

#nuestra-esencia .container {
    position: relative; 
    z-index: 1;
}

#nuestra-esencia .display-5 { 
    font-size: 2.8rem; 
    font-weight: 900; 
    color: #fff; 
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    margin-bottom: 2rem !important;
}

#nuestra-esencia .lead {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-light);
    opacity: 0.9;
    line-height: 1.7;
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

#nuestra-esencia .alma-proposito-mundo-block { 
    background-color: rgba(255, 255, 255, 0.05); 
    border-left: 4px solid var(--isade-red); 
    padding: 2.5rem 2rem;
    border-radius: 8px;
    margin-top: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

#nuestra-esencia .alma-proposito-mundo-block h3 {
    font-size: 1.8rem;
    font-weight: 700; 
    color: var(--secondary-color); 
    margin-bottom: 1.5rem !important; 
    line-height: 1.4;
}
#nuestra-esencia .alma-proposito-mundo-block h3:last-child {
    margin-bottom: 0 !important;
}

#nuestra-esencia .display-6 { 
    font-size: 2rem;
    color: #fff;
    margin-top: 3rem !important;
}

#nuestra-esencia .key-phrases .p-3 {
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
#nuestra-esencia .key-phrases .p-3:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}
#nuestra-esencia .key-phrases i {
    color: var(--isade-red); 
    margin-bottom: 0.75rem !important;
    font-size: 2.5rem; 
}
#nuestra-esencia .key-phrases h5 {
    color: var(--text-light);
    font-weight: 600; 
    font-size: 1.1rem;
}


#acerca-de .blockquote-custom {
    border-left: 5px solid var(--isade-red);
}
#acerca-de .fa-2x { 
    color: var(--isade-red) !important;
}
#acerca-de h5 {
     color: var(--text-light) !important;
}
#acerca-de .small {
    color: var(--text-muted-light) !important;
}

.principle-card {
    background-color: var(--white-bg);
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.principle-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
.principle-card .text-primary { 
    color: var(--isade-red) !important;
}
.principle-card .text-secondary { 
     color: var(--secondary-color) !important;
}
.principle-card ul { padding-left: 1rem; }
.principle-card li { margin-bottom: 0.3rem; }

.training-card {
    background-color: var(--dark-bg); 
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-light);
}
.training-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2); 
    border-color: var(--isade-red);
}
.training-card .card-title {
    color: #fff; 
    margin-top: 0.5rem;
}
.training-card .text-secondary { 
    color: var(--isade-red) !important;
}
.training-card .card-text {
    color: var(--text-muted-light);
}

#martin-arevalo {
    background-color: var(--light-bg);
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#martin-arevalo img {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border: 5px solid var(--isade-red); 
    max-width: 300px;
    height: auto;
}
#martin-arevalo h2 {
    color: var(--text-dark);
}
#martin-arevalo p {
    color: var(--text-dark);
}

.benefit-card { background-color: var(--white-bg); border: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; }
.benefit-card .text-primary { color: var(--isade-red) !important; }

.content-card { background-color: var(--dark-bg); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--text-light); }
.content-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2); border-color: var(--isade-red); }
.content-card .card-title { color: var(--secondary-color); } 
.content-card .card-text { color: var(--text-muted-light); opacity: 0.9; }
.content-card img { opacity: 0.9; transition: opacity 0.3s ease; }
.content-card:hover img { opacity: 1; }

#content-stats {
    background: linear-gradient(135deg, var(--isade-red) 0%, var(--isade-red-dark) 100%); 
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
#content-stats .counters i {
    color: rgba(255,255,255,0.7); 
}
#content-stats .counter-value {
    font-family: var(--font-headings);
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
#content-stats .lead {
    font-weight: 600;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
}
#content-stats h2 {
    color: #fff;
}
#content-stats h4 {
    color: rgba(255,255,255,0.8);
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* --- Sección Slider de Libros --- */
#libros-destacados .libro-item img {
    width: 100%;
    height: auto; 
    max-height: 300px; 
    object-fit: contain; 
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#libros-destacados .libro-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
#librosCarousel .carousel-control-prev-icon,
#librosCarousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%;
    width: 3rem; 
    height: 3rem;
    background-size: 50% 50%; 
}
#librosCarousel .carousel-control-prev,
#librosCarousel .carousel-control-next {
    width: 5%; 
}


.chart-container { margin-bottom: 1rem; }
#barChartCasosExitoIsade, #pieChartBeneficiosIsade { max-width: 100%; }
.section-bg-light canvas { background-color: transparent; }
.section-bg-light p.text-muted { color: var(--text-muted-dark) !important; }
.chartjs-render-monitor { 
     animation-duration: 0.001s;
}

.testimonial-card { background-color: rgba(255,255,255,0.05); padding: 2rem; border-radius: 8px; text-align: center; color: var(--text-light); }
.testimonial-card img { width: 100px; height: 100px; object-fit: cover; border: 3px solid var(--isade-red); }
.testimonial-card h5 { color: var(--secondary-color); }
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon { background-color: var(--isade-red); border-radius: 50%; padding: 10px; }

/* --- Sección FAQ --- */
#faq .accordion-button {
    font-weight: 600;
    color: var(--text-dark);
}
#faq .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--isade-red);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
#faq .accordion-button:not(.collapsed)::after { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
#faq .accordion-body {
    font-size: 0.95rem;
    line-height: 1.6;
}
#faq .accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    overflow: hidden; 
}

.section-bg-primary-gradient { background: linear-gradient(135deg, var(--isade-red) 0%, var(--isade-red-dark) 100%); color: #fff; } 
.section-bg-primary-gradient h2, .section-bg-primary-gradient p, .section-bg-primary-gradient a { color: #fff !important; }
.plan-card { border: none; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.plan-card:hover { transform: translateY(-10px); }
.plan-card .card-header { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.plan-card .card-body { color: var(--text-dark); }
.plan-card .card-title { color: var(--isade-red); }
.plan-card .btn-outline-primary { color: var(--isade-red); border-color: var(--isade-red); }
.plan-card .btn-outline-primary:hover { background-color: var(--isade-red); color: #fff; }
.plan-card .btn-primary { background-color: var(--isade-red); border-color: var(--isade-red); }
.plan-card .btn-primary:hover { background-color: var(--isade-red-dark); border-color: var(--isade-red-dark); }

.popular-plan { border: 3px solid var(--secondary-color);  box-shadow: 0 0 25px rgba(80, 227, 194, 0.5); }
.popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: var(--darker-bg); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; }
.popular-plan .card-header { padding-top: 25px; }

/* --- Sección Newsletter Signup --- */
#newsletter-signup {
    background-color: var(--dark-bg); 
}
#newsletter-signup .form-control-lg {
    padding: 0.75rem 1.25rem; 
}
#newsletter-signup .btn-primary { 
    background-color: var(--isade-red) !important;
    border-color: var(--isade-red) !important;
}
#newsletter-signup .btn-primary:hover {
    background-color: var(--isade-red-dark) !important;
    border-color: var(--isade-red-dark) !important;
}


#contacto .card { background-color: var(--dark-bg) !important; } 
#contacto .card h3, #contacto .card p { color: var(--text-light) !important; }
#contacto .btn-outline-primary { color: var(--isade-red); border-color: var(--isade-red); }
#contacto .btn-outline-primary:hover { background-color: var(--isade-red); color: var(--white-bg); border-color: var(--isade-red); }
#contacto .highlight-light { color: var(--secondary-color) !important; } 


footer { background-color: var(--darker-bg) !important; }
footer a:hover { color: var(--isade-red) !important; }
footer .fw-bold:hover { color: var(--isade-red) !important; }

.cookie-banner { z-index: 1050; background-color: var(--darker-bg) !important; border-top: 1px solid rgba(255,255,255,0.1); }
.cookie-banner p { margin-right: 15px; }
.cookie-banner a { color: var(--secondary-color) !important; text-decoration: underline; }
.cookie-banner .btn-primary { background-color: var(--isade-red); border-color: var(--isade-red); }

.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25D366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 1000; transition: transform 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.1); color: #FFF; }
.whatsapp-float i { margin-top: 15px; }

[data-aos] { transition-property: transform, opacity; }


/* --- Media Queries --- */
@media (min-width: 768px) { 
    #heroCarousel .carousel-caption p { display: block; }
    .hero-section h1 { font-size: 2.5rem; } 
}
@media (min-width: 992px) { 
    .hero-section { min-height: 90vh; } 
    .hero-section h1 { font-size: calc(1.8rem + 1.5vw); } 
    .hero-section .slogan { font-size: calc(1.1rem + 0.5vw); }
    .hero-section .lead { font-size: calc(1rem + 0.3vw); }
    #heroCarousel .carousel-caption h5 { font-size: 2.8rem; }
}


@media (max-width: 991.98px) {
    body { padding-top: 70px; } 
    .navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .navbar-brand { font-size: 1.4rem; }
    .navbar-brand img { height: 40px; }
    .navbar-nav { background-color: #f8f9fa; padding: 1rem; border-radius: 5px; margin-top: 10px; border: 1px solid #e0e0e0; }
    .nav-link { margin-left: 0; padding: 0.8rem 0.5rem; }
    .nav-link::after { left: 0; transform: translateX(0); bottom: 5px; }
    .nav-link:hover::after, .nav-link.active::after { width: 30px; }

    .hero-section { 
        margin-top: -70px; 
        min-height: 70vh; /* Ajustado */
    }
    .hero-content { 
        padding-top: calc(70px + 2rem); 
        padding-bottom: 3rem;
    }
    #nuestra-esencia .display-5 { font-size: 2.2rem; }
    #nuestra-esencia .display-6 { font-size: 1.7rem; }


    .video-showcase .col-md-4 { max-width: 80%; margin-left: auto; margin-right: auto; }
    #principios .col-lg-4 {  flex: 0 0 auto; width: 100%; } 
     @media (min-width: 768px) { #principios .col-lg-4 { width: 33.333%; } }

    #librosCarousel .carousel-control-prev,
    #librosCarousel .carousel-control-next {
        width: 8%; 
    }
}

@media (max-width: 767.98px) {
    .display-4 { font-size: 2rem; }
    .display-5 { font-size: 1.75rem; } 

    #nuestra-esencia .display-5 { font-size: 1.8rem; } 
     #nuestra-esencia .alma-proposito-mundo-block h3 { font-size: 1.5rem; }
    #nuestra-esencia .display-6 { font-size: 1.5rem; }


    .hero-section {
        min-height: 65vh; /* Ajustado */
    }
    .hero-content {
        padding-top: calc(70px + 1.5rem); /* Ajustado */
        padding-bottom: 2.5rem; /* Ajustado */
    }
    .hero-content h1 { 
        font-size: 1.6rem; 
    }
    .hero-content .lead { font-size: 0.9rem; }
    .hero-content .slogan { font-size: 1rem; }

    .video-showcase { 
        padding-top: 1.5rem; 
    }

    .cookie-banner .container { flex-direction: column; text-align: center; }
    .cookie-banner p { margin-bottom: 10px; margin-right: 0; }
    .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 24px; }
    .whatsapp-float i { margin-top: 13px; }
    .chart-container { height: 300px !important; }
    
    #acerca-de .text-center { margin-bottom: 1rem; } 
    #principios .col-lg-4 { width: 100%; } 
    #formacion .col-lg-3 { width: 50%; } 
     @media (max-width: 575.98px) { #formacion .col-lg-3 { width: 100%; } } 
}