html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}


body {
    background: #fff;
    color: #fff;
    overflow-x: hidden;
    background-image: url('../images/iestp.jpg');
    /* Reemplaza con la ruta de tu imagen */
    background-attachment: fixed;
    /* Esto es clave para el efecto de ventana */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* ===== HEADER SUPERIOR ===== */
.top-header {
    width: 100%;
    background: #0d1035;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.top-header .social {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #b69334;
    padding-left: 10%;
    padding: 15px 20px 15px 10%;
}


/* Contenedor de cada icono */
.top-header .social a {
    width: 32px;
    height: 32px;
    background: rgba(7, 15, 68);
    /* fondo suave */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.3s ease;
    margin-left: 8px;
}

/* Imágenes de los iconos */
.top-header .social a img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* para que queden blancos */
}

/* HOVER */
.top-header .social a:hover {
    background: #d4b055;
    /* dorado */
    transform: translateY(-3px);
}

.top-header .social a:hover img {
    filter: brightness(0);
    /* icono oscuro cuando el fondo es dorado */
}


.top-header .info span {
    margin-left: 4px;
    opacity: 0.9;
    color: #b69334;
}

.top-header .info {
    display: flex;
    gap: 20px;
    padding-right: 10%;
}

.top-header .info img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}


/* ===== NAV PRINCIPAL ===== */
.main-nav {
    width: 100%;
    background: #fff;
    padding: 14px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
}

.main-nav .logo img {
    height: 60px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    font-weight: 600;
    color: #0d1035;
    font-size: 15px;
    transition: .3s;
}

.nav-links a:hover {
    color: #d4b055;
}

/* =====------------------------------------------------------------------==== */

/* ======== HERO SECTION ======== */
.hero {
    position: relative;
    height: 75vh;
    width: 100%;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* VIDEO DE FONDO */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* FILTRO AZUL */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 15, 68, 0.65);
    backdrop-filter: blur(2px);
    z-index: -1;
}

/* CONTENIDO PRINCIPAL */
.hero-content {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 60%;
}

.pretitle {
    font-size: 32px;
    letter-spacing: 2px;
    color: #b69334;
    text-decoration: underline;
    font-weight: 500;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 5px;
}

.title {
    font-size: 62px;
    line-height: 1.2;
    margin: 10px 0 20px;
    font-weight: bold;
}

.gold {
    color: #b69334;
}

.subtitle {
    max-width: 600px;
    font-size: 17px;
    line-height: 1.5;
    opacity: 0.9;
    font-weight: 200;
}

/* BOTONES */
.buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.btn {
    padding: 14px 28px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    font-size: 17px;
}

.btn-gold {
    background: #b69334;
    color: white;
}

.btn-gold:hover {
    background: #d4b055;
}

.btn-white {
    background: #fff;
    color: #0d0d0d;
}

.btn-white:hover {
    background: #ddd;
}

/* ======== CARDS ======== */
.cards-container {
    display: flex;
    gap: 20px;
    position: absolute;
    bottom: -40px;
    left: 70%;
    transform: translateX(-50%);
}

.card {
    background: #fff;
    color: #111;
    width: 240px;
    padding: 20px;
    height: 250px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 5px 20px #0004;
    transition: transform 0.3s;
}

.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.card-header img {
    height: 3em;
    width: auto;
}

.card-header h3 {
    font-size: 3em;
    color: white;
    -webkit-text-stroke: 2px black;
}

.card:hover {
    transform: translateY(-10px);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 10px;
}

.card-text {
    font-size: 13px;
    opacity: 0.7;
}


/* ======== ANIMACIONES ======== */
.animate-fade {
    animation: fadeIn 1s ease forwards;
    opacity: 0;
}

.animate-slide {
    animation: slideIn 1s ease forwards 0.3s;
    opacity: 0;
}

.animate-up {
    animation: slideUp 1s ease forwards 0.6s;
    opacity: 0;
}

.animate-stagger {
    animation: fadeUp 1s ease forwards;
    opacity: 0;
}

.animate-stagger:nth-child(1) {
    animation-delay: 0.9s;
}

.animate-stagger:nth-child(2) {
    animation-delay: 1.1s;
}

/* Animación de entrada (solo para envolver las cards) */
.card-wrapper {
    opacity: 0;
    animation: cardEnter 1s ease forwards;
}

/* Animación infinita (mueve toda la card completa) */
.card-wrapper .card {
    animation: floating 4s ease-in-out infinite;
}

/* Delays — entrada -> flotación */
.card-wrapper:nth-child(1) {
    animation-delay: 0s;
}

.card-wrapper:nth-child(1) .card {
    animation-delay: 1s;
}

.card-wrapper:nth-child(2) {
    animation-delay: 0.2s;
}

.card-wrapper:nth-child(2) .card {
    animation-delay: 1.2s;
}

.card-wrapper:nth-child(3) {
    animation-delay: 0.4s;
}

.card-wrapper:nth-child(3) .card {
    animation-delay: 1.4s;
}

/* ====---------------------= SECCIÓN CURSO ====------------------------= */


/* ===== CONTENEDOR GENERAL ===== */
.destacado-section {
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    padding: 100px 20px 100px 20px;
    font-family: "Poppins", sans-serif;
}

.destacado-card {
    display: flex;
    background: #fff;
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    align-items: stretch;
}

