/* ==========================================================================
   CST Motoras — Home "Modern Refresh" layer
   --------------------------------------------------------------------------
   Visual modernization ported from the Pencil design (design/motoras-home.pen).
   Loaded AFTER custom.css + accessibility.css, so equal-specificity rules win.
   Purely presentational: no markup/content assumptions beyond existing classes.
   Respects prefers-reduced-motion and prefers-contrast (tokens already adapt).
   ========================================================================== */

:root {
    /* Softer, more "lifted" card system to match the Pencil mockup */
    --cstm-card-radius:   8px;
    --cstm-card-shadow:   0 1px 3px rgba(31, 46, 84, 0.10);
    --cstm-card-shadow-h: 0 3px 10px rgba(31, 46, 84, 0.12);
    --cstm-card-border:   1px solid var(--cst-color-gray-200);
    --cstm-chip-bg:       #EAF0FF;          /* light blue icon chip */
    --cstm-ink:           var(--cst-color-navy);
}

/* --- Rhythm: more generous, modern vertical spacing --- */
.cst-section { padding-block: var(--cst-space-4xl); }
.cst-container { max-width: 1200px; }

/* ==========================================================================
   HERO — left-aligned editorial, stronger overlay, bigger headline
   ========================================================================== */
.cst-hero--home { min-height: 84vh; }

/* Darker diagonal overlay so white text stays legible over the photo */
.cst-hero__overlay {
    background: linear-gradient(
        100deg,
        rgba(14, 19, 32, 0.92) 0%,
        rgba(18, 24, 42, 0.72) 42%,
        rgba(31, 46, 84, 0.42) 100%
    );
}

/* Left-align the hero content (markup already supports it) */
.cst-hero--home .cst-hero__content {
    max-width: 680px;
    margin-inline: 0;
    text-align: left;
}
.cst-hero--home .cst-hero__actions,
.cst-hero--home .cst-hero__badges {
    justify-content: flex-start;
}
.cst-hero--home .cst-hero__title {
    font-size: clamp(2.25rem, 5vw, 3.625rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: 0;
}
/* .cst-hero--home .cst-hero__subtitle's font-size/max-width/opacity are set
   by the "exact value parity with Pencil" block further down — a fluid
   clamp() used to be declared here too, but the later fixed-value rule
   always won the cascade, so it was dead code. Removed to avoid confusion. */

/* Hero eyebrow as a glass chip (when present) */
.cst-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cst-space-sm);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--cst-space-md);
}

/* Refined trust badges */
.cst-hero__badge {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Hero split layout + glass stat card --- */
.cst-hero__layout { display: flex; align-items: center; gap: var(--cst-space-3xl); width: 100%; }
.cst-hero--home .cst-hero__layout { justify-content: space-between; }
.cst-hero--home .cst-hero__content { flex: 1 1 auto; }
.cst-hero--home .cst-hero__illustration { display: none; }
.cst-hero__aside { flex: 0 0 auto; width: 340px; max-width: 100%; position: relative; z-index: 1; }
.cst-hero__stat-card {
    background: #1A2238;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--cstm-card-radius);
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    color: #fff;
    text-align: left;
}
.cst-hero__stat-tag { display: inline-flex; align-items: center; gap: 8px; color: #FFC95C; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.cst-hero__stat-value { display: block; font-family: var(--cst-font-heading); font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.cst-hero__stat-label { margin: 12px 0 0; color: #D3DBEC; font-size: 0.95rem; line-height: 1.5; }
.cst-hero__stat-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #9FAAC4; font-size: 0.8rem; font-style: italic; line-height: 1.45; }
@media (max-width: 880px) {
    .cst-hero__layout { flex-direction: column; align-items: flex-start; gap: var(--cst-space-xl); }
    .cst-hero__aside { width: 100%; max-width: 460px; }
}

/* ==========================================================================
   BUTTONS — pill shape + softer glow (matches Pencil)
   ========================================================================== */
.cst-btn { border-radius: 999px; }
.cst-btn--lg { border-radius: 999px; }
/* .cst-btn--hero / .cst-btn--outline-hero get their final border-radius
   (10px) from the "exact value parity with Pencil" block further down —
   don't redeclare 999px here, it was dead code the later rule always won. */
.cst-btn--hero {
    background: var(--cst-color-blue-primary);
    border-color: var(--cst-color-blue-primary);
}
.cst-btn--hero:hover {
    background: var(--cst-color-blue-dark);
    border-color: var(--cst-color-blue-dark);
}

/* ==========================================================================
   SECTION HEADINGS — tighter, bolder, more contemporary
   ========================================================================== */
.cst-section-heading__title {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.cst-section-heading__subtitle {
    font-size: var(--cst-font-size-lg);
    max-width: 680px;
}

/* ==========================================================================
   CARD FAMILY — unified soft, lifted look (pillars, objectives, features, faq)
   ========================================================================== */
.cst-pillar-card,
.cst-objective-card,
.cst-faq-item {
    border-radius: var(--cstm-card-radius);
    box-shadow: var(--cstm-card-shadow);
    border: var(--cstm-card-border);
}
.cst-pillar-card:hover,
.cst-objective-card:hover {
    box-shadow: var(--cstm-card-shadow-h);
}

.cst-pillar-card__title { color: var(--cstm-ink); }

/* ==========================================================================
   Module cards ("Lo que aprenderás") — Pencil parity (Sec Modules, yk8fU):
   5 cards (clipped ghost number, 46px navy icon tile + blue "MÓDULO NN"
   label, left-aligned title/desc) + gradient CTA panel in the 6th slot.
   ========================================================================== */
.cst-mod-card {
    position: relative;
    overflow: hidden;
    min-height: 272px;
    background: #fff;
    border: 1px solid #E3E9F4;
    border-radius: 16px;
    box-shadow: 0 8px 24px -8px rgba(31, 46, 84, 0.08);
}
.cst-mod-card__ghost {
    /* Pencil puts the ghost at x:250 in a 421px card — i.e. ~28px of the
       number hangs off the right edge. Anchor right so the same overflow
       holds at our narrower card widths (left:250 would clip a whole digit). */
    position: absolute;
    top: 120px;
    right: -28px;
    font-family: var(--cst-font-heading);
    font-size: 170px;
    font-weight: 800;
    line-height: 1;
    color: #EDF1FB;
    pointer-events: none;
    user-select: none;
}
.cst-mod-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px;
    height: 100%;
}
.cst-mod-card__top { display: flex; align-items: center; gap: 14px; }
.cst-mod-card__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--cst-color-navy);
    color: #fff;
    flex-shrink: 0;
}
.cst-mod-card__num {
    font-family: var(--cst-font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cst-color-blue-primary);
}
.cst-mod-card__title {
    font-family: var(--cst-font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--cst-color-navy);
    margin: 0;
}
.cst-mod-card__desc {
    font-family: var(--cst-font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: #5B6680;
    margin: 0;
}

.cst-mod-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-height: 272px;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--cst-color-blue-primary) 0%, var(--cst-color-blue-dark) 100%);
}
.cst-mod-cta__icon { display: block; color: #fff; }
.cst-mod-cta__title {
    font-family: var(--cst-font-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0;
}
.cst-mod-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 12px 20px;
    border-radius: 9px;
    background: #fff;
    font-family: var(--cst-font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--cst-color-blue-dark);
    text-decoration: none;
    transition: background 0.18s ease;
}
.cst-mod-cta__btn:hover,
.cst-mod-cta__btn:focus-visible { background: #EEF2FB; color: var(--cst-color-blue-dark); }

.cst-objectives-grid { gap: 24px; }
@media (max-width: 990px) {
    .cst-objectives-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cst-objectives-grid { grid-template-columns: 1fr; }
}

/* Course-features list: blue check chips (was green), softer rows */
.cst-course-feature {
    border-radius: 14px;
    border: 1px solid var(--cst-color-gray-200);
    padding: var(--cst-space-md) var(--cst-space-lg);
}
.cst-course-feature__check {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--cstm-chip-bg);
    color: var(--cst-color-blue-primary);
}
.cst-course-features__card {
    border-radius: var(--cstm-card-radius);
    background: #1F2E54;
    box-shadow: var(--cstm-card-shadow);
}

/* ==========================================================================
   STATS — dark highlight band with glassy KPI cards (matches Pencil)
   ========================================================================== */
.cst-section--stats-dark {
    background: #141B2E;
}
.cst-section--stats-dark .cst-section-heading__title {
    color: var(--cst-color-white);
    -webkit-text-fill-color: var(--cst-color-white);
    background: none;
}
.cst-section--stats-dark .cst-section-heading__subtitle { color: #AEB8D0; }

.cst-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cst-space-lg);
}
/* home-modern.css loads after custom.css, so this base rule wins over
   custom.css's own breakpoints — it must carry its own responsive steps
   or the 4-col grid stays stuck at 4 columns down to phone widths. */
