/* ==========================================
   INSTITUTO VADISO
   EDUCACION.CSS
========================================== */


/* VARIABLES HEREDADAS DE VADISO */

.educacion-page{

    --edu-lime: #d8ff5d;
    --edu-bg: #DCE6FA;
    --edu-surface: #f7f9ff;
    --edu-card: #ffffff;
    --edu-border: #d0d7e6;
    --edu-text: #0f1724;

    background: var(--edu-bg);
    color: var(--edu-text);

}



/* =========================================
   HERO VADISO
========================================= */

.edu-hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    background-image: url("vadiso-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* Capa de protección para mejorar
   la lectura del texto */

.edu-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.94) 35%,
            rgba(255,255,255,0.55) 55%,
            rgba(255,255,255,0.05) 78%
        );

    z-index: 1;
}


/* Contenedor */

.edu-hero-container {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* Contenido */

.edu-hero-content {
    width: 55%;
    max-width: 650px;

    padding: 80px 0;
}


/* Badge */

.edu-hero-badge {
    display: inline-block;

    margin-bottom: 18px;
    padding: 8px 18px;

    background: #f5a900;
    color: #111;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;

    border-radius: 30px;
}


/* Título */

.edu-hero h1 {
    margin: 0 0 20px;

    font-size: clamp(46px, 5vw, 76px);
    line-height: 0.98;

    font-weight: 900;
    letter-spacing: -2px;

    color: #111;
}


.edu-hero h1 span {
    color: #f5a900;
}


/* Subtítulo */

.edu-hero-subtitle {
    max-width: 570px;

    margin: 0 0 28px;

    font-size: 21px;
    line-height: 1.5;

    font-weight: 500;

    color: #333;
}


/* Características */

.edu-hero-features {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px 25px;

    margin-bottom: 32px;

    max-width: 580px;
}


.edu-hero-features div {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 16px;
    font-weight: 600;

    color: #222;
}


.edu-hero-features span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: #f5a900;
    color: #111;

    font-size: 14px;
    font-weight: 900;

    flex-shrink: 0;
}


/* Botones */

.edu-hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.edu-hero-buttons .edu-button {
    min-width: 190px;

    text-align: center;

    padding: 15px 24px;

    border-radius: 8px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.edu-button-main {
    background: #f5a900;
    color: #111;

    box-shadow:
        0 8px 20px rgba(245,169,0,0.25);
}


.edu-button-main:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(245,169,0,0.35);
}


/* Botón secundario */

.edu-hero-buttons .edu-button-outline {
    background: rgba(255,255,255,0.75);

    color: #111;

    border: 2px solid #111;
}


.edu-hero-buttons .edu-button-outline:hover {
    transform: translateY(-3px);

    background: #111;
    color: white;
}


/* Texto inferior */

.edu-hero-note {
    margin-top: 18px;

    font-size: 14px;

    font-weight: 700;

    color: #555;
}


/* =========================================
   ANIMACIÓN
========================================= */

.edu-hero-content {
    animation: vadisoHeroIn 0.8s ease-out both;
}


@keyframes vadisoHeroIn {

    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .edu-hero {
        min-height: 680px;

        background-position:
            65% center;
    }

    .edu-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.90) 45%,
                rgba(255,255,255,0.30) 75%,
                rgba(255,255,255,0.05) 100%
            );
    }

    .edu-hero-content {
        width: 62%;
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .edu-hero {
        min-height: auto;

        background-position:
            68% top;

        background-size: auto 620px;

        background-color: #fff;

        align-items: flex-start;

        padding-top: 400px;
    }


    .edu-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.10) 35%,
                rgba(255,255,255,0.92) 58%,
                rgba(255,255,255,1) 70%
            );
    }


    .edu-hero-container {
        width: 100%;
    }


    .edu-hero-content {
        width: 100%;
        max-width: none;

        padding: 35px 20px 50px;

        text-align: center;
    }


    .edu-hero-badge {
        font-size: 12px;

        padding: 7px 15px;
    }


    .edu-hero h1 {
        font-size: 44px;

        letter-spacing: -1px;
    }


    .edu-hero-subtitle {
        font-size: 18px;

        margin-left: auto;
        margin-right: auto;
    }


    .edu-hero-features {
        grid-template-columns: 1fr;

        gap: 9px;

        text-align: left;

        margin-left: auto;
        margin-right: auto;

        max-width: 350px;
    }


    .edu-hero-buttons {
        justify-content: center;

        flex-direction: column;
    }


    .edu-hero-buttons .edu-button {
        width: 100%;
        max-width: 330px;
    }


    .edu-hero-note {
        font-size: 13px;
    }

}