/* IMPORTANTE */
.destacado-img {
    width: 40%;
    max-height: 500px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.destacado-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.destacado-content {
    width: 60%;
    display: flex;
    flex-direction: column;
    padding: 35px 40px;
    color: #333;
}


/* BADGE */
.badge-destacado {
    font-size: 20px;
    letter-spacing: 2px;
    color: #b69334;
    text-decoration: underline;
    font-weight: 500;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 5px;
}

/* TITULO */
.title-section {
    font-size: 32px;
    font-weight: 700;
    margin-top: 5px;
    line-height: 1.2;
}

.title-section span {
    color: #b69334;
}

.descripcion-section {
    font-weight: 600;
}


/* FECHA */
.fecha-section {
    font-size: 13px;
    color: #888;
    margin: 8px 0 15px 0;
}

/* DESCRIPCION */
.descripcion-section {
    font-size: 15px;
    margin-bottom: 40px;
    line-height: 1.6;

}

/* ORGANIZA */
.organiza-section {
    display: flex;
    flex-direction: row;
    font-size: 15px;
    margin-bottom: 40px;
}

.organiza-section img {
    width: 50px;
    height: 50px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.3s ease;
    background-color: #b69334;
    margin-right: 20px;
}

.organizador img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ACCIONES (botón + teléfono) */
.acciones-section {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* INFORMACIÓN TELÉFONO */
.info-section {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-weight: 600;
}

.info-section img {
    width: 40px;
    height: 40px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.3s ease;
    background-color: #0d1035;
}

.tel span {
    color: #b69334;
}


.section-window {
    /* Estilos para tu sección, que estará encima de la imagen de fondo */
    background: rgba(7, 15, 68, 0.65);
    backdrop-filter: blur(2px);
    /* Fondo semi-transparente para que se vea la imagen */
    padding: 80px 0;
    /* Ajusta el padding según sea necesario */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Otros estilos para el layout del contenido de la sección */
}

.window-content {
    display: flex;
    align-items: center;
    max-width: 1200px;
    /* Ancho máximo para el contenido */
    margin: 0 auto;
}

.icon-container {
    margin-right: 30px;
    background-color: #b69334;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 20px;
}

.icon-container img {
    width: 80px;
    /* Ajusta el tamaño del icono */
    height: auto;
}

.text-container {
    width: 700px;
}

.text-container h2 {
    font-size: 32px;
    /* Ajusta el tamaño del título */
    margin: 0;
    line-height: 1.3;
    text-align: left;
}


.button {
    background-color: white;
    color: #3C3C50;
    /* Color del texto del botón */
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-left: auto;
    /* Para que el botón se alinee a la derecha */
}

/* ====== SECCIÓN CURSOS DESTACADOS ====== */
.cursos-destacados {
    text-align: center;
    padding: 120px 10% 120px;
    color: #111;
    width: 100%;
    background-color: #fff;
}

/* SUBTÍTULO */
.section-subtitle {
    font-size: 20px;
    letter-spacing: 2px;
    color: #b69334;
    text-decoration: underline;
    font-weight: 500;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 5px;
}

/* TÍTULO PRINCIPAL */
.section-title {
    font-size: 48px;
    font-weight: 800;
    margin: 0;
}

.section-title.gold {
    color: #d4b055;
    margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.section-description {
    font-size: 17px;
    color: #444;
    margin-bottom: 40px;
    font-weight: 600;
}

/* ====== GRID ====== */
.cursos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* ====== CARD ====== */
.curso-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 20px #0002;
    overflow: hidden;
    position: relative;
    text-align: left;
    transition: .3s ease;
    display: flex;
    flex-direction: column;
}

.curso-card:hover {
    transform: translateY(-10px);
}

/* Imagen */
.curso-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Badge */
.curso-badge {
    position: absolute;
    top: 15px;
    right: 20px;
    background: #d4b055;
    color: white;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.curso-badge.gratis {
    background: #c8b25d;
}

.curso-badge.precio {
    background: #b69334;
}

/* Contenido */
.curso-content {
    padding: 18px 22px 25px;
    display: flex;
    /* Habilita Flexbox */
    flex-direction: column;
    /* Apila los elementos verticalmente */
    flex-grow: 1;
}

.curso-fecha {
    font-size: 13px;
    color: #7d7d7d;
    margin-bottom: 10px;
}

.curso-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.curso-texto {
    font-size: 14px;
    color: #444;
    margin-bottom: 18px;
    line-height: 1.5;
    flex-grow: 1;
}

/* Etiquetas */
.curso-etiquetas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.etiqueta {
    padding: 5px 12px;
    background: #eaeaea;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.curso-detalles {
    font-size: 12px;
    color: #111;
    margin-left: auto;
    text-decoration: none;
    font-weight: 600;
}

.curso-detalles:hover {
    color: #d4b055;
}


/*-------------------------------FOOTER----------------------------------*/

.main-footer {
    width: 100%;
    background-color: #0d1035;
    /* Fondo azul oscuro del footer */
    color: #b69334;
    padding: 40px 0 20px 0;
    font-family: Arial, sans-serif;
    /* Usar una fuente legible */
}

.footer-column .contact-info span {
    margin-left: 4px;
    opacity: 0.9;
    color: #b69334;
}

.footer-column .contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9em;
}

.footer-column .contact-info img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

.footer-content-wrapper {
    display: flex;
    justify-content: space-around;
    /* Distribuye el espacio entre las columnas */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.footer-content-left {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 0 15px;
    justify-content: space-between;
}

.footer-column h3 {
    color: #b69334;
    font-size: 1.1em;
    border-bottom: 1px solid transparent;
    margin-bottom: 10px;
    /* Solo para consistencia si deseas más énfasis */
}

/* Estilos para las listas de Capacitaciones */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-column a {
    color: #b69334;
    /* Un gris claro para los enlaces */
    text-decoration: underline;
    font-size: 0.9em;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: #d4b055;
    /* Color dorado al pasar el ratón */
}

/* Estilos para la sección de Misión y Logo */
.mission-logo {
    text-align: right;
    /* Alinea el texto a la derecha como en tu imagen */
    max-width: 350px;
    /* Limita el ancho para que el texto no sea demasiado largo */
}

.mission-text {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 15px;
    font-style: italic;
    color: #b69334;
}

.institute-logo {
    width: 100px;
    /* Ajusta el tamaño del logo */
    height: auto;
    margin-top: 10px;
    opacity: 0.8;
    align-self: flex-end;
}

/* Contenedor de cada icono */
.main-footer .social {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


/* Contenedor de cada icono */
.main-footer .social a {
    width: 32px;
    height: 32px;
    background: #b69334;
    /* fondo suave */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.3s ease;
    margin-left: 8px;
}

/* Imágenes de los iconos */
.main-footer .social a img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* para que queden blancos */
}

/* HOVER */
.main-footer .social a:hover {
    background: #191c44;
    /* dorado */
    transform: translateY(-3px);
}


/* Sección de Derechos Reservados */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-divider {
    border: 0;
    border-top: 2px solid #3C3C50;
    margin: 20px auto;
    width: 90%;
    height: 20px;
}

.footer-bottom p {
    font-size: 0.8em;
    color: #b69334;
}

/*----------------------------------------------------------------------*/
/*-----------------------------------BANNER-----------------------------------*/

/* ==== SECCIÓN HERO BANNER (NUEVA) ==== */

.hero-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* === FRANJA DORADA SUPERIOR === */
.promo-bar {
    width: 100%;
    background-color: #b69334;
    padding: 20px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.promo-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.promo-title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.promo-desc {
    font-size: 15px;
    color: #fff;
    margin-top: -2px;
    font-weight: lighter;
}

.promo-desc2 {
    font-size: 14px;
    color: #fff;
    margin-top: -2px;
    font-weight: bold;
}

/* ICONO REDONDO AZUL OSCURO */
.promo-icon {
    margin-right: 30px;
    background-color: #0d1035;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 20px;
}

.promo-icon img {
    width: 50px;
    /* Ajusta el tamaño del icono */
    height: auto;
}

/* === FONDO CON IMAGEN === */
.banner-bg {
    position: relative;
    background-image: url('../images/iestp.webp');
    width: 100%;
    height: 380px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.banner-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(7, 15, 68, 0.45);
    backdrop-filter: blur(1px);
}

/* === TEXTO DEL BANNER === */
.banner-content {
    position: relative;
    padding-left: 10%;
    color: #fff;
    max-width: 1300px;
}

.banner-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
}

.banner-sub {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.5;
    max-width: 700px;
}



/*-------------------------------Keyframes ----------------------------------*/

@keyframes cardEnter {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* Keyframes del efecto flotante */
@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


/* KEYFRAMES */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

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

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

@keyframes fadeUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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

@keyframes floatUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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


/*----------------------------------------------------------- Cursos ---------------------------------------------*/

.page-container {
    padding: 70px 10% 120px;
    background-color: #fff;
    width: 100%;
}

/* Barra de Búsqueda */
.search-bar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.search-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 15px;
    width: 250px;
}

.search-button,
.reset-button,
.search-button-icon {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}

.search-button-icon {
    background: none;
    color: #333;
}

.search-button {
    background-color: #f0f0f0;
    color: #555;
    transition: 0.4s;
}

.reset-button {
    background-color: #f0f0f0;
    color: #555;
    transition: 0.4s;
    margin-top: 20px;
    text-align: center;
}

.reset-button:hover {
    background-color: #d6d6d6;
}

/* Layout Principal (Filtros y Tarjetas) */
.content-wrapper {
    display: flex;
    gap: 30px;
}

/* Columna de Filtros */
.sidebar-filters {
    width: 250px;
    /* Ancho fijo para la barra lateral */
    flex-shrink: 0;
    padding-top: 5px;
    /* Alineación visual con el contenido */
}

.sidebar-filters h4 {
    color: #333;
    font-weight: 700;
    margin-top: 0;
}

.category-list {
    display: flex;
    flex-direction: column;
}

.category-list label {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    color: #555;
    cursor: pointer;
}

.category-list input[type="checkbox"] {
    margin-right: 10px;
    /* Estilo para el checkbox si quieres que se vea como la imagen */
    transform: scale(1.1);
}

/*----------------------------------------------------------- Curso Detalles ---------------------------------------------*/
:root {
    --primary-blue: #0d1035;
    /* Color de fondo del texto resaltado */
    --primary-orange: #b69334;
    /* Color del texto resaltado */
    --dark-text: #000000;
    --light-text: #666;
    --border-color: #e0e0e0;
    --bg-color: #f7f7f7;
}

.main-content-wrapper {
    background-color: #fff;
    padding: 50px 20% 70px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Estilo de Resaltado (Naranja) */
.highlight-text {
    color: var(--primary-orange);
}

/* --- SECCIÓN DE DETALLES DEL CURSO --- */
.course-details-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.course-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--dark-text);
}

.course-meta-data {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--light-text);
    margin-bottom: 30px;
}

.meta-item {
    display: flex;
    align-items: center;
}

.meta-item img {
    width: 16px;
    margin-right: 5px;
}

.course-body-layout {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.course-media {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 500px;
    overflow: hidden;
}

.course-main-image {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-type {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: var(--primary-blue);
    color: #fff;
    padding: 5px 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.course-info {
    flex: 1;
}

.course-description-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-text);
    margin-bottom: 25px;
}

/* Cajas de Información (Organiza, Lugar) */
.info-item-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.info-item-box img {
    width: 40px;
    height: 40px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.3s ease;
    background-color: var(--primary-orange);
}

.icon-text {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.info-content strong {
    display: block;
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.info-content p {
    margin: 0;
    font-size: 14px;
    color: var(--light-text);
}

/* Atributos (Duración, Créditos) */
.course-attributes {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.attribute-tag {
    background-color: var(--primary-orange);
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Etiquetas de Estado (Gratuito, Certificación, etc.) */
.course-status-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    align-items: center;
    text-align: center;
    padding: auto;
}

.status-tag {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag-gratuito {
    background-color: #4CAF50;
    /* Verde */
    color: #fff;
}

.tag-pago {
    background-color: #2c3359;
    /* Verde */
    color: #fff;
    align-items: center;
}

.tag-certificacion {
    background-color: #eee;
    color: var(--dark-text);
    border: 1px solid var(--border-color);
}

.tag-presencial-small {
    background-color: #eee;
    color: var(--dark-text);
    border: 1px solid var(--border-color);
}

.tag-vigente-small {
    background-color: #eee;
    color: var(--dark-text);
    border: 1px solid var(--border-color);
}

/* Llamada a la Participación */
.participation-callout {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.participation-callout h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.participation-callout p {
    font-size: 14px;
    margin-bottom: 15px;
}

.inscription-button {
    display: inline-block;
    background-color: #fff;
    color: var(--primary-blue);
    padding: 10px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background-color 0.3s;
}

.inscription-button:hover {
    background-color: var(--border-color);
}

/* --- SECCIÓN DEL FORMULARIO DE INSCRIPCIÓN --- */
.inscription-form-section {
    padding-top: 30px;
}

.form-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--dark-text);
}

.form-instructions {
    margin-bottom: 20px;
}

.form-instructions strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-text);
}

.form-instructions p {
    font-size: 14px;
    color: var(--light-text);
    margin: 0;
}

/* Búsqueda por DNI */
.dni-lookup {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.dni-label {
    display: block;
    font-size: 14px;
    color: var(--dark-text);
    margin-bottom: 10px;
    font-weight: 500;
}

.dni-label img {
    height: 1.5em;
    width: auto;
    vertical-align: middle;
    margin-right: 5px;
}

.dni-input-group {
    display: flex;
    align-items: center;
    width: 300px;
    /* Ancho del campo de búsqueda */
    margin-bottom: 5px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
}

.dni-input {
    padding: 10px;
    border: none;
    flex-grow: 1;
}

.dni-search-btn {
    background: none;
    border: none;
    padding: 15px 10px 10px 10px;
    cursor: pointer;
    color: var(--light-text);
}

.reset-link {
    display: block;
    font-size: 12px;
    color: var(--light-text);
    text-decoration: none;
    text-align: right;
    margin-top: 5px;
    width: 300px;
}

/* Formulario General */
.inscription-form label {
    display: block;
    font-size: 14px;
    color: var(--dark-text);
    margin-bottom: 5px;
    font-weight: 500;
}

.inscription-form .optional {
    font-weight: normal;
    color: var(--light-text);
    font-size: 12px;
}

.inscription-form input[type="text"],
.inscription-form input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--dark-text);
}

.form-row {
    margin-bottom: 10px;
}

.form-row.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row.three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Checkboxes */
.form-check {
    margin-bottom: 15px;
}

.form-check label {
    display: flex;
    align-items: flex-start;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
}

.form-check input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.form-check a {
    color: var(--dark-text);
    text-decoration: underline;
}

/* Botón y Nota Final */
.submit-form-button {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    align-self: center;
    margin: auto;
    width: 250px;
    /* Ancho fijo como en la imagen */
    margin-top: 20px;
    transition: background-color 0.3s;
}

.submit-form-button:hover {
    background-color: var(--primary-orange);
}

.form-note {
    font-size: 12px;
    color: red;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    border: 1px dashed red;
    border-radius: 4px;
}

/*-----------------------------MODAL POLÍTICAS-----------------------------------*/


.modal-backdrop {
    display: none;
    /* CLAVE: Oculto por defecto */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semi-transparente más oscuro */
}

.modal-backdrop.is-visible {
    display: flex;
    /* Muestra el backdrop centrado */
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    /* Asegura que el modal no sea más alto que la ventana visible */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Sombra más pronunciada */
    border-radius: 8px;
    /* Bordes más suaves */
    display: flex;
    flex-direction: column;
}

.modal-header {
    flex-shrink: 0;
    /* Asegura que el header no se encoja */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* El cuerpo del modal */
.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
}

.scrollable-content {
    padding-bottom: 5px;
}

.policies-textarea {
    width: 100%;
    height: 350px;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    resize: none;
    font-size: 15px;
    line-height: 1.5;
    overflow-y: scroll;
    background: #fdfdfd;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    text-align: center;
}

.close-button {
    color: #555;
    font-size: 30px;
    font-weight: normal;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    /* Asegura que la 'x' sea fácil de presionar */
}

.close-button:hover,
.close-button:focus {
    color: #000;
}

.modal-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 10px;
}


/*------------------------------- CERTIFICADOS ----------------------------------*/

/* Estilos Generales para la Sección */
.certificates-section {
    padding: 150px 20px;
    text-align: center;
    background-color: #fff;
    /* Fondo blanco */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Fuente similar a la de la imagen */
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

/* Título */
.certificates-title {
    font-size: 32px;
    font-weight: 600;
    /* Semi-bold */
    color: #000;
    margin-bottom: 20px;
}

/* Descripción */
.certificates-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    /* Gris oscuro para el texto */
    margin-bottom: 40px;
    padding: 0 50px;
    /* Un poco de padding horizontal para centrar mejor el texto */
}

/* Formulario de Búsqueda (Input y Lupa) */
.search-form {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
    margin: 0 auto 30px;
    border: 1px solid #ccc;
    /* Borde gris claro */
    border-radius: 4px;
    overflow: hidden;
    height: 50px;
    /* Altura fija para el input */
}

.search-input-certi {
    flex-grow: 1;
    border: none;
    padding: 0 15px;
    font-size: 16px;
    outline: none;
    height: 100%;
    color: #333;
}

.search-input-certi::placeholder {
    color: #999;
}

.search-icon {
    background: none;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.search-icon svg {
    width: 20px;
    height: 20px;
    fill: #999;
    /* Color de la lupa */
}

/* Botón Principal */
.search-button-certi {
    background-color: #171c35;
    /* Color azul oscuro/negro similar al de la imagen */
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Sombra sutil para el efecto de profundidad */
}

.search-button-certi:hover {
    background-color: #2c3359;
    /* Un tono un poco más claro al pasar el ratón */
}


/*------------------------------- CERTIFICADOS DETALLES----------------------------------*/

/* Estilos Generales para la Sección (sin cambios) */
.results-section {
    padding: 80px 20px;
    background-color: #f8f8f8;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Estilos de la Cabecera (sin cambios) --- */
.recognition-header {
    text-align: left;
    margin-bottom: 30px;
}

.user-name {
    font-size: 24px;
    font-weight: 600;
    color: #171c35;
    margin-bottom: 5px;
}

.recognition-text {
    font-size: 14px;
    color: #555;
}

/* --- Estilos de los Items de Certificado (sin cambios) --- */
.certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 20px 25px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.certificate-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.info-content {
    text-align: left;
    flex-grow: 1;
}

.course-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.course-dates {
    font-size: 14px;
    color: #777;
}

/* --- Estilos de los Botones de Acción --- */
.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Estilos para las imágenes de los iconos */
.icon {
    width: 20px;
    /* Ajusta el tamaño según necesites */
    height: 20px;
    /* Ajusta el tamaño según necesites */
    object-fit: contain;
    /* Para que la imagen se ajuste sin deformarse */
}

/* Botón de Ver (Ojo) */
.view-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    /* Ya no necesitamos color para el SVG, pero mantenemos padding y cursor */
    transition: transform 0.2s;
    /* Un efecto de escala al pasar el ratón */
    display: flex;
    /* Para centrar la imagen si es necesario */
    align-items: center;
    justify-content: center;
}

.view-button:hover {
    transform: scale(1.1);
    /* Ligeramente más grande al pasar el ratón */
}

/* Botón de Descargar */
.download-button {
    background-color: #dab65b;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s, transform 0.2s;
}

.download-button .icon {
    /* Estilos específicos para el icono de descarga dentro del botón */
    width: 16px;
    /* Ajusta el tamaño para que sea un poco más pequeño que el de ver */
    height: 16px;
    filter: brightness(0) invert(1);
    /* Esto lo hace blanco, asumiendo que tu PNG es oscuro */
}


.download-button:hover {
    background-color: #c7a34e;
    transform: translateY(-2px);
    /* Un ligero efecto de levantamiento */
}


/*--------------------------------------------------------RESPONSIVE-------------------------------------------------------*/
.menu-toggle {
    display: block;
    /* 🔑 CLAVE: Mostrar el botón solo en móvil */
    cursor: pointer;
    font-size: 30px;
    color: #0d1035;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    z-index: 100;
}

/* ========================================================================= */
/* ======================== MEDIA QUERIES (RESPONSIVE) ===================== */
/* ========================================================================= */

/*--------------------------------------------------------HOME------------------------------------------------------*/
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        /* Muestra el menú completo en desktop */
        position: static;
        box-shadow: none;
    }
}

