/* ===========================================================
   COURSES / PROGRAMAS SECTION
   Fondo dividido: burdeos (arriba) → blanco (abajo).
   Las 3 tarjetas ya traen las esquinas curvas en la imagen.
   =========================================================== */

.courses,
.courses * {
    box-sizing: border-box;
}

.courses {
    --courses-wine: #4d0d13;
    --courses-wine-2: #611218;
    --courses-cream: var(--landing-cream);

    /* ---- Geometría auto-alineada (opción calc + container query) ----
       En vez de una banda de alto fijo, la línea divisoria se calcula a partir
       del ancho REAL de la tarjeta, así queda alineada a la curva de la imagen
       en cualquier ancho de pantalla (no solo a 1280px).

       Los tramos verticales fijos ahora son variables en vh con tope: en
       1080 de alto dan exactamente los valores originales (70 / 80px) y en
       pantallas bajas (768) se comprimen para que todo el escalonado entre
       en el panel sticky de 100vh sin recortarse. */
    --courses-pad-top: clamp(40px, 7vh, 70px);   /* padding-top del inner */
    --card-offset: clamp(44px, 7.5vh, 80px);     /* offset leaders/machine */
    --card-top-zone: 64px;                       /* course-top: 52 min-height + 12 margin */

    /* --card-w reproduce el cálculo del grid (ahora full-width):
         ancho contenido = 100cqw - 120 (padding del inner: 60px * 2)
         espacio libre   = eso - 40 (column-gap del grid principal) = 100cqw - 160
         columna cards    = libre * 1.55/2.55 (fracción fr de la col derecha)
         ancho tarjeta    = (columna cards - 52) / 3  (2 gaps de 26 + 3 cols)
       100cqw = ancho de esta sección (container-type: inline-size).
       El min() le pone un techo por ALTURA de viewport: la pila vertical de
       la tarjeta flow (pad + offset + zona texto + 1.8 * tarjeta + caption)
       crece linealmente con --card-w, así que 46vh - 90px garantiza que su
       caption quede dentro de los 100vh del panel. En 1920x1080 el techo no
       actúa (queda igual que antes); solo recorta en pantallas bajas. */
    --card-w-fluid: calc((((100cqw - 160px) * 1.55 / 2.55) - 52px) / 3);
    --card-w: min(var(--card-w-fluid), calc(46vh - 90px));

    /* Línea divisoria medida desde el tope de la sección:
       pad-top + offset leaders/machine + zona de texto superior,
       + 90.4% del alto de la imagen (donde arranca su curva).
       El offset baja las imágenes → más zona burdeos arriba para que
       el header y el "Explore" respiren (como en el Canva). */
    --divide: calc(var(--courses-pad-top) + var(--card-offset) + var(--card-top-zone) + 0.904 * var(--card-w));

    position: relative;
    container-type: inline-size;
    min-height: 100vh;
    background: var(--courses-cream);
    font-family: var(--font-inter);
    overflow: hidden;
}

.courses-panel {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .courses.is-motion-ready {
        height: max(100vh, 1600px);
        min-height: max(100vh, 1600px);
        overflow: visible;
    }

    .courses.is-motion-ready .courses-panel {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
    }
}

/* Capa burdeos: su alto es exactamente la línea divisoria calculada */
.courses-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--divide);
    background: radial-gradient(140% 150% at 78% 0%, var(--courses-wine-2) 0%, var(--courses-wine) 60%);
    z-index: 0;
    pointer-events: none;
}

.courses-inner {
    position: relative;
    z-index: 1;
    padding: var(--courses-pad-top) 60px 80px;
    display: grid;
    grid-template-columns: minmax(380px, 1fr) 1.55fr;
    grid-template-rows: calc(var(--divide) - var(--courses-pad-top)) 1fr;
    grid-template-areas:
        "head  cards"
        "who   cards";
    column-gap: 40px;
}

/* ---------- Encabezado (arriba-izquierda, sobre burdeos) ----------
   Ocupa exactamente la zona burdeos (alto = línea divisoria menos el
   padding-top). Así el "Explore" (empujado al fondo con margin-top:auto)
   queda siempre sobre el rojo, y "Para quem?" arranca justo bajo la línea. */