/* ==========================================
   BOTONES
========================================== */


.edu-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}




.edu-button{

    padding:15px 35px;

    border-radius:30px;

    background:var(--edu-lime);

    color:#000;

    font-weight:700;

    transition:.3s;

}



.edu-button:hover{

    transform:translateY(-3px);

}



.edu-button-outline{

    background:transparent;

    border:1px solid var(--edu-lime);

    color:var(--edu-lime);

}





/* ==========================================
   TITULOS
========================================== */


.edu-title{

    text-align:center;

    font-size:38px;

    margin-bottom:45px;

}



.edu-description{

    text-align:center;

    max-width:900px;

    margin:0 auto 40px;

    color:#bdbdbd;

}





/* ==========================================
   BENEFICIOS
========================================== */


.edu-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.edu-card{

    background:var(--edu-card);

    border:1px solid var(--edu-border);

    border-radius:18px;

    padding:30px;

    transition:.3s;

}



.edu-card:hover{

    border-color:var(--edu-lime);

    transform:translateY(-5px);

}



.edu-card h3{

    color:var(--edu-lime);

    margin-bottom:15px;

}



.edu-card p{

    color:#c0c0c0;

}





/* ==========================================
   HORARIOS
========================================== */


.edu-schedule{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}



.edu-box{

    background:var(--edu-surface);

    padding:35px;

    border-radius:18px;

    border:1px solid var(--edu-border);

    text-align:center;

}



.edu-box h3{

    color:var(--edu-lime);

}





/* ==========================================
   PROMOCION
========================================== */


.edu-promo{

    background: var(--edu-surface);

    padding:80px 0;

    text-align:center;

}



.edu-price-container{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin:40px 0;

}



.edu-price{

    background: var(--edu-card);

    border:1px solid var(--edu-border);

    padding:35px;

    width:280px;

    border-radius:20px;

}



.edu-price span{

    color: #334155;

}



.edu-price h3{

    font-size:45px;

    color: var(--edu-text);

}





/* ==========================================
   PLAN DE ESTUDIOS
========================================== */


.edu-accordion{

    max-width:900px;

    margin:auto;

}



.edu-item{

    margin-bottom:15px;

    background: var(--edu-card);

    border:1px solid var(--edu-border);

    border-radius:15px;

    overflow:hidden;

}



.edu-question{

    padding:22px;

    width:100%;

    background:none;

    color:white;

    border:none;

    display:flex;

    justify-content:space-between;

    font-size:20px;

    cursor:pointer;

}



.edu-answer{

    display:none;

    padding:20px;

    color:#ccc;

}





/* ==========================================
   FAQ
========================================== */


.edu-faq{

    max-width:900px;

    margin:auto;

}



.edu-faq-item{

    background: var(--edu-card);

    padding:25px;

    border-radius:15px;

    border:1px solid var(--edu-border);

    margin-bottom:15px;

}



.edu-faq-item h3{

    color:var(--edu-lime);

    margin-bottom:12px;

}





/* ==========================================
   CONTACTO
========================================== */


.edu-contact{

    text-align:center;

    padding:80px 0;

    background: var(--edu-surface);

}





/* ==========================================
   RESPONSIVE
========================================== */


@media(max-width:900px){


.edu-grid{

grid-template-columns:1fr;

}



.edu-schedule{

grid-template-columns:1fr;

}



.edu-hero h1{

font-size:38px;

}



.edu-title{

font-size:30px;

}



}
/* ANIMACIONES */

.edu-card,
.edu-box,
.edu-price,
.edu-faq-item{

opacity:0;

transform:translateY(25px);

transition:.6s ease;

}



.edu-show{

opacity:1;

transform:translateY(0);

}

/* WhatsApp flotante */
.whatsapp-float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  right:20px;
  background-color:#25D366;
  color:#fff;
  border-radius:50%;
  text-align:center;
  font-size:28px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.whatsapp-float svg{width:28px;height:28px;fill:white;}

/* Mejorar contraste y legibilidad sobre fondo claro */
/* Forzar color legible en textos y títulos */
:root {
  /* fallback in case variables not applied to root */
  --edu-text: #0f1724;
  --edu-card: #ffffff;
  --edu-surface: #f7f9ff;
  --edu-border: #d0d7e6;
}