@media (max-width: 1024px) {
    .cst-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cst-stats-grid { grid-template-columns: 1fr; gap: var(--cst-space-md); }
}
.cst-section--stats-dark .cst-stat-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--cst-space-xl);
    border-radius: var(--cstm-card-radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-align: left;
}
.cst-section--stats-dark .cst-stat-card__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(62, 100, 222, 0.20);
    color: var(--cst-color-blue-light);
    font-size: 24px;
}
.cst-section--stats-dark .cst-stat-card__value {
    font-family: var(--cst-font-heading);
    font-size: clamp(2.4rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cst-color-white);
}
.cst-section--stats-dark .cst-stat-card__unit { color: var(--cst-color-blue-light); }
.cst-section--stats-dark .cst-stat-card__label {
    font-size: 0.95rem;
    color: #C4CDE4;
    font-weight: 600;
}
.cst-section--stats-dark .cst-stat-card__source { color: #8C97B0; font-size: 0.8rem; }
.cst-section--stats-dark .cst-btn--outline {
    color: var(--cst-color-white);
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   FAQ — flatter, accent the open item
   ========================================================================== */
.cst-faq-item { box-shadow: none; }
.cst-faq-item:has(.cst-faq-item__toggle[aria-expanded="true"]) {
    background: #F5F8FF;
    border-color: var(--cst-color-blue-primary);
    box-shadow: 0 6px 20px rgba(62, 100, 222, 0.10);
}
.cst-faq-item__toggle { font-size: 1.05rem; font-weight: 700; color: var(--cstm-ink); }
.cst-faq-item__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cst-color-gray-100);
}
.cst-faq-item__toggle[aria-expanded="true"] .cst-faq-item__icon {
    background: var(--cst-color-blue-primary);
    color: var(--cst-color-white);
}

/* ==========================================================================
   ENROLLMENT CTA — vibrant blue gradient (was navy)
   ========================================================================== */
.cst-enrollment-cta {
    background: var(--cst-color-navy);
}
.cst-enrollment-cta__title { font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.cst-enrollment-cta .cst-btn--primary {
    background: var(--cst-color-white);
    color: var(--cst-color-blue-dark);
    border-color: var(--cst-color-white);
}
.cst-enrollment-cta .cst-btn--primary:hover {
    background: #EEF2FF;
    color: var(--cst-color-blue-dark);
    border-color: #EEF2FF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   TRUST STRIP — lighter, cleaner
   ========================================================================== */
.cst-trust-strip {
    background: #F4F7FC;
    color: var(--cst-color-navy);
    border-block: 1px solid #E3E9F4;
}
.cst-trust-strip__list { justify-content: space-between; gap: 0; flex-wrap: nowrap; }
.cst-trust-strip__item {
    color: var(--cst-color-navy);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding-inline: 28px;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}
.cst-trust-strip__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: #CBD6EC;
}
.cst-trust-strip__icon { color: var(--cst-color-blue-primary); }
.cst-trust-strip__icon svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
    .cst-trust-strip__list { flex-wrap: wrap; }
    .cst-trust-strip__item { flex: 1 1 45%; padding-inline: 12px; }
    .cst-trust-strip__item:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   INNER PAGES — Curso · Recursos · Estadísticas · Sobre Nosotros · Contacto
   ========================================================================== */

/* --- Inner-page heroes (page / course / slim): gradient bg + modern type --- */
.cst-hero--page,
.cst-hero--slim {
    background-image: none;
    background-color: var(--cst-color-navy);
}
.cst-hero--page,
.cst-hero--course {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cst-hero--slim { min-height: 260px; }
.cst-hero--page .cst-hero__overlay,
.cst-hero--course .cst-hero__overlay,
.cst-hero--slim .cst-hero__overlay {
    background: linear-gradient(120deg, rgba(18, 24, 42, 0.82) 0%, rgba(42, 75, 176, 0.5) 100%);
}
.cst-hero--page .cst-hero__title,
.cst-hero--course .cst-hero__title,
.cst-hero--slim .cst-hero__title {
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0;
}
/* Pencil's c/PageHero: subtitle is muted (not pure white) + width-capped —
   this variant had no subtitle override at all before (fell back to the
   base 24px white rule), same bug pattern as the home hero subtitle. */
.cst-hero--page .cst-hero__subtitle,
.cst-hero--course .cst-hero__subtitle {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #AEBBDA;
    max-width: 720px;
    opacity: 1;
}

/* --- Course: impact (text + stat box + callouts) --- */
.cst-course-impact__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--cst-space-3xl);
    align-items: center;
}
/* Impact section sits on a navy background — light text for WCAG-AA contrast. */
.cst-course-impact__title { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.cst-course-impact__desc { font-size: 1.05rem; line-height: 1.65; color: #E4EAFA; }
.cst-course-impact__stat-box {
    background: var(--cst-color-navy);
    color: #fff;
    border-radius: var(--cstm-card-radius);
    padding: var(--cst-space-2xl);
    text-align: center;
    box-shadow: var(--cstm-card-shadow);
}
.cst-course-impact__stat-number { display: block; font-family: var(--cst-font-heading); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.cst-course-impact__stat-label { margin-top: var(--cst-space-sm); color: #C4CDE4; }
.cst-course-impact__callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cst-space-lg); margin-top: var(--cst-space-2xl); }
.cst-course-impact__callout { background: #fff; border: var(--cstm-card-border); border-radius: var(--cstm-card-radius); padding: var(--cst-space-xl); box-shadow: var(--cstm-card-shadow); }
.cst-course-impact__callout-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--cstm-chip-bg); color: var(--cst-color-blue-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--cst-space-md); }
.cst-course-impact__callout-icon svg { width: 26px; height: 26px; }
.cst-course-impact__callout-title { color: var(--cstm-ink); font-size: 1.1rem; margin-bottom: var(--cst-space-xs); }

/* --- Course: temario cards --- */
.cst-course-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cst-space-xl); }
.cst-course-card {
    background: #fff;
    border: var(--cstm-card-border);
    border-radius: var(--cstm-card-radius);
    padding: var(--cst-space-2xl);
    box-shadow: var(--cstm-card-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cst-course-card:hover { box-shadow: var(--cstm-card-shadow-h); }
.cst-course-card__icon { width: 56px; height: 56px; border-radius: 15px; background: var(--cstm-chip-bg); color: var(--cst-color-blue-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--cst-space-md); }
.cst-course-card__icon svg { width: 28px; height: 28px; }
.cst-course-card__title { color: var(--cstm-ink); font-size: 1.25rem; margin-bottom: var(--cst-space-md); }
.cst-course-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cst-space-sm); }
.cst-course-card__list li { position: relative; padding-left: 1.7em; color: var(--cst-color-gray-700); line-height: 1.5; }
.cst-course-card__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cst-color-blue-primary); font-weight: 800; }