.courses-head {
    grid-area: head;
    color: var(--courses-cream);
    max-width: 460px;
    min-height: calc(var(--divide) - var(--courses-pad-top));
    padding-bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.courses-kicker {
    margin: 0 0 26px;
    color: var(--courses-cream);
    font-family: var(--font-serif);
    font-size: var(--landing-kicker-size);
    font-weight: 500;
    letter-spacing: 2.6px;
    line-height: 1.35;
    text-transform: uppercase;
}

.courses-head h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--landing-section-title-size);
    line-height: 1.12;
    margin: 0 0 26px;
}

.courses-rule {
    display: block;
    width: 150px;
    height: 3px;
    background: var(--landing-gold);
    border: none;
    margin: 0;
}

.courses-desc {
    max-width: 430px;
    margin: 32px 0 24px;
    color: var(--courses-cream);
    font-family: var(--font-inter);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
}

.courses-explore {
    position: relative;
    width: max-content; /* el ancho lo fija SOLO el texto (la flecha es absoluta) */
    max-width: 100%;
    margin-top: auto; /* empuja el Explore al fondo de la zona burdeos */
    padding-bottom: 22px; /* reserva el alto de la flecha debajo del texto */
    color: var(--landing-gold);
    font-family: var(--font-inter);
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
}

.courses-explore > span {
    display: block;
    transform: translateY(-6px);
}

.courses-type-char {
    display: inline-block;
    white-space: pre;
}

.courses-type-word {
    display: inline-block;
    white-space: nowrap;
}

/* flecha debajo del texto y exactamente del ancho del texto */
.courses-explore img {
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- ¿Para quién? (abajo-izquierda, sobre blanco) ---------- */
.courses-who {
    grid-area: who;
    align-self: start;
    padding-top: 34px;
    color: var(--landing-ink);
    max-width: 460px;
}

.courses-who-label {
    font-family: var(--font-inter);
    font-size: 20px;
    margin: 0 0 24px;
    color: var(--landing-ink);
}

.courses-who h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--landing-section-title-size);
    line-height: 1.1;
    margin: 0 0 26px;
    color: var(--landing-ink);
}

.courses-who-list {
    font-family: var(--font-inter);
    font-size: 17px;
    line-height: 1.6;
    color: var(--landing-ink);
    margin: 0 0 26px;
    max-width: 400px;
}

/* ---------- Tarjetas de programas ---------- */
.courses-cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 0 26px;
}

/* En desktop la tarjeta real queda atada a --card-w: cuando el techo por
   altura actúa, la imagen se achica junto con la línea divisoria y la
   geometría (curvas, offsets) sigue cerrando. Si el techo no actúa,
   max-width == ancho de columna y no cambia nada. */
@media (min-width: 1025px) {
    .courses-cards {
        justify-items: center;
    }

    .course-card {
        width: 100%;
        max-width: var(--card-w);
    }
}

.course-card {
    text-align: center;
}

/* escalonado de las tarjetas (como en el ejemplo).
   leaders y machine con el MISMO offset fijo → la línea (--divide) las corta
   siempre al 90.4% de su alto = justo donde arranca su curva inferior. */
.course-card.is-leaders,
.course-card.is-machine {
    margin-top: var(--card-offset);
}

/* flow (fondo blanco) baja más: su curva SUPERIOR coincide con la divisoria
   (espejo de leaders/machine). Se calcula para que su borde superior caiga
   ~10% por encima de la línea, siguiendo el ancho real de la imagen:
   offset + zona texto + 80.36% del alto de la imagen (la misma suma que
   --divide sin el padding, que en este margin ya lo aporta el grid). */
.course-card.is-flow {
    margin-top: calc(var(--card-offset) + var(--card-top-zone) + 0.8036 * var(--card-w));
}

/* contenedor de la imagen: ancla el nombre DENTRO de la imagen y define
   su propio contexto de container-query para que el nombre escale con el
   ancho real de la imagen (igual en desktop y en móvil). */
.course-media {
    position: relative;
    display: block;
    container-type: inline-size;
}

.course-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* nombre del programa superpuesto sobre la imagen */
.course-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
    margin: 0;
    padding: 0 8%;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(18px, 13cqw, 46px);
    line-height: 1.02;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--landing-gold);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Leaders lleva el nombre en la parte superior de la imagen (como en el modelo) */
.course-card.is-leaders .course-name {
    top: 6%;
    bottom: auto;
    color: #ffffff;
}