/* --- 1. Tablets y Pantallas medianas (Máximo 1024px) --- */
@media (max-width: 1024px) {

    /* Ajustes Generales */
    .top-header,
    .main-nav,
    .hero,
    .destacado-section,
    .section-window {
        padding-left: 5%;
        padding-right: 5%;
    }

    /* HERO SECTION */
    .hero {
        height: 70vh;
    }

    .hero-content {

        text-align: left;
        max-width: 600px;
    }

    .title {
        font-size: 52px;
    }

    /* CARDS - Se ocultan a partir de 1024px para evitar que invadan la zona central */
    .cards-container {
        display: none;
    }

    /* DESTAQUE SECTION */
    .destacado-card {
        flex-direction: column-reverse;
        /* Apilamos la imagen y el contenido */
        max-width: 600px;
        /* Limitamos el ancho para mejor lectura */

    }

    /* IMPORTANTE */
    .destacado-img {
        width: 100%;
        max-height: 500px;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }

    .destacado-img img {
        width: 100%;
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        border-radius: 15px;
    }

    .destacado-content {
        width: 100%;
    }

    .acciones-section {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .tel {
        font-size: 13px;
    }

    .acciones-section .btn {
        width: 100%;
        text-align: center;
    }

    /* WINDOW SECTION */
    .window-content {
        flex-direction: column;
        width: 300px;
        text-align: center;
        gap: 30px;
    }

    .icon-container {
        margin-right: 0;
        width: auto;
    }

    .text-container {
        width: auto;
    }

    .text-container h2 {
        text-align: center;
    }

    .window-content .btn {
        width: 80%;
    }

    /* CURSOS GRID */
    .cursos-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas */
    }

    /* FOOTER */
    .footer-content-wrapper {
        display: flex;
        flex-direction: column;
        padding: 10px 10%;
        gap: 30px;
    }

    .mission-logo {
        text-align: left;
        order: 10;
        /* Mueve la misión al final */
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .institute-logo {
        align-self: flex-end;
    }
}

/* --- 2. Móviles y Pantallas Pequeñas (Máximo 768px) --- */
@media (max-width: 768px) {

    /* HEADER SUPERIOR */
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        font-size: 13px;
    }

    .top-header .social {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
        order: 2;
        /* Mueve las redes sociales abajo */
    }

    .top-header .info {
        width: 100%;
        display: none;
        justify-content: space-around;
        padding: 10px 5%;
        border-bottom: 1px solid #191c44;
        order: 1;
    }

    /* NAV PRINCIPAL - IMPLEMENTACIÓN DE MENÚ HAMBURGUESA */
    .main-nav {
        padding: 15px 5%;
        position: relative;
    }

    .nav-links {
        /* Estado inicial del menú: Oculto */
        position: absolute;
        top: 90px;
        /* Se muestra justo debajo del nav */
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        gap: 20px;
        padding: 10px 0;
        box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        display: none;
        /* Oculto por defecto en mobile */
    }

    .nav-links.active {
        display: flex;
        /* Clase que JavaScript usará para mostrarlo */
    }

    .nav-links a {
        padding: 15px 5%;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* BOTÓN HAMBURGUESA*/
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 30px;
        color: #0d1035;
        z-index: 100;
    }

    .politicas_edit {
        white-space: nowrap;
         display: inline-block;
        /* Evita que se rompa la línea */
    }

    #open-privacy-policy {
        display: inline-block;
    }

    /* HERO SECTION */
    .hero {
        height: 85vh;
        align-items: center;
        /* Centramos el contenido en móviles */
    }

    .hero-content {
        position: static;
        right: auto;
        align-items: left;
        text-align: left;
        padding: 0 5%;
    }

    .pretitle {
        font-size: 24px;
        letter-spacing: 3px;
    }

    .title {
        font-size: 42px;
    }

    .subtitle {
        font-size: 15px;
    }

    .buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .buttons .btn {
        width: 100%;
        max-width: 300px;
        font-size: 16px;
    }

    /* CURSOS GRID */
    .cursos-grid {
        grid-template-columns: 1fr;
        /* 1 columna */
    }

    /* TÍTULOS DE SECCIÓN */
    .section-title {
        font-size: 36px;
    }

    .mission-text {
        text-align: right;
    }

    /* FOOTER */
    .footer-content-left {
        flex-direction: column;
    }

    .footer-column {
        padding: 0%;
    }
}

