/*
 * Native single-course template CSS.
 * Structure/colors below come from the original Elementor Theme Builder
 * document's _elementor_data JSON and generated CSS (post-4520.css /
 * post-7.css on educacion.euroinnova.com) — not guessed.
 */

.curso-ficha {
    --curso-color-acento: #e32652;
    --curso-color-acento-oscuro: #b0263e;
    /* Headings resolve to #202020 everywhere checked in post-4520.css (not the
       blue-gray this was originally set to — #324254 only appears in the real
       design as a fully-transparent anchor-nav button background, #32425400). */
    --curso-color-titulo: #202020;
    --curso-color-texto: #202020;
    --curso-fondo-claro: #f6f6f6;
    --curso-color-amarillo: #fabb00;
    --curso-radio-borde: 16px;
    --curso-ancho-contenido: 1400px;
    font-family: "Ubuntu Sans", Sans-serif;
    color: var(--curso-color-texto);
    max-width: 100%;
}

/* Hero: image background + dark overlay, two columns (text | floating form
   card). The form card overlaps the bottom edge of the hero. */
/* Matches .elementor-4520 .elementor-element.elementor-element-2639822 exactly. */
/* No z-index here on purpose: giving .curso-hero its own stacking context
   would seal the form card (z-index:2, below) inside it too, trapping it
   behind .curso-datos instead of floating above it. Without a sealed
   context, .curso-datos (position:relative, z-index:auto, later in the DOM)
   still naturally paints above this hero's ::before overlay — and the form
   card's explicit z-index:2 still wins over .curso-datos everywhere. */
.curso-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 580px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Verified via getComputedStyle on production: margin is 72px 0 0 exactly
       (this theme's root font-size is 18px, so the original "4em 0 -1em"
       raw-CSS reading was wrong on both counts — there is NO negative
       bottom margin at all). */
    margin: 72px 0 0;
    /* padding-top removed: it was tuned for the old top-aligned
       (justify-content:flex-start) layout — with content now centered, an
       asymmetric top-only padding would fight the centering and push
       everything back toward the top instead. */
    padding: 0;
}

.curso-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #202020;
}

.curso-hero__fila {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    max-width: var(--curso-ancho-contenido);
    margin: 0 auto;
    padding: 0 24px;
}

.curso-hero__contenido {
    flex: 1 1 480px;
    color: #fff;
}

/* Verified via getComputedStyle + live stylesheet rule match on production:
   both this and the resumen below render "Ubuntu Sans", not Lato — there's
   a per-widget override (.elementor-4520 .elementor-element.elementor-
   element-1b1825c/0bb5083) that post-4520.css's raw declarations don't show,
   since it's injected as a separate inline <style>, not in that file. Lato
   is still correct for the "Becas del 20%" badge text elsewhere — this
   override is scoped to just these two widgets. */
.curso-hero__titulo {
    font-family: "Ubuntu Sans", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 20px;
    color: #fff;
}

.curso-hero__resumen-texto,
.curso-hero__meta-descripcion {
    font-family: "Ubuntu Sans", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3em;
    margin: 0 0 10px;
    color: #fff;
}

/* .curso-hero__resumen-texto also carries the site-wide "resumen" class, whose
   5-line clamp + "Leer más"/"Leer menos" toggle is applied by bloques.js
   (enqueued globally) — no CSS clamp needed here for it. This one still
   needs its own since meta_description isn't part of that mechanism. */
.curso-hero__meta-descripcion {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .curso-hero__titulo {
        font-size: 34px;
    }

    .curso-hero__resumen-texto,
    .curso-hero__meta-descripcion {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .curso-hero__titulo {
        font-size: 28px;
    }

    .curso-hero__resumen-texto,
    .curso-hero__meta-descripcion {
        font-size: 15px;
    }
}

/* The [zoho_form] shortcode already renders its own white card (background,
   border-radius, box-shadow). Checked against production: this card has NO
   negative margin at all — the hero simply grows taller than its min-height
   to fully contain it. The visible "overlap" lower on the page is entirely
   .curso-datos--escritorio pulling itself up via its own -108px margin, not
   this card spilling out — so the form must stay fully inside the hero. */
.curso-hero__tarjeta-formulario {
    flex: 0 1 400px;
    position: relative;
    z-index: 2;
}

/* Quick facts bar below the hero image */
.curso-datos {
    background: #202020;
    padding: 10px 0;
}

/* Matches the real .e-con-inner mechanism for this container (elementor-element-e710736):
   width:100%, max-width:var(--content-width)=1400px, margin:0 auto, padding-inline:0,
   gap:0px 0px — the badge items get their own left/right margin instead of a flex gap. */
.curso-datos__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: var(--curso-ancho-contenido);
    margin: 0 auto;
    padding: 10px 0;
}