/* --- Course: <details> FAQ accordion --- */
.cst-faq__item { background: #fff; border: var(--cstm-card-border); border-radius: var(--cstm-card-radius); margin-bottom: var(--cst-space-md); overflow: hidden; }
.cst-faq__question { display: flex; justify-content: space-between; align-items: center; gap: var(--cst-space-md); padding: var(--cst-space-lg) var(--cst-space-xl); cursor: pointer; font-family: var(--cst-font-heading); font-weight: 700; color: var(--cstm-ink); list-style: none; }
.cst-faq__question::-webkit-details-marker { display: none; }
.cst-faq__question::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cst-color-blue-primary); flex-shrink: 0; }
.cst-faq__item[open] .cst-faq__question { color: var(--cst-color-blue-primary); background: #F5F8FF; }
.cst-faq__item[open] .cst-faq__question::after { content: "\2212"; }
.cst-faq__answer { padding: 0 var(--cst-space-xl) var(--cst-space-lg); color: var(--cst-color-gray-700); line-height: 1.65; }

/* --- Course: footer CTA (form + certificate mockup) --- */
.cst-section--course-footer-cta {
    background: var(--cst-color-navy);
    color: #fff;
}
.cst-course-footer-cta__title { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.01em; }
.cst-course-footer-cta__subtitle { color: #E4EAFA; }
.cst-course-footer-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cst-space-3xl); align-items: start; }
.cst-course-footer-cta__form { background: #fff; border-radius: var(--cstm-card-radius); padding: var(--cst-space-2xl); color: var(--cst-color-text); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); }
.cst-course-footer-cta__form h3 { color: var(--cstm-ink); }
.cst-certificate-mockup__card { background: #fff; border-radius: var(--cstm-card-radius); padding: 10px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.30); }
.cst-certificate-mockup__border { border: 2px solid var(--cst-color-blue-light); border-radius: 12px; padding: var(--cst-space-xl); text-align: center; color: var(--cst-color-text); }
.cst-certificate-mockup__course { font-family: var(--cst-font-heading); font-weight: 800; color: var(--cstm-ink); font-size: 1.15rem; }
/* Contact items render inside the white form card — dark text for contrast. */
.cst-course-footer-cta__contact-item a,
.cst-course-footer-cta__contact-item { color: var(--cst-color-navy); }
.cst-course-footer-cta__disclaimer { color: #C4CDE4; font-size: 0.85rem; }

/* --- Contact: cards (fix leftover GREEN) + form --- */
.cst-contact-card { border-radius: var(--cstm-card-radius); box-shadow: var(--cstm-card-shadow); border: var(--cstm-card-border); }
.cst-contact-card__icon { background: var(--cstm-chip-bg); color: var(--cst-color-blue-primary); border-radius: 14px; }
.cst-contact-form { background: #fff; border-radius: var(--cstm-card-radius); box-shadow: var(--cstm-card-shadow); border: var(--cstm-card-border); padding: var(--cst-space-2xl); }
.cst-contact-form h2 { color: var(--cstm-ink); margin-top: 0; }

/* Contact layout: info as a sidebar, form as the focus (1 card looked empty at 50/50) */
.cst-contact-grid { grid-template-columns: minmax(0, 360px) 1fr; align-items: start; gap: var(--cst-space-2xl); }
@media (max-width: 880px) { .cst-contact-grid { grid-template-columns: 1fr; } }

/* --- Form fields (CF7) — shared by Contacto + Curso registration --- */
.cst-contact-form .wpcf7 p,
.cst-course-footer-cta__form .wpcf7 p { margin: 0 0 var(--cst-space-md); }
.cst-contact-form .wpcf7 label,
.cst-course-footer-cta__form .wpcf7 label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cstm-ink);
}
.cst-contact-form input.wpcf7-form-control:not(.wpcf7-submit),
.cst-contact-form textarea.wpcf7-form-control,
.cst-contact-form select.wpcf7-form-control,
.cst-course-footer-cta__form input.wpcf7-form-control:not(.wpcf7-submit),
.cst-course-footer-cta__form textarea.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1px solid var(--cst-color-gray-300);
    border-radius: 10px;
    font-family: var(--cst-font-body);
    font-size: 1rem;
    color: var(--cst-color-text);
    background: var(--cst-color-white);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cst-contact-form .wpcf7-form-control:focus,
.cst-course-footer-cta__form .wpcf7-form-control:focus {
    border-color: var(--cst-color-blue-primary);
    box-shadow: 0 0 0 3px var(--cst-alpha-blue-15);
    outline: none;
}
.cst-contact-form textarea.wpcf7-form-control,
.cst-course-footer-cta__form textarea.wpcf7-form-control { min-height: 130px; resize: vertical; }
.cst-contact-form .wpcf7-form-control[type="submit"],
.cst-course-footer-cta__form .wpcf7-form-control[type="submit"] {
    background: var(--cst-color-blue-primary);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 999px;
    font-family: var(--cst-font-body);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(62, 100, 222, 0.35);
    transition: background 0.18s ease, transform 0.18s ease;
}
.cst-contact-form .wpcf7-form-control[type="submit"]:hover,
.cst-course-footer-cta__form .wpcf7-form-control[type="submit"]:hover { background: var(--cst-color-blue-dark); }

/* --- Resources: filter tabs (fix GREEN) + cards + empty state --- */
.cst-filter-tabs__btn:hover {
    background: #EAF0FF;
    border-color: var(--cst-color-blue-primary);
    color: var(--cst-color-blue-primary);
}
.cst-card { border-radius: var(--cstm-card-radius); box-shadow: var(--cstm-card-shadow); border: var(--cstm-card-border); }
.cst-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 560px;
    margin: var(--cst-space-xl) auto 0;
    background: #fff;
    border: 1.5px dashed var(--cst-color-gray-300);
    border-radius: var(--cstm-card-radius);
    padding: var(--cst-space-3xl) var(--cst-space-2xl);
    color: var(--cst-color-text-muted);
}
.cst-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--cstm-chip-bg);
    color: var(--cst-color-blue-primary);
    margin-bottom: var(--cst-space-md);
}
.cst-empty-state__title {
    font-family: var(--cst-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cstm-ink);
    margin: 0 0 var(--cst-space-sm);
}
.cst-empty-state__text { margin: 0; font-size: 1rem; line-height: 1.6; }