/* --- 3. Móviles Pequeños (Máximo 480px) --- */
@media (max-width: 480px) {

    /* HERO */
    .title {
        font-size: 36px;
    }

    /* CURSOS DESTACADOS */
    .section-title {
        font-size: 30px;
    }

    .section-description {
        padding: 0 10px;
    }

    /* DESTAQUE SECTION */
    .title-section {
        font-size: 26px;
    }
}

/*--------------------------------------------------------CURSOS------------------------------------------------------*/

@media (max-width: 768px) {

    .page-container {
        padding-top: 50px;
    }

    .content-wrapper {
        flex-direction: column;
        /* Apila el sidebar y el grid */
        gap: 20px;
    }

    .search-bar-container {
        flex-wrap: wrap;
    }

    /* 🔑 CLAVE: Estilo del Acordeón para Filtros */
    .sidebar-filters {
        width: 100%;
        /* Ocupa todo el ancho */
        padding: 0;
        /* Quita el padding interno de la caja principal */
        border: none;
        /* Quita el borde/fondo de la caja principal */
        background: none;
    }

    /* Encabezado del filtro (Botón del Acordeón) */
    .filter-header {
        display: flex;
        /* Muestra el encabezado del acordeón */
        justify-content: space-between;
        align-items: center;
        padding: 15px 5px;
        color: black;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
        margin-bottom: 10px;
    }

    .filter-header h4 {
        margin: 0;
        color: black;
        font-size: 16px;
        font-weight: 500;
    }

    /* Icono de despliegue */
    .toggle-icon {
        font-size: 24px;
        transition: transform 0.3s;
        line-height: 1;
    }

    /* Gira el icono cuando el menú está activo (abierto) */
    .filter-header.active .toggle-icon {
        transform: rotate(45deg);
        /* "+" se convierte en "X" o gira */
    }

    /* Contenido de la lista de categorías (inicialmente OCULTO) */
    .category-list {
        display: none;
        /* 🔑 CLAVE: Oculto por defecto en móvil */
        flex-direction: column;
        padding: 15px 20px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 10px;
        /* Estilos de transición para animación (si usas altura máxima en JS) */
    }

    /* Clase para mostrar el menú (la añade JavaScript) */
    .category-list.active {
        display: flex;
    }

    .sidebar-filters .reset-button {
        width: 100%;
        /* El botón de limpiar ocupa todo el ancho */
        border: none;
        padding: 12px;
    }

    /* Grid de Cursos (Ajuste a 1 o 2 columnas) */
    .cursos-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en tablet */
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .cursos-grid {
        grid-template-columns: 1fr;
        /* 1 columna en móvil pequeño */
    }
}


