/* =========================================================
   EDUCAS3 - DISEÑO MODERNO Y MINIMALISTA
   ========================================================= */

:root {
    --azul: #123f5f;
    --azul-claro: #1e587d;
    --verde: #18a68f;
    --verde-claro: #e8f7f4;
    --fondo: #f8fbfc;
    --blanco: #ffffff;
    --texto: #334155;
    --texto-suave: #64748b;
    --borde: #e6edf1;
    --sombra: 0 10px 30px rgba(18, 63, 95, 0.08);
    --radio: 16px;
}

/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.7;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--borde);
    backdrop-filter: blur(10px);
}

header .contenedor {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* LOGO */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    width: 180px;
    height: auto;
    display: block;
}

.logo img:hover {
    transform: scale(1.03);
}

/* =========================================================
   MENÚ PRINCIPAL
   ========================================================= */

nav > ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

nav > ul > li {
    position: relative;
}

nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    color: var(--texto);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.3s ease;
}

nav > ul > li > a:hover {
    color: var(--verde);
    background: var(--verde-claro);
}

/* =========================================================
   SUBMENÚS
   ========================================================= */

.dropdown {
    position: relative;
}

.submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 230px;
    padding: 10px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: var(--sombra);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li a {
    display: block;
    padding: 10px 13px;
    color: var(--texto);
    font-size: 13px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.submenu li a:hover {
    color: var(--verde);
    background: var(--verde-claro);
}

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

.hero {
    min-height: 700px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            #f7fbfc 0%,
            #ffffff 50%,
            #eef9f7 100%
        );
    padding: 80px 0;
}