.curso-dato__item {
    margin-right: 40px;
}

.curso-dato__item:last-child {
    margin-right: 0;
}

/* Modalidad/duración badges (Quicksand 500) confirmed via
   .elementor-icon-box-title inside .elementor-element-e710736. */
.curso-dato__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: "Quicksand", Sans-serif;
    font-size: 22px;
    font-weight: 500;
}

.curso-dato__icono {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* "Becas del 20%" is a separate text-editor widget in Lato (desktop 28px/400)
   — plain white, and a different font entirely from the Quicksand icon-box
   badges beside it. font-family must be set here: without it, it inherited
   Quicksand from .curso-dato__item. */
.curso-dato__item--acento {
    font-family: "Lato", Sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #fff;
}

/* Real 4520 design: two badge-bar variants coexist and toggle by breakpoint.
   Desktop (≥1025) shows the dark bar anchored to the hero bottom; mobile
   (≤767) shows the red in-flow bar between resumen and form. Tablet shows
   neither — matching production's hide flags (2a61512 hidden-desktop/tablet,
   e710736 hidden-tablet/mobile). */
.curso-datos--movil {
    display: none;
}

/* Anchored to .curso-hero's own bottom edge (now a child of it, not a
   sibling) instead of a fixed -108px margin-top — a fixed pixel offset only
   ever matched one specific hero height, and the hero's height changes per
   course depending on how long its resumen text is. position:absolute +
   bottom:0 makes it track that automatically, always flush to the hero's
   actual bottom, whatever that turns out to be. */
.curso-datos--escritorio {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (max-width: 1024px) {
    .curso-datos--escritorio {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Mobile red bar (production container 2a61512, bg #B0263E). Full-width:
       breaks out of .curso-hero__fila's 16px side padding via negative margin
       so it spans edge to edge while the title/form stay inset. */
    .curso-datos--movil {
        display: block;
        background: var(--curso-color-acento-oscuro);
        margin: 8px -16px 0;
        padding: 0;
    }

    .curso-datos--movil .curso-datos__interior {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px;
        max-width: none;
        padding: 14px 0;
    }

    /* Reset the desktop inline spacing; the mobile bar spaces via the
       interior's gap instead. Icons are 21px here (vs 25px desktop),
       confirmed via production. */
    .curso-datos--movil .curso-dato__item {
        margin-right: 0;
    }

    .curso-datos--movil .curso-dato__icono {
        width: 21px;
        height: 21px;
    }

    /* modalidad + duración: icon stacked ABOVE the text, sharing row 1.
       20px Quicksand 500, confirmed via production. */
    .curso-dato__item--apilado {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        font-size: 20px;
    }

    /* "Becas del 20%" wraps to its own full-width centered row (row 2).
       On mobile it's 25px Lato 700 (heavier than desktop's 400). */
    .curso-dato__item--completo {
        flex-basis: 100%;
        justify-content: center;
        font-size: 25px;
        font-weight: 700;
    }
}

/* In-page anchor nav: the real 4520 container (22b46ec) has hide_desktop +
   hide_tablet + hide_mobile all set — it's never actually shown at any
   breakpoint in production, so kept hidden here too rather than guessing
   a visible style for markup the original design doesn't display. */
.curso-nav-anclas {
    display: none;
}

.curso-nav-anclas a {
    color: var(--curso-color-titulo);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.curso-nav-anclas a:hover {
    color: var(--curso-color-acento);
}

/* Layout */
.curso-contenedor {
    max-width: var(--curso-ancho-contenido);
    margin: 0 auto;
    padding: 0 24px;
}

.curso-seccion {
    margin: 56px 0;
}

.curso-seccion h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--curso-color-titulo);
    margin-bottom: 20px;
}

/* Matches .elementor-element-6a6ec2e5/107fa150: 10px padding, 36px bottom margin. */
.curso-seccion-texto {
    padding: 10px;
}

.curso-dos-columnas .curso-seccion.curso-seccion-texto {
    margin-bottom: 36px;
}

/* Quién puede acceder / Objetivos body text (8510d14/518f014f siblings):
   18px, not 17 — a genuinely different size from Salidas/Titulación text. */
.curso-seccion-texto p {
    font-size: 18px;
    line-height: 1.65;
}

.curso-seccion-texto#quien-acceder img {
    width: 100%;
}


.curso-titulacion p {
    font-size: 17px;
    line-height: 1.65;
}

/* Section-specific background/padding, matched to the original container
   settings (85cf07f Temario, edb1da5 Claustro, c2b9580 Presentación,
   d015616 Rankings) */
/* Matches .elementor-element-c2b9580 exactly: gap 50px, justify/align center,
   margin 2em 0. Children flex-basis 90%/70% match 36e2cb6/532890b's own
   --width, which is what actually produces their real ~54%/42% rendered
   ratio once squeezed by the 50px gap — not an even 45/55 split. */
.curso-presentacion {
    margin: 2em 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.curso-presentacion__columna {
    flex: 0 1 90%;
}

.curso-seccion .curso-presentacion__titulo {
    font-size: 35px;
    font-weight: bold;
    color: var(--curso-color-acento-oscuro) !important;
    margin: 0 0 20px;
}

.curso-presentacion .curso-video__contenedor {
    flex: 0 1 70%;
    max-width: none;
    min-height: 270px;
    margin-top: 0;
    /* padding-top:56.25% (the base rule's aspect-ratio hack) resolves against
       the flex row's width instead of this item's own resolved width in this
       context — aspect-ratio avoids that percentage-padding ambiguity. */
    padding-top: 0;
    aspect-ratio: 16 / 9;
}

.curso-temario {
    background: #fff;
    padding: 0;
}

/* Matches .elementor-element-edb1da5 exactly: full-bleed (outer width spans
   the viewport, x:0), #f5f5f5 background, outer padding-inline 18px, inner
   content row max-width 1400px with 36px vertical padding — not a contained
   rounded card. */
.curso-claustro {
    background: #f5f5f5;
    padding: 36px max(18px, calc((100vw - var(--curso-ancho-contenido)) / 2 + 18px));
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
}

.curso-rankings {
    margin-top: 30px;
}

/* Buttons: "Más información" (Presentación/Metodología) is yellow — border
   radius 16px overridden to 3px, confirmed from post-4520.css. The "Quiero
   más información" (Ayudas) variants + icon now live in css/curso-ayudas.css
   next to the section they belong to. This base rule + the yellow variant
   stay here too since Presentación/Metodología still use
   .curso-boton/.curso-boton--amarillo directly (curso-ayudas.css duplicates
   them verbatim so that section still renders correctly if this stylesheet
   isn't loaded). */
/* Matches the real .elementor-button widgets (e.g. 9441afb): 3px radius (not
   our --curso-radio-borde=16px), 20px font, 500 weight, 18px top margin. */
.curso-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 30px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.curso-boton--amarillo {
    background: var(--curso-color-amarillo);
    color: #fff;
}

.curso-boton--amarillo:hover {
    background: var(--curso-color-acento-oscuro);
    color: #fff;
}

/* Two-column: ¿Quién puede acceder? | Objetivos */
/* Matches .elementor-element-2a7850c2: gap 60px (not 48), margin 18px 0 (not 56). */
.curso-dos-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    margin: 18px 0;
}

/* flex-basis:0 (not 320px) so both columns split 100% of the available
   width equally regardless of content length — a true 50/50, not a
   content-sized start that only happens to end up close to even. */
.curso-dos-columnas .curso-seccion {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

/* Objetivos numbered list */
.curso-objetivos__intro {
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 16px;
}

.curso-objetivos__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.curso-objetivos__numero {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--curso-color-acento-oscuro);
    font-size: 30px;
}

.curso-objetivos__texto {
    font-size: 16px;
    align-self: center;
}

/* Salidas Profesionales: flat #202020, full-bleed (edge-to-edge, breaks out
   of .curso-contenedor's max-width) confirmed via .elementor-element-36ba1fa1 in
   post-4520.css — not a contained/rounded card. */
/* Matches .elementor-element-72e20068 exactly (measured via effective
   heading/paragraph insets, since it's several nested e-cons deep):
   46px top / 64px bottom padding, 18px horizontal base (not 24px). */
.curso-salidas {
    background: #202020;
    color: #fff;
    padding: 46px max(18px, calc((100vw - var(--curso-ancho-contenido)) / 2 + 18px)) 64px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.curso-salidas h2 {
    font-weight: 600;
    color: #fff;
}

.curso-salidas p {
    line-height: 1.65;
    color: #fff;
    margin-bottom: 0;
}

/* Video */
.curso-video__contenedor {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding-top: 56.25%; /* 16:9 */
    border-radius: var(--curso-radio-borde);
    overflow: hidden;
    margin-top: 20px;
}

.curso-video__contenedor iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Facade: miniatura estática + botón de play. El iframe real de YouTube
   (y todo su JS) solo se inyecta al hacer clic, para no cargarlo en el
   render inicial de la página. */
.curso-video__facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
}

.curso-video__facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curso-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.curso-video__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

.curso-video__facade:hover .curso-video__play {
    background-color: #ff0000;
}

/* Metodología / differentiators: padding 2em top/bottom, 0 sides
   (confirmed via .elementor-element-64927cf in post-4520.css) */
/* Matches .elementor-element-64927cf: full-bleed, #f6f6f6, outer padding-inline
   18px, inner content 54px vertical padding — and margin-top:0 so it sits
   flush against .curso-claustro above with no white gap (confirmed: that
   section's bottom edge and this one's top edge are the same y in production). */
.curso-metodologia {
    background: var(--curso-fondo-claro);
    padding: 54px max(18px, calc((100vw - var(--curso-ancho-contenido)) / 2 + 18px));
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
}

/* Matches .elementor-element-7c93df3: row, gap 30px, height ~40px (no
   space-between — the logo sits right after the heading, not pushed to the
   far edge). */
.curso-metodologia__cabecera {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 0;
}

.curso-metodologia__cabecera h2 {
    margin-bottom: 0;
}

/* .elementor-element-e33a39c's widget-container has a #e9e9e9 backdrop
   sized exactly to the logo image. */
.curso-metodologia__cabecera img {
    background-color: #e9e9e9;
}

/* Matches .elementor-element-ab91646/b77cdc0: 20px gap between cards (not
   24px), 18px margin-top from the heading row above (real: on the row
   itself, applied here on the grid for the same visual result). */
/* Capped at 3 columns per row (matches the real 2-row-of-3 layout for the
   6 differentiator cards) instead of auto-fit, which could pack more per
   row on very wide screens. */
.curso-diferenciales__cuadricula {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 18px;
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .curso-diferenciales__cuadricula {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .curso-diferenciales__cuadricula {
        grid-template-columns: 1fr;
    }
}

/* Card background/padding confirmed via .elementor-element-98c515a et al.
   (white bg, 2em/3em/1em padding); the colored icon badge is baked into the
   SVG itself, not a CSS treatment. */
/* Matches .elementor-element-11b75bc (one card) exactly: white bg, no
   shadow/radius, padding 36px 18px 54px, column gap 20px between the
   icon+title row and the paragraph below. */
.curso-diferenciales__item {
    background: #fff;
    padding: 36px 18px 54px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Icon + title sit side by side (row, gap 20px) — confirmed via
   .elementor-element-34ea691 — not stacked as before. */
.curso-diferenciales__cabecera {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.curso-diferenciales__item img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.curso-diferenciales__item h3 {
    font-family: "Ubuntu", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--curso-color-titulo);
    margin: 0;
}

.curso-diferenciales__item p {
    font-family: "Roboto", Sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--curso-color-texto);
    margin: 0;
}

/* Titulación: padding 3em/4em top/bottom, 1em sides (1f801b0f) */
/* Matches .elementor-element-1f801b0f: transparent background (not a gray
   card), 54px top / 72px bottom padding. */
.curso-titulacion {
    padding: 0 0 6px;
}

/* Becas y ayudas: extracted to css/curso-ayudas.css (loaded by
   template-parts/curso-ayudas.php) so the section is a self-contained,
   independently-loadable block — see that file for the section's rules. */

/* Rankings */
/* Real design is a fixed 2-column layout (each card ~680px at 1400px
   container width, confirmed via .elementor-element-951b861), not an
   auto-fit grid, and cards have NO background/border/shadow at all. */
.curso-rankings__cuadricula {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.curso-rankings__item {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Icon + title sit side by side (row, gap 20px), matching Metodología's
   pattern — confirmed via the QS RATING card's icon-row container. */
.curso-rankings__cabecera {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.curso-rankings__icono {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.curso-rankings__item h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--curso-color-titulo);
    margin: 0;
}

.curso-rankings__item p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--curso-color-texto);
    margin-left: 100px;
}

/* Stats ("Nuestras cifras"): extracted to css/curso-cifras.css (loaded by
   template-parts/curso-cifras.php) so the section is a self-contained,
   independently-loadable block — see that file for the section's rules. */

@media (max-width: 768px) {
    /* On mobile production top-aligns the hero content (justify-content
       flex-start) with a ~49px top padding, rather than the vertical
       centering used on desktop — the content column (title, resumen, red
       bar, form) is taller than the hero min-height here, so centering would
       just clip the title under the header. */
    .curso-hero {
        justify-content: flex-start;
        padding-top: 49px;
    }

    .curso-hero__fila {
        padding: 0 16px;
    }

    .curso-hero__tarjeta-formulario {
        flex-basis: 100%;
        margin-bottom: 16px;
    }

    .curso-dato__item {
        margin-right: 20px;
    }

    .curso-contenedor {
        padding: 0 16px;
    }

    /* Both of these hardcoded flex-direction:row with no responsive
       override before — on a narrow screen that squeezed each column down
       to ~150-190px instead of stacking, wrapping every word onto its own
       line. Stack them full-width instead. */
    .curso-dos-columnas {
        flex-direction: column;
        gap: 32px;
    }

    .curso-dos-columnas .curso-seccion.curso-seccion-texto {
        margin-bottom: 0;
    }

    /* On mobile production reverses this section: the video comes FIRST,
       the "| EUROINNOVA" title below it, and the "Más información" button is
       hidden. column-reverse gives [video][title] from the DOM order
       [title][video]. */
    .curso-presentacion {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .curso-seccion.curso-salidas {
        margin-top: 0;
    }

    /* Production mobile: 28px (vs 35px desktop). */
    .curso-seccion .curso-presentacion__titulo {
        font-size: 28px;
        margin-bottom: 0;
    }

    .curso-presentacion__columna,
    .curso-presentacion .curso-video__contenedor {
        flex-basis: auto;
        width: 100%;
    }

    /* Video is full-width edge-to-edge on mobile (breaks out of the
       container's 16px side padding), confirmed via production. */
    .curso-presentacion .curso-video__contenedor {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
    }

    /* "Más información" button hidden on mobile in production. */
    .curso-presentacion__columna .curso-boton {
        display: none;
    }

    .curso-rankings__item h3{
        font-size:22px;
    }

    /* Fixed 2-column grid (no auto-fit) — same "never wraps to 1 column"
       problem as the two above, made worse by a 100px left margin on the
       paragraph text that alone exceeded a 425px-wide card. */
    .curso-rankings__cuadricula {
        grid-template-columns: 1fr;
    }

    .curso-rankings__item p {
        margin-left: 0;
    }

    /* Rankings heading is smaller (22px) and centered on mobile in
       production (vs 30px/left on desktop). */
    .curso-rankings h2 {
        font-size: 22px;
        text-align: center;
    }

    /* Full-bleed sections: production insets their content 16px horizontally
       on mobile (measured 16.4px), keeping each section's own vertical
       padding — so only override the horizontal, don't flatten to a uniform
       24px box (that also wrongly squashed the distinct top/bottom padding).
       Titulación is NOT full-bleed (it lives inside the 16px container with
       zero horizontal padding), so it's excluded — including it added 24px
       on top of the container's 16px, pushing its heading to 40px vs
       production's 16px. .curso-ayudas and .curso-cifras get the equivalent
       override in their own stylesheets now (css/curso-ayudas.css,
       css/curso-cifras.css). */
    .curso-salidas,
    .curso-metodologia {
        padding-left: 16px;
        padding-right: 16px;
    }

    .curso-seccion .curso-metodologia {
        margin-bottom: 0;
        padding-bottom: 35px;
    }

    .curso-seccion .curso-metodologia .curso-boton {
        width: 90%;
        justify-content: center;
    }

}