/* =========================================================
   CECATI 106 — REDISEÑO VISUAL (Fase 2, capa aditiva)
   ---------------------------------------------------------
   Hero con más vida + tarjetas de cursos tipo catálogo
   mostrando los flyers existentes.

   Acotado con la clase .has-flyer (la añade js/redesign.js),
   así NO afecta a las tarjetas informativas de "¿Qué es?"
   ni "Servicios".

   100% REVERSIBLE: quitar redesign.css + redesign.js (y sus
   etiquetas en index.html) deja el sitio como estaba.
   ========================================================= */

/* =========================================================
   1. HERO — Ken Burns, degradado inferior y fondo del texto
   ========================================================= */

/* Zoom lento en las fotos del carrusel (no en el banner blanco) */
@keyframes kenBurns {
    from { transform: scale(1.001); }
    to   { transform: scale(1.08); }
}
#hero-slider .hero-slide.kb.active {
    animation: kenBurns 7s ease-out forwards;
}

/* Degradado inferior: da profundidad y hace visibles los puntos */
#main-carousel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent);
    z-index: 2;
    pointer-events: none;
}
/* Puntos y flechas por encima del degradado y con sombra propia */
.hero-slider-dots,
.hero-slider-arrows { z-index: 5; }
.hero-slider-dots span { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* Fondo sutil tras el texto del hero (glow dorado de marca) */
#bienvenidos {
    background:
        radial-gradient(60% 70% at 50% 0%, var(--gold-tint), transparent 70%),
        var(--bg-light);
}

@media (prefers-reduced-motion: reduce) {
    #hero-slider .hero-slide.kb.active { animation: none; }
}

/* =========================================================
   2. TARJETAS DE CURSOS CON FLYER (.has-flyer)
   ========================================================= */
.feature-item.has-flyer,
.program-card.has-flyer {
    background: var(--surface);
    padding: 0 0 20px;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-align: left;
    justify-content: flex-start;
    color: var(--text-dark);
}

.feature-item.has-flyer:hover,
.program-card.has-flyer:hover {
    box-shadow: var(--shadow-hover);
}

/* La imagen del flyer arriba */
.course-flyer {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: top center;
    display: block;
    margin-bottom: 16px;
    background: #eef0f3;
    transition: transform 0.5s var(--ease-out);
}
.has-flyer:hover .course-flyer { transform: scale(1.06); }

/* Texto con margen lateral (la imagen va a sangre) */
.has-flyer h3,
.has-flyer p,
.has-flyer .btn-link,
.has-flyer .meta {
    padding-left: 22px;
    padding-right: 22px;
}

.feature-item.has-flyer h3,
.program-card.has-flyer h3 {
    color: var(--text-dark);
    text-shadow: none;
    font-size: 1.22rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.feature-item.has-flyer p,
.program-card.has-flyer p {
    color: var(--text-grey);
    text-shadow: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Ocultar el ícono gigante de fondo en las tarjetas con flyer */
.feature-item.has-flyer > i { display: none; }

/* Enlace inferior ("Ver Flyer") como acción clara */
.feature-item.has-flyer .btn-link {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 700;
    margin-top: 12px;
}
.feature-item.has-flyer .btn-link::after { content: " \2192"; }

/* Meta de Sabatinos ("Ver Ficha Técnica") */
.program-card.has-flyer .meta {
    margin-top: 12px;
    color: var(--primary-red);
}

/* Badge de estatus (Sabatinos) sobre la imagen */
.program-card.has-flyer .card-status {
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .course-flyer { height: 180px; }
    .feature-item.has-flyer h3,
    .program-card.has-flyer h3 { font-size: 1.1rem; }
}

/* --- Modo oscuro: tarjetas con flyer en superficie oscura --- */
body.a11y-dark .feature-item.has-flyer,
body.a11y-dark .program-card.has-flyer { background: #1e1e1e; }
body.a11y-dark .feature-item.has-flyer h3,
body.a11y-dark .program-card.has-flyer h3 { color: #fff; }
body.a11y-dark .feature-item.has-flyer p,
body.a11y-dark .program-card.has-flyer p { color: #c2c2c2; }
body.a11y-dark #bienvenidos {
    background: radial-gradient(60% 70% at 50% 0%, #221d10, transparent 70%), #121212;
}
/* (El alto contraste lo siguen gobernando las reglas !important de accessibility.css) */