/* ==========================================================
   FORMACIÓN - template-formacion.php

   Medidas tomadas del marco "Formación" del Figma 06. Fundación web
   (nodo 244:2703) leído por MCP. El marco está a 1920px, así que los
   valores son los del diseño a tamaño real, no estimaciones.

   Sistema del diseño:
     contenido de texto   1516px
     áreas formativas     500 × 450, hueco 45
     panel exterior       1627px, padding lateral 124
     panel interior       1379px, padding lateral 53
     tarjeta de curso     395 × 653 (imagen 395 × 321)
     hero                 1920 × 403
     banda de claim       1920 × 496
   ========================================================== */

.for-page-template {
    --for-cyan: #53AEC3;
    --for-cyan-dark: #326B78;
    --for-cyan-soft: #BADFE7;
    --for-cyan-bg: #EAF6F9;
    --for-black: #000000;
    /* "Neutral Colors" del Figma */
    --for-ink: #141414;
    --for-white: #FFFFFF;

    /* 1556 = 1516px de contenido + 2 × 20 de padding */
    --for-container: 1556px;
    /* El panel de cursos es más ancho que el texto: 1627 + 2 × 20 */
    --for-panel-max: 1667px;

    --for-card-w: 395px;
    --for-card-gap: 45px;

    --for-font: "Lato", Arial, Helvetica, sans-serif;

    width: 100%;
    font-family: var(--for-font);
    color: var(--for-ink);
}

.for-page-template *,
.for-page-template *::before,
.for-page-template *::after {
    box-sizing: border-box;
}

.for-container {
    max-width: var(--for-container);
    margin: 0 auto;
    padding: 0 20px;
}


/* ----------------------------------------------------------
   Tipografía

   Tokens del Figma (get_variable_defs):
     Heading 1  Lato 80 / 700 / 1.10
     Heading 2  Lato 55 / 700 / 1.10
     Heading 3  Lato 48 / 700 / 1.10
     Heading 6  Lato 24 / 400 / 1.26
   ---------------------------------------------------------- */

/* Heading 2: titulares de sección, en el cian corporativo. */
.for-heading {
    margin: 0 0 24px;
    font-family: var(--for-font);
    font-size: 55px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--for-cyan);
}

/* Arranca un bloque nuevo dentro de la misma sección. */
.for-heading--tight {
    margin-top: 44px;
}

.for-heading--center {
    text-align: center;
}

/* Heading 6: cuerpo de texto. */
.for-text {
    margin: 0 0 22px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--for-ink);
}

.for-text:last-child {
    margin-bottom: 0;
}

.for-text strong {
    font-weight: 700;
}


/* ----------------------------------------------------------
   Hero: 1920 × 403, título Heading 1 (Lato 80 / 700 / 1.10)
   ---------------------------------------------------------- */

body.page-template-template-formacion .site-main,
.for-page-template {
    margin-top: 0;
    padding-top: 0;
}

/* El título va anclado abajo, no centrado: en el Figma su base queda a 49px
   del borde inferior del hero (rect 111-514, texto 325-465). */
.for-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 403px;
    width: 100vw;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 40px 0 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.for-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(50, 107, 120, .90) 0%, rgba(50, 107, 120, .78) 100%);
}

.for-hero .for-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.for-hero__title {
    margin: 0;
    font-family: var(--for-font);
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--for-white);
}

/* Segunda línea más contenida, como en el diseño. */
.for-hero__subtitle {
    font-size: 55px;
    font-weight: 400;
}


/* ----------------------------------------------------------
   Introducción
   ---------------------------------------------------------- */

.for-intro {
    padding: 86px 0 0;
}

/* "AcademIA. Nuestra Academia de Inteligencia Artificial":
   Heading 3 (48px) en dos líneas, 1516 × 106 en el diseño. */
.for-academia {
    margin: 44px 0 24px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--for-ink);
}

.for-academia strong {
    font-weight: 700;
    color: var(--for-cyan-dark);
}


/* ----------------------------------------------------------
   Áreas formativas destacadas: tres tarjetas de 500 × 450
   con hueco de 45, y el rótulo centrado en Heading 3.
   ---------------------------------------------------------- */

.for-areas {
    padding: 94px 0 136px;
}

.for-areas .for-heading {
    margin-bottom: 31px;
    font-size: 48px;
    text-align: center;
}

/* Las áreas tienen su propio ancho en el diseño: 1587 (x 167..1754, centrado),
   no los 1516 del contenedor de texto. Con el contenedor general las tres
   quedaban en 475 en vez de 500. Se sube por ancestro para no tener que tocar
   también la plantilla. */
.for-areas .for-container {
    max-width: 1627px;
}

.for-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 500px));
    justify-content: center;
    gap: var(--for-card-gap);
}

/* Cada tarjeta ES la imagen: el PNG ya trae el texto incrustado, así que no
   lleva velo ni texto superpuesto (cualquier capa encima los ensuciaría). */
.for-area {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 450;
    object-fit: cover;
    border-radius: 16px;
}