.hero-contenido {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

/* TEXTO DEL HERO */

.hero-texto {
    max-width: 600px;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 22px;
    color: var(--verde);
    background: var(--verde-claro);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
}

.hero-texto h1 {
    color: var(--azul);
    font-size: clamp(45px, 6vw, 72px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 25px;
}

.hero-texto h1 span {
    color: var(--verde);
}

.hero-texto p {
    max-width: 560px;
    color: var(--texto-suave);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* BOTONES */

.botones {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-principal,
.btn-secundario,
.btn-card {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 13px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-principal {
    color: var(--blanco);
    background: var(--azul);
}

.btn-principal:hover {
    background: var(--azul-claro);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 63, 95, 0.15);
}

.btn-secundario {
    color: var(--azul);
    background: var(--blanco);
    border: 1px solid var(--borde);
}

.btn-secundario:hover {
    color: var(--verde);
    border-color: var(--verde);
    transform: translateY(-2px);
}

/* IMAGEN HERO */

.hero-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-imagen img {
    width: 100%;
    max-width: 500px;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(18, 63, 95, 0.10);
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.titulo-seccion {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.titulo-seccion span {
    display: block;
    margin-bottom: 10px;
    color: var(--verde);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.titulo-seccion h2 {
    margin-bottom: 15px;
    color: var(--azul);
    font-size: 38px;
    line-height: 1.2;
}

.titulo-seccion p {
    color: var(--texto-suave);
    font-size: 15px;
}

/* =========================================================
   SECCIONES GENERALES
   ========================================================= */

section {
    padding: 90px 0;
}

.quienes,
.cursos,
.investigacion,
.libros,
.asesorias,
.congresos,
.,
.contacto {
    background: var(--blanco);
}

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */

.quienes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.quienes-imagen img {
    width: 100%;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.quienes-texto h3 {
    color: var(--azul);
    font-size: 28px;
    margin-bottom: 15px;
}

.quienes-texto p {
    color: var(--texto-suave);
}

.mision-vision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.card-info {
    padding: 25px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.card-info i {
    color: var(--verde);
    font-size: 25px;
    margin-bottom: 15px;
}

.card-info h4 {
    color: var(--azul);
    margin-bottom: 8px;
}

/* =========================================================
   CURSOS
   ========================================================= */

.grid-cursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.curso {
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 5px 20px rgba(18, 63, 95, 0.04);
    transition: all 0.3s ease;
}

.curso:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra);
}

.curso img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.curso .contenido {
    padding: 25px;
}

.curso h3 {
    color: var(--azul);
    font-size: 19px;
    margin-bottom: 10px;
}

.curso p {
    color: var(--texto-suave);
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-card {
    color: var(--verde);
    background: var(--verde-claro);
}

.btn-card:hover {
    color: var(--blanco);
    background: var(--verde);
}

/* =========================================================
   INVESTIGACIÓN
   ========================================================= */

.investigacion {
    background: var(--fondo);
}

.grid-investigacion {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card-investigacion {
    padding: 30px 25px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-align: center;
    transition: all 0.3s ease;
}

.card-investigacion:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra);
}

.card-investigacion i {
    margin-bottom: 20px;
    color: var(--verde);
    font-size: 32px;
}

.card-investigacion h3 {
    color: var(--azul);
    font-size: 17px;
    margin-bottom: 10px;
}

.card-investigacion p {
    color: var(--texto-suave);
    font-size: 13px;
}

/* =========================================================
   LIBROS
   ========================================================= */

   .grid-libros{
       display:grid;
       grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
       gap:30px;
   }

   .libro{
       background:#fff;
       border-radius:18px;
       overflow:hidden;
       box-shadow:0 12px 30px rgba(0,0,0,.10);
       transition:.3s;
   }

   .libro:hover{
       transform:translateY(-8px);
   }

   .libro img{
       width:100%;
       height:220px;
       object-fit:cover;
   }

   .libro h3{
       padding:20px 20px 10px;
       font-size:1.35rem;
       color:#173F73;
   }

   .libro p{
       padding:0 20px 20px;
       line-height:1.6;
   }

   .btn-card{
       margin:0 20px 25px;
       display:inline-block;
   }

/* =========================================================
   ASESORÍAS
   ========================================================= */

.asesorias {
    background: var(--fondo);
}

.grid-asesorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.asesoria {
    padding: 30px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-align: center;
    transition: all 0.3s ease;
}

.asesoria:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra);
}

.asesoria i {
    color: var(--verde);
    font-size: 30px;
    margin-bottom: 15px;
}

.asesoria h3 {
    color: var(--azul);
    font-size: 17px;
}

/* =========================================================
   CONGRESOS
   ========================================================= */

.grid-congresos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.evento {
    padding: 30px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.evento h3 {
    color: var(--azul);
    margin-bottom: 10px;
}

.evento p {
    color: var(--texto-suave);
    margin-bottom: 20px;
}

/* =========================================================
   PAGOS
   ========================================================= */

   .inscripcion-pago {
       padding: 90px 20px;
       background: #f7fbfc;
   }


   /* TÍTULO */

   .inscripcion-pago .titulo-seccion {
       text-align: center;
       max-width: 800px;
       margin: 0 auto 50px;
   }

   .inscripcion-pago .titulo-seccion span {
       color: #13a892;
       font-size: 14px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
   }

   .inscripcion-pago .titulo-seccion h2 {
       color: #073f68;
       font-size: 38px;
       margin: 15px 0;
   }

   .inscripcion-pago .titulo-seccion p {
       color: #5d7893;
       font-size: 18px;
       line-height: 1.7;
   }



   /* =====================================================
      INFORMACIÓN DEL CURSO
   ====================================================== */

   .info-curso-pago {
       max-width: 900px;
       margin: 0 auto 50px;
       padding: 35px;
       background: #ffffff;
       border: 1px solid #e2ebef;
       border-radius: 20px;
       text-align: center;
       box-shadow: 0 10px 30px rgba(0, 60, 90, 0.05);
   }

   .info-curso-pago h3 {
       color: #073f68;
       font-size: 28px;
       margin-bottom: 15px;
   }

   .info-curso-pago p {
       color: #5d7893;
       line-height: 1.7;
   }

   .precio-curso {
       margin-top: 25px;
       color: #073f68;
       font-size: 20px;
   }

   .precio-curso strong {
       color: #13a892;
       font-size: 30px;
       margin-left: 10px;
   }



   /* =====================================================
      FORMAS DE PAGO
   ====================================================== */

   .formas-pago {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px;
}


/* =====================================================
   TARJETAS DE PAGO
====================================================== */

.opcion-pago {
    background: #ffffff;
    border: 1px solid #e2ebef;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 60, 90, 0.05);
    box-sizing: border-box;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.opcion-pago:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 60, 90, 0.10);
}


/* =====================================================
   ICONOS
====================================================== */

.icono-opcion {
    font-size: 42px;
    color: #13a892;
    margin-bottom: 20px;
}


/* =====================================================
   TÍTULOS
====================================================== */

.opcion-pago h3 {
    color: #073f68;
    font-size: 24px;
    margin-bottom: 15px;
}


/* =====================================================
   TEXTO
====================================================== */

.opcion-pago > p {
    color: #5d7893;
    line-height: 1.6;
    margin-bottom: 25px;
}


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

.btn-pago,
.btn-mostrar-datos,
.btn-copiar {
    display: inline-block;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 12px;
    transition: all 0.3s ease;
}


/* BOTÓN MERCADO PAGO Y PAYPAL */

/* BOTONES DE PAGO */
.btn-pago {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 16px 24px;

    background: #258f86;
    color: #ffffff;

    border: none;
    border-radius: 14px;

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

    cursor: pointer;
    text-decoration: none;

    transition: all 0.3s ease;
}

.btn-pago:hover {
    background: #183f52;
    transform: translateY(-2px);
}

/* BOTÓN TRANSFERENCIA */

.btn-mostrar-datos {
    background: #e5f6f3;
    color: #008f7d;
}

.btn-mostrar-datos:hover {
    background: #d7f0ec;
    transform: translateY(-2px);
}


/* =====================================================
   DATOS BANCARIOS
====================================================== */

.datos-bancarios {
    display: none;

    width: 100%;
    box-sizing: border-box;

    margin-top: 20px;
    padding: 20px;

    background: #f5fafb;

    border: 1px solid #dfe8ed;

    border-radius: 15px;

    text-align: left;
}


/* TÍTULO DE DATOS */

.datos-bancarios h4 {

    color: #064b78;

    font-size: 18px;

    margin-bottom: 20px;

    text-align: center;

}

/*=================================================
    TRANSFERENCIA BANCARIA - ABRIR Y CERRAR
==================================================*/

.transferencia-detalles {
    width: 100%;
    margin-top: 20px;
}


/* BOTÓN */

.transferencia-detalles summary {
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 15px 20px;

    background: #e5f6f3;
    color: #0a9f91;

    border-radius: 12px;

    font-weight: 600;
    text-align: center;

    cursor: pointer;

    list-style: none;

    transition: all 0.3s ease;
}


/* QUITAR FLECHA */

.transferencia-detalles summary::-webkit-details-marker {
    display: none;
}


/* AL PASAR EL MOUSE */

.transferencia-detalles summary:hover {
    background: #13aa98;
    color: #ffffff;
}


/* DATOS */

.transferencia-detalles .datos-bancarios {

    width: 100%;
    box-sizing: border-box;

    margin-top: 20px;
    padding: 20px;

    background: #f5fafb;

    border: 1px solid #dfe8ed;

    border-radius: 15px;

    text-align: left;
}


/* TÍTULO */

.transferencia-detalles .datos-bancarios h4 {

    color: #064b78;

    font-size: 18px;

    margin-bottom: 20px;

}


/* TEXTO */

.transferencia-detalles .datos-bancarios p {

    color: #58738f;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 15px;

}


.transferencia-detalles .datos-bancarios strong {

    color: #064b78;

}
/* INFORMACIÓN */

.datos-bancarios p {

    color: #58738f;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 15px;

}


/* TEXTO DESTACADO */

.datos-bancarios strong {

    color: #064b78;

}



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

@keyframes aparecerDatos {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


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

@media (max-width: 950px) {

    .formas-pago {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .formas-pago {
        grid-template-columns: 1fr;
    }

}

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

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.info-contacto h3 {
    color: var(--azul);
    font-size: 28px;
    margin-bottom: 25px;
}

.info-contacto p {
    margin-bottom: 15px;
    color: var(--texto-suave);
}

.info-contacto i {
    width: 25px;
    color: var(--verde);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.formulario input,
.formulario textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--fondo);
    color: var(--texto);
    font-family: inherit;
    outline: none;
    transition: border 0.3s ease;
}

.formulario input:focus,
.formulario textarea:focus {
    border-color: var(--verde);
}

.formulario textarea {
    min-height: 140px;
    resize: vertical;
}

/* =========================================================
   REDES SOCIALES
   ========================================================= */

.redes-sociales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 30px 0;
    background: var(--fondo);
}

.redes-sociales a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    color: var(--azul);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.redes-sociales a:hover {
    color: var(--blanco);
    background: var(--verde);
    transform: translateY(-3px);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    padding: 60px 0 20px;
    color: #d9e5eb;
    background: var(--azul);
}

.contenedor-footer {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
}

.footer-columna h3 {
    color: var(--blanco);
    margin-bottom: 18px;
}

.footer-columna p {
    color: #c3d2da;
    font-size: 14px;
}

.footer-columna ul li {
    margin-bottom: 8px;
}

.footer-columna ul li a {
    color: #c3d2da;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-columna ul li a:hover {
    color: var(--blanco);
}

.footer-columna input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    font-family: inherit;
}

.copyright {
    width: 90%;
    max-width: 1200px;
    margin: 45px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
    color: #b8c9d2;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    header .contenedor {
        gap: 20px;
    }

    nav > ul {
        gap: 2px;
    }

    nav > ul > li > a {
        padding: 8px;
        font-size: 12px;
    }

    .hero-contenido {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-texto {
        max-width: 750px;
        margin: 0 auto;
    }

    .hero-texto p {
        margin-left: auto;
        margin-right: auto;
    }

    .botones {
        justify-content: center;
    }

    .hero-imagen img {
        max-width: 600px;
    }

    .grid-cursos,
    .grid-libros {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-investigacion {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-asesorias,
    .grid-congresos,
    .grid- {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   RESPONSIVE - CELULAR
   ========================================================= */

@media (max-width: 700px) {

    header .contenedor {
        flex-direction: column;
        padding: 15px 0;
    }

    .logo img {
        width: 160px;
    }

    nav > ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    nav > ul > li > a {
        font-size: 11px;
        padding: 6px;
    }

    .submenu {
        display: none;
    }

    .hero {
        padding: 60px 0;
    }

    .hero-texto h1 {
        font-size: 45px;
    }

    .hero-texto p {
        font-size: 15px;
    }

    section {
        padding: 65px 0;
    }

    .titulo-seccion h2 {
        font-size: 30px;
    }

    .quienes-grid,
    .contacto-grid {
        grid-template-columns: 1fr;
    }

    .mision-vision {
        grid-template-columns: 1fr;
    }

    .grid-cursos,
    .grid-libros,
    .grid-investigacion,
    .grid-asesorias,
    .grid-congresos,
    .grid- {
        grid-template-columns: 1fr;
    }

    .contenedor-footer {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}



/* =========================================================
   PORTADA DE LOS LIBROS
   ========================================================= */

.libro img {
    width: 100%;
    height: 320px;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   PÁGINA PARA VISUALIZAR EL LIBRO
   ========================================================= */

.pagina-libro {
    min-height: calc(100vh - 90px);
    padding: 70px 20px;
    background: #f7fafb;
}


/* =========================================================
   ENCABEZADO DEL LIBRO
   ========================================================= */

.encabezado-libro {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 35px;
    text-align: center;
}


.encabezado-libro span {
    display: inline-block;
    margin-bottom: 12px;

    color: #18a68f;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.encabezado-libro h1 {
    margin: 0 0 15px;

    color: #123f5f;

    font-size: 42px;
    line-height: 1.2;
}


.encabezado-libro p {
    margin: 0;

    color: #64748b;

    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   VISOR DEL PDF
   ========================================================= */

.visor-libro {
    width: 100%;
    max-width: 1000px;

    height: 750px;

    margin: 0 auto;

    background: #ffffff;

    border: 1px solid #e1e9ed;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(18, 63, 95, 0.08);
}


/* PDF DENTRO DEL VISOR */

.visor-libro iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: none;
}


/* =========================================================
   CONTENEDOR DE LOS BOTONES
   ========================================================= */

.acciones-libro {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 30px;

    flex-wrap: wrap;
}


/* =========================================================
   BOTÓN DESCARGAR LIBRO
   ========================================================= */

.btn-principal {
    display: inline-block;

    padding: 14px 28px;

    background: #18a68f;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    border-radius: 8px;

    transition: all 0.3s ease;
}


.btn-principal:hover {
    background: #128875;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(24, 166, 143, 0.20);
}


/* =========================================================
   BOTÓN VOLVER A LIBROS
   ========================================================= */

.btn-secundario {
    display: inline-block;

    padding: 14px 28px;

    background: #ffffff;

    color: #123f5f;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    border: 1px solid #d9e3e8;

    border-radius: 8px;

    transition: all 0.3s ease;
}


.btn-secundario:hover {
    background: #f1f7f8;

    border-color: #18a68f;

    transform: translateY(-2px);
}


/* =========================================================
   PIE DE PÁGINA DE LA PÁGINA DEL LIBRO
   ========================================================= */

.pagina-libro + footer {
    background: #123f5f;

    color: #ffffff;

    padding: 25px;

    text-align: center;
}


/* =========================================================
   ADAPTACIÓN PARA TABLET
   ========================================================= */

@media (max-width: 900px) {

    .visor-libro {
        height: 700px;
    }

}


/* =========================================================
   ADAPTACIÓN PARA CELULAR
   ========================================================= */

@media (max-width: 768px) {

    .pagina-libro {
        padding: 45px 15px;
    }


    .encabezado-libro h1 {
        font-size: 30px;
    }


    .encabezado-libro p {
        font-size: 15px;
    }


    .visor-libro {
        height: 600px;

        border-radius: 10px;
    }


    .acciones-libro {
        flex-direction: column;
    }


    .btn-principal,
    .btn-secundario {
        width: 100%;

        max-width: 300px;

        text-align: center;
    }

}


/* =========================================================
   PORTADA DEL LIBRO EN CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .libro img {
        height: 260px;
    }

}

/* =========================================================
   VISOR DEL LIBRO
========================================================= */

.visor-libro {
    width: 100%;
    max-width: 1000px;
    height: 750px;
    margin: 40px auto 0;

    background: #ffffff;

    border: 1px solid #dce6eb;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(18, 63, 95, 0.08);
}


/* VISOR PDF */

.visor-libro object {
    width: 100%;
    height: 100%;
    display: block;
}


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

.acciones-libro {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 30px;

    flex-wrap: wrap;
}


/* ABRIR LIBRO */

.btn-principal {
    display: inline-block;

    padding: 14px 26px;

    background: #18a68f;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 8px;

    transition: 0.3s ease;
}


.btn-principal:hover {
    background: #128875;

    transform: translateY(-2px);
}


/* DESCARGAR */

.btn-secundario {
    display: inline-block;

    padding: 14px 26px;

    background: #123f5f;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 8px;

    transition: 0.3s ease;
}


.btn-secundario:hover {
    background: #0d3048;

    transform: translateY(-2px);
}


/* VOLVER */

.btn-terciario {
    display: inline-block;

    padding: 14px 26px;

    background: #ffffff;

    color: #123f5f;

    text-decoration: none;

    font-weight: 600;

    border: 1px solid #d9e3e8;

    border-radius: 8px;

    transition: 0.3s ease;
}


.btn-terciario:hover {
    background: #f1f7f8;
}


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

@media (max-width: 768px) {

    .visor-libro {
        height: 600px;
    }

    .acciones-libro {
        flex-direction: column;
    }

    .btn-principal,
    .btn-secundario,
    .btn-terciario {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

}

/* =========================================================
   PÁGINA DEL LIBRO
========================================================= */

.pagina-libro {
    min-height: calc(100vh - 90px);
    padding: 70px 20px;
    background: #f7fafb;
}


/* ENCABEZADO DEL LIBRO */

.encabezado-libro {
    max-width: 900px;
    margin: 0 auto 35px;
    text-align: center;
}

.encabezado-libro span {
    display: inline-block;
    margin-bottom: 12px;
    color: #18a68f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.encabezado-libro h1 {
    margin: 0 0 15px;
    color: #123f5f;
    font-size: 42px;
    line-height: 1.2;
}

.encabezado-libro p {
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.6;
}


/* VISOR DEL PDF */

.visor-libro {
    width: 100%;
    max-width: 1000px;
    height: 750px;
    margin: 0 auto;

    background: #ffffff;
    border: 1px solid #dce6eb;
    border-radius: 12px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(18, 63, 95, 0.08);
}

.visor-libro iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}


/* BOTONES */

.acciones-libro {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}


/* BOTÓN ABRIR */

.btn-principal {
    display: inline-block;
    padding: 14px 26px;

    background: #18a68f;
    color: #ffffff;

    text-decoration: none;
    font-weight: 600;

    border-radius: 8px;
    transition: 0.3s ease;
}

.btn-principal:hover {
    background: #128875;
    transform: translateY(-2px);
}


/* BOTÓN DESCARGAR */

.btn-secundario {
    display: inline-block;
    padding: 14px 26px;

    background: #123f5f;
    color: #ffffff;

    text-decoration: none;
    font-weight: 600;

    border-radius: 8px;
    transition: 0.3s ease;
}

.btn-secundario:hover {
    background: #0d3048;
    transform: translateY(-2px);
}


/* BOTÓN VOLVER */

.btn-terciario {
    display: inline-block;
    padding: 14px 26px;

    background: #ffffff;
    color: #123f5f;

    text-decoration: none;
    font-weight: 600;

    border: 1px solid #d9e3e8;
    border-radius: 8px;

    transition: 0.3s ease;
}

.btn-terciario:hover {
    background: #f1f7f8;
}


/* ADAPTACIÓN PARA CELULARES */

@media (max-width: 768px) {

    .pagina-libro {
        padding: 45px 15px;
    }

    .encabezado-libro h1 {
        font-size: 30px;
    }

    .visor-libro {
        height: 600px;
    }

    .acciones-libro {
        flex-direction: column;
    }

    .btn-principal,
    .btn-secundario,
    .btn-terciario {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

}

.grid- {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/*=========================================================
                    GRID DE
==========================================================*/

.grid- {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}


/*=========================================================
                    TARJETAS DE PAGO
==========================================================*/

.tarjeta-pago {
    background: #ffffff;
    border: 1px solid #dfe8ed;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 420px;

    transition: all 0.3s ease;
}


.tarjeta-pago:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}


/* ICONOS */

.tarjeta-pago > i,
.icono-pago i {
    font-size: 50px;
    color: #13aa98;
    margin-bottom: 25px;
}


/* TITULO */

.tarjeta-pago h3 {
    color: #064b78;
    font-size: 24px;
    margin-bottom: 15px;
}


/* TEXTO */

.tarjeta-pago p {
    color: #58738f;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 25px;
}


/* BOTÓN */

.tarjeta-pago .btn-card {
    display: inline-block;
    margin-top: auto;

    padding: 15px 25px;

    background: #e5f6f3;
    color: #0a9f91;

    border: none;
    border-radius: 12px;

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

    text-decoration: none;
    cursor: pointer;

    transition: all 0.3s ease;
}


.tarjeta-pago .btn-card:hover {
    background: #13aa98;
    color: #ffffff;
}


/*=========================================================
                DATOS BANCARIOS
==========================================================*/

/*=========================================================
        DATOS BANCARIOS
=========================================================*/

.datos-bancarios {
    display: none;

    width: 100%;
    box-sizing: border-box;

    margin-top: 25px;
    padding: 20px;

    background: #f5fafb;

    border: 1px solid #dfe8ed;

    border-radius: 15px;

    text-align: left;
}


/*=========================================================
        DATOS BANCARIOS VISIBLES
=========================================================*/

.datos-bancarios.mostrar-datos {
    display: block !important;
}


/*=========================================================
        TÍTULO
=========================================================*/

.datos-bancarios h4 {

    color: #064b78;

    font-size: 18px;

    margin-bottom: 20px;

}


/*=========================================================
        INFORMACIÓN
=========================================================*/

.datos-bancarios p {

    font-size: 14px;

    margin-bottom: 12px;

    color: #58738f;

}


.datos-bancarios strong {

    color: #064b78;

}


/*=========================================================
        BOTÓN COPIAR
=========================================================*/

.btn-copiar {

    width: 100%;

    padding: 12px;

    background: #13aa98;

    color: #ffffff;

    border: none;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}


.btn-copiar:hover {

    background: #064b78;

}

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

@media (max-width: 1100px) {

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

}


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

@media (max-width: 650px) {

    .grid- {
        grid-template-columns: 1fr;
    }

}

/* DATOS BANCARIOS OCULTOS */

.datos-bancarios {
    display: none;
}


/* MOSTRAR DATOS AL PRESIONAR EL BOTÓN */

.datos-bancarios.mostrar-datos {
    display: block !important;

    width: 100%;
    margin-top: 20px;
    padding: 20px;

    background: #f5fafb;

    border: 1px solid #dfe8ed;

    border-radius: 15px;

    text-align: left;

    box-sizing: border-box;
}


/* TÍTULO */

.datos-bancarios.mostrar-datos h4 {
    color: #064b78;
    text-align: center;
    margin-bottom: 20px;
}


/* DATOS */

.datos-bancarios.mostrar-datos p {
    color: #58738f;
    line-height: 1.5;
    margin-bottom: 15px;
}


/* TEXTO DESTACADO */

.datos-bancarios.mostrar-datos strong {
    color: #064b78;
}

/*==================================================
EVENTOS - EDUCAS3
==================================================*/

.eventos{
    padding:100px 8%;
    background:#f7f9fc;
}

.grid-eventos{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    margin-top:60px;

}

.evento{

    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    border-top:6px solid #0d5ea8;

}

.evento:hover{

    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.evento-fecha{

    display:inline-block;
    background:#0d5ea8;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:22px;

}

.evento h3{

    color:#163c72;
    font-size:1.45rem;
    margin-bottom:18px;
    line-height:1.4;

}

.evento p{

    color:#666;
    line-height:1.8;
    margin-bottom:25px;

}

.gratis{

    display:inline-block;
    background:#e9fbf5;
    color:#099b7b;
    padding:10px 18px;
    border-radius:30px;
    font-weight:700;
    margin-bottom:30px;

}

.btn-evento{

    display:block;
    width:100%;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(90deg,#0d5ea8,#0aa7b5);
    color:#fff;
    padding:15px;
    border-radius:40px;
    font-weight:700;
    font-size:1rem;
    transition:.35s;

}

.btn-evento:hover{

    background:linear-gradient(90deg,#083b73,#0d5ea8);
    transform:scale(1.03);

}
    /* =====================================
   PROGRAMAS DESPLEGABLES DE LOS CURSOS
===================================== */
. {
    padding: 90px 20px;
    background: linear-gradient(135deg, #f7faf9 0%, #eef5f4 100%);
}

/* TÍTULO */

.-titulo {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.-titulo span {
    color: #238f88;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.85rem;
}

.-titulo h2 {
    margin-top: 12px;
}


/* CONTENEDOR DE LOS MÉTODOS */

.grid- {
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;

    align-items: start;
}


/* TARJETAS */

.metodo-pago {
    background: #ffffff;

    padding: 38px 32px;

    border: 1px solid rgba(39, 120, 115, 0.15);
    border-radius: 20px;

    text-align: center;

    min-height: 360px;

    box-shadow: 0 12px 35px rgba(24, 63, 82, 0.07);

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

.metodo-pago:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(24, 63, 82, 0.12);
}


/* ICONOS */

.icono-pago {
    font-size: 48px;
    margin-bottom: 20px;
}

.icono-pago i {
    color: #258f86;
}


/* TÍTULOS */

.metodo-pago h3 {
    font-size: 25px;
    margin-bottom: 15px;
    color: #25445e;
}


/* TEXTO */

.metodo-pago p {
    line-height: 1.6;
    margin-bottom: 25px;
    color: #617080;
}


/* BOTONES */

.btn-pago {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 16px 24px;

    background: #258f86;
    color: white;

    border: none;
    border-radius: 14px;

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

    cursor: pointer;
    text-decoration: none;

    transition: all 0.3s ease;
}

.btn-pago:hover {
    background: #183f52;
    transform: translateY(-2px);
}


/* =========================================================
                LISTA DESPLEGABLE DE CURSOS
========================================================= */

/* OCULTA POR DEFECTO */

.lista-cursos-pago {
    display: none;

    margin-top: 25px;

    text-align: left;

    animation: aparecerCursos 0.4s ease;
}

/* APARECE AL HACER CLIC */

.lista-cursos-pago.abierto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* CADA CURSO */

.curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 13px 15px;

    background: #f5f9f8;

    border-radius: 10px;

    text-decoration: none;
    color: #25445e;

    transition: all 0.3s ease;
}

.curso-pago:hover {
    background: #e4f2ef;
    color: #238f88;
    transform: translateX(4px);
}

.curso-pago strong {
    color: #258f86;
    margin-left: 10px;
}


/* FLECHA DEL BOTÓN */

.flecha-pago {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.btn-elegir-curso.abierto .flecha-pago {
    transform: rotate(180deg);
}


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

@keyframes aparecerCursos {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


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

@media (max-width: 900px) {

    .grid- {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .metodo-pago {
        min-height: auto;
    }

}
/* PROGRAMA OCULTO POR DEFECTO */
.programa-desplegable {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

/* PROGRAMA VISIBLE AL HACER CLIC */
.programa-desplegable.abierto {
    max-height: 800px;
    opacity: 1;
    margin-top: 20px;
    padding: 20px;
    background: #f7faf9;
    border-radius: 12px;
}

/* Botón */
.btn-programa {
    cursor: pointer;
    border: none;
}

/* Flecha */
.flecha {
    margin-left: 6px;
}

/* Animación */
@keyframes desplegarPrograma {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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


. {
    padding: 100px 0;
    background: linear-gradient(135deg, #f7faf9 0%, #eef5f4 100%);
}

.-titulo {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.pagos-titulo span {
    color: #238f88;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.85rem;
}

.pagos-titulo h2 {
    margin-top: 12px;
}


/* GRID */

/* =====================================
   GRID DE MÉTODOS DE PAGO
===================================== */

.grid-pagos {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    gap: 35px;
    align-items: start;
    justify-content: center;

    max-width: 1200px;
    margin: 50px auto 0;
}


/* TARJETAS */

.pago-card {
    background: #ffffff;
    border: 1px solid #dce8e6;
    border-radius: 22px;
    padding: 40px 35px;
    min-height: 370px;

    display: flex;
    flex-direction: column;

    box-shadow: 0 12px 35px rgba(24, 63, 82, 0.07);

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

.pago-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(24, 63, 82, 0.12);
}


/* TARJETA DESTACADA */

.pago-destacado {
    border: 2px solid #58aaa3;
}


/* ICONOS */

.icono-pago {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #e7f3f1;
    color: #238f88;

    font-size: 28px;
    margin-bottom: 25px;
}


/* TÍTULOS */

.pago-card h3 {
    color: #183f52;
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.pago-card p {
    color: #617080;
    line-height: 1.7;
    margin-bottom: 28px;
}


/* BOTONES */

.btn-pago {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    padding: 15px 20px;

    border-radius: 12px;

    background: #238f88;
    color: white;

    font-weight: 700;
    text-decoration: none;

    cursor: pointer;
    border: none;

    transition: all 0.3s ease;
}

.btn-pago:hover {
    background: #183f52;
    transform: translateY(-2px);
}


/* BOTÓN SECUNDARIO */

.btn-secundario-pago {
    background: #e7f3f1;
    color: #238f88;
}


/* =========================================================
                    DESPLEGABLE DE CURSOS
========================================================= */

.lista-cursos-pago {
    display: none;

    margin-top: 18px;

    border-top: 1px solid #dce8e6;
    padding-top: 12px;

    animation: aparecerCursos 0.35s ease;
}

.lista-cursos-pago.abierto {
    display: block;
}


/* CADA CURSO */

.curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 13px 10px;

    color: #183f52;
    text-decoration: none;

    border-bottom: 1px solid #edf2f1;

    font-size: 0.95rem;

    transition: all 0.25s ease;
}

.curso-pago:hover {
    color: #238f88;
    background: #f3f8f7;
    padding-left: 15px;
}

.curso-pago strong {
    color: #238f88;
    font-size: 0.85rem;
    white-space: nowrap;
}


/* FLECHA */

.flecha-pago {
    transition: transform 0.3s ease;
}

.btn-elegir-curso.abierto .flecha-pago {
    transform: rotate(180deg);
}


/* ANIMACIÓN */

@keyframes aparecerCursos {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


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

@media (max-width: 900px) {

    .grid-pagos {
        grid-template-columns: 1fr;
    }

    .pago-card {
        min-height: auto;
    }

}

.pagos {
    padding: 90px 20px;
}

.grid-pagos {
    max-width: 1200px;
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;

    align-items: start;
    justify-content: center;
}


/* TARJETAS */

.metodo-pago {
    text-align: center;

    padding: 35px 30px;

    border: 1px solid rgba(39, 120, 115, 0.15);
    border-radius: 20px;

    transition: 0.3s ease;

    min-height: 360px;
}

.metodo-pago:hover {
    transform: translateY(-5px);
}


/* ICONOS */

.icono-pago {
    font-size: 48px;
    margin-bottom: 20px;
}

.icono-pago i {
    color: #258f86;
}


/* TÍTULOS */

.metodo-pago h3 {
    font-size: 25px;
    margin-bottom: 15px;
    color: #25445e;
}


/* TEXTO */

.metodo-pago p {
    line-height: 1.6;
    margin-bottom: 25px;
}


/* BOTONES */

.btn-pago {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 16px 24px;

    background: #258f86;
    color: white;

    border: none;
    border-radius: 14px;

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

    cursor: pointer;
    text-decoration: none;

    transition: 0.3s ease;
}

.btn-pago:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}


/* =====================================
   LISTA DE CURSOS DESPLEGABLE
===================================== */

.lista-cursos-pago {
    display: none;

    margin-top: 25px;
    text-align: left;

    animation: aparecerCursos 0.4s ease;
}


/* CUANDO SE ABRE */

.lista-cursos-pago.abierto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* CADA CURSO */

.curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 13px 15px;

    background: #f5f9f8;

    border-radius: 10px;

    text-decoration: none;
    color: #25445e;

    transition: 0.3s ease;
}

.curso-pago:hover {
    background: #e4f2ef;
    transform: translateX(4px);
}

.curso-pago strong {
    color: #258f86;
    margin-left: 10px;
}


/* =====================================
   DATOS DE TRANSFERENCIA
===================================== */

.datos-transferencia {
    display: none;

    margin-top: 25px;
    padding: 20px;

    background: #f5f9f8;

    border-radius: 12px;

    text-align: left;

    animation: aparecerCursos 0.4s ease;
}

.datos-transferencia.abierto {
    display: block;
}


/* ANIMACIÓN */

@keyframes aparecerCursos {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


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

@media (max-width: 900px) {
    .grid-pagos {
        grid-template-columns: 1fr !important;
        max-width: 500px;
    }
}

/* =====================================
   DESPLEGABLE DE CURSOS - MERCADO PAGO
===================================== */

.metodo-pago .lista-cursos-pago {
    display: none;
    width: 100%;
    margin-top: 18px;
}

.metodo-pago .lista-cursos-pago.abierto {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

.metodo-pago .curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f5f9f8;
    border-radius: 10px;
    color: #25445e;
    text-decoration: none;
}

.metodo-pago .curso-pago strong {
    color: #258f86;
}


#lista-cursos {
    display: none;
    width: 100%;
    margin-top: 18px;
}

#lista-cursos.abierto {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}


/* =====================================
   MÉTODOS DE PAGO EN FORMA HORIZONTAL
===================================== */

.grid-pagos {
    width: 100%;
    max-width: 1300px;
    margin: 50px auto 0;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 35px;
    align-items: start;
}

/* Cada tarjeta ocupa su columna */
.metodo-pago {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid rgba(39, 120, 115, 0.15);
    border-radius: 20px;

    padding: 35px 30px;
    text-align: center;

    min-height: 360px;

    transition: 0.3s ease;
}

.metodo-pago:hover {
    transform: translateY(-5px);
}


/* =====================================
   RESPONSIVE - SOLO CELULAR Y TABLET
===================================== */

@media (max-width: 900px) {

    .grid-pagos {
        grid-template-columns: 1fr !important;
        max-width: 550px;
    }

}

/* =========================================
   CORRECCIÓN FINAL - PAGOS EN HORIZONTAL
========================================= */

.pagos .grid-pagos {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 35px !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 50px auto 0 !important;
    align-items: start !important;
}

.pagos .metodo-pago {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* En pantallas pequeñas se colocan en columna */
@media (max-width: 900px) {
    .pagos .grid-pagos {
        grid-template-columns: 1fr !important;
        max-width: 550px !important;
    }
}

.selector-cursos {
    width: 100%;
    margin-top: 5px;
}

.selector-cursos summary {
    list-style: none;
    width: 100%;
}

.selector-cursos summary::-webkit-details-marker {
    display: none;
}

/* EL BOTÓN */
.selector-cursos .btn-pago {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    cursor: pointer;
}

/* FLECHA */
.flecha-pago {
    display: inline-block;
    transition: transform 0.3s ease;
}

.selector-cursos[open] .flecha-pago {
    transform: rotate(180deg);
}

/* LISTA DE CURSOS */
.selector-cursos .lista-cursos-pago {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 15px;
    padding-top: 5px;

    animation: aparecerCursos 0.35s ease;
}

/* CADA CURSO */
.selector-cursos .curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    padding: 13px 16px;

    background: #f5f9f8;
    border-radius: 10px;

    text-decoration: none;
    color: #25445e;

    transition: all 0.3s ease;
}

.selector-cursos .curso-pago:hover {
    background: #e4f2ef;
    transform: translateX(4px);
}

.selector-cursos .curso-pago strong {
    color: #258f86;
    white-space: nowrap;
}

/* ANIMACIÓN */
@keyframes aparecerCursos {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* =====================================
   DESPLEGABLE NATIVO DE CURSOS
===================================== */

/* Quitamos el marcador predeterminado */
.curso-desplegable summary {
    list-style: none;
    cursor: pointer;
}

.curso-desplegable summary::-webkit-details-marker {
    display: none;
}

/* El botón mantiene el estilo visual */
.curso-desplegable .btn-card {
    cursor: pointer;
}

/* Programa oculto cuando el curso está cerrado */
.curso-desplegable .programa-desplegable {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding: 0;

    transition: max-height 0.5s ease,
                opacity 0.4s ease,
                margin-top 0.4s ease,
                padding 0.4s ease;
}

/* ✨ Programa visible cuando se abre el DETAILS */
.curso-desplegable[open] .programa-desplegable {
    max-height: 800px;
    overflow: visible;
    opacity: 1;

    margin-top: 20px;
    padding: 20px;

    background: #f7faf9;
    border-radius: 12px;
}

/* Flecha animada */
.curso-desplegable summary span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.curso-desplegable[open] summary span {
    transform: rotate(180deg);
}



/* =========================================
   LISTA DESPLEGABLE - MERCADO PAGO
========================================= */

.lista-cursos-pago {
    display: none;
    width: 100%;
    margin-top: 15px;
}

.lista-cursos-pago.abierto {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 16px 18px;

    text-decoration: none;
    color: #34495e;

    background: #f7fbfc;
    border-radius: 14px;

    box-sizing: border-box;

    transition: 0.3s ease;
}

.curso-pago:hover {
    transform: translateY(-2px);
}

.curso-pago span {
    flex: 1;
}

.curso-pago strong {
    white-space: nowrap;
    margin-left: 15px;
    color: #2f7f7b;
}
/* =========================================
   DESPLEGABLE DE CURSOS - MERCADO PAGO
========================================= */

.selector-cursos {
    width: 100%;
    margin-top: 15px;
}

.selector-cursos summary {
    list-style: none;
    cursor: pointer;
}

.selector-cursos summary::-webkit-details-marker {
    display: none;
}

.selector-cursos .btn-pago {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lista-cursos-pago {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}

.item-curso-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 18px;
    box-sizing: border-box;

    text-decoration: none;
    color: #34495e;
    background: #f7fbfc;
    border-radius: 14px;
}

.item-curso-pago span {
    flex: 1;
}

.item-curso-pago strong {
    margin-left: 15px;
    white-space: nowrap;
    color: #2f7f7b;
}

/* Ocultamos la lista cuando el desplegable está cerrado */
.selector-cursos:not([open]) .lista-cursos-pago {
    display: none;
}

/* Giramos la flecha cuando está abierto */
.selector-cursos[open] .flecha-pago {
    display: inline-block;
    transform: rotate(180deg);
}

/* Evitar que los textos del menú se dividan en dos líneas */
nav a,
.menu a {
    white-space: nowrap;
}

/* BOTÓN AULA VIRTUAL */
.btn-aula {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #2f7f7b;
    color: white !important;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.3s ease;
}

.btn-aula:hover {
    transform: translateY(-2px);
}


/* =========================================================
   IGUALAR LA ALTURA DEL CONTENIDO DE LAS TARJETAS
   ========================================================= */

.curso .contenido {
    display: flex;
    flex-direction: column;
}

.curso .contenido h3 {
    min-height: 70px;
    margin-bottom: 15px;
}

.curso .contenido > p {
    min-height: 60px;
    margin-bottom: 20px;
}

.curso .curso-desplegable {
    margin-top: auto;
}