/* Speak Flow: fondo claro → texto negro, anclado a la esquina inferior
   derecha para que la imagen no lo tape */
.course-card.is-flow .course-name {
    color: #111111;
    text-shadow: none;
    left: auto;
    right: 6%;
    bottom: 1%;
    padding: 0;
    text-align: right;
}

/* texto superior (sobre burdeos, siempre claro).
   alto fijo para reservar 2 líneas: así leaders (1 línea) y machine (2 líneas)
   arrancan su imagen a la misma altura y las bases coinciden. */
.course-top {
    font-family: var(--font-inter);
    font-size: 20px;
    line-height: 1.25;
    color: var(--courses-cream);
    min-height: 52px;
    margin: 0 0 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* texto inferior: con las imágenes apoyadas en la divisoria, todos los
   captions caen sobre el blanco → texto oscuro */
.course-bottom {
    font-family: var(--font-inter);
    font-size: 18px;
    line-height: 1.3;
    margin: 16px auto 0;
    max-width: 88%;
    color: var(--landing-ink);
}

/* ---------- RESPONSIVE ---------- */

/* Pantallas BAJAS (notebooks 1366x768, 1280x720…): el panel sticky mide
   100vh reales (~660px con la barra del navegador), así que además del techo
   de --card-w se comprimen tipografías y márgenes de ambas columnas de texto
   para que nada quede fuera del recorte. En 1080 de alto no aplica. */
@media (min-width: 1025px) and (max-height: 850px) {
    .courses-kicker {
        margin-bottom: 14px;
    }

    .courses-head h2 {
        margin-bottom: 16px;
        font-size: 30px;
    }

    .courses-desc {
        margin: 16px 0 14px;
        font-size: 15px;
        line-height: 1.3;
    }

    .courses-explore {
        padding-bottom: 18px;
        font-size: 15px;
    }

    .courses-who {
        padding-top: 20px;
    }

    .courses-who-label {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .courses-who h3 {
        font-size: 28px;
        margin-bottom: 14px;
    }

    .courses-who-list {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .course-top {
        font-size: 17px;
    }

    .course-bottom {
        font-size: 15px;
        margin-top: 12px;
    }

    .courses-inner {
        padding-bottom: 40px;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .courses-kicker {
        margin-bottom: 14px;
    }

    .courses-head h2 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    .courses-desc {
        margin: 18px 0 14px;
        font-size: 15px;
        line-height: 1.3;
    }

    .courses-explore {
        padding-bottom: 18px;
        font-size: 15px;
    }
}

@media (max-width: 1024px) {
    /* apilado: la capa calculada no aplica (3 tarjetas → 1 columna).
       Volvemos a la banda simple sobre la propia sección. */
    .courses-bg {
        display: none;
    }

    .courses {
        background:
            radial-gradient(140% 90% at 78% 0%, var(--courses-wine-2) 0%, var(--courses-wine) 45%, var(--courses-wine) 55%) top / 100% 42% no-repeat,
            var(--courses-cream);
    }

    .courses-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "head"
            "cards"
            "who";
        row-gap: 40px;
        padding: 50px 30px 60px;
    }

    .courses-head,
    .courses-who {
        max-width: none;
    }

    /* apilado: la cabeza vuelve a alto natural (no atada a --divide) */
    .courses-head {
        min-height: 0;
        padding-bottom: 0;
    }

    .courses-who {
        padding-top: 0;
    }

    .courses-explore {
        margin-top: 30px;
    }

    .course-card.is-leaders,
    .course-card.is-flow,
    .course-card.is-machine {
        margin-top: 0;
    }

    /* al reordenar, todas las tarjetas quedan sobre burdeos */
    .course-card .course-bottom {
        color: var(--courses-cream);
    }
}

@media (max-width: 640px) {
    .courses-head h2,
    .courses-who h3 {
        font-size: 30px;
    }

    .courses-cards {
        grid-template-columns: 1fr;
        gap: 40px 0;
        max-width: 340px;
        margin: 0 auto;
    }

    .course-card .course-bottom {
        color: var(--landing-ink);
    }

    .course-top {
        color: var(--landing-ink);
    }

    .course-card.is-leaders .course-top,
    .course-card.is-leaders .course-bottom {
        color: #ffffff;
    }
}