/* ----------------------------------------------------------
   Banda de claim: 1920 × 496. Texto de 1302px centrado en
   Heading 2, y botón de 220 × 70.
   ---------------------------------------------------------- */

.for-claim {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 496px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 48px 0;
    background-color: var(--for-black);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    text-align: center;
    overflow: hidden;
}

/* Velo muy leve: la foto de circuito de la página actual ya es oscura y un
   velo fuerte la apagaba del todo. Solo asegura el contraste del texto. */
.for-claim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 18, .28);
}

.for-claim .for-container {
    position: relative;
    z-index: 1;
}

.for-claim__text {
    max-width: 1302px;
    margin: 0 auto 34px;
    font-family: var(--for-font);
    font-size: 55px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--for-white);
}

.for-claim__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 70px;
    padding: 12px 32px;
    border-radius: 6px;
    background-color: var(--for-cyan);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--for-white);
    transition: background-color .2s ease;
}

.for-claim__cta:hover,
.for-claim__cta:focus-visible {
    background-color: var(--for-cyan-dark);
    color: var(--for-white);
}


/* ----------------------------------------------------------
   Secciones de cursos

   Panel exterior 1627 con 124 de padding lateral; dentro, panel
   interior de 1379 con 53. Entre paneles, 95px.
   ---------------------------------------------------------- */

.for-cursos {
    padding: 0 0 95px;
}

/* El primer panel es el que sigue a la banda de claim; 78px de separación
   según el diseño. Se selecciona así y no con :first-of-type porque el
   primer <section> de la página es el hero, no un panel. */
.for-claim + .for-cursos {
    padding-top: 78px;
}

.for-cursos .for-container {
    max-width: var(--for-panel-max);
}

/* Contorno en vez de relleno: el panel queda perfilado con el mismo tono
   que antes usaba de fondo. */
.for-panel {
    position: relative;
    padding: 72px 124px;
    border: 2px solid var(--for-cyan-bg);
    border-radius: 12px;
}

.for-panel .for-heading {
    margin-bottom: 24px;
}

/* Panel interior, un tono más saturado. 42px hasta su título y 61 por
   debajo de las tarjetas, según el diseño. */
.for-panel__inner {
    margin-top: 44px;
    padding: 42px 53px 61px;
    border-radius: 10px;
    background-color: rgba(186, 223, 231, .55);
}

/* Cuando el panel no lleva titular ni entradilla, el interior sube. */
.for-panel > .for-panel__inner:first-child {
    margin-top: 0;
}

/* Heading 3 centrado. */
.for-panel__title {
    margin: 0 0 44px;
    font-family: var(--for-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: var(--for-cyan-dark);
}


/* ----------------------------------------------------------
   Carrusel

   Pista con scroll horizontal y scroll-snap: las flechas solo llaman a
   scrollBy(), así el arrastre con dedo o trackpad funciona sin código
   extra y sin JS las tarjetas siguen alcanzables.

   Las flechas se posicionan fuera de la pista, sobre el padding de los
   dos paneles: en el diseño están a 86px del borde de la primera
   tarjeta.
   ---------------------------------------------------------- */

.for-carousel {
    position: relative;
}

.for-carousel__track {
    display: grid;
    grid-auto-flow: column;
    /* Tres por vista: el ancho de columna se reparte el hueco disponible en
       vez de fijarse a 395px, así siempre entran exactamente tres. */
    grid-auto-columns: calc((100% - 2 * var(--for-card-gap)) / 3);
    gap: var(--for-card-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Sin barra visible: se navega con las flechas o arrastrando. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.for-carousel__track::-webkit-scrollbar {
    display: none;
}

.for-carousel__track:focus-visible {
    outline: 2px solid var(--for-cyan-dark);
    outline-offset: 4px;
}

/* Con el ancestro .for-page-template .for-carousel para ganar al
   reset.css del tema padre, que pinta todos los <button> con
   border:1px solid #c36 y relleno, y los rellena de magenta en hover.
   Ese reset carga después que esta hoja, así que la clase suelta no
   basta. */
.for-page-template .for-carousel .for-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    font-family: var(--for-font);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--for-black);
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
}

.for-page-template .for-carousel [data-for-prev] {
    left: -100px;
}

.for-page-template .for-carousel [data-for-next] {
    right: -100px;
}

.for-page-template .for-carousel .for-carousel__arrow:hover:not(:disabled),
.for-page-template .for-carousel .for-carousel__arrow:focus-visible:not(:disabled) {
    color: var(--for-cyan-dark);
}

.for-page-template .for-carousel .for-carousel__arrow:disabled {
    opacity: .3;
    cursor: default;
}


/* ----------------------------------------------------------
   Tarjeta de curso: 395 × 653

     imagen    395 × 321   (razón 395/321)
     hueco     19
     título    Lato 32 / 700 / 1,1   → 3 líneas = 105,6
     hueco     19
     extracto  Lato 24 / 400 / 1,26  → 4 líneas = 121
     hueco     19
     botón     392 × 50

   Los cuerpos salen de medir el interlineado de la tinta sobre el nodo
   378:1764 a escala nativa (pitch de 35 y de 29,7), no de dividir la altura
   de las cajas de Figma entre las líneas: esas cajas (392 × 100 el título y
   383 × 104 el extracto) están dimensionadas a mano y recortan el texto, y
   por esa vía salían 24 y 20, que es lo que llegó a producción.

   Con estos valores la suma cuadra con el diseño:
   321 + 19 + 105,6 + 19 + 121 + 19 + 50 = 654,6 ≈ 653.
   ---------------------------------------------------------- */

.for-curso {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.for-curso__media {
    display: block;
    margin-bottom: 19px;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.for-curso__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 395 / 321;
    object-fit: cover;
}

.for-curso__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Recortado a tres líneas: así todos los cuerpos miden lo mismo y los
   botones de las tres tarjetas quedan alineados. */
.for-curso__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 19px;
    font-family: var(--for-font);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--for-ink);
}