/* --- Statistics dashboard: refine KPI / chart / source cards + tabs --- */
.cst-kpi-card,
.cst-chart-card,
.cst-source-card {
    border-radius: var(--cstm-card-radius);
    box-shadow: var(--cstm-card-shadow);
    border: var(--cstm-card-border);
}
.cst-kpi-card__value { font-weight: 800; color: var(--cstm-ink); }
.cst-chart-card__title { color: var(--cstm-ink); }
.cst-dashboard__tab {
    border-radius: 999px;
    border: 1px solid var(--cst-color-gray-300);
    background: var(--cst-color-white);
    padding: 8px 18px;
    font-weight: 600;
}
.cst-dashboard__tab[aria-selected="true"],
.cst-dashboard__tab.is-active {
    background: var(--cst-color-blue-primary);
    border-color: var(--cst-color-blue-primary);
    color: #fff;
}

/* Content <main> must fill GP's flex #content (it was shrinking to ~720px,
   which collapsed the dashboard grids). Affects every template's body width. */
.cst-main { width: 100%; flex: 1 1 100%; min-width: 0; }

/* Balanced dashboard grids at full width */
.cst-dashboard__kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--cst-space-lg); }
.cst-dashboard__chart-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: var(--cst-space-lg); }
.cst-chart-card__canvas-wrap { position: relative; }
@media (max-width: 900px) {
    .cst-dashboard__kpi-grid,
    .cst-dashboard__chart-grid { grid-template-columns: 1fr; }
}

/* Quieter KPI band — remove the boxy alternating-section tint here */
.cst-dashboard .cst-section--kpi,
.cst-dashboard .cst-section:nth-child(even) { background: transparent; }

/* --- About: readable prose + vibrant CTA box --- */
.cst-about-block__text { font-size: 1.07rem; line-height: 1.75; color: var(--cst-color-gray-700); }
.cst-about-cta-box {
    border-radius: var(--cstm-card-radius);
    background: var(--cst-color-navy);
}
.cst-about-cta-box h2 {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}
.cst-about-cta-box__text { color: #E4EAFA; }
.cst-about-cta-box .cst-btn--primary {
    background: #fff;
    color: var(--cst-color-blue-dark);
    border-color: #fff;
}

/* ==========================================================================
   Responsive — inner-page grids collapse on tablet/phone
   ========================================================================== */
@media (max-width: 880px) {
    .cst-course-impact__grid,
    .cst-course-footer-cta__grid,
    .cst-contact-grid { grid-template-columns: 1fr; }
    /* .cst-course-impact__callouts, .cst-course-cards__grid, and
       .cst-stats-grid are 3/4-item grids with their own dedicated
       breakpoint cascade in custom.css (768px / 1024px / 480px) —
       don't re-declare them here, it fought that cascade and broke
       the tablet layout (561-880px showed an orphaned 2-col row). */
}

/* ==========================================================================
   PROFESSIONAL POLISH — navigation, footer, focus, links
   ========================================================================== */

/* --- Sticky header: everything (branding+nav+actions) is ONE row now,
   matching Pencil's c/Header (nav lived on its own GP row before — merged). --- */
.cst-institutional-header {
    position: sticky;
    top: 0;
    /* Above all page content (some sections create their own stacking
       contexts). Sits just under the toggled mobile menu panel (z:1400).
       Background (#fff) is set below with the scrolled-state rule. */
    z-index: 1300;
}
/* GP's own nav row is now fully replaced by .cst-header-nav in the same row
   as branding on desktop (its content duplicates) — but .cst-header-nav
   hides below 900px with nothing to replace it, so GP's own accessible
   hamburger menu (already fully built/styled) is kept for mobile instead
   of hidden outright. Only its duplicate branding block is hidden. */
@media (min-width: 901px) {
    .site-header#masthead { display: none; }
}
@media (max-width: 900px) {
    .site-header#masthead .site-branding { display: none; }
    .site-header#masthead .inside-header { padding-block: 6px; min-height: 0; }
}

/* --- Primary nav, integrated into the institutional header row (Pencil parity) --- */
.cst-header-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.cst-header-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cst-header-nav__item { position: relative; }
.cst-header-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 4px 0;
}
.cst-header-nav__label {
    font-family: var(--cst-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--cst-color-gray-700);
    white-space: nowrap;
    transition: color 0.15s ease;
}
.cst-header-nav__underline {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--cst-color-blue-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.cst-header-nav__link:hover .cst-header-nav__label { color: var(--cst-color-blue-primary); }
.cst-header-nav__item.current-menu-item .cst-header-nav__label {
    color: var(--cst-color-navy);
    font-weight: 700;
}
.cst-header-nav__item.current-menu-item .cst-header-nav__underline { opacity: 1; }
@media (max-width: 1280px) {
    .cst-header-nav__list { gap: 20px; }
}
@media (max-width: 1024px) {
    .cst-header-nav__list { gap: 16px; }
    .cst-header-nav__label { font-size: 13px; }
}
@media (max-width: 900px) {
    .cst-header-nav { display: none; }
}

/* --- Purpose cards ("¿En qué consiste?") icon tile — Pencil parity: light
   blue tile + blue stroke icon, not solid-blue tile + white fill icon. --- */
.cst-pillar-card__icon {
    width: 52px;
    height: 52px;
    background: #EAF0FB;
    color: var(--cst-color-blue-primary);
    border-radius: 13px;
    box-shadow: none;
}
.cst-pillar-card__icon svg { width: 26px; height: 26px; }

/* ==========================================================================
   Footer — "Institutional Slate" (modern + government)
   Band 0: flat 3px blue keyline · Band 1: balanced 4-col grid on #141B2E ·
   Band 2: framed CESCO note + compliance fine print (1st hairline) ·
   Band 3: slim official bottom bar #0F1524 with copyright + labeled OIG
   credential (2nd hairline). Exactly two hairlines in the whole footer.
   custom.css's decorative pseudo-elements (animated gradient bar, radial
   dot texture, gradient title underlines, link hover shifts) are
   neutralized here at equal specificity — this sheet loads later.
   ========================================================================== */
/* Longer agency name + nowrap nav squeeze the branding flex row — the seal
   (width:auto img) is the only shrinkable piece and collapses to 0px.
   Pin the seal and let the TEXT wrap instead. */
.cst-institutional-header__logo-link { flex-shrink: 0; }
.cst-institutional-header__seal { width: 60px; height: 60px; }
.cst-institutional-header__titles { min-width: 0; }
.cst-institutional-header__actions { flex-shrink: 0; }

.cst-institutional-footer {
    background: #141B2E;
    border-top: 3px solid var(--cst-color-blue-primary);
    padding-top: 0;
}
.cst-institutional-footer::before { content: none; animation: none; }
.cst-institutional-footer::after { content: none; }

/* --- Band 1: main grid (compact, modeled on cst.pr.gov) --- */
.cst-institutional-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    column-gap: 44px;
    row-gap: 36px;
    align-items: start;
    padding-top: 48px;
    padding-bottom: 40px;
}