/*--------------------------------------------------------BANNER------------------------------------------------------*/


@media (max-width: 1024px) {

    /* Ajustes para tablet/pantallas medianas */
    .banner-content,
    .promo-bar {
        padding-left: 5%;
        padding-right: 5%;
    }

    .banner-title {
        font-size: 40px;
    }
}


@media (max-width: 768px) {

    /* Ajustes para móviles */
    .hero-banner {
        min-height: 450px;
    }

    .banner-content {
        padding: 40px 5% 50px;
    }

    .banner-title {
        font-size: 32px;
        line-height: 1.3;
    }

    .banner-sub {
        font-size: 15px;
    }

    /* FRANJA SUPERIOR */
    .promo-bar {
        flex-direction: column;
        /* Apilamos los elementos */
        align-items: flex-start;
        padding: 15px 5%;
        gap: 15px;
    }

    .promo-left {
        gap: 15px;
    }

    .promo-icon {
        display: none;
    }

    .promo-title {
        font-size: 16px;
    }

    /* Oculta la primera línea de descripción en móvil */
    .promo-desc {
        display: none;
    }

    /* Muestra la segunda línea de descripción para que haya texto visible */
    .promo-desc2 {
        display: block;
        font-size: 13px;
        font-weight: 200;
    }

    .promo-bar .btn-white {
        width: 100%;
        /* El botón ocupa todo el ancho */
        text-align: center;
        font-size: 15px;
    }
}

/*--------------------------------------------------------CERTIFICADOS-----------------------------------------------------*/

@media (max-width: 768px) {
    .certificates-section {
        padding: 80px 10px;
    }

    .certificates-title {
        font-size: 30px;
    }

    .certificates-description {
        font-size: 15px;
        margin-bottom: 30px;
        padding: 0 5%;
        /* Menos padding en los lados */
    }

    /* La barra de búsqueda puede ocupar más espacio */
    .search-form {
        max-width: 80%;
    }

    .search-input-certi {
        padding: 12px 15px;
        font-size: 15px;
    }

    /* El icono puede ser un poco más pequeño */
    .search-icon {
        width: 45px;
        height: 45px;
    }

    .search-icon svg {
        width: 18px;
        height: 18px;
    }

    /* El botón principal de búsqueda ocupa el ancho completo para facilitar el clic */
    .search-button-certi {
        width: 90%;
        max-width: 350px;
        /* Limita el ancho para que no sea excesivamente grande */
        padding: 14px 30px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .certificates-title {
        font-size: 26px;
    }

    .certificates-description {
        font-size: 14px;
    }

    /* La barra de búsqueda ocupa casi todo el ancho */
    .search-form {
        max-width: 80%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .search-button-certi {
        width: 90%;
        margin: 0 auto;
        /* Centra el botón cuando ocupa el 90% */
    }
}


/*--------------------------------------------------------CURSO DETALLE-----------------------------------------------------*/

@media (max-width: 1024px) {

    /* Ajustes para tabletas */
    .course-details-section {
        margin-bottom: 40px;
    }

    .course-header h1 {
        font-size: 32px;
    }

    .course-body-layout {
        flex-direction: column;
        /* Apila la imagen y la info */
        gap: 30px;
    }

    .course-media,
    .course-info {
        flex-basis: 100%;
        /* Ocupan todo el ancho */
    }

    .inscription-form-section {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {

    /* Ajustes para la mayoría de los móviles */
    .main-content-wrapper {
        padding: 0 20px;
    }

    /* 2. DETALLES DEL CURSO */
    .course-header h1 {
        font-size: 26px;
        padding: 30px 10px 10px;
    }

    .course-meta-data {
        flex-direction: column;
        /* Apila las fechas y horario */
        gap: 10px;
        align-items: flex-start;
        padding-left: 10px;
    }


    .course-media {
        order: -1;
        /* Mueve la imagen arriba en móvil */
    }

    .course-description-text {
        font-size: 15px;
    }

    .course-attributes,
    .course-status-tags {
        flex-wrap: wrap;
        /* Permite que las etiquetas se envuelvan */
    }

    .attribute-tag {
        flex-grow: 1;
        /* Ocupa más espacio si es necesario */
        text-align: center;
    }

    /* 3. FORMULARIO DE INSCRIPCIÓN */
    .inscription-form-section {
        padding: 30px 15px;
    }

    .form-title {
        font-size: 26px;
    }

    .dni-lookup {
        padding: 15px;
    }

    .dni-input-group {
        width: 100%;
    }

    .reset-link {
        width: 100%;
    }

    .form-row.two-columns,
    .form-row.three-columns {
        /* Define una sola columna que ocupa todo el ancho disponible */
        grid-template-columns: 1fr;

        /* Aseguramos que el espacio vertical entre campos siga siendo el principal */
        gap: 15px;
    }

    .form-row {
        margin-bottom: 15px;
        /* Reducir margen entre grupos de filas */
    }

    .form-row.three-columns .input-col input,
    .form-row.two-columns .input-col input {
        margin-bottom: 0%;
    }

    /* 4. MODAL */
    .modal-content {
        max-height: 90vh;
        /* Limita la altura del modal */
    }

    .policies-textarea {
        height: 250px;
    }
}

/*--------------------------------------------------------CERTIFICADO DETALLE-----------------------------------------------------*/

/* ========================================================================= */
/* ======================== MEDIA QUERIES (RESPONSIVE) ===================== */
/* ========================================================================= */

@media (max-width: 768px) {
    .results-section {
        padding: 20px 20px;
    }

    .results-section .container {
        padding: 0 10px;
    }

    /* Encabezado */
    .recognition-header {
        padding: 0% 15px;
        margin-bottom: 10px;
    }

    .user-name {
        font-size: 24px;
    }

    .recognition-text {
        font-size: 14px;
    }

    /* 🔑 CLAVE: Ítem del Certificado (Apilamiento) */
    .certificate-item {
        flex-direction: column;
        /* Apila el contenido y las acciones */
        align-items: flex-start;
        padding: 15px;
    }

    /* Contenido */
    .info-content {
        margin-right: 0;
        margin-bottom: 15px;
        /* Espacio antes de los botones */
        width: 100%;
        text-align: left;
    }

    .course-title {
        font-size: 16px;
    }

    /* Acciones */
    .actions {
        width: 100%;
        /* Los botones ocupan todo el ancho disponible */
        justify-content: space-between;
        /* Distribuye el botón de ver y descargar */
        gap: 0;
    }

    .view-button {
        width: 45px;
        height: 45px;
        border-radius: 8px;
        /* Cambia a botón cuadrado para móviles */
    }

    .download-button {
        flex-grow: 1;
        /* El botón de descarga ocupa el resto del espacio */
        justify-content: center;
        padding: 12px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {

    /* Ajustes para móviles muy pequeños */
    .actions {
        /* Permite que el botón de descarga crezca más */
        gap: 10px;
    }

    .view-button {
        flex-shrink: 0;
        /* Asegura que el botón de ver mantenga su tamaño */
    }

    .download-button {
        max-width: 100%;
    }
}


.no-cursos {
    background-color: white;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px;
    text-align: center;
    color: #7a7a7a;
    width: 100%;
}

.no-cursos img {
    width: 80px;
    opacity: 0.4;
    margin-bottom: 10px;
}

.no-cursos .titulo {
    font-size: 18px;
    font-weight: 600;
}

.no-cursos .subtitulo {
    font-size: 14px;
    margin-top: 4px;
    color: #9e9e9e;
}

/* ========================= CHECKBOX GLOBAL ========================= */

input[type="checkbox"] {
    appearance: none;
    /* Elimina el estilo por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 18px;
    height: 18px;
    border: 2px solid #0d1035;
    /* Borde azul oscuro */
    border-radius: 4px;
    /* Esquinas suaves */
    cursor: pointer;
    background-color: #fff;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* Efecto hover */
input[type="checkbox"]:hover {
    border-color: #b69334;
    /* Dorado */
}

/* Cuando está marcado */
input[type="checkbox"]:checked {
    background-color: #b69334;
    /* Fondo dorado */
    border-color: #b69334;
}

/* El check interno */
input[type="checkbox"]:checked::after {
    content: "✔";
    font-size: 12px;
    color: white;
    position: absolute;
    top: -2.1px;
    left: 2px;
    font-weight: 400;
}

/* Estado deshabilitado */
input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== MODAL DE ÉXITO ===== */

.success-modal {
    text-align: center;
    padding: 40px 25px;
    border-radius: 15px;
    max-width: 420px;
    background: #fff;
    position: relative;
}

/* Ícono circular */
.success-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #b69334;
    color: #b69334;
    font-size: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
    font-weight: bold;
}

.success-title {
    font-size: 20px;
    font-weight: 700;
    color: #b69334;
    margin-bottom: 5px;
}

.success-text {
    font-size: 15px;
    color: #111;
    margin-bottom: 3px;
}

.success-sub {
    font-size: 15px;
    color: #888;
    margin-bottom: 25px;
}

.success-btn {
    align-self: flex-end;
    background-color: #0d1035;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    width: 60%;
    margin: 0 auto;
    transition: 0.3s ease;
}

.success-btn:hover {
    background-color: #b69334;
}


/* ==== ADVERTENCIA ==== */

.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ff4d4d;
    color: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease;
    z-index: 999999;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.msg-advertencia {
    background-color: #ffeaea;
    color: red;
    text-align: center;
    padding: 10px;
    border: 1px solid red;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: lighter;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    transition: opacity 0.3s ease;
}

.courses-count {
    color: #000;
    font-size: 15px;
}

.pdf-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.pdf-modal-content {
    position: relative;
    margin: 5% auto;
    width: 80%;
    max-width: 900px;
    height: 80%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.pdf-modal-content iframe {
    width: 100%;
    height: 100%;
}

.pdf-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #000;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}