/* Titulos y textos principales */
h1, h2, h3, h4, h5, h6, p, a, li, span, label, strong {
  color: var(--edu-text) !important;
}

/* Hero: oscurecer ligeramente la imagen para contraste del texto */
.edu-hero-overlay {
    position: absolute;
    inset: 0;
    /* aumentar opacidad para mejorar contraste */
    background: linear-gradient(90deg, rgba(15,23,36,0.85) 0%, rgba(15,23,36,0.8) 35%, rgba(15,23,36,0.72) 55%, rgba(15,23,36,0.5) 78%);
    z-index: 1;
}

/* Asegurar que el contenido del hero esté por encima y visible */
.edu-hero-content,
.edu-hero h1,
.edu-hero-subtitle,
.edu-hero-badge {
  color: #ffffff !important; /* títulos del hero en blanco para máxima legibilidad */
  z-index: 2;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}

/* Especificar subtítulo y badge del hero */
.edu-hero h1 { color: #ffffff !important; }
.edu-hero-subtitle { color: rgba(255,255,255,0.92) !important; font-weight:600; }
.edu-hero-badge { color: #0f1724 !important; background: #f5a900 !important; }

/* Si hay botones dentro del hero, mantenerlos legibles */
.edu-hero .edu-button.edu-button-main { background: var(--edu-lime) !important; color: #0f1724 !important; }
.edu-hero .edu-button.edu-button-outline { background: rgba(255,255,255,0.92) !important; color: #0f1724 !important; border-color: rgba(15,23,36,0.08) !important; }

/* Slight header tweak to ensure it's visible but not heavy */
header.site-header, .site-header {
  background: var(--edu-bg) !important;
  color: var(--edu-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(15,23,36,0.04) !important;
}

header.site-header a, .site-header a { color: var(--edu-text) !important; }

/* Tarjetas y cajas: fondos claros, borde visible y sombra sutil */
.edu-card, .edu-box, .edu-price, .edu-faq-item {
  background: var(--edu-card);
  color: var(--edu-text);
  border: 1px solid var(--edu-border);
  box-shadow: 0 8px 18px rgba(15,23,36,0.06);
}

/* Botones: mantener contraste (texto oscuro cuando botón claro) */
.edu-button, .edu-button-outline, .edu-button-main {
  color: var(--edu-text) !important;
}

/* Inputs y enlaces destacados */
a { color: #0b57a4; }

/* Ajustes menores para FAQ y precios */
.edu-price h3, .edu-price span { color: var(--edu-text); }

/* Asegurar buen contraste en el footer */
footer, footer p, footer a { color: var(--edu-text); }

/* Overrides para secciones que estaban mostrando fondo oscuro heredado */
html, body, .educacion-page {
  background: var(--edu-bg) !important;
  color: var(--edu-text) !important;
}

.section {
  background: transparent !important;
  color: var(--edu-text) !important;
}

/* Hacer que las secciones 'section-dark' muestren superficie clara en este tema */
.section.section-dark {
  background: var(--edu-surface) !important;
  color: var(--edu-text) !important;
  padding: 40px 0;
}

/* Asegurar que los encabezados dentro de secciones oscuras se vean */
.section.section-dark h2, .section.section-dark h3, .section.section-dark p {
  color: var(--edu-text) !important;
}

/* Si hay elementos con fondo negro explícito, forzarlos a usar tarjeta clara */
[data-bg-dark], .dark-bg, .card-dark {
  background: var(--edu-card) !important;
  color: var(--edu-text) !important;
  border: 1px solid var(--edu-border) !important;
}

/* Aumentar contraste del texto en las tarjetas */
.edu-card p { color: #334155 !important; }

/* Enlaces destacados: uso de color de acento más oscuro para legibilidad */
a { color: #074b82 !important; }

/* Asegurar que el boton 'Inscribirme ahora' sea legible */
.edu-button-main { background: var(--edu-lime) !important; color: var(--edu-text) !important; }

/* Header / nav overrides: evitar franjas oscuras en la parte superior */
header.site-header, .site-header {
  background: transparent !important;
  color: var(--edu-text) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

header.site-header a, .site-header a {
  color: var(--edu-text) !important;
}

/* Ensure hero buttons contrast when hero uses dark overlay */
.edu-hero .edu-button.edu-button-main { background: var(--edu-lime) !important; color: #0f1724 !important; }
.edu-hero .edu-button.edu-button-outline { background: rgba(255,255,255,0.9) !important; color: #0f1724 !important; border-color: rgba(15,23,36,0.08) !important; }