/* Identity: seal + stacked wordmark */
.cst-institutional-footer__branding { display: flex; align-items: center; gap: 13px; margin: 0; }
.cst-institutional-footer__seal { flex-shrink: 0; }
.cst-institutional-footer__wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.cst-institutional-footer__eyebrow {
    font-family: var(--cst-font-heading);
    font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: #AEBBDA; margin: 0;
}
.cst-institutional-footer__agency {
    font-family: var(--cst-font-heading);
    font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
    color: #fff; margin: 1px 0;
}
.cst-institutional-footer__govt {
    font-family: var(--cst-font-heading);
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: #8794AE; margin: 0;
}
.cst-institutional-footer a { color: #C2C9D6; text-decoration: none; transition: color 0.18s ease; }
.cst-institutional-footer a:hover { color: #fff; }

/* OIG accountability credential (in the identity column, as on cst.pr.gov) */
.cst-institutional-footer__oig { margin-top: 22px; display: inline-flex; align-items: center; gap: 11px; min-height: 44px; }
.cst-institutional-footer__oig-seal { height: 38px; width: auto; opacity: 1; flex-shrink: 0; }
.cst-institutional-footer__oig-label { font-size: 11.5px; line-height: 1.45; color: #8794AE; transition: color 0.18s ease; }
.cst-institutional-footer__oig:hover .cst-institutional-footer__oig-label { color: #C2C9D6; }

/* Social row — solid blue circles (portal accent, mirrors cst.pr.gov's solid gold) */
.cst-institutional-footer .cst-social-links { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.cst-institutional-footer .cst-social-links a {
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--cst-color-blue-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
}
.cst-institutional-footer .cst-social-links a:hover { background: var(--cst-color-blue-dark); color: #fff; transform: translateY(-2px); }

.cst-footer-widget__title {
    font-family: var(--cst-font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    margin-bottom: 14px;
    padding-bottom: 0;
}
.cst-footer-widget__title::after { content: none; }
.cst-footer-widget__title--follow { margin-top: 24px; }

.cst-footer-menu,
.cst-footer-contact { list-style: none; padding: 0; margin: 0; }
.cst-footer-menu li { margin-bottom: 0; break-inside: avoid; }
.cst-footer-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
}
.cst-footer-menu a:hover,
.cst-footer-contact a:hover {
    padding-left: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--cst-color-blue-light);
}
/* Contenido nav folds 3×2 so its 6 links stop towering over the other
   columns. Content-sized grid (not column-count) so the second column can
   be wider — keeps "Sobre Nosotros" on one line instead of wrapping into
   what reads as two separate links. */
.cst-institutional-footer__col--content .cst-footer-menu { display: block; }
.cst-institutional-footer__col--content .cst-footer-menu a { white-space: nowrap; }

.cst-footer-contact li { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
.cst-footer-contact li:last-child { margin-bottom: 0; }
.cst-footer-contact__label { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.cst-footer-contact a { display: inline-flex; align-items: center; min-height: 44px; word-break: break-word; }

/* --- Band 2: fine print — framed CESCO note + compliance (1st hairline) --- */
.cst-institutional-footer__disclaimer { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 32px; padding-bottom: 0; margin-top: 0; }
.cst-institutional-footer__disclaimer p {
    background: rgba(123, 159, 238, 0.06);
    border-left: 3px solid var(--cst-color-blue-light);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #A7B1C7;
    max-width: 78ch;
    margin: 0;
    text-align: left;
}
.cst-institutional-footer__disclaimer p strong { color: #fff; }
.cst-institutional-footer__compliance { border-top: 0; padding-top: 20px; padding-bottom: 36px; text-align: left; }
.cst-institutional-footer__compliance p {
    font-size: 13px;
    line-height: 1.7;
    color: #93A0B8;
    opacity: 1;
    max-width: 78ch;
    margin: 0 0 10px;
    margin-inline: 0;
}
.cst-institutional-footer__compliance p:last-child { margin-bottom: 0; }

/* --- Band 3: slim copyright bar --- */
.cst-institutional-footer__bar { background: #0F1524; border-top: 1px solid rgba(255,255,255,0.08); }
.cst-institutional-footer__bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    min-height: 60px;
    padding-block: 14px;
}
.cst-institutional-footer__copyright { margin: 0; text-align: left; color: #8794AE; font-size: 13px; }
.cst-institutional-footer__origin { margin: 0; color: #6E7A94; font-size: 12px; letter-spacing: 0.02em; }

/* --- Footer responsive --- */
@media (max-width: 900px) {
    .cst-institutional-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .cst-institutional-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .cst-institutional-footer__grid { grid-template-columns: 1fr; padding-top: 40px; }
    .cst-footer-menu a { padding-block: 10px; }
    /* Extra bottom padding keeps the copyright clear of the floating
       chatbot bubble (fixed bottom-right, ~80px tall zone). */
    .cst-institutional-footer__bar-inner { flex-direction: column; text-align: center; gap: 8px; padding-block: 18px 96px; }
    .cst-institutional-footer__copyright { text-align: center; }
}
.cst-back-to-top {
    border-radius: 999px;
    background: var(--cst-color-blue-primary);
    box-shadow: 0 8px 24px rgba(62, 100, 222, 0.4);
}

/* --- Consistent focus rings (a11y + polish) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--cst-color-blue);
    outline-offset: 2px;
}

/* --- Content links --- */
.cst-content-area a,
.cst-faq__answer a,
.cst-faq-item__answer a,
.cst-about-block__text a { color: var(--cst-color-blue-dark); text-underline-offset: 2px; }

/* --- Selection + smooth scroll --- */
::selection { background: rgba(62, 100, 222, 0.18); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- Mobile nav: clean full-width dropdown --- */
@media (max-width: 768px) {
    .inside-header #site-navigation { width: 100%; flex: 1 1 100%; }
    #site-navigation .inside-navigation {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    /* The hamburger lives in the sticky header, but this nav panel is in GP's
       (non-sticky) header row that scrolls away — so opening the menu after
       scrolling put it off-screen. When toggled, pin it to the viewport just
       below the sticky header and above ALL page content, scrollable if tall. */
    #site-navigation.main-navigation.toggled {
        position: fixed;
        top: var(--cst-header-h, 76px);
        left: 0;
        right: 0;
        margin: 0;
        z-index: 1400;
        /* Solid background so no page content peeks through any sub-pixel gap
           between the pinned header and the menu panel. */
        background: var(--cst-color-white);
        max-height: calc(100vh - var(--cst-header-h, 76px));
        max-height: calc(100dvh - var(--cst-header-h, 76px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Kill the top border/margin on the panel's inner list so it butts flush
       against the header (GP adds a border-top that read as a gap). */
    #site-navigation.main-navigation.toggled .main-nav > ul {
        border-top: none;
    }
    #site-navigation .main-nav { width: 100%; }
    #site-navigation .main-nav > ul {
        width: 100%;
        background: var(--cst-color-white);
        box-shadow: var(--cst-shadow-lg);
        border-top: 1px solid var(--cst-color-gray-200);
    }
    #site-navigation .main-nav > ul > li {
        width: 100%;
        float: none;
        text-align: left;
        border-top: 1px solid var(--cst-color-gray-100);
    }
    #site-navigation .main-nav > ul > li:first-child { border-top: none; }
    #site-navigation .main-nav > ul > li > a {
        /* GeneratePress defaults mobile menu items to line-height:60px, which
           combined with 15px padding made every row ~90px tall (huge gaps).
           Tighten to a comfortable ~52px tap row. */
        padding: 14px 24px;
        line-height: 1.4;
        font-size: 1.05rem;
        font-weight: 600;
    }
    #site-navigation .main-nav > ul > li.current-menu-item > a {
        box-shadow: inset 4px 0 0 var(--cst-color-blue-primary);
        background: #F5F8FF;
    }
}

/* ==========================================================================
   Motion safety
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cst-pillar-card:hover,
    .cst-objective-card:hover,
    .cst-course-card:hover,
    .cst-institutional-footer .cst-social-links a:hover { transform: none; }
}

/* ==========================================================================
   Anchor offset — the sticky nav must not cover in-page jump targets
   (#temario, #registro, #proposito, #objetivos, #preguntas-frecuentes...)
   ========================================================================== */
:target { scroll-margin-top: 100px; }
#main-content,
.cst-section[id],
.cst-hero[id],
[id="temario"], [id="registro"], [id="proposito"], [id="objetivos"], [id="preguntas-frecuentes"] {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   Print — clean documents (legal pages, course), drop the chrome
   ========================================================================== */
@media print {
    #site-navigation,
    .cst-institutional-header,
    .cst-institutional-footer,
    .cst-back-to-top,
    .cst-hero__scroll-indicator,
    .cst-hero__overlay,
    .cst-hero__float,
    .cst-breadcrumbs,
    [class*="chatbot"],
    [id*="chatbot"] { display: none !important; }
    body, .cst-main, .cst-section { background: #fff !important; color: #000 !important; }
    .cst-hero { background: #fff !important; color: #000 !important; min-height: 0 !important; padding: 0 0 1rem !important; }
    .cst-hero__title, .cst-hero__subtitle, .cst-section-heading__title { color: #000 !important; -webkit-text-fill-color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    .cst-section { padding: 0.5rem 0 !important; }
}

/* ==========================================================================
   404 page
   ========================================================================== */
.cst-404 { max-width: 720px; margin-inline: auto; text-align: center; }
.cst-404__code { font-family: var(--cst-font-heading); font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; line-height: 0.9; color: var(--cst-color-blue-primary); opacity: 0.14; margin: 0 0 var(--cst-space-sm); }
.cst-404__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cstm-ink); margin: 0 0 var(--cst-space-sm); }
.cst-404__text { color: var(--cst-color-text-muted); margin: 0 auto var(--cst-space-xl); }
.cst-404__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--cst-space-2xl); }
.cst-404__search { max-width: 480px; margin-inline: auto; }
.cst-404__search input[type="search"] { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--cst-color-gray-300); border-radius: 10px; font-size: 1rem; }

/* ==========================================================================
   Fundación (Pencil parity) — header search + CTA, hero cleanup, shared bits
   Every subsequent page in the loop reuses these tokens/classes.
   ========================================================================== */
.cst-institutional-header__actions { display: flex; align-items: center; gap: 12px; }
.cst-header-search {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--cst-alpha-white-30); color: #fff;
    background: var(--cst-alpha-white-10); transition: var(--cst-transition);
}
.cst-header-search:hover { background: var(--cst-alpha-white-20); border-color: var(--cst-alpha-white-50); }
.cst-header-cta {
    display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px;
    background: var(--cst-color-blue-primary); color: #fff !important;
    font-family: var(--cst-font-body); font-weight: 700; font-size: 0.9rem;
    line-height: 1; text-decoration: none; white-space: nowrap; transition: var(--cst-transition);
}
.cst-header-cta:hover { background: var(--cst-color-blue-dark); }
/* The CTA yields before the nav does — "Curso" in the nav covers it. */
@media (max-width: 1120px) { .cst-header-cta { display: none; } }

/* Hero: cleaner cinematic look — drop the decorative floating circles on home */
.cst-hero--home .cst-hero__float { display: none; }

/* ==========================================================================
   Hero — exact value parity with Pencil (audited via getComputedStyle diff)
   ========================================================================== */
.cst-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    font-family: var(--cst-font-body); font-size: 12px; font-weight: 700;
    letter-spacing: 1px; color: #fff; margin: 0 0 26px;
}
.cst-hero__eyebrow-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--cst-color-blue-light); }
.cst-hero__title { letter-spacing: 0; margin-bottom: 26px; text-shadow: none; }
.cst-hero--home .cst-hero__title { font-size: clamp(2.25rem, 5vw, 3.625rem); }
.cst-hero--home .cst-hero__subtitle { font-size: 1.125rem; line-height: 1.55; color: #AEBBDA; max-width: 560px; margin-bottom: 32px; opacity: 1; }
.cst-hero__actions { margin-bottom: 0; }
.cst-btn--hero { border-radius: 10px; padding: 15px 26px; font-size: 1rem; font-weight: 700; gap: 9px; }
.cst-btn--outline-hero { border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.30); }
.cst-hero--home .cst-hero__badges { gap: 22px; margin-top: 46px; }
.cst-hero--home .cst-hero__badge { background: none; border: 0; padding: 0; border-radius: 0; gap: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cst-hero--home .cst-hero__badge-icon { color: var(--cst-color-blue-light); display: inline-flex; }
.cst-hero--home .cst-hero__badge-icon svg { width: 17px; height: 17px; display: block; }

/* Shared eyebrow + button classes used across every rebuilt interior page */
.cst-eyebrow { font-family: var(--cst-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cst-color-blue-primary); margin: 0 0 0.5rem; }
.cst-eyebrow--light { color: var(--cst-color-blue-light); }
.cst-cbtn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 10px; font-family: var(--cst-font-body); font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; transition: var(--cst-transition); }
.cst-cbtn svg { width: 18px; height: 18px; }
.cst-cbtn--primary { background: var(--cst-color-blue-dark); color: #fff; }
.cst-cbtn--primary:hover { background: var(--cst-color-navy); }
.cst-cbtn--light { background: #fff; color: var(--cst-color-blue-dark); }
.cst-cbtn--light:hover { background: #eef2fb; }
.cst-cbtn--outline { background: #fff; color: var(--cst-color-blue-dark); border: 1px solid var(--cst-color-gray-300); }
.cst-cbtn--outline:hover { border-color: var(--cst-color-blue-primary); color: var(--cst-color-blue-primary); }
.cst-main .cst-cta-banner { background: linear-gradient(120deg, var(--cst-color-blue-primary) 0%, var(--cst-color-blue-dark) 100%); }
.cst-cta-banner__inner { text-align: center; max-width: 820px; margin-inline: auto; }
.cst-cta-banner__title { font-family: var(--cst-font-heading); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: #fff; margin: 0 0 0.75rem; }
.cst-cta-banner__sub { color: #E6ECFB; font-size: 1.05rem; line-height: 1.6; margin: 0 auto 1.5rem; max-width: 640px; }
.cst-cta-banner__actions { display: flex; justify-content: center; gap: 14px; }
.cst-section-heading--center { text-align: center; max-width: 760px; margin-inline: auto; }
.cst-section-heading--center .cst-eyebrow { text-align: center; }

/* ==========================================================================
   "Tu camino seguro" — centered intro + 6-card feature grid
   (redesigned from Pencil's 1-card/6-row checklist per client request)
   ========================================================================== */
.cst-path-sec { background: var(--cst-color-surface-blue); border-top: 1px solid var(--cst-color-gray-300); border-bottom: 1px solid var(--cst-color-gray-300); }
.cst-path__head { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.cst-path__head .cst-eyebrow { justify-content: center; }
.cst-path__title { font-family: var(--cst-font-heading); font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; color: var(--cst-color-navy); margin: 0 0 1rem; }
.cst-path__intro { color: var(--cst-color-gray-700); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.5rem; }
.cst-path__head .cst-cbtn { margin-inline: auto; }

.cst-path__grid-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.cst-path__card {
    background: #fff;
    border: 1px solid var(--cst-color-gray-300);
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 2px 10px rgba(31, 46, 84, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cst-path__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(31, 46, 84, 0.1);
    border-color: var(--cst-color-blue-light);
}
.cst-path__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--cst-color-surface-blue);
    color: var(--cst-color-blue-primary);
    margin-bottom: 1rem;
}
.cst-path__card-title { font-family: var(--cst-font-heading); font-weight: 700; font-size: 1.05rem; color: var(--cst-color-navy); margin: 0 0 0.5rem; }
.cst-path__card-desc { color: var(--cst-color-gray-700); font-size: 0.9rem; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
    .cst-path__grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cst-path__grid-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .cst-path__card { transition: none; }
}

/* ==========================================================================
   Stats-highlight icon tile (Pencil parity: solid blue tile, all 4 same)
   ========================================================================== */
.cst-stats-heading { margin-bottom: 44px; }
.cst-section--stats-dark .cst-stat-card__icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--cst-color-blue-primary); margin-bottom: 4px; }
.cst-section--stats-dark .cst-stat-card__icon-tile .cst-stat-card__icon { background: none; width: auto; height: auto; color: #fff; font-size: 22px; }
.cst-section--stats-dark .cst-stat-card::before { display: none; }

/* ==========================================================================
   Enrollment CTA — pill eyebrow + two buttons (Pencil parity, node IXL47)
   ========================================================================== */
.cst-enrollment-cta__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: rgba(255,255,255,0.15); color: #fff; font-family: var(--cst-font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; margin-bottom: 18px; }
.cst-enrollment-cta__actions { display: flex; justify-content: center; gap: 14px; }
.cst-enrollment-cta__btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 10px; font-family: var(--cst-font-body); font-weight: 700; font-size: 1rem; text-decoration: none; transition: var(--cst-transition); }
.cst-enrollment-cta__btn--primary { background: #fff; color: var(--cst-color-blue-dark); }
.cst-enrollment-cta__btn--primary:hover { background: #eef2fb; }
.cst-enrollment-cta__btn--secondary { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.40); }
.cst-enrollment-cta__btn--secondary:hover { background: rgba(255,255,255,0.18); }

/* ==========================================================================
   Institutional header — WHITE background (Pencil parity, node KWSXL).
   The pre-existing site had this as a dark navy header; every rule below
   overrides that assumption. Do not re-introduce navy/white-text here.
   ========================================================================== */
.cst-institutional-header,
.cst-institutional-header.is-scrolled {
    background-color: #fff;
    border-bottom: 1px solid var(--cst-color-gray-300);
}
.cst-institutional-header__titles {
    flex: none;
    align-items: flex-start;
    text-align: left;
    gap: 1px;
}
.cst-institutional-header__org {
    font-family: var(--cst-font-heading);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cst-color-navy);
    /* Agency name on ONE line (per client). Slightly smaller so the full
       name + nav + actions still fit the 1200px row; wraps only on phones. */
    white-space: nowrap;
}
.cst-institutional-header__portal-name,
.cst-institutional-header.is-scrolled .cst-institutional-header__portal-name {
    font-family: var(--cst-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--cst-color-blue-primary);
    text-transform: none;
    letter-spacing: normal;
}
/* Header actions — one cohesive control family: search, EN/ES toggle and
   the (mobile-docked) hamburger all share 44px squares, 10px radius and the
   same border, instead of the old circle/square/tile mismatch. */
.cst-header-search {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--cst-color-gray-300);
    color: var(--cst-color-gray-700);
}
.cst-header-search:hover { background: var(--cst-color-gray-100); border-color: var(--cst-color-gray-400); }
.cst-lang-switcher__list li a {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
}
.cst-institutional-header__actions .menu-toggle,
.cst-institutional-header__actions .menu-toggle:hover,
.cst-institutional-header__actions .menu-toggle:focus {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--cst-color-gray-300);
    background: #fff;
    color: var(--cst-color-gray-700);
}
.cst-institutional-header__actions .menu-toggle:hover { background: var(--cst-color-gray-100); border-color: var(--cst-color-gray-400); }
.cst-institutional-header__actions #mobile-menu-control-wrapper { background: transparent; }

/* Compact phone header: at ≤600px the full agency name + three 44px
   controls exceed the row (~490px needed), so the actions were painting
   on top of the title. Shrink the identity block (buttons stay 44px for
   touch targets) and drop the search shortcut on the narrowest phones. */
@media (max-width: 600px) {
    .cst-institutional-header__inner { gap: 8px; }
    .cst-institutional-header__branding { gap: 10px; }
    .cst-institutional-header__seal { width: 40px; height: 40px; }
    .cst-institutional-header__org { font-size: 13.5px; line-height: 1.25; max-width: none; white-space: normal; }
    /* Let the identity block use the space up to the EN toggle instead of
       wrapping tiny at 17ch (client: name looked too small on phones). */
    .cst-institutional-header__titles { flex: 1 1 auto; min-width: 0; }
    .cst-institutional-header__portal-name { font-size: 11px; }
    .cst-institutional-header__actions { gap: 6px; }
}
@media (max-width: 374px) {
    .cst-header-search { display: none; }
}
/* Single-button toggle (target language only — hide_current:true) reads
   as a clear action, so it gets the same solid-blue treatment the old
   "current" pill used, rather than the old two-state active/inactive look. */
/* Ghost/outline treatment so the EN·ES toggle reads as a utility control,
   clearly distinct from the solid-blue "Empezar el curso" CTA beside it
   (they were both solid blue = confusing per client). */
.cst-lang-switcher__list li a {
    background-color: #fff;
    border-color: var(--cst-color-gray-300);
    color: var(--cst-color-blue-dark);
    font-weight: 700;
}
.cst-lang-switcher__list li a:hover,
.cst-lang-switcher__list li a:focus-visible {
    background-color: var(--cst-color-gray-100);
    border-color: var(--cst-color-blue-primary);
    color: var(--cst-color-blue-dark);
}

/* ==========================================================================
   Section transitions — clean, professional dividers
   Replaces the old low-contrast wavy SVGs that read as a "torn/cut" seam.
   Per client (screenshots): (a) clear distinction between adjacent sections,
   (b) a slightly more colorful divider, (c) fully professional, (d) static
   so paint stays fast. Reversible: delete this block to restore the waves.
   ========================================================================== */

/* 1. Retire the "cut" wavy dividers. */
.cst-hero__wave { display: none; }
.cst-section--objectives::after,
.cst-section--events::after,
.cst-section--stats::after { display: none; }

/* 2. Clearer alternating backgrounds so neighbours never read as one block.
   Explicit per-section (nth-child is unreliable across the mixed markup). */
.cst-section--objectives,
.cst-section--faq {
    background: #EDF2FC; /* light brand-blue tint, clearly distinct from white */
}
.cst-section--pillars,
.cst-path-sec {
    background: #ffffff;
}

/* 3. The divider itself: a crisp brand-gradient rule across the top of each
   major content section — one colored bar per boundary. */
.cst-section--pillars,
.cst-section--objectives,
.cst-path-sec,
.cst-section--faq,
.cst-section--course-cards {
    position: relative;
}
.cst-section--pillars::before,
.cst-section--objectives::before,
.cst-path-sec::before,
.cst-section--faq::before,
.cst-section--course-cards::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cst-color-blue-primary), var(--cst-color-blue-light));
    z-index: 2;
}

/* ==========================================================================
   MOBILE polish (client screenshots): the home hero read as oversized,
   left-jammed against the edge; centre it, shrink it, give it breathing
   room. Also centre the hamburger glyph. ≤640px only — desktop unchanged.
   ========================================================================== */
@media (max-width: 640px) {
    /* Hero content: centred, padded, not full-bleed */
    .cst-hero .cst-container { padding-inline: 22px; }
    .cst-hero__layout { align-items: center; }
    .cst-hero--home .cst-hero__content {
        text-align: center;
        margin-inline: auto;
        max-width: 100%;
    }
    .cst-hero--home .cst-hero__eyebrow,
    .cst-hero--home .cst-hero__actions,
    .cst-hero--home .cst-hero__badges {
        justify-content: center;
    }
    .cst-hero--home .cst-hero__subtitle { margin-inline: auto; }

    /* Smaller, tighter hero type on phones */
    .cst-hero--home .cst-hero__title { font-size: clamp(1.85rem, 8.5vw, 2.35rem); line-height: 1.08; }
    .cst-hero--home .cst-hero__subtitle { font-size: 1rem; line-height: 1.5; }

    /* Stack the two hero buttons full-width but inside the padding, centred */
    .cst-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
    .cst-hero__actions .cst-btn { width: 100%; justify-content: center; }

    /* Trust badges wrap centred instead of a cramped left row */
    .cst-hero--home .cst-hero__badges { flex-wrap: wrap; gap: 14px 22px; }
}

/* Hamburger glyph: centre the icon/lines inside the 44px control. */
.cst-institutional-header__actions .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cst-institutional-header__actions .menu-toggle .gp-icon,
.cst-institutional-header__actions .menu-toggle svg {
    margin: 0 auto;
}

/* ==========================================================================
   Interior page heroes — photographic backdrop (client: "que no sea solo un
   color, que tenga una imagen como la motora o un background").
   The motorcycle photo sits under a strong navy overlay so it reads as a
   professional textured backdrop and white text stays WCAG-legible.
   Applies to Curso / Recursos / Estadísticas / Sobre Nosotros / Contacto /
   Legal / 404 heroes (all use --page/--course/--slim/--legal).
   ========================================================================== */
.cst-hero--page,
.cst-hero--course,
.cst-hero--slim,
.cst-hero--legal {
    background-image: url("../images/hero-motoras.webp");
    background-size: cover;
    background-position: center 32%;
}
.cst-hero--page .cst-hero__overlay,
.cst-hero--course .cst-hero__overlay,
.cst-hero--slim .cst-hero__overlay,
.cst-hero--legal .cst-hero__overlay {
    background: linear-gradient(90deg,
        rgba(23, 35, 64, 0.95) 0%,
        rgba(23, 35, 64, 0.86) 55%,
        rgba(31, 46, 84, 0.74) 100%);
}

/* "Sobre la Comisión" — cinematic dusk coastal ride (a single geared rider on
   a PR coastal road at sunset). Distinct from the green mountain photo used in
   the mission card right below, so the page shows two different scenic shots
   rather than the same image twice. Softer navy overlay lets the sunset read
   through while white text stays WCAG-legible. */
.cst-hero--about {
    background-image: url("../images/hero-pencil.webp");
    background-position: center 38%;
}
.cst-hero--about .cst-hero__overlay {
    background: linear-gradient(90deg,
        rgba(23, 35, 64, 0.86) 0%,
        rgba(23, 35, 64, 0.70) 52%,
        rgba(31, 46, 84, 0.50) 100%);
}