/* ==========================================================================
   Tabla de Contenidos
   ==========================================================================
   1. Variables y Estilos Base (Globales)
   2. Componentes Globales (Formularios, Footer, Animaciones)
   3. Estilos de la Página de Inicio (index.html)
   4. Estilos de la Página "Nosotros" (nosotros.html)
   5. Estilos de la Página "Compromisos" (compromisos.html)
   6. Estilos de la Página "Noticias" (noticias.html)
   7. Estilos de la Página "Reseñas" (resenas.html)
   ========================================================================== */

@import url('../../shared/global.css');
/* ==========================================================================
   HEADER RESPONSIVE Y DROPDOWNS (VERSIÓN MEJORADA)
   ========================================================================== */

/* Estilo base para enlaces de navegación de escritorio */
.nav-link {
    position: relative;
    padding: 0.5rem 0.25rem;
    /* Padding vertical y horizontal mínimo */
    color: var(--primary);
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* Línea inferior que aparece en el hover y en estado activo */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    /* Ligeramente debajo del texto */
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--accent);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.nav-link:hover,
.nav-link.active {
    color: var(--accent);
}

/* Estilos para el dropdown mejorado */
.dropdown-link {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    color: var(--primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
}

.dropdown-link:hover {
    background-color: var(--light-bg);
    color: var(--accent);
}


/* Estilos para enlaces de navegación móvil */
.mobile-menu-panel {
    position: fixed;
    /* Ocupa toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Alto completo de la ventana */
    background-color: white;
    z-index: 40;
    /* Por debajo del logo y botón de cierre */
    padding-top: 8rem;
    /* Espacio para el header */
    overflow-y: auto;
    /* Permite scroll si el contenido es muy largo */
}

.mobile-nav-link {
    display: flex;
    /* Cambiado a flex para alineación */
    align-items: center;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--secondary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-nav-link:hover {
    color: var(--accent);
    transform: translateX(10px);
}

.mobile-nav-link-sub {
    display: block;
    padding: 0.5rem 0;
    font-size: 1.125rem;
    /* Ligeramente más pequeño */
    font-weight: 500;
    /* Ligeramente más delgado */
    color: var(--primary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-nav-link-sub:hover {
    color: var(--accent);
    transform: translateX(5px);
}

/* ==========================================================================
   2. Componentes Globales (Aplicables a todo el sitio)
   ========================================================================== */

/* --- FORMULARIO DE CONTACTO (oscuro) --- */
.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: white;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
    outline: none;
    border-color: var(--highlight);
    box-shadow: 0 0 0 3px rgba(41, 185, 217, 0.3);
}

/* --- FOOTER --- */
.footer-link {
    color: #cbd5e1;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: white;
}

.footer-link:hover::after {
    width: 100%;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #4a5568;
    border-radius: 9999px;
    color: #cbd5e1;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: scale(1.1);
}

/* --- ANIMACIONES GLOBALES --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fadeInUp {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes tilt {

    0%,
    50%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(0.5deg);
    }

    75% {
        transform: rotate(-0.5deg);
    }
}

.animate-tilt {
    animation: tilt 10s infinite linear;
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-fade-in {
    transform: translateY(20px);
}

.animate-slide-in-left {
    transform: translateX(-50px);
}

.animate-slide-in-right {
    transform: translateX(50px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================================
   3. Estilos de la página de Inicio (index.html)
   ========================================================================== */
.product-card {
    position: relative;
    height: 400px;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.product-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card-bg {
    transform: scale(1.1);
}

.product-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.9) 0%, rgba(13, 27, 42, 0.5) 50%, transparent 100%);
    transition: background 0.4s ease;
}

.product-card:hover .product-card-overlay {
    background: linear-gradient(to top, rgba(13, 27, 42, 0.95) 0%, rgba(41, 185, 217, 0.3) 100%);
}

.product-card-content {
    position: relative;
    z-index: 10;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    text-align: left;
}

.product-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

.product-card:hover .product-card-icon {
    transform: rotate(360deg) scale(1.1);
    background-color: var(--accent);
}

.product-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.product-card-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-weight: 300;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.product-card:hover .product-card-description {
    max-height: 100px;
    opacity: 1;
}

.group-hover\:pause-animation:hover {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    animation: scroll 40s linear infinite;
}

.ally-logo {
    height: 60px;
    width: auto;
    padding: 0 40px;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   4. Estilos de la página "Nosotros" (Diseño Completo y Corregido)
   ========================================================================== */

/* --- Cita del CEO --- */
.ceo-quote {
    position: relative;
    padding-left: 4rem;
    text-align: left;
}
.ceo-quote::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -0.5rem;
    font-size: 5rem;
    font-family: 'Times New Roman', serif;
    color: var(--accent);
    opacity: 0.8;
    line-height: 1;
}

/* --- Línea de Tiempo (Timeline) --- */
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
/* La línea central (solo visible en escritorio) */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #e5e7eb;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    display: none; /* Oculta por defecto para el enfoque mobile-first */
}
/* Contenedor de cada hito */
.timeline-item {
    padding: 10px 0 30px 40px; /* Padding izquierdo para la línea y el icono en móvil */
    position: relative;
    width: 100%;
}
/* El icono circular */
.timeline-icon-wrapper {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 15px;
    left: -25px; /* Centrado en la línea para móvil */
    background-color: var(--primary);
    border: 4px solid white;
    box-shadow: 0 0 0 4px var(--primary);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-icon { font-size: 1.5rem; color: white; }
/* La línea vertical que conecta los puntos en móvil */
.timeline-item::before {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #e5e7eb;
    top: 25px;
    bottom: -25px;
    left: -1px;
}
.timeline-item:last-child::before {
    display: none; /* Oculta la línea en el último item */
}
/* Contenido de cada hito */
.timeline-content {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f3f4f6;
}
.timeline-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 1rem;
}