.for-curso__title a {
    color: inherit;
    text-decoration: none;
}

.for-curso__title a:hover,
.for-curso__title a:focus-visible {
    text-decoration: underline;
}

.for-curso__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 19px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--for-ink);
}

.for-curso__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    min-height: 50px;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: var(--for-black);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--for-white);
    transition: background-color .2s ease;
}

.for-curso__cta:hover,
.for-curso__cta:focus-visible {
    background-color: var(--for-cyan-dark);
    color: var(--for-white);
}


/* ----------------------------------------------------------
   Responsive

   El diseño es de 1920px: por debajo de eso todo escala. Solo los dos
   breakpoints del proyecto.
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .for-hero {
        min-height: 300px;
    }

    .for-hero__title {
        font-size: 44px;
    }

    .for-hero__subtitle {
        font-size: 32px;
    }

    .for-intro {
        padding-top: 56px;
    }

    .for-heading,
    .for-areas .for-heading,
    .for-claim__text {
        font-size: 32px;
    }

    .for-academia,
    .for-panel__title {
        font-size: 28px;
    }

    .for-text {
        font-size: 18px;
    }

    .for-curso__title {
        font-size: 24px;
    }

    .for-areas {
        padding: 56px 0 72px;
    }

    .for-areas__grid {
        grid-template-columns: repeat(2, minmax(0, 500px));
    }

    .for-claim {
        min-height: 360px;
    }

    .for-claim__cta,
    .for-curso__cta {
        font-size: 16px;
    }

    .for-curso__excerpt {
        font-size: 20px;
    }

    /* El padding del diseño (124px) dejaría las tarjetas sin sitio. */
    .for-panel {
        padding: 44px 56px;
    }

    .for-panel__inner {
        padding: 30px 30px 40px;
    }

    /* Dos tarjetas por vista y flechas dentro del padding disponible. */
    .for-carousel__track {
        grid-auto-columns: calc((100% - var(--for-card-gap)) / 2);
        justify-content: start;
    }

    .for-page-template .for-carousel [data-for-prev] {
        left: -48px;
    }

    .for-page-template .for-carousel [data-for-next] {
        right: -48px;
    }
}

@media (max-width: 767px) {
    .for-hero {
        min-height: 220px;
        padding: 30px 0;
    }

    .for-hero__title {
        font-size: 30px;
    }

    .for-hero__subtitle {
        font-size: 22px;
    }

    .for-intro {
        padding-top: 40px;
    }

    .for-heading,
    .for-areas .for-heading,
    .for-claim__text {
        font-size: 24px;
    }

    .for-academia,
    .for-panel__title {
        font-size: 21px;
    }

    .for-text {
        font-size: 16px;
    }

    .for-areas {
        padding: 40px 0 50px;
    }

    .for-areas__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A una columna la tarjeta ocupa el ancho disponible; la razón 500/450
       de la regla base mantiene la proporción. */
    .for-area {
        border-radius: 12px;
    }

    .for-claim {
        min-height: 280px;
    }

    .for-cursos {
        padding-bottom: 50px;
    }

    .for-claim + .for-cursos {
        padding-top: 40px;
    }

    .for-panel {
        padding: 26px 18px 30px;
    }

    .for-panel__inner {
        margin-top: 26px;
        padding: 20px 14px 26px;
    }

    /* Una tarjeta por vista; las flechas pasan a estar sobre la pista,
       que a este ancho ya no hay margen donde colocarlas. */
    .for-carousel__track {
        grid-auto-columns: 100%;
    }

    .for-page-template .for-carousel [data-for-prev] {
        left: -4px;
    }

    .for-page-template .for-carousel [data-for-next] {
        right: -4px;
    }

    .for-page-template .for-carousel .for-carousel__arrow {
        width: 34px;
        height: 34px;
        background-color: rgba(255, 255, 255, .85);
        font-size: 28px;
    }

    .for-curso__title {
        font-size: 21px;
    }

    .for-curso__excerpt {
        margin-bottom: 16px;
        font-size: 17px;
    }
}