/* --- RESPONSIVE PARA LA LÍNEA DE TIEMPO (Escritorio - Zigzag) --- */
@media (min-width: 768px) {
    .timeline-container::after { display: block; }
    .timeline-item {
        padding: 10px 40px;
        width: 50%;
    }
    .timeline-item::before { display: none; } /* Ocultamos las líneas verticales de móvil */
    .timeline-item.left { left: 0; }
    .timeline-item.right { left: 50%; }
    .timeline-item.left .timeline-icon-wrapper { right: -25px; left: auto; }
    .timeline-item.right .timeline-icon-wrapper { left: -25px; right: auto; }
}

/* --- Tarjetas de Equipo --- */
.team-card {
    position: relative; border-radius: 0.75rem; overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.team-card-img {
    width: 100%; height: 350px; object-fit: cover; transition: all 0.5s ease;
}
.team-card:hover .team-card-img { transform: scale(1.05); }
.team-card-content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.8) 0%, transparent 100%);
    color: white; transform: translateY(30%); opacity: 0;
    transition: all 0.5s ease;
}
.team-card:hover .team-card-content { transform: translateY(0); opacity: 1; }
.team-card-title { font-size: 1.25rem; font-weight: 700; }
.team-card-role { font-size: 0.875rem; color: var(--accent); font-weight: 600; }

/* --- Tarjetas de Valores (en Hero) --- */
.value-hero-card {
     background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 1rem; /* Más padding vertical */
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    display: flex; /* Para centrar contenido */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px; /* Altura mínima para alinear tarjetas */
}
.value-hero-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}
.value-hero-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
.value-hero-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.3; /* Mejor espaciado para títulos de 2 líneas */
}
/* ==========================================================================
   5. Estilos de la página "Compromisos" (compromisos.html)
   ========================================================================== */
.commitment-icon-inline {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(41, 185, 217, 0.1);
}

.commitment-icon-inline svg {
    fill: var(--accent);
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   6. Estilos de la página "Noticias" (Diseño Editorial Moderno)
   ========================================================================== */

/* --- Artículo Destacado (Hero Post) --- */
.featured-post-card {
    display: block;
    position: relative;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    height: 500px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    color: white;
}

.featured-post-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-post-card:hover .featured-post-image img {
    transform: scale(1.05);
}

.featured-post-content {
    position: relative;
    z-index: 10;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(13, 27, 42, 0.8) 0%, transparent 60%);
}


/* --- Grid de Noticias Secundarias y Filtros --- */
.filter-button {
    padding: 0.6rem 1.5rem; /* Un poco más de padding vertical */
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem; /* Ligeramente más pequeño para un look refinado */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent; /* Borde transparente para evitar saltos de tamaño */
}
.filter-button-active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 10px 20px -5px rgba(13, 27, 42, 0.25);
    transform: translateY(-2px);
}
.filter-button-inactive {
    background-color: white;
    color: var(--secondary);
    border-color: #e2e8f0; /* gray-200 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Efecto hover para el botón INACTIVO */
.filter-button-inactive:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 27, 42, 0.1);
}
.blog-card {
    background-color: white;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(27,73,101,.1);
}
.blog-card-image-container {
    height: 200px;
    overflow: hidden;
}
.blog-card-image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s ease;
}
.blog-card:hover .blog-card-image {
    transform: scale(1.05);
}
.blog-card-category {
    display: inline-block; background-color: var(--accent); color: white;
    padding: 0.25rem 0.5rem; border-radius: 0.25rem;
    font-size: 0.75rem; margin-bottom: 0.75rem;
    align-self: flex-start;
}
.blog-card-title {
    font-size: 1.25rem; font-weight: 700; color: var(--primary);
    line-height: 1.4;
}
.blog-card-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--secondary); font-weight: 600;
    transition: color 0.3s ease;
}
.blog-card-link:hover { color: var(--highlight); }


/* --- Nueva Sección de CTA (reemplaza suscripción) --- */
.cta-button {
    display: inline-block;
    padding: 0.75rem 2rem; /* 12px 32px */
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    min-width: 240px; /* Ancho mínimo para consistencia */
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Estilo específico para el botón secundario (borde) */
.cta-button.bg-white {
    border-color: var(--primary);
}
.cta-button.bg-white:hover {
    background-color: var(--primary);
    color: white;
}


/* ==========================================================================
   7. Estilos de la página "Reseñas" (resenas.html)
   ========================================================================== */
.review-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    break-inside: avoid;
}

.review-card-text {
    font-size: 1.125rem;
    color: var(--secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    font-style: italic;
    position: relative;
    padding-left: 2rem;
    flex-grow: 1;
}

.review-card-text::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -0.5rem;
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.5;
    font-family: 'Times New Roman', serif;
}

.review-card-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.review-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 9999px;
    object-fit: cover;
}

.review-card-name {
    font-weight: 700;
    color: var(--primary);
}

.review-card-location {
    font-size: 0.875rem;
    color: #6b7280;
}

.team-reviews-swiper .swiper-slide {
    height: auto;
}

.team-reviews-swiper .swiper-pagination-bullet {
    background: var(--secondary);
    opacity: 0.5;
    transition: background-color 0.3s, opacity 0.3s;
}

.team-reviews-swiper .swiper-pagination-bullet-active {
    background: var(--accent);
    opacity: 1;
}

.form-input-light {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: var(--primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input-light::placeholder {
    color: #a0aec0;
}

.form-input-light:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 185, 217, 0.3);
}

/* ==========================================================================
   8. Estilos de la página "Paquetes" (paquetes.html)
   ========================================================================== */
.magazine-preview-card {
    position: relative;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magazine-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

.magazine-preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.magazine-preview-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 27, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.magazine-preview-card:hover .magazine-preview-overlay {
    opacity: 1;
}

.magazine-preview-button {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    background-color: var(--highlight);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
}

.flipbook-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 27, 42, 0.95);
    /* Un poco más oscuro */
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
    /* Padding para que no se pegue a los bordes en móvil */
    box-sizing: border-box;
}

/* Botón de cierre 'X' del Lightbox */
.flipbook-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 0.5rem;
}

.flipbook-lightbox-close:hover {
    transform: rotate(90deg) scale(1.1);
    color: var(--accent);
}

/* Contenedor que define la FORMA de la revista DENTRO del lightbox */
.flipbook-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El DIV #revista que contiene las páginas */
#revista {
    width: 100%;
    height: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#revista .page {
    background-color: white;
    background-size: cover;
    /* 'cover' es mejor para evitar deformar imágenes */
    background-position: center;
    background-repeat: no-repeat;
}

#revista .shadow,
#revista .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    .flipbook-viewport {
        width: 90vw;
        height: 85vh;
        max-width: 1100px;
        aspect-ratio: 1.8 / 1;
        /* Proporción panorámica */
    }
}

/* 2. ESTILOS PARA TABLETS (entre 768px y 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .flipbook-viewport {
        width: 95vw;
        /* Ocupa casi todo el ancho */
        height: 50vh;
        /* Un poco más bajo que en escritorio */
        aspect-ratio: 1.6 / 1;
        /* Ligeramente menos panorámico */
    }
}

/* 3. ESTILOS PARA MÓVILES (pantallas más estrechas de 767px) */
@media (max-width: 767px) {
    .flipbook-viewport {
        width: 100%;
        /* Ocupa todo el ancho disponible */
        height: 55%;
        /* Altura reducida para que no sea tan alargado */
    }

    .flipbook-lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ==========================================================================
    Estilos de la página detalle de paquetes (paquete-cartagena.html)
   ========================================================================== */


.carrusel {
    max-width: 90rem;
    padding: 0 1rem;
    margin: 0 auto;
}

@media (max-width:1440px) {
    #tranding {
        padding: 1rem 0;
    }
}

#tranding .tranding-slider {
    height: 32rem;
    padding-top: 2rem;
    padding-bottom: 6rem;
    position: relative;
}

@media (max-width:500px) {
    #tranding .tranding-slider {
        height: 25rem;
    }
}

.tranding-slide {
    width: 25rem;
    height: 30rem;
    position: relative;
}

@media (max-width:500px) {
    .tranding-slide {
        width: 18rem !important;
        height: 26rem !important;
    }

    .tranding-slide .tranding-slide-img img {
        width: 18rem !important;
        height: 18rem !important;
    }
}

.tranding-slide .tranding-slide-img img {
    width: 25rem;
    height: 25rem;
    border-radius: 2rem;
    object-fit: cover;
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    display: none;
}

.tranding-slider-control {
    position: relative;
    bottom: -2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tranding-slider-control .swiper-button-next {
    left: 58% !important;
    transform: translateX(-58%) !important;
}

@media (max-width:990px) {
    .tranding-slider-control .swiper-button-next {
        left: 70% !important;
        transform: translateX(-70%) !important;
    }
}

@media (max-width:450px) {
    .tranding-slider-control .swiper-button-next {
        left: 80% !important;
        transform: translateX(-80%) !important;
    }
}

@media (max-width:990px) {
    .tranding-slider-control .swiper-button-prev {
        left: 30% !important;
        transform: translateX(-30%) !important;
    }
}

@media (max-width:450px) {
    .tranding-slider-control .swiper-button-prev {
        left: 20% !important;
        transform: translateX(-20%) !important;
    }
}

.tranding-slider-control .slider-arrow {
    background: var(--light-bg);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    left: 42%;
    transform: translateX(-42%);
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .slider-arrow ion-icon {
    font-size: 2rem;
    color: #222224;
}

.tranding-slider-control .slider-arrow::after {
    content: '';
}

.tranding-slider-control .swiper-pagination {
    position: relative;
    width: 15rem;
    bottom: 1rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--highlight);
}


/* ==========================================================================
   9. Estilos de la página "Contacto" (contacto.html)
   ========================================================================== */

.contact-channel-card {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
}

.contact-channel-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.contact-channel-icon {
    font-size: 3rem;
    /* 48px */
    color: var(--accent);
    margin-bottom: 1rem;
}

.contact-channel-title {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    color: var(--primary);
}

.contact-channel-text {
    color: #6b7280;
    /* gray-500 */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    min-height: 40px;
    /* Para alinear verticalmente */
}

.contact-channel-link {
    font-weight: 600;
    color: var(--secondary);
    transition: color 0.3s ease;
}

.contact-channel-card:hover .contact-channel-link {
    color: var(--highlight);
}

/* --- Tarjetas de Redes Sociales --- */
.social-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 200px;
}

.social-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-card-icon {
    font-size: 2rem;
    /* 32px */
}

/* --- Acordeón de Preguntas Frecuentes (FAQ) --- */
.faq-item {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
}

.faq-question:hover {
    background-color: var(--light-bg);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: #4a5568;
    line-height: 1.6;
}

/* ==========================================================================
   10. Estilos para Páginas Legales (Términos, Privacidad, etc.)
   ========================================================================== */

/* --- Menú de Navegación Lateral Mejorado --- */
.legal-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    /* rounded-md */
    font-weight: 500;
    color: #4a5568;
    /* gray-600 */
    border-left: 4px solid transparent;
    /* Borde más grueso para un mejor efecto visual */
    transition: all 0.2s ease-in-out;
}

.legal-nav-link:hover {
    background-color: white;
    color: var(--secondary);
    border-left-color: var(--accent);
    transform: translateX(5px);
    /* Pequeño desplazamiento al hacer hover */
}

/* (Opcional) Estilo para el enlace activo (requiere un poco de JS para funcionar) */
.legal-nav-link.active {
    background-color: white;
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--accent);
}

/* --- Estilos para el Contenido Legal --- */

/* Contenedor de cada sección para añadir espacio y un divisor */
.legal-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #f3f4f6;
    /* gray-100, un divisor muy sutil */
}

/* El último no necesita borde inferior */
.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.prose {
    color: #374151;
    /* gray-700 */
    line-height: 1.75;
}

.prose h2 {
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 700;
    color: var(--primary);
    margin-top: 0;
    /* Lo controla .legal-section */
    margin-bottom: 1em;
}

.prose h3 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 600;
    color: var(--secondary);
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.prose p,
.prose ul {
    margin-top: 1em;
    margin-bottom: 1em;
}

.prose ul {
    padding-left: 1.5em;
    list-style-type: disc;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 500;
}

/* ==========================================================================
   11. Estilos para Página de FAQ (Versión Mejorada)
   ========================================================================== */

/* --- Barra de Búsqueda --- */
.faq-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    /* Espacio para el icono */
    border-radius: 9999px;
    border: 2px solid transparent;
    color: var(--primary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.faq-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(41, 185, 217, 0.3);
}

/* --- Menú de Categorías Lateral --- */
.faq-category-link {
    width: 100%;
    text-align: left;
    display: block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--secondary);
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
}

.faq-category-link:hover {
    background-color: white;
    color: var(--accent);
}

.faq-category-link.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* --- Acordeón de Preguntas Frecuentes --- */
.accordion-item {
    background-color: white;
    border: 1px solid #e2e8f0;
    /* gray-200 */
    border-radius: 0.75rem;
    /* rounded-lg */
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    /* Importante para que x-collapse funcione bien */
}

.accordion-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    /* 20px 24px */
    font-weight: 600;
    font-size: 1.125rem;
    /* text-lg */
    color: var(--primary);
    text-align: left;
    cursor: pointer;
}

.accordion-header i {
    color: var(--accent);
    flex-shrink: 0;
    /* Evita que el icono se encoja */
}

.accordion-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid #f3f4f6;
    /* gray-100 */
    /* La directiva x-collapse de Alpine.js manejará la animación de despliegue */
}

/* --- Estilos para el texto dentro del acordeón (Prose) --- */
.prose {
    color: #374151;
    line-height: 1.75;
}

.prose h3,
.prose p,
.prose ul,
.prose li {
    margin-top: 1em;
    margin-bottom: 1em;
}

.prose ul {
    padding-left: 1.5em;
    list-style-type: disc;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
}

.prose strong {
    color: var(--secondary);
}

/* ==========================================================================
   12. Estilos para Página de Atención al Cliente (Diseño Mejorado)
   ========================================================================== */

/* --- Tarjetas del Hero Section --- */
.support-hero-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.support-hero-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.03);
    border-color: var(--accent);
}

.support-hero-card i {
    font-size: 2.5rem;
    /* 40px */
    color: var(--accent);
}

/* --- Diagrama de Pasos de Soporte --- */
.support-step-card {
    position: relative;
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 0.75rem;
}

.support-step-number {
    position: absolute;
    top: -1.25rem;
    /* -20px */
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
}

.support-step-icon {
    font-size: 3rem;
    /* 48px */
    color: var(--accent);
    margin-bottom: 1rem;
}

.support-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.support-step-text {
    color: #4a5568;
    /* gray-600 */
}

/* ==========================================================================
   13. Estilos para Página del Libro de Reclamaciones
   ========================================================================== */

.form-section-title {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 600;
    color: var(--primary);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    /* gray-100 */
}

/* 
   NOTA: La clase .form-input-light ya debe estar definida en tu CSS.
   Asegúrate de que también funcione para <select> y <textarea>.
   Aquí hay un ejemplo si no la tienes completa.
*/
.form-input-light {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--light-bg);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: var(--primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input-light::placeholder {
    color: #a0aec0;
}

.form-input-light:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(41, 185, 217, 0.3);
}

/* ==========================================================================
   15. Estilos para Página de Detalle de Noticia
   ========================================================================== */

/* --- Estilos para el Cuerpo del Artículo (Clase Prose) --- */

.prose {
    color: #374151;
    /* gray-700 */
    line-height: 1.75;
}

/* Párrafo introductorio del artículo */
.prose .lead {
    font-size: 1.25rem;
    /* text-xl */
    line-height: 1.8;
    color: #4a5568;
    /* gray-600 */
    font-weight: 400;
    margin-bottom: 2em;
}

.prose h3 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 600;
    color: var(--secondary);
    margin-top: 2em;
    margin-bottom: 1em;
}

.prose p,
.prose ul {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose ul {
    padding-left: 1.75em;
    list-style-type: disc;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 500;
}

.prose strong {
    color: var(--primary);
}

/* Estilos para las imágenes y sus leyendas dentro del artículo */
.prose figure {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose figcaption {
    margin-top: 0.8em;
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* gray-500 */
    text-align: center;
    font-style: italic;
}

/* Estilos para la Cita Destacada (Blockquote) */
.prose blockquote {
    font-style: normal;
    border-left-width: 4px;
    border-left-color: var(--accent);
    background-color: var(--light-bg);
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

.prose blockquote p {
    margin: 0;
}


/* --- Estilos para la Columna Lateral (Sidebar) --- */

.sidebar-title {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    color: var(--primary);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

.sidebar-link {
    display: block;
    color: var(--secondary);
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.sidebar-link:hover {
    color: var(--highlight);
    transform: translateX(5px);
}

/* Estilos para los posts recientes en el sidebar */
.recent-post-link {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recent-post-img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.recent-post-title {
    font-weight: 600;
    color: var(--primary);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.recent-post-link:hover .recent-post-title {
    color: var(--accent);
}

/* ==========================================================================
   16. Estilos para Páginas de Login y Registro
   ========================================================================== */

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    /* 8px */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 600;
    color: var(--secondary);
}

/* ==========================================================================
   17. Estilos para Página de Procesos Administrativos (Responsive v2)
   ========================================================================== */

/*
   La clase .prose y .lead ya están definidas globalmente y se reutilizan aquí.
*/

.info-card {
    background-color: white;
    border-radius: 0.75rem; /* rounded-lg */
    border: 1px solid #e2e8f0; /* gray-200 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    overflow: hidden; /* Para que el borde superior redondeado se vea bien */
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding: 1rem 1.5rem;
    background-color: var(--light-bg);
    border-bottom: 1px solid #e2e8f0;
}

.info-card-header i {
    font-size: 1.5rem; /* 24px */
    color: var(--accent);
}

.info-card-header h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: var(--primary);
}

/* El cuerpo de la tarjeta usa .prose para un buen formato de texto */
.info-card-body {
    padding: 1.5rem;
    /* Aplicamos estilos de 'prose' directamente aquí */
    color: #374151;
    line-height: 1.75;
}
.info-card-body ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}
.info-card-body li {
    margin-bottom: 0.5rem;
}
.info-card-body p {
    margin: 0;
}
.info-card-body a {
    color: var(--accent);
    font-weight: 500;
    word-break: break-all; /* <-- SOLUCIÓN para correos largos */
}
.info-card-body a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   18. Estilos para Página de Ferias (Timeline Editorial)
   ========================================================================== */

.event-block {
    padding: 6rem 0;
    overflow-x: hidden; /* Evita barras de scroll por las animaciones */
}

/* Para alternar fondos y crear más dinamismo */
.event-block:nth-child(even) {
    background-color: var(--light-bg);
}

.event-content-wrapper {
    display: flex;
    flex-direction: column; /* Apilado en móvil por defecto */
    align-items: center;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* En pantallas 'lg' (desktop) y superiores, aplicamos el layout de 2 columnas */
@media (min-width: 1024px) {
    .event-content-wrapper {
        flex-direction: row; /* Cambiamos a fila */
        gap: 4rem;
    }
    
    /* Le decimos que la columna de imágenes ocupe el 45% del espacio */
    .event-content-wrapper .event-images {
        width: 45%;
    }
}


/* Columna de las imágenes */
.event-images {
    position: relative;
    width: 100%;
    max-width: 500px;
    flex-shrink: 0; /* Evita que la columna se encoja */
}

.event-image-main {
    width: 80%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
/* Alinear la imagen principal a la derecha si el texto está a la derecha */
.lg\:flex-row-reverse .event-image-main {
    margin-left: auto;
}

.event-image-secondary {
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 50%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 6px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.4s ease;
}
.event-images:hover .event-image-secondary {
    transform: scale(1.05) rotate(-3deg);
}
.lg\:flex-row-reverse .event-image-secondary {
    left: auto;
    right: -5%;
}
.lg\:flex-row-reverse .event-images:hover .event-image-secondary {
     transform: scale(1.05) rotate(3deg);
}


/* Columna de la información */
.event-info {
    flex-grow: 1;
}
@media (min-width: 1024px) {
    .lg\:flex-row-reverse .event-info {
        text-align: right;
    }
    .lg\:flex-row-reverse .event-info .event-location {
        justify-content: flex-end;
    }
}

.event-date {
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.event-title {
    font-size: 2.5rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    color: var(--primary);
    margin-top: 0.5rem;
    line-height: 1.2;
}
.event-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary);
    font-weight: 500;
    margin-top: 1rem;
}
.event-description {
    margin-top: 1rem;
    font-size: 1.125rem; /* text-lg */
    color: #4a5568; /* gray-600 */
    line-height: 1.8;
}

/* ==========================================================================
   ESTILOS ADICIONALES PARA LOGIN Y REGISTRO
   ========================================================================== */

/* Botón base para el selector de tipo de cuenta */
.button-type-base {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer; /* Añadido para que se vea clickeable */
}
.button-type-base i {
    font-size: 1.5rem;
}

/* Botón INACTIVO (reescrito sin @apply) */
.button-type-inactive {
    /* Propiedades de .button-type-base */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Estilos específicos de inactivo */
    border-color: #e5e7eb; /* gray-200 */
    background-color: white;
    color: var(--secondary);
}
.button-type-inactive:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Botón ACTIVO (reescrito sin @apply) */
.button-type-active {
    /* Propiedades de .button-type-base */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Estilos específicos de activo */
    border-color: var(--primary);
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    transform: scale(1.05);
}

/* ==========================================================================
   20. Estilos para la Página de Capacitaciones (cursos.html)
   ========================================================================== */

/* --- Tarjeta de Curso Destacado --- */
.featured-course-card {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 columna en móvil (por defecto) */
    background-color: var(--secondary);
    color: white;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* Media query para escritorio: cambia a 2 columnas */
@media (min-width: 1024px) {
    .featured-course-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

.featured-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.group:hover .featured-course-image img {
    transform: scale(1.05);
}

.featured-course-info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.badge-new {
    background-color: var(--accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    align-self: flex-start; /* Alinea la insignia a la izquierda */
}

.featured-course-actions {
    grid-column: 1 / -1; /* Ocupa todo el ancho en cualquier layout */
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móvil (por defecto) */
    align-items: center;
    background-color: var(--primary);
    padding: 1.5rem;
    gap: 1rem;
}

/* Media query para escritorio: cambia a 3 columnas */
@media (min-width: 768px) {
    .featured-course-actions {
        grid-template-columns: 1fr 2fr 2fr;
    }
}

.cta-button-course {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center; /* Asegura el centrado en móvil */
}
.cta-button-course.primary {
    background-color: var(--accent);
    color: white;
}
.cta-button-course.primary:hover {
    background-color: #219ebc; /* Tono más oscuro de accent */
}
.cta-button-course.secondary {
    background-color: transparent;
    color: #cbd5e1; /* gray-300 */
    border: 1px solid #4b5563; /* gray-600 */
}
.cta-button-course.secondary:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.2);
}

/* --- Tarjetas de Cursos Secundarios --- */
.course-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(27,73,101,.1);
}
.course-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.course-card-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid;
}
.course-card-button.primary {
    color: var(--primary);
    background-color: var(--light-bg);
    border-color: #e2e8f0;
}
.course-card-button.primary:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}
.course-card-button.secondary {
    background-color: #25D366;
    color: white;
    border-color: #25D366;
}
.course-card-button.secondary:hover {
    background-color: #1DAA53;
    border-color: #1DAA53;
}

/* ==========================================================================
   21. Estilos para la Página de Detalle de Curso (curso-detalle.html)
   ========================================================================== */

/* Título de sección más pequeño para el contenido del curso */
.section-title-small {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: var(--primary);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
}

/* 
   Recordatorio: Las clases .prose, .accordion-item, .card, .form-input-light
   son reutilizadas y no necesitan nuevos estilos aquí si ya están definidas
   en otras secciones de tu main.css.
*/