/*
Theme Name: Blendex New
Theme URI: https://idiomasblendex.edu.co
Author: Educativa Blendex SAS
Author URI: https://idiomasblendex.edu.co
Description: Tema oficial Centro de Idiomas Blendex — diseño moderno y responsivo con soporte desktop y mobile.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: blendex-new
Tags: education, language, custom-theme, responsive
*/

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */

:root {
    --text-sm: 15px;
    --text-min: 15px;

    /* Paleta azul Blendex */
    --color-azul-900: #0B2A4A;
    --color-azul-700: #1565C0;
    --color-azul-500: #2F8CFF;
    --color-azul-300: #6FA8E0;
    --color-azul-100: #DCEBFB;
    --color-azul-50: #F4F9FF;
    --color-texto-principal: #14213D;
    --color-texto-secundario: #2C3746;
    /* Placeholder: aclarado sobre --color-texto-secundario (40% + 20%) */
    --color-placeholder: #999FA6;
    --color-texto-sobre-oscuro: #F4F9FF;
    --color-disabled: #A9BBD1;
    --color-whatsapp: #25d366;
    --color-error: #c00;
    --shadow-azul: 0 4px 16px rgba(11, 42, 74, 0.08);
    --shadow-azul-hover: 0 8px 28px rgba(11, 42, 74, 0.14);
    --shadow-btn: 0 6px 18px rgba(21, 101, 192, 0.35);
    --grad-page: linear-gradient(135deg, var(--color-azul-50) 0%, var(--color-azul-100) 55%, #E4EEFC 100%);
    --grad-section: linear-gradient(160deg, var(--color-azul-50) 0%, #E8F2FC 45%, var(--color-azul-100) 100%);
    --grad-hero-overlay: linear-gradient(135deg, rgba(11, 42, 74, 0.72) 0%, rgba(21, 101, 192, 0.45) 55%, rgba(47, 140, 255, 0.28) 100%);
    --c-card-accent: var(--color-azul-700);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
}

body {
    background: var(--grad-page);
    min-height: 100vh;
    color: var(--color-texto-principal);
    font-size: var(--text-min, 15px);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: 'Outfit', sans-serif;
}

/* ═══════════════════════════════════════════
   GLOBAL — PALETA AZUL / ACCESIBILIDAD
═══════════════════════════════════════════ */

::selection {
    background: var(--color-azul-500);
    color: var(--color-texto-sobre-oscuro);
}

a:not([class]) {
    color: var(--color-azul-700);
    transition: color 0.2s ease;
}

a:not([class]):visited {
    color: var(--color-azul-700);
}

a:not([class]):hover {
    color: var(--color-azul-500);
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--color-azul-500);
    outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.student-label,
.pg-title,
.req-title,
.est-title,
.faq-title {
    color: var(--color-azul-900);
}

.hero-title,
.hero h1,
.site-footer h3,
.site-footer h4,
.ft-col-title {
    color: var(--color-texto-sobre-oscuro);
}

.hero-title-gradient {
    background: none;
    color: var(--site-hero-title, var(--color-azul-900));
    -webkit-text-fill-color: var(--site-hero-title, var(--color-azul-900));
}

.quick-icon-img,
.sc-row-icon,
.est-benefit-icon img,
.est-icon-img,
.est-card-icon-img,
.pg-icon-img,
img[src*="/themes/blendex-new/icons/"]:not(.site-logo-img) {
    filter: url(#blendex-site-icon-recolor);
}

.quick-icon svg,
.sc-row-left svg {
    stroke: var(--site-icon, var(--color-azul-500));
    color: var(--site-icon, var(--color-azul-500));
}

.c-dot:not(.c-dot--promo):not(.c-dot--status) {
    background: var(--c-card-accent, var(--color-azul-500));
}

.c-dot--promo {
    background: var(--c-card-accent, var(--color-azul-500));
}

.c-dot--status {
    background: var(--c-card-accent, var(--color-disabled));
}



/* ═══════════════════════════════════════════
   TOPNAV — DESKTOP
═══════════════════════════════════════════ */

.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-azul-50);
    border-bottom: 1px solid var(--color-azul-100);
    display: flex;
    align-items: center;
    padding: 0 40px;
    height: 64px;
    gap: 24px;
}

.site-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.site-logo,
.logo {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-texto-principal);
    letter-spacing: -0.5px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    display: flex;
    align-items: center;
}

.logo-play-btn {
    flex-shrink: 0;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11, 42, 74, 0.12);
    color: var(--color-texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
}

.logo-play-btn:hover {
    background: var(--color-azul-100);
}

.logo-play-btn.is-playing {
    background: var(--color-azul-100);
}

.site-logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

/* El fallback SVG del logo arranca oculto y solo WebKit lo revela: sin esta regla
   el display:block de arriba le ganaría en especificidad al [hidden] del navegador. */
.site-logo-img[hidden] {
    display: none;
}

.site-logo span,
.logo span {
    color: var(--color-azul-700);
}

/* Nav tabs wrapper */

.nav-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    justify-content: center;
}

.nav-tabs ul,
.nav-tabs-list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* Generic tab link/button styles */

.nav-tab,
.nav-tabs-list li>a {
    border-radius: 999px;
    padding: 8px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid transparent;
    display: inline-block;
    text-decoration: none;
    line-height: 1.4;
}

/* Tab states — desktop */

.nav-tab.active-light,
.nav-tab.active-dark {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border-color: var(--color-azul-700);
    box-shadow: 0 0 0 2px rgba(21, 101, 192, .2);
}

.nav-tab.inactive-light,
.nav-tab.inactive-dark {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--color-disabled);
    box-shadow: none;
}

.nav-tab:hover,
.nav-tabs-list li>a:hover {
    background: var(--color-azul-100);
    color: var(--color-azul-500);
    border-color: var(--color-azul-500);
    box-shadow: none;
}

.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1;
}

/* ═══════════════════════════════════════════
   SEARCH PILL — DESKTOP
═══════════════════════════════════════════ */

.search-pill {
    background: var(--color-azul-900);
    color: var(--color-azul-300);
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-pill:hover {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

.search-pill svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

.nav-search-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 14px;
    box-shadow: var(--shadow-azul-hover);
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-search-drop.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.ns-input-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-azul-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ns-input-row svg {
    width: 13px;
    height: 13px;
    stroke: var(--color-azul-700);
    fill: none;
    flex-shrink: 0;
}

.ns-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
    width: 100%;
    background: transparent !important;
    padding: 0 !important;
}

.ns-input:focus,
.ns-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ns-input::placeholder {
    color: var(--color-texto-secundario);
}

.ns-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-azul-700);
    padding: 8px 12px 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ns-results {
    max-height: min(60vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ns-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
    transition: background 0.15s;
    text-decoration: none;
}

.ns-item:hover {
    background: var(--color-azul-100);
}

.ns-item svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-azul-700);
    fill: none;
    flex-shrink: 0;
}

.ns-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ns-item-title {
    font-weight: 500;
    line-height: 1.25;
}

.ns-item-excerpt {
    display: none;
}

.ns-empty {
    padding: 12px;
    font-size: 14px;
    color: var(--color-texto-secundario);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════
   PAGE SYSTEM (single-page mode in custom blocks)
═══════════════════════════════════════════ */

.bx-page {
    display: none;
}

.bx-page.active {
    display: block;
}

/* ═══════════════════════════════════════════
   HOME PROMO BANNER
═══════════════════════════════════════════ */

.home-promo-banner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px 0;
}

.home-promo-banner__link {
    display: block;
    border-radius: 24px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 8px 24px rgba(11, 42, 74, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-promo-banner__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11, 42, 74, 0.16);
}

.home-promo-banner__link:focus-visible {
    outline: 2px solid var(--color-azul-500);
    outline-offset: 3px;
}

.home-promo-banner__img {
    display: block;
    width: 100%;
    height: auto;
}

.home-promo-banner + .hero-wrap {
    min-height: 380px;
}

.home-promo-banner + .hero-wrap .hero-content {
    padding-top: 40px;
}

/* ═══════════════════════════════════════════
   HERO — DESKTOP
═══════════════════════════════════════════ */

.hero-wrap {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* .hero-bg {
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600') center / cover no-repeat;
}

*/

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-bg::after {
    content: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 80px 40px;
    max-width: 820px;
}

.hero-headline {
    margin-bottom: 32px;
}

.hero-headline__line {
    display: block;
    font-size: clamp(48px, 5.2vw, 72px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--site-hero-title, var(--color-azul-900));
}

.hero-search {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-search-bar {
    background: var(--site-search-bar-bg, var(--color-azul-900));
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 10px 10px 10px 22px;
    gap: 10px;
    cursor: pointer;
    transition: box-shadow 0.2s, opacity 0.22s ease, transform 0.22s ease;
    min-width: 400px;
    max-width: 100%;
    box-shadow: var(--shadow-azul);
}

.hero-search.is-open .hero-search-bar {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.hero-search-bar:hover {
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.3);
}

.hero-search-bar span {
    color: var(--site-search-bar-text, var(--color-azul-300));
    font-size: 15px;
    font-weight: 400;
    flex: 1;
    text-align: left;
}

.hero-search-icon {
    width: 38px;
    height: 38px;
    background: var(--site-search-icon, var(--color-azul-700));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-typing-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: var(--site-search-bar-text, var(--color-azul-300));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.hero-typing-btn:hover,
.hero-typing-btn.is-playing {
    background: rgba(255, 255, 255, 0.28);
}

.hero-search-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--site-search-icon-on-btn, var(--color-texto-sobre-oscuro));
    fill: none;
}

.hero-suggs {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.hero-sugg {
    background: var(--site-hero-sugg-bg, var(--color-azul-100));
    border: 1px solid var(--site-hero-sugg-border, var(--color-azul-300));
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--site-hero-sugg-text, var(--color-azul-700));
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

.hero-sugg:hover {
    background: var(--site-hero-sugg-hover-bg, var(--color-azul-500));
    border-color: var(--site-hero-sugg-hover-border, var(--color-azul-500));
    color: var(--site-hero-sugg-hover-text, var(--color-texto-sobre-oscuro));
}

.hero-expanded {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

.hero-expanded.open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-expanded>.hero-exp-box {
    min-height: 0;
    overflow: hidden;
}

.hero-exp-box {
    background: var(--site-search-drop-bg, var(--color-azul-50));
    border: 1px solid var(--site-search-drop-border, var(--color-azul-100));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-azul-hover);
    text-align: left;
}

.hero-exp-row {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-azul-100);
}

.hero-exp-row svg {
    width: 13px;
    height: 13px;
    stroke: var(--site-search-icon, var(--color-azul-700));
    fill: none;
    flex-shrink: 0;
}

#heroInput {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
    width: 100%;
    background: transparent !important;
    font-family: inherit;
    padding: 0 !important;
}

#heroInput:focus,
#heroInput:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#heroInput::placeholder {
    color: var(--color-texto-secundario);
}

.hero-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-texto-secundario);
    padding: 4px;
    flex-shrink: 0;
}

.hero-close:hover {
    color: var(--color-texto-principal);
}

/* ═══════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════ */

.section-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
}

.section-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 20px;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.section-title-row .section-title {
    margin-bottom: 0;
}

a.section-title:hover {
    color: var(--color-azul-700);
}

.carousel-play-btn {
    flex-shrink: 0;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11, 42, 74, 0.12);
    color: var(--color-texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
}

.carousel-play-btn:hover {
    background: var(--color-azul-50);
}

.carousel-play-btn.is-playing {
    background: var(--color-azul-100);
}

/* ═══════════════════════════════════════════
   COURSE CARDS — DESKTOP
═══════════════════════════════════════════ */

.courses-carousel {
    position: relative;
    padding: 0 20px;
    overflow: visible;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11, 42, 74, 0.12);
    color: var(--color-texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
}

.carousel-btn:hover {
    background: var(--color-azul-50);
}

.carousel-btn--prev {
    left: 0px;
}

.carousel-btn--next {
    right: 0px;
}

.courses-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    /*
     * overflow-x fuerza clipping también en Y; el glow de hover (box-shadow blur ~28px + lift)
     * necesita aire en el padding para no verse cortado en /, v2–v5.
     */
    padding: 34px 30px 40px;
    margin: -26px -14px -24px;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.courses-grid::-webkit-scrollbar {
    display: none;
}

.c-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-azul-100);
    background: var(--color-azul-50);
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 220px;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
}

.c-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-card-accent, var(--color-azul-500));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--c-card-accent, var(--color-azul-500)) 22%, transparent);
}

.c-card-color {
    width: 100%;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-card-color:not(.c-card-color--image) {
    background: linear-gradient(134deg,
            var(--c-card-grad-from, #0B2A4A) 0%,
            var(--c-card-grad-to, var(--c-card-accent, var(--color-azul-700))) 100%);
}

.c-card-color--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.c-card-color--vr {
    background-position: center 34%;
}

.c-card-color--3d {
    background-position: center 42%;
}

/* Home V4: franja de color (~15px) en lugar del bloque de fondo */
.home-color-line .c-card-color:not(.c-card-color--image) {
    height: 15px;
    min-height: 15px;
}

/* Home con fotos de programa (v3/v5: set original) */
.home-bg-images .courses-grid .c-card-color {
    background-color: transparent !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.home-bg-images .courses-grid .c-card.prog-palette-ingles-mediodia .c-card-color {
    background-image: url('images/programas/ingles-mediodia-v2.jpg') !important;
    background-size: 100% auto !important;
    background-position: center center !important;
}

.home-bg-images .courses-grid .c-card.prog-palette-ingles-presencial .c-card-color {
    background-image: url('images/programas/ingles-presencial-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images .prog-palette-ingles-nivel-b2 .c-card-color {
    background-image: url('images/programas/ingles-nivel-b2-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images .prog-palette-ingles-nivel-c1 .c-card-color {
    background-image: url('images/programas/ingles-nivel-c1-v4.jpg') !important;
    background-size: 100% auto !important;
    background-position: center center !important;
}

.home-bg-images .prog-palette-ingles-basico .c-card-color {
    background-image: url('images/programas/ingles-basico-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images .courses-grid .c-card.prog-palette-ingles-intermedio .c-card-color {
    background-image: url('images/programas/ingles-intermedio-v2.jpg') !important;
    background-size: 145% auto !important;
    background-position: 15% 20% !important;
}

.home-bg-images .prog-palette-frances .c-card-color {
    background-image: url('images/programas/frances-v2.jpg') !important;
    background-size: 100% auto !important;
    background-position: center center !important;
}

.home-bg-images .prog-palette-italiano .c-card-color {
    background-image: url('images/programas/italiano-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images .prog-palette-programas .c-card-color {
    background-image: url('images/programas/programas.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* / y home-v2: set nuevo (v6) */
.home-bg-images-v6 .courses-grid .c-card.prog-palette-ingles-mediodia .c-card-color {
    background-image: url('images/programas/ingles-mediodia-v6.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 42% !important;
}

.home-bg-images-v6 .courses-grid .c-card.prog-palette-ingles-presencial .c-card-color {
    background-image: url('images/programas/ingles-presencial-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images-v6 .courses-grid .c-card.prog-palette-ingles-sabatino .c-card-color {
    background-image: url('images/programas/ingles-sabatino-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images-v6 .prog-palette-ingles-nivel-b2 .c-card-color {
    background-image: url('images/programas/ingles-nivel-b2-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images-v6 .prog-palette-ingles-nivel-c1 .c-card-color {
    background-image: url('images/programas/ingles-nivel-c1-v6.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 45% !important;
}

.home-bg-images-v6 .prog-palette-ingles-basico .c-card-color {
    background-image: url('images/programas/ingles-basico-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

.home-bg-images-v6 .courses-grid .c-card.prog-palette-ingles-intermedio .c-card-color {
    background-image: url('images/programas/ingles-intermedio-v6.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 48% !important;
}

.home-bg-images-v6 .prog-palette-frances .c-card-color {
    background-image: url('images/programas/frances-v6.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 36% !important;
}

.home-bg-images-v6 .prog-palette-italiano .c-card-color {
    background-image: url('images/programas/italiano-v7.jpg') !important;
    background-size: 100% auto !important;
    background-position: center 40% !important;
}

/* Programas: mismas fotos del home (set v6) */
.pg-bg-images .pg-card-color {
    background-color: transparent !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    height: 100px;
}

.pg-bg-images .pg-card.prog-palette-ingles-mediodia .pg-card-color {
    background-image: url('images/programas/ingles-mediodia-v6.jpg') !important;
    background-position: center 42% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-presencial .pg-card-color {
    background-image: url('images/programas/ingles-presencial-v7.jpg') !important;
    background-position: center 40% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-sabatino .pg-card-color {
    background-image: url('images/programas/ingles-sabatino-v7.jpg') !important;
    background-position: center 40% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-nivel-b2 .pg-card-color {
    background-image: url('images/programas/ingles-nivel-b2-v7.jpg') !important;
    background-position: center 40% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-nivel-c1 .pg-card-color {
    background-image: url('images/programas/ingles-nivel-c1-v6.jpg') !important;
    background-position: center 45% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-basico .pg-card-color {
    background-image: url('images/programas/ingles-basico-v7.jpg') !important;
    background-position: center 40% !important;
}

.pg-bg-images .pg-card.prog-palette-ingles-intermedio .pg-card-color {
    background-image: url('images/programas/ingles-intermedio-v6.jpg') !important;
    background-position: center 48% !important;
}

.pg-bg-images .pg-card.prog-palette-frances .pg-card-color {
    background-image: url('images/programas/frances-v6.jpg') !important;
    background-position: center 36% !important;
}

.pg-bg-images .pg-card.prog-palette-italiano .pg-card-color {
    background-image: url('images/programas/italiano-v7.jpg') !important;
    background-position: center 40% !important;
}

/* Home V2/V3: cuerpo al 25% del acento; textos del mismo acento al 100% */
.home-accent-cards .courses-grid .c-card {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 25%, transparent) !important;
    border: 1px solid transparent !important;
    color: var(--c-card-accent, var(--color-azul-700)) !important;
}

.home-accent-cards .courses-grid .c-card:hover {
    border-color: var(--c-card-accent, var(--color-azul-700)) !important;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 22%, transparent) !important;
}

.home-accent-cards .courses-grid .c-card .c-card-title .ct-top,
.home-accent-cards .courses-grid .c-card .c-card-title .ct-bot,
.home-accent-cards .courses-grid .c-card .c-meta,
.home-accent-cards .courses-grid .c-card .c-meta-item,
.home-accent-cards .courses-grid .c-card .c-meta-note {
    color: var(--c-card-accent, var(--color-azul-700)) !important;
    opacity: 1 !important;
}

.home-accent-cards .courses-grid .c-card .c-dot {
    background: var(--c-card-accent, var(--color-azul-700)) !important;
    opacity: 1 !important;
}

.home-accent-cards .courses-grid .c-card .c-more-btn,
.home-accent-cards .courses-grid .c-card button.c-more-btn {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 18%, transparent) !important;
    color: var(--c-card-accent, var(--color-azul-700)) !important;
    border: 1px solid color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 35%, transparent) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.home-accent-cards .courses-grid .c-card .c-more-btn:hover,
.home-accent-cards .courses-grid .c-card button.c-more-btn:hover {
    background: var(--c-card-accent, var(--color-azul-700)) !important;
    color: #fff !important;
    border-color: var(--c-card-accent, var(--color-azul-700)) !important;
    filter: none !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

.home-accent-cards .courses-grid .c-card .c-more-btn:disabled,
.home-accent-cards .courses-grid .c-card button.c-more-btn:disabled {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 10%, transparent) !important;
    color: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 55%, transparent) !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.c-card-body {
    padding: 16px;
}

.c-card-title {
    line-height: 1.2;
    margin-bottom: 10px;
}

.c-card-title .ct-top {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-texto-principal);
}

.c-card-title .ct-bot {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--c-card-accent);
    line-height: 1.15;
}

.c-card-title .ct-bot.green {
    color: var(--c-card-accent);
}

.c-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 14px;
}

.c-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
}

.c-dot {
    width: 5px;
    height: 5px;
    background: var(--c-card-accent, var(--color-azul-700));
    border-radius: 50%;
    flex-shrink: 0;
}

.c-dot--status {
    background: var(--c-card-accent, var(--color-azul-500));
}

.c-more-btn {
    background: var(--c-card-accent, var(--color-azul-700));
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, filter 0.2s;
}

.c-more-btn:hover {
    background: var(--c-card-accent, var(--color-azul-700));
    color: var(--color-texto-sobre-oscuro);
    filter: brightness(1.12);
}

.c-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════
   STUDENT SECTION — DESKTOP
═══════════════════════════════════════════ */

.student-section {
    background: var(--color-azul-50);
    border-top: 1px solid var(--color-azul-100);
    border-bottom: 1px solid var(--color-azul-100);
}

.student-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.student-label {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 20px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.quick-item {
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 12px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-item:hover {
    background: var(--color-azul-100);
    border-color: var(--color-azul-300);
}

.quick-icon {
    width: 60px;
    height: 60px;
    background: var(--color-azul-50);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-azul-100);
}

.quick-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--site-icon, var(--color-azul-900));
    fill: none;
    stroke-width: 1.3px;
}

.quick-icon:has(.quick-icon-img) {
    width: 80px;
    height: 80px;
    background: transparent;
    border: none;
}

.quick-icon-img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.quick-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
    text-align: center;
    line-height: 1.3;
}

a.quick-item {
    text-decoration: none;
}

.student-card {
    border-radius: 14px;
    border: 1px solid var(--color-azul-100);
    overflow: hidden;
    background: var(--color-azul-50);
}

.sc-header {
    background: var(--site-student-header-bg, var(--color-azul-900));
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sc-icon {
    width: 36px;
    height: 36px;
    background: var(--site-student-icon-bg, var(--color-azul-700));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-icon svg {
    width: 19px;
    height: 19px;
    stroke: var(--site-student-icon, var(--color-texto-sobre-oscuro));
    fill: none;
}

.sc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--site-student-header-text, var(--color-texto-sobre-oscuro));
}

.sc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--color-azul-100);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

a.sc-row {
    color: inherit;
}

.sc-row:hover {
    background: var(--color-azul-50);
}

.sc-row:last-child {
    border-bottom: none;
}

.sc-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-dot {
    width: 5px;
    height: 5px;
    background: var(--color-azul-700);
    border-radius: 50%;
}

.sc-row-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    stroke-width: 1.3px;
}

.sc-arr {
    font-size: 16px;
    color: var(--color-disabled);
}

/* ═══════════════════════════════════════════
   EXPERIENCE GRID
═══════════════════════════════════════════ */

.exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ═══════════════════════════════════════════
   CERT STRIP
═══════════════════════════════════════════ */

.cert-strip {
    background: var(--color-azul-900);
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 36px 40px;
    flex-wrap: wrap;
}

.cert-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-circle svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* ═══════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════ */

.contact-section {
    background: var(--color-azul-900);
    padding: 48px 0 0;
}

.contact-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 40px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    line-height: 2.4;
}

.contact-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 2.4em;
}

.contact-info-row span {
    font-size: 15px;
    line-height: 1;
}

.contact-info-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.cf-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.cf-field {
    flex: 1;
}

/* separacion entre campos sueltos (correo, mensaje); las .cf-row ya la traen */
.contact-form-wrap > .cf-field + .cf-field {
    margin-top: 16px;
}

.cf-req {
    color: var(--color-azul-300);
    margin-left: 2px;
}

.cf-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-sobre-oscuro);
    display: block;
    margin-bottom: 4px;
}

.cf-field input,
.cf-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-texto-sobre-oscuro);
    font-size: 15px;
    font-weight: 400;
    padding: 6px 0;
    outline: none;
    font-family: 'Outfit', sans-serif;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.cf-field textarea {
    resize: none;
    min-height: 44px;
    max-height: 220px;
    overflow-y: hidden;
    line-height: 1.5;
}

/* campo trampa antispam: fuera de la vista y del recorrido de tabulación */
.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.cf-send {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
}

.cf-privacy {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}

.cf-privacy a {
    color: var(--color-texto-sobre-oscuro);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cf-privacy a:hover {
    color: var(--color-azul-100);
}

.cf-btn {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s;
}

.cf-btn:hover {
    background: var(--color-azul-500);
}

/* ═══════════════════════════════════════════
   FOOTER BAR
═══════════════════════════════════════════ */

.footer-bar {
    background: var(--color-azul-900);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 0 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.f-col-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-azul-300);
    margin-bottom: 8px;
}

.f-item,
.footer-col .menu a,
.footer-col ul li a {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-azul-300);
    display: block;
    margin-bottom: 4px;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.f-item:hover,
.footer-col .menu a:hover,
.footer-col ul li a:hover {
    color: var(--color-azul-500);
}

.footer-col .menu,
.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col .menu li,
.footer-col ul li {
    margin: 0;
}

/* ═══════════════════════════════════════════
   FOOTER LEGAL — sellos y licencias
═══════════════════════════════════════════ */

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.calidad {
    flex: 0 0 50%;
    align-self: center;
    min-height: 100px;
    background: url(https://idiomasblendex.edu.co/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2025/09/Sellos-de-calidad-2025.png.webp) center center / 60% auto no-repeat;
}

.licencias {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    text-align: justify;
}

.licencias p {
    margin: 0 0 0.4em;
}

.licencias span {
    display: block;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════
   SOCIAL BAR
═══════════════════════════════════════════ */

.social-bar {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 16px;
    background: var(--site-footer-bg, var(--color-azul-900));
}

.si {
    width: 22px;
    height: 22px;
    fill: var(--site-footer-social, rgba(255, 255, 255, 0.65));
    cursor: pointer;
    transition: fill 0.2s;
}

.si:hover {
    fill: var(--site-footer-social-hover, var(--color-azul-700));
}

/* ═══════════════════════════════════════════
   PROGRAMAS PAGE
═══════════════════════════════════════════ */

.pg-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
}

.pg-back {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-azul-700);
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
}

.pg-back svg {
    width: 15px;
    height: 15px;
    stroke: var(--color-azul-700);
    fill: none;
}

/* Titulo de pagina, al mismo tono que el hero de Jobs. */
.pg-h {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-azul-700);
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 32px;
    text-align: center;
    text-wrap: balance;
}

.pg-filter-card {
    background: var(--color-azul-50);
    border-radius: 16px;
    border: 1px solid var(--color-azul-100);
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    padding: 20px 24px;
    margin-bottom: 20px;
}

#pgFilterStep {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

#pgFilterStep .pg-filter-step-head {
    justify-content: center;
}

#pgFilterStep .pg-filter-btns {
    justify-content: center;
}

#pgFilterStep .pg-filter-hint {
    text-align: center;
}

.pg-filter-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    min-height: 22px;
}

.pg-filter-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 0;
}

.pg-filter-clear {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--color-azul-700);
    cursor: pointer;
    transition: color 0.2s;
}

.pg-filter-clear:hover {
    color: var(--color-texto-principal);
}

.pg-filter-clear[hidden] {
    display: none !important;
}

/* Ultimo paso ya elegido: el nivel sube al titulo y la card se compacta. */
.pg-filter-card.is-collapsed {
    padding-top: 14px;
    padding-bottom: 14px;
}

.pg-filter-card.is-collapsed .pg-filter-step-head {
    margin-bottom: 0;
}

.pg-filter-card.is-collapsed .pg-filter-step-body {
    display: none;
}

.pg-filter-step-body {
    min-height: 110px;
}

.pg-filter-step[hidden] {
    display: none !important;
}

.pg-filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.pg-filter-btn {
    border: 1px solid var(--color-azul-100);
    border-radius: 999px;
    padding: 8px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--color-texto-principal);
    background: var(--color-azul-50);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pg-filter-btn:hover {
    border-color: var(--color-azul-700);
    color: var(--color-azul-700);
}

.pg-filter-btn.is-active {
    background: var(--color-azul-700);
    border-color: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

.pg-filter-btn.is-active:hover {
    background: var(--color-azul-500);
    border-color: var(--color-azul-500);
    color: var(--color-texto-sobre-oscuro);
}

.pg-filter-hint {
    margin: 0;
    font-size: 15px;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.pg-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-azul-100);
    background: var(--color-azul-50);
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.pg-card[hidden] {
    display: none !important;
}

.pg-grid-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    font-size: 16px;
    color: var(--color-texto-secundario);
    background: var(--color-azul-50);
    border: 1px dashed var(--color-azul-100);
    border-radius: 12px;
}

.pg-grid-empty[hidden] {
    display: none !important;
}

.pg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(11, 42, 74, 0.13);
}

.pg-card-color {
    width: 100%;
    height: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(134deg,
            var(--c-card-grad-from, #0B2A4A) 0%,
            var(--c-card-grad-to, var(--c-card-accent, var(--color-azul-700))) 100%);
}

.pg-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pg-card-title {
    line-height: 1.2;
    margin-bottom: 8px;
}

.pg-card-title .ct-top {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
}

.pg-card-title .ct-bot {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--c-card-accent);
}

.pg-card-title .ct-bot.green {
    color: var(--c-card-accent);
}

.pg-more-btn {
    background: var(--c-card-accent, var(--color-azul-700));
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s, filter 0.2s;
}

.pg-more-btn:hover {
    background: var(--c-card-accent, var(--color-azul-700));
    color: var(--color-texto-sobre-oscuro);
    filter: brightness(1.12);
}

.req-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 48px;
}

.req-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 14px;
}

.req-box {
    background: var(--color-azul-50);
    border-radius: 12px;
    padding: 20px 24px;
}

.req-box p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

.req-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 14px;
}

.req-col {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

.req-btn {
    display: inline-block;
    margin-top: 28px;
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s;
}

.req-btn:hover {
    background: var(--color-azul-700);
}

.req-box--legal p + p {
    margin-top: 14px;
}

.req-box--legal a {
    color: var(--color-azul-700);
    text-decoration: underline;
}

.req-box--legal ul,
.req-box--legal ol {
    margin: 10px 0 10px 22px;
    color: var(--color-texto-secundario);
}

.req-box--legal li {
    margin-bottom: 6px;
    line-height: 1.8;
}

.req-box--legal li:last-child {
    margin-bottom: 0;
}

a.req-btn,
a.dm-req-btn {
    display: inline-block;
    text-decoration: none;
}

/* ═══════════════════════════════════════════
   EXPERIENCIA (Sala VR / Sala 3D)
═══════════════════════════════════════════ */

.exp-page {
    padding-bottom: 40px;
}

.exp-page__head {
    padding-bottom: 0;
}

.exp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.exp-hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.exp-hero__kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-card-accent, var(--color-azul-700));
    margin-bottom: 8px;
}

.exp-hero__title {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1.15;
    margin-bottom: 12px;
}

.exp-hero__lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-texto-secundario);
}

.exp-quote {
    margin: 20px 0 0;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    font-size: 17px;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    color: var(--c-card-accent, var(--color-azul-700));
}

.exp-close {
    margin: 28px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.exp-switch {
    margin-top: 36px;
}

.exp-switch__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    margin-bottom: 10px;
}

.exp-switch__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    max-width: 420px;
    transition: background 0.15s, border-color 0.15s;
}

.exp-switch__card:hover {
    background: var(--color-azul-100);
    border-color: var(--c-card-accent, var(--color-azul-700));
}

.exp-switch__card img {
    width: 88px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.exp-switch__card strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.exp-switch__card em {
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-card-accent, var(--color-azul-700));
}

/* ═══════════════════════════════════════════
   PQRSF (formulario multi-paso)
═══════════════════════════════════════════ */

.pqrsf-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.pqrsf-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.pqrsf-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-texto-secundario);
    font-size: 15px;
    font-weight: 600;
}

.pqrsf-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-azul-100);
    color: var(--color-azul-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.pqrsf-step.is-active {
    color: var(--color-texto-principal);
}

.pqrsf-step.is-active .pqrsf-step-num {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

.pqrsf-step.is-done {
    cursor: pointer;
}

.pqrsf-step.is-done .pqrsf-step-num {
    background: var(--color-azul-500);
    color: #fff;
}

.pqrsf-step.is-done:hover .pqrsf-step-num {
    background: var(--color-azul-700);
}

.pqrsf-step.is-done:hover .pqrsf-step-label {
    color: var(--color-azul-700);
}

.pqrsf-step-label {
    display: none;
}

.pqrsf-step-line {
    width: 32px;
    height: 2px;
    background: var(--color-azul-100);
    flex-shrink: 0;
}

.pqrsf-card {
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    padding: 32px 36px;
}

.pqrsf-tabs {
    position: relative;
    transition: min-height 0.2s ease;
}

.pqrsf-tab {
    display: none;
}

.pqrsf-tab.is-active {
    display: block;
}

/* Estado usado solo por JS para medir la altura real de un tab oculto,
   sin mostrarlo visualmente ni afectar el layout del tab activo. */
.pqrsf-tab.pqrsf-measuring {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.pqrsf-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 20px;
}

.pqrsf-intro p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

.pqrsf-intro p + p {
    margin-top: 10px;
}

.pqrsf-defs {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pqrsf-def {
    background: #fff;
    border: 1px solid var(--color-azul-100);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

.pqrsf-def-term {
    color: var(--color-texto-principal);
    font-weight: 700;
}

.pqrsf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.pqrsf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pqrsf-field--full {
    grid-column: 1 / -1;
}

.pqrsf-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.pqrsf-input,
.pqrsf-select,
.pqrsf-textarea {
    width: 100%;
    border: 1px solid var(--color-azul-100);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
    color: var(--color-texto-principal);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pqrsf-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565C0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
}

.pqrsf-textarea {
    resize: vertical;
    min-height: 120px;
}

.pqrsf-input:focus,
.pqrsf-select:focus,
.pqrsf-textarea:focus {
    outline: none;
    border-color: var(--color-azul-500);
    box-shadow: 0 0 0 3px rgba(47, 140, 255, 0.18);
}

.pqrsf-input.is-invalid,
.pqrsf-select.is-invalid,
.pqrsf-textarea.is-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.12);
}

.pqrsf-upload {
    position: relative;
    display: block;
    border: 2px dashed var(--color-azul-300);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.pqrsf-upload:hover {
    border-color: var(--color-azul-500);
    background: var(--color-azul-50);
}

.pqrsf-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pqrsf-upload svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-azul-700);
    margin: 0 auto 8px;
    display: block;
}

.pqrsf-upload span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-azul-700);
}

.pqrsf-alert {
    margin-top: 20px;
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid rgba(204, 0, 0, 0.3);
    color: var(--color-error);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
}

.pqrsf-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
}

.pqrsf-nav[hidden] {
    display: none;
}

.pqrsf-nav--top {
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-azul-100);
}

.pqrsf-btn {
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s, opacity 0.2s, color 0.2s;
}

.pqrsf-btn--primary {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

.pqrsf-btn--primary:hover {
    background: var(--color-azul-500);
}

.pqrsf-btn--primary:disabled {
    opacity: 0.6;
    cursor: default;
}

.pqrsf-btn--ghost {
    background: var(--color-azul-100);
    color: var(--color-azul-900);
}

.pqrsf-btn--ghost:hover {
    background: var(--color-azul-300);
    color: #fff;
}

@media (min-width: 640px) {
    .pqrsf-step-label {
        display: inline;
    }
}

@media (max-width: 640px) {
    .pqrsf-wrap {
        padding: 0 16px 40px;
    }

    .pqrsf-card {
        padding: 24px 20px;
    }

    .pqrsf-grid {
        grid-template-columns: 1fr;
    }

    .pqrsf-step-line {
        width: 16px;
    }
}

/* ═══════════════════════════════════════════
   SALIDA PQRSF (confirmación de envío)
═══════════════════════════════════════════ */

.salida-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.salida-card {
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    padding: 48px 40px;
    text-align: center;
}

.salida-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-azul-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.salida-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--color-texto-sobre-oscuro);
}

.salida-h {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 10px;
}

.salida-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    margin-bottom: 24px;
}

.salida-policy {
    text-align: left;
    margin-bottom: 28px;
}

.salida-policy p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

.salida-btn {
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 640px) {
    .salida-wrap {
        padding: 0 16px 40px;
    }

    .salida-card {
        padding: 36px 24px;
    }
}

/* ═══════════════════════════════════════════
   JOBS (trabaja con nosotros)
═══════════════════════════════════════════ */

.jobs-hero {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px 40px;
    text-align: center;
}

.jobs-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-azul-700);
    margin-bottom: 14px;
    line-height: 1.1;
    text-wrap: balance;
}

.jobs-hero-desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

.jobs-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.jobs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.job-card {
    display: flex;
    flex-direction: column;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    padding: 28px 26px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.job-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-azul-500);
    box-shadow: var(--shadow-azul-hover);
}

.job-card--full {
    grid-column: 1 / -1;
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
}

.job-card-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-azul-700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background 0.2s;
}

.job-card-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--color-texto-sobre-oscuro);
}

.job-card:hover .job-card-icon {
    background: var(--color-azul-500);
}

.job-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
}

.job-card-bar {
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-azul-700);
    margin: 10px 0 14px;
}

.job-card-desc {
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
    margin-bottom: 16px;
}

.job-card-meta {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.job-card-meta li {
    font-size: 15px;
    color: var(--color-texto-secundario);
    line-height: 1.9;
}

.job-card-meta strong {
    color: var(--color-texto-principal);
    font-weight: 700;
}

.job-card-cta {
    display: block;
    text-align: center;
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s;
}

.job-card:hover .job-card-cta {
    background: var(--color-azul-500);
}

.jobs-footer-note {
    text-align: center;
    margin-top: 32px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-texto-secundario);
}

.jobs-footer-note a {
    color: var(--color-azul-700);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .jobs-hero {
        padding: 0 20px 32px;
    }

    .jobs-hero-title {
        font-size: 34px;
    }

    .jobs-wrap {
        padding: 0 16px 40px;
    }

    .jobs-grid {
        grid-template-columns: 1fr;
    }

    .job-card--full {
        max-width: none;
    }
}

/* ═══════════════════════════════════════════
   CONVENIOS Y BENEFICIOS
═══════════════════════════════════════════ */

.conv-hero {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px 40px;
    text-align: center;
}

.conv-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-azul-700);
    margin-bottom: 14px;
}

.conv-hero-desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

.conv-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.conv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.conv-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: #fff;
    border: 1px solid var(--color-azul-100);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(11, 42, 74, 0.07);
    padding: 40px 32px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.conv-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-azul-500);
    box-shadow: var(--shadow-azul-hover);
}

.conv-card-logo {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

.conv-card-arr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-azul-50);
    color: var(--color-azul-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.conv-card-arr svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.conv-card:hover .conv-card-arr {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

.conv-detail-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.conv-detail-head {
    text-align: center;
    margin-bottom: 28px;
}

.conv-detail-logo {
    display: block;
    max-width: 280px;
    max-height: 110px;
    width: auto;
    margin: 0 auto 16px;
    object-fit: contain;
}

.conv-detail-tagline {
    max-width: 560px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

@media (max-width: 720px) {
    .conv-hero {
        padding: 0 20px 32px;
    }

    .conv-hero-title {
        font-size: 34px;
    }

    .conv-wrap,
    .conv-detail-wrap {
        padding: 0 16px 40px;
    }

    .conv-grid {
        grid-template-columns: 1fr;
    }

    .conv-card {
        min-height: 140px;
        padding: 28px 24px;
    }
}

/* ═══════════════════════════════════════════
   BLOG — paleta propia (teal/ciruela), a partir
   del mockup "Blog Blendex". Namespaced bajo
   .blog-* para no tocar la paleta azul del resto
   del sitio.
═══════════════════════════════════════════ */

.blog-hero {
    position: relative;
    background: linear-gradient(160deg, #ffffff 0%, #d5f7d5 22%, #ffffff 42%, #ffe1fe 62%, #ffffff 80%, #e3ecff 100%);
    padding: 28px 40px 46px;
    text-align: center;
}

.blog-back {
    position: absolute;
    top: 24px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #1c132b;
}

.blog-back svg {
    width: 15px;
    height: 15px;
    stroke: #1c132b;
    fill: none;
}

.blog-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 32px;
}

.blog-hero-title {
    font-size: 54px;
    font-weight: 900;
    color: #1c132b;
    line-height: 1.08;
    margin: 16px 0 10px;
    animation: blogWeightWave 2.6s ease-in-out infinite;
}

@keyframes blogWeightWave {
    0%, 100% { font-variation-settings: 'wght' 900; }
    50% { font-variation-settings: 'wght' 340; }
}

.blog-hero-desc {
    font-size: 16px;
    color: #5a5268;
    margin: 0 auto;
    max-width: 520px;
}

.blog-search {
    max-width: 520px;
    margin: 28px auto 0;
    background: #fff;
    border: 1.5px solid #ececf1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 7px 7px 7px 24px;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(28, 19, 43, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search:hover,
.blog-search:focus-within {
    border-color: #08afaa;
    box-shadow: 0 10px 30px rgba(8, 175, 170, 0.18);
}

/* Solo la lupa (hija directa del form): la flecha vive dentro del boton
   y debe conservar su blanco sobre el circulo turquesa. */
.blog-search > svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    stroke: #9f9b9f;
    transition: stroke 0.2s ease;
}

.blog-search:hover > svg,
.blog-search:focus-within > svg {
    stroke: #08afaa;
}

.blog-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #1c132b;
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
}

.blog-search input::placeholder {
    color: #9994a5;
}

.blog-search button {
    width: 42px;
    height: 42px;
    background: #08afaa;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-search button:hover {
    background: #3fc9c4;
}

.blog-search button svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 24px auto 0;
    max-width: 760px;
}

.blog-cat {
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.18s;
    background: #ffffff;
    color: #1c132b;
    border: 1.5px solid #e4e2ec;
}

.blog-wrap {
    background: #fbfbfd;
    padding: 46px 40px 64px;
}

.blog-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(28, 19, 43, 0.06);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(28, 19, 43, 0.14);
}

.blog-card-img {
    position: relative;
    height: 186px;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
}

.blog-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.blog-card-title {
    font-size: 18.5px;
    font-weight: 700;
    color: #1c132b;
    line-height: 1.25;
    margin: 0;
}

.blog-card-excerpt {
    font-size: 15px;
    color: #6b6478;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.blog-card-date {
    font-size: 15px;
    font-weight: 600;
    color: #08afaa;
}

.blog-card-more {
    font-size: 15px;
    font-weight: 700;
    color: #1c132b;
}

.blog-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9994a5;
    font-size: 15px;
}

.blog-results {
    transition: opacity 0.15s ease;
}

.blog-results.is-loading {
    opacity: 0.45;
}

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 40px;
}

.blog-page-btn {
    background: #1c132b;
    color: #fff;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s;
}

.blog-page-btn:hover {
    background: #08afaa;
}

.blog-page-status {
    font-size: 15px;
    font-weight: 500;
    color: #6b6478;
}

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

@media (max-width: 640px) {
    .blog-hero {
        padding: 22px 20px 36px;
    }

    .blog-back {
        left: 20px;
    }

    .blog-hero-title {
        font-size: 36px;
    }

    .blog-wrap {
        padding: 32px 16px 48px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   ARTÍCULO DE BLOG (single.php) — misma paleta
   teal/ciruela del listado, namespaced .art-*
═══════════════════════════════════════════ */

.art-page {
    background: #fff;
    padding: 0 0 56px;
}

.art-head {
    max-width: 800px;
    margin: 0 auto;
    padding: 34px 32px 0;
}

.art-back {
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: #08afaa;
}

.art-back svg {
    width: 15px;
    height: 15px;
    stroke: #08afaa;
    fill: none;
}

.art-badge-row {
    margin-top: 24px;
}

.art-badge {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 999px;
}

.art-title {
    font-size: 42px;
    font-weight: 900;
    color: #1c132b;
    line-height: 1.1;
    margin: 16px 0 12px;
}

.art-meta {
    font-size: 15px;
    color: #8a8498;
    font-weight: 500;
}

.art-hero-img {
    max-width: 900px;
    margin: 26px auto 0;
    padding: 0 32px;
}

.art-hero-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 22px;
}

.art-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 34px 32px 0;
    font-size: 16px;
    color: #545061;
    line-height: 1.8;
}

.art-body > *:first-child {
    margin-top: 0;
}

.art-body p {
    margin: 0 0 24px;
}

.art-body h2 {
    font-size: 24px;
    font-weight: 800;
    color: #1c132b;
    margin: 32px 0 12px;
}

.art-body h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1c132b;
    margin: 28px 0 10px;
}

.art-body strong,
.art-body b {
    color: #1c132b;
    font-weight: 700;
}

.art-body a {
    color: #08afaa;
    text-decoration: underline;
}

.art-body ul,
.art-body ol {
    margin: 0 0 24px 22px;
}

.art-body li {
    margin-bottom: 8px;
}

.art-body blockquote {
    margin: 0 0 24px;
    padding: 18px 24px;
    border-left: 4px solid #08afaa;
    background: #f4fbfb;
    border-radius: 0 12px 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1c132b;
    line-height: 1.5;
}

.art-body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 8px 0 24px;
}

/* Embeds de YouTube/TED (bloque de WordPress): el iframe trae width/height
   fijos en px desde el HTML original, así que rompe el ancho en móvil si no
   se fuerza a responsivo. */
.art-body .wp-block-embed {
    margin: 0 0 24px;
}

.art-body .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.art-body .wp-block-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    display: block;
}

.art-body iframe {
    max-width: 100%;
}

.art-share {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.art-share-label {
    font-size: 15px;
    font-weight: 700;
    color: #1c132b;
}

.art-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f4f2f8;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.art-share-btn:hover {
    background: #e4e2ec;
}

.art-related {
    max-width: 1080px;
    margin: 44px auto 0;
    padding: 0 32px;
}

.art-related-title {
    font-size: 22px;
    font-weight: 800;
    color: #1c132b;
    margin: 0 0 20px;
}

.art-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.art-related-card {
    display: block;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s;
}

.art-related-card:hover {
    transform: translateY(-4px);
}

.art-related-img {
    position: relative;
    height: 130px;
}

.art-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-related-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.art-related-body {
    padding: 14px 16px 18px;
}

.art-related-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1c132b;
    line-height: 1.3;
    margin: 0 0 6px;
}

.art-related-body span {
    font-size: 15px;
    font-weight: 600;
    color: #08afaa;
}

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

@media (max-width: 640px) {
    .art-head,
    .art-body,
    .art-share,
    .art-related {
        padding-left: 20px;
        padding-right: 20px;
    }

    .art-hero-img {
        padding: 0 20px;
    }

    .art-hero-img img {
        height: 240px;
    }

    .art-title {
        font-size: 30px;
    }

    .art-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   PÁGINA DE POLÍTICAS (buscador + lista)
═══════════════════════════════════════════ */

.pol-search-bar {
    background: var(--site-search-bar-bg, var(--color-azul-900));
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 22px;
    gap: 10px;
    max-width: 520px;
    margin: 8px auto 28px;
    box-shadow: var(--shadow-azul);
}

.pol-search-bar > svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke: var(--site-search-bar-text, var(--color-azul-300));
}

.pol-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    color: var(--site-search-bar-text, var(--color-azul-300));
}

.pol-search-input::placeholder {
    color: var(--site-search-bar-text, var(--color-azul-300));
    opacity: 0.75;
}

.pol-search-icon {
    width: 38px;
    height: 38px;
    background: var(--site-search-icon, var(--color-azul-700));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pol-search-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--site-search-icon-on-btn, var(--color-texto-sobre-oscuro));
    fill: none;
}

.pol-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pol-item {
    display: block;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 14px;
    padding: 20px 24px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 6px rgba(11, 42, 74, 0.05);
    transition: background 0.2s, border-color 0.2s;
}

.pol-item:hover {
    background: var(--color-azul-100);
    border-color: var(--color-azul-300);
}

.pol-item[hidden] {
    display: none;
}

.pol-item-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 6px;
}

.pol-item-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

.pol-item-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-azul-700);
}

.pol-empty {
    text-align: center;
    padding: 24px 0;
    color: var(--color-texto-secundario);
    font-size: 15px;
}

.req-subtitle {
    margin-top: 28px !important;
    margin-bottom: 2px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-texto-principal);
}

.req-subtitle:first-child {
    margin-top: 0 !important;
}

/* ═══════════════════════════════════════════
   DETAIL LAYOUT (curso individual)
═══════════════════════════════════════════ */

.detail-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

.detail-sidebar {
    position: sticky;
    top: 84px;
}

.ds-card {
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11, 42, 74, 0.07);
}

.ds-card-color {
    height: 72px;
    background: linear-gradient(134deg,
            var(--c-card-grad-from, #0B2A4A) 0%,
            var(--c-card-grad-to, var(--c-card-accent, var(--color-azul-700))) 100%);
}

.ds-top {
    padding: 24px;
    border-bottom: 1px solid var(--color-azul-100);
}

.ds-lvl-top {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-texto-principal);
}

.ds-lvl-bot {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-card-accent, var(--color-azul-700));
}

/* Títulos más largos: 26px para que quepan en una línea. */
.detail-layout.prog-palette-ingles-mediodia .ds-lvl-bot,
.detail-layout.prog-palette-ingles-intermedio .ds-lvl-bot,
.detail-layout.prog-palette-ingles-intermedio-en-vivo .ds-lvl-bot {
    font-size: 26px;
}

.ds-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    margin-top: 6px;
}

.ds-off {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-card-accent, var(--color-azul-700));
    margin-top: 16px;
}

.ds-off-date {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-secundario);
}

.ds-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1;
}

.ds-price-unit {
    font-size: 15px;
    font-weight: 500;
}

.ds-old {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-secundario);
    margin-top: 4px;
}

.ds-actions {
    padding: 16px;
}

.ds-cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--c-card-accent, var(--color-azul-700));
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 999px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s, filter 0.2s;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

.ds-cta:hover {
    background: var(--c-card-accent, var(--color-azul-500));
    filter: brightness(1.08);
}

.ds-info-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border: 1px solid var(--color-azul-100);
    border-radius: 999px;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

.ds-info-btn:hover {
    background: var(--color-azul-100);
}

.ds-info-btn.whatsapp-link,
.fixed-btn-info.whatsapp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.whatsapp-link .wa-icon {
    flex-shrink: 0;
    display: block;
    color: var(--color-whatsapp);
}

.dm-back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.dm-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-card-accent, var(--color-azul-700));
    font-family: 'Outfit', sans-serif;
}

.dm-back-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--c-card-accent, var(--color-azul-700));
    fill: none;
}

.dm-breadcrumb {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
}

.dm-breadcrumb span {
    color: var(--color-texto-principal);
}

.dm-section {
    margin-bottom: 28px;
}

.dm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════════
   HORARIOS — 3 estados (contenido WP, bloque HTML)
   1) Disponible:  .h-row + .h-time  (sin etiqueta)
   2) Pocos cupos: .h-row.featured + .h-tag.tag-cupos  (texto: "Últimos N cupos")
   3) Agotado:     .h-row + .h-time{color:#ccc} + .h-tag.tag-agotado  (texto: "Agotado")
═══════════════════════════════════════════ */

.horarios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-azul-100);
    background: var(--color-azul-50);
}

.h-row.featured {
    border-color: var(--c-card-accent, var(--color-azul-700));
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 8%, transparent);
}

.h-time {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
}

.h-tag {
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 12px;
}

.tag-cupos {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 12%, transparent);
    color: var(--c-card-accent, var(--color-azul-700));
    border: 1px solid color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 35%, transparent);
}

.tag-agotado {
    background: rgba(200, 0, 0, 0.08);
    color: var(--color-error);
    border: 1px solid rgba(200, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════
   ACCORDIONS
═══════════════════════════════════════════ */

.acc {
    border: 1px solid var(--color-azul-100);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}

.acc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    background: var(--color-azul-50);
    transition: background 0.15s;
}

.acc-h:hover {
    background: var(--color-azul-50);
}

.acc-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 12%, transparent);
}

.acc-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--c-card-accent, var(--color-azul-700));
    fill: none;
}

.acc-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-principal);
}

.acc-arrow {
    width: 18px;
    height: 18px;
    stroke: var(--color-texto-secundario);
    fill: none;
    transition: transform 0.2s;
}

.acc-arrow.open {
    transform: rotate(180deg);
}

.acc-body {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.acc-body.open {
    max-height: 400px;
    padding: 0 16px 14px;
}

.acc-body p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

/* Intensidad siempre visible al entrar (no se colapsa) */
.acc--visible .acc-h {
    cursor: default;
}

.acc--visible .acc-arrow {
    display: none;
}

.acc--visible .acc-body {
    max-height: none;
    padding: 0 16px 14px;
}

.prog-inicio {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-card-accent, var(--color-azul-700));
}

/* Mobile accordion (b2-*) */

.b2-accordion {
    border: 1px solid var(--color-azul-100);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 6px;
}

.b2-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    background: var(--color-azul-50);
    transition: background 0.15s;
}

.b2-acc-header:hover {
    background: var(--color-azul-50);
}

.b2-acc-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.b2-acc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(21, 101, 192, 0.12);
}

.b2-acc-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--color-azul-700);
    fill: none;
}

.b2-acc-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-principal);
}

.b2-acc-arrow {
    width: 18px;
    height: 18px;
    stroke: var(--color-texto-secundario);
    fill: none;
    transition: transform 0.2s;
}

.b2-acc-arrow.open {
    transform: rotate(180deg);
}

.b2-acc-body {
    padding: 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.b2-acc-body.open {
    max-height: 300px;
    padding: 0 14px 12px;
}

.b2-acc-body p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   VER MÁS
═══════════════════════════════════════════ */

.ver-mas-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-card-accent, var(--color-azul-700));
    padding: 12px 0 4px;
    font-family: 'Outfit', sans-serif;
}

.ver-mas-btn span {
    border-bottom: 2px dotted var(--c-card-accent, var(--color-azul-700));
    line-height: 1.3;
}

.ver-mas-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--c-card-accent, var(--color-azul-700));
    fill: none;
    transition: transform 0.25s;
}

.ver-mas-btn.open svg {
    transform: rotate(180deg);
}

.ver-mas-extra {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.ver-mas-extra.open {
    max-height: 3000px;
}

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */

.faq-wrap {
    border: 1px solid var(--color-azul-100);
    border-radius: 12px;
    padding: 0 16px;
    background: var(--color-azul-50);
}

.faq {
    border-bottom: 1px solid var(--color-azul-100);
}

.faq:last-child {
    border-bottom: none;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    cursor: pointer;
}

.faq-q span {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
    flex: 1;
    padding-right: 10px;
}

.faq-q svg {
    width: 16px;
    height: 16px;
    stroke: var(--c-card-accent, var(--color-azul-700));
    fill: none;
    transition: transform 0.2s;
}

.faq-q.open {
    color: var(--c-card-accent, var(--color-azul-700));
    background: var(--color-azul-50);
}

.faq-q.open span {
    color: var(--c-card-accent, var(--color-azul-700));
}

.faq-q.open svg {
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}

.faq-a.open {
    max-height: 1200px;
}

.faq-a p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
    padding-bottom: 12px;
}

.faq-a a {
    color: var(--c-card-accent, var(--color-azul-700));
}

/* Mobile FAQ */

.b2-faq {
    border-bottom: 1px solid var(--color-azul-100);
}

.b2-faq:last-child {
    border-bottom: none;
}

.b2-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    cursor: pointer;
}

.b2-faq-q span {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
    flex: 1;
    padding-right: 8px;
}

.b2-faq-q svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-texto-secundario);
    fill: none;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.b2-faq-q.open svg {
    transform: rotate(180deg);
}

.b2-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.b2-faq-a.open {
    max-height: 300px;
}

.b2-faq-a p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    padding-bottom: 10px;
}

/* ═══════════════════════════════════════════
   DM REQ BOX
═══════════════════════════════════════════ */

.dm-req-box {
    background: var(--color-azul-50);
    border-radius: 12px;
    padding: 16px 20px;
}

.dm-req-box p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.8;
}

.dm-req-box em {
    font-size: 15px !important;
    font-style: italic;
    color: var(--color-texto-secundario);
}

.dm-req-btn {
    margin-top: 12px;
    background: var(--c-card-accent, var(--color-azul-900));
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s, filter 0.2s;
}

.dm-req-btn:hover {
    background: var(--c-card-accent, var(--color-azul-700));
    filter: brightness(1.08);
}

/* Mobile req */

.b2-req {
    background: var(--color-azul-50);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.b2-req p {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    line-height: 1.7;
}

.b2-req-btn {
    margin-top: 10px;
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s;
}

.b2-req-btn:hover {
    background: var(--color-azul-700);
}

/* ═══════════════════════════════════════════
   SOY ESTUDIANTE / PÁGINA ESTUDIANTES
═══════════════════════════════════════════ */

.est-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    font-size: 15px;
}

.est-header {
    text-align: center;
    margin-bottom: 36px;
}

.est-title-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    margin-bottom: 4px;
}

.est-title-main {
    font-size: 48px;
    font-weight: 800;
    color: var(--site-hero-title, var(--color-azul-700));
    line-height: 1;
}

.est-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}

.est-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(11, 42, 74, 0.05);
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}

.est-card:hover {
    background: var(--color-azul-100);
    border-color: var(--color-azul-300);
}

.est-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.est-card-icon {
    width: 60px;
    height: 60px;
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.est-card-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--site-icon, var(--color-azul-700));
    fill: none;
    stroke-width: 1.3px;
}

.est-card-icon:has(.est-card-icon-img) {
    background: transparent;
}

.est-card-icon-img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.est-card-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-texto-principal);
    line-height: 1.3;
}

.est-card-arr {
    flex-shrink: 0;
    margin-left: 12px;
}

.est-card-arr svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-texto-secundario);
    fill: none;
}

.est-nivelaciones-section {
    margin-bottom: 40px;
}

.est-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 24px;
}

.est-faq-section {
    margin-bottom: 40px;
}

.est-faq-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    margin-bottom: 12px;
}

.est-page .faq-q span,
.est-page .faq-a p {
    font-size: 15px;
}

.est-page .faq-q svg {
    width: 1em;
    height: 1em;
}

/* Compatibilidad con front-page (misma grid de tarjetas) */

#page-estudiante .est-grid,
.bx-page#page-estudiante .est-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */

.soy-est-btn {
    width: 100%;
    background: var(--c-card-accent, var(--color-azul-900));
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 999px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s, filter 0.2s;
    font-family: 'Outfit', sans-serif;
}

.soy-est-btn:hover {
    background: var(--c-card-accent, var(--color-azul-700));
    filter: brightness(1.08);
}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */

.toast,
.bx-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s;
    z-index: 999;
    white-space: nowrap;
    border-left: 3px solid var(--color-azul-700);
    pointer-events: none;
}

.toast.show,
.bx-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════
   FIXED BOTTOM BAR (mobile detail page)
═══════════════════════════════════════════ */

.fixed-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-azul-100), var(--color-azul-100), var(--color-azul-100));
    padding: 10px 20px;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 -4px 20px rgba(11, 42, 74, 0.12);
    z-index: 200;
}

.fixed-bar-info {
    flex: 1;
    min-width: 0;
}

.fixed-bar-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1;
}

.fixed-bar-price-unit {
    font-size: 15px;
    font-weight: 500;
}

.fixed-bar-sub {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-secundario);
    margin-top: 1px;
}

.fixed-btn-info,
.fixed-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}

.fixed-btn-info {
    background: var(--color-azul-900);
    color: var(--color-texto-secundario);
    padding: 9px 14px;
    font-weight: 500;
}

.fixed-btn-cta {
    background: var(--c-card-accent, var(--color-azul-900));
    color: var(--color-texto-sobre-oscuro);
    padding: 9px 16px;
    font-weight: 600;
    transition: background 0.2s, filter 0.2s;
}

.fixed-btn-cta:hover {
    background: var(--c-card-accent, var(--color-azul-700));
    filter: brightness(1.08);
    color: var(--color-texto-sobre-oscuro);
}

/* ═══════════════════════════════════════════
   MOBILE APP CLASSES (bx-*)
   Para bloques HTML personalizados en el editor visual
═══════════════════════════════════════════ */

.bx {
    width: 412px;
    max-width: 100%;
    background: var(--color-azul-50);
    border-radius: 16px;
    border: 1px solid var(--color-azul-100);
    overflow: hidden;
    position: relative;
}

.bx-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--color-azul-50);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-azul-100);
}

.bx-logo {
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    letter-spacing: -0.3px;
}

.bx-logo span {
    color: var(--color-azul-700);
}

.bx-nav-btn {
    background: var(--color-azul-900);
    color: var(--color-texto-secundario);
    border: none;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    font-family: 'Outfit', sans-serif;
}

.bx-nav-btn svg {
    width: 11px;
    height: 11px;
    stroke: var(--color-texto-secundario);
    fill: none;
}

.bx-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--color-azul-900);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(11, 42, 74, 0.18);
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.bx-search-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.bx-search-input-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bx-search-input-wrap svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-texto-secundario);
    fill: none;
    flex-shrink: 0;
}

.bx-search-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-sobre-oscuro);
    width: 100%;
    background: transparent !important;
    padding: 0 !important;
}

.bx-search-input:focus,
.bx-search-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.bx-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.bx-search-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    padding: 8px 10px 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bx-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.bx-search-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bx-search-item svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-azul-700);
    fill: none;
    flex-shrink: 0;
}

.bx-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px 12px;
}

.bx-tab {
    border-radius: 999px;
    padding: 7px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
}

.bx-tab.active-light {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border: 1.5px solid var(--color-azul-700);
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.25);
}

.bx-tab.active-light:hover {
    background: var(--color-azul-900);
    color: var(--color-azul-700);
    border-color: var(--color-texto-principal);
    box-shadow: none;
}

.bx-tab.inactive-light {
    background: var(--color-azul-900);
    color: var(--color-azul-700);
    border: 1.5px solid var(--color-azul-900);
}

.bx-tab.inactive-light:hover {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border-color: var(--color-texto-principal);
}

.bx-tab.active-dark {
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
    border: 1.5px solid var(--color-azul-900);
}

.bx-tab.active-dark:hover {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
}

.bx-tab.inactive-dark {
    background: var(--color-azul-50);
    color: var(--color-texto-principal);
    border: 1.5px solid var(--color-azul-100);
}

.bx-tab.inactive-dark:hover {
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
    border-color: var(--color-texto-principal);
}

.bx-hero {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 14px 20px;
}

.bx-hero-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800') center / cover no-repeat;
}

.bx-hero-headline {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    text-align: center;
}

.bx-search-bar {
    position: relative;
    z-index: 1;
    background: var(--color-azul-900);
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 7px 7px 7px 16px;
    gap: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.bx-search-bar:hover {
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.35);
}

.bx-search-bar span {
    color: var(--color-texto-secundario);
    font-size: 15px;
    font-weight: 400;
    flex: 1;
}

.bx-search-icon {
    width: 30px;
    height: 30px;
    background: var(--color-azul-900);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bx-search-icon svg {
    width: 13px;
    height: 13px;
    stroke: var(--color-texto-secundario);
    fill: none;
}

#heroSearchExpanded {
    display: none;
    position: relative;
    z-index: 10;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#heroSearchExpanded.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.hero-search-box {
    background: var(--color-azul-900);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(11, 42, 74, 0.22);
}

.hero-search-input-row {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-search-input-row svg {
    width: 13px;
    height: 13px;
    stroke: var(--color-texto-secundario);
    fill: none;
    flex-shrink: 0;
}

.hero-search-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
    padding: 0 2px;
}

.bx-hero-suggestions {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bx-hero-sugg {
    background: rgba(64, 56, 64, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

.bx-hero-sugg:hover {
    background: rgba(21, 101, 192, 0.7);
    color: var(--color-texto-sobre-oscuro);
    border-color: var(--color-azul-700);
}

.bx-courses-wrap {
    padding: 14px 0 4px;
}

.sec-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-texto-principal);
    padding: 12px 14px 0;
}

.bx-courses-scroll {
    display: flex;
    gap: 12px;
    padding: 8px 14px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bx-courses-scroll::-webkit-scrollbar {
    display: none;
}

.bx-card {
    flex-shrink: 0;
    width: 200px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-azul-100);
    background: var(--color-azul-50);
    box-shadow: 0 1px 6px rgba(11, 42, 74, 0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(11, 42, 74, 0.12);
}

.bx-card-color {
    width: 100%;
    height: 72px;
}

.bx-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
}

.bx-card-title {
    line-height: 1.2;
    margin-bottom: 6px;
}

.bx-card-title .ct-top {
    display: block;
    font-size: 16px;
    font-weight: 650;
    color: var(--color-texto-principal);
}

.bx-card-title .ct-bot {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-azul-700);
    line-height: 1.15;
}

.bx-card-title .ct-bot.green {
    color: var(--color-azul-700);
}

.bx-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.bx-card-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
}

.bx-dot {
    width: 5px;
    height: 5px;
    background: var(--color-azul-700);
    border-radius: 50%;
    flex-shrink: 0;
}

.bx-more-btn {
    background: var(--color-azul-900);
    color: var(--color-texto-secundario);
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Outfit', sans-serif;
}

.bx-more-btn:hover {
    background: var(--color-azul-900);
    color: var(--color-texto-sobre-oscuro);
}

.bx-card-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
    margin: 0 0 10px;
    line-height: 1.5;
}

.bx-peek {
    flex-shrink: 0;
    width: 20px;
}

.bx-student-wrap {
    padding: 4px 14px 14px;
}

.bx-student-label {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1.2;
    margin-bottom: 10px;
}

.bx-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 12px;
    background: var(--color-azul-50);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-azul-100);
}

.bx-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px;
    cursor: pointer;
    border-right: 1px solid var(--color-azul-100);
    transition: background 0.2s;
}

.bx-quick-item:hover {
    background: var(--color-azul-100);
}

.bx-quick-item:last-child {
    border-right: none;
}

.bx-quick-icon {
    width: 34px;
    height: 34px;
    background: var(--color-azul-50);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-azul-100);
}

.bx-quick-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--color-azul-900);
    fill: none;
}

.bx-quick-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
    text-align: center;
    line-height: 1.3;
}

.bx-student-card {
    border-radius: 12px;
    border: 1px solid var(--color-azul-100);
    overflow: hidden;
    background: var(--color-azul-50);
}

.bx-student-card-header {
    background: var(--color-azul-900);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bx-student-card-icon {
    width: 32px;
    height: 32px;
    background: var(--color-azul-700);
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bx-student-card-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--color-texto-sobre-oscuro);
    fill: none;
}

.bx-student-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-texto-sobre-oscuro);
}

.bx-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-azul-100);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-principal);
    cursor: pointer;
    transition: background 0.15s;
}

.bx-student-row:hover {
    background: var(--color-azul-50);
}

.bx-student-row:last-child {
    border-bottom: none;
}

.bx-student-row-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bx-row-dot {
    width: 5px;
    height: 5px;
    background: var(--color-azul-700);
    border-radius: 50%;
}

.bx-row-arr {
    font-size: 15px;
    color: var(--color-disabled);
}

.bx-exp-header {
    display: flex;
    justify-content: flex-start;
    padding: 14px 14px 10px;
}

.bx-exp-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-texto-principal);
    line-height: 1.25;
    text-align: left;
}

.bx-exp-scroll {
    display: flex;
    gap: 12px;
    padding: 0 14px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bx-exp-scroll::-webkit-scrollbar {
    display: none;
}

.bx-contact {
    background: var(--color-azul-900);
    padding: 16px 14px;
}

.bx-contact-info {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    line-height: 2;
    margin-bottom: 14px;
}

.bx-form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.bx-field {
    flex: 1;
}

.bx-field-label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    display: block;
    margin-bottom: 3px;
}

.bx-field input,
.bx-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-texto-sobre-oscuro);
    font-size: 15px;
    font-weight: 400;
    padding: 4px 0;
    outline: none;
    font-family: 'Outfit', sans-serif;
}

.bx-field input::placeholder,
.bx-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.bx-field textarea {
    resize: none;
    height: 36px;
}

.bx-send-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.bx-send-btn {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s;
}

.bx-send-btn:hover {
    background: var(--color-azul-500);
}

.bx-footer {
    background: var(--color-azul-900);
    padding: 16px 14px;
}

.bx-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bx-footer-col-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-texto-sobre-oscuro);
    margin-bottom: 5px;
    margin-top: 10px;
}

.bx-footer-col-title:first-child {
    margin-top: 0;
}

.bx-footer-item {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 3px;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.bx-footer-item:hover {
    color: var(--color-azul-700);
}

.bx-social {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 13px;
    background: var(--color-azul-900);
}

.bx-si {
    width: 22px;
    height: 22px;
    fill: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: fill 0.2s;
}

.bx-si:hover {
    fill: var(--color-azul-700);
}

/* Mobile page nav */

.pg-header {
    padding: 16px 14px 4px;
    display: flex;
    align-items: center;
}

.pg-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-texto-principal);
    padding: 8px 14px 14px;
}

.pg-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 20px;
}

.pg-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

/* Mobile detail nav */

.b2-back-bar {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-azul-100);
}

.b2-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-azul-700);
    font-family: 'Outfit', sans-serif;
}

.b2-back-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-azul-700);
    fill: none;
}

.b2-breadcrumb {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-texto-secundario);
}

.b2-breadcrumb span {
    color: var(--color-texto-principal);
}

.b2-hero {
    background: var(--color-azul-50);
    padding: 20px 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--color-azul-100);
}

.b2-horarios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.b2-horario-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-azul-100);
    background: var(--color-azul-50);
}

.b2-horario-row.featured {
    border-color: var(--color-azul-700);
    background: rgba(21, 101, 192, 0.05);
}

.b2-horario-time {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-principal);
}

.b2-horario-tag {
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
}

/* ═══════════════════════════════════════════
   WORDPRESS CONTENT AREA
═══════════════════════════════════════════ */

.site-content {
    min-height: 60vh;
}

.entry-content {
    min-height: 200px;
}

/* Override Gutenberg default padding for full-width blocks */

.wp-site-blocks {
    padding: 0;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .courses-grid .c-card {
        min-width: 260px;
    }

    .footer-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .detail-layout {
        grid-template-columns: 280px 1fr;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .topnav {
        padding: 0 14px 8px;
        height: auto;
        column-gap: 10px;
        row-gap: 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Fila 1: logo + buscador. Fila 2: tabs. */
    .site-logo-wrap {
        order: 1;
        height: 56px;
    }

    .nav-right {
        order: 2;
        height: 56px;
    }

    .site-logo,
    .logo {
        font-size: 18px;
    }

    .site-logo-img {
        height: 26px;
    }

    .nav-tabs {
        display: flex;
        order: 3;
        flex-basis: 100%;
        width: 100%;
        justify-content: center;
    }

    .nav-tabs-list li>a {
        padding: 7px 18px;
        font-size: 14px;
    }

    .nav-right {
        gap: 6px;
    }

    .search-pill {
        padding: 5px 12px;
        font-size: 15px;
    }

    .nav-search-drop {
        width: min(92vw, 360px);
        right: -10px;
    }

    .hero-wrap {
        min-height: 280px;
    }

    .home-promo-banner {
        padding: 16px 14px 0;
    }

    .home-promo-banner__link {
        border-radius: 16px;
    }

    .home-promo-banner + .hero-wrap {
        min-height: 240px;
    }

    .home-promo-banner + .hero-wrap .hero-content {
        padding-top: 24px;
    }

    .hero-content {
        padding: 40px 20px;
    }

    .hero-headline {
        width: 100%;
    }

    .hero-headline__line {
        font-size: clamp(22px, 6vw, 32px);
    }

    .hero-search-bar {
        min-width: unset;
        width: 100%;
        display: flex;
    }

    .hero-search,
    .hero-expanded {
        max-width: 100%;
    }

    .section-wrap {
        padding: 28px 14px;
    }

    .section-title {
        font-size: 18px;
    }

    .courses-grid .c-card {
        min-width: 200px;
    }

    .c-card-color {
        height: 72px;
    }

    .home-color-line .c-card-color:not(.c-card-color--image) {
        height: 15px;
        min-height: 15px;
    }

    .c-card-title .ct-top {
        font-size: 15px;
    }

    .c-card-title .ct-bot {
        font-size: 20px;
    }

    .student-inner {
        grid-template-columns: 1fr;
        padding: 28px 14px;
        gap: 20px;
    }

    .student-label {
        font-size: 20px;
    }

    .exp-grid {
        grid-template-columns: 1fr;
    }

    .cert-strip {
        padding: 24px 14px;
        gap: 14px;
    }

    .cert-circle {
        width: 48px;
        height: 48px;
    }

    .cert-circle svg {
        width: 22px;
        height: 22px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        padding: 0 14px 28px;
        gap: 24px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        padding: 0 14px 24px;
    }

    .footer-legal {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 14px 28px;
        gap: 20px;
    }

    .calidad {
        flex: none;
        width: 100%;
        min-height: 80px;
        background-size: 75% auto;
    }

    .licencias {
        text-align: center;
        font-size: 15px;
        align-self: center;
    }

    .pg-wrap,
    .est-page,
    .exp-page__head {
        padding: 20px 14px;
    }

    .pg-h {
        font-size: 28px;
    }

    .pg-filter-card {
        padding: 16px 18px;
        margin-bottom: 16px;
    }

    .pg-filter-title {
        font-size: 15px;
    }

    .pg-filter-btn {
        padding: 7px 18px;
        font-size: 15px;
    }

    .pg-filter-step-body {
        min-height: 120px;
    }

    .pg-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .est-grid,
    #page-estudiante .est-grid,
    .bx-page#page-estudiante .est-grid {
        grid-template-columns: 1fr;
    }

    .est-title-main {
        font-size: 32px;
    }

    .req-section {
        padding: 0 14px 28px;
    }

    .exp-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .req-row {
        grid-template-columns: 1fr;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        padding: 20px 14px;
        gap: 20px;
    }

    .detail-sidebar {
        position: static;
    }

    /* Barra fija de precio/CTA en detalle de programa */
    .page-detalle-programa .fixed-bar {
        display: flex;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        align-items: center;
    }

    .page-detalle-programa .fixed-bar-info {
        flex: 1;
        min-width: 0;
    }

    .page-detalle-programa .fixed-bar-title {
        font-size: 15px;
        font-weight: 700;
        color: #7c7289;
        text-transform: uppercase;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }

    .page-detalle-programa .fixed-bar-price {
        font-size: 18px;
        font-weight: 800;
        white-space: nowrap;
    }

    .page-detalle-programa .fixed-bar-price-unit {
        font-size: 15px;
    }

    .page-detalle-programa .fixed-bar-sub {
        font-size: 15px;
        margin-top: 1px;
    }

    .page-detalle-programa .fixed-btn-info,
    .page-detalle-programa .fixed-btn-cta {
        font-size: 15px !important;
        padding: 8px 12px !important;
        height: 36px;
        border-radius: 999px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        gap: 4px;
        flex-shrink: 0;
    }

    .page-detalle-programa .fixed-btn-info.whatsapp-link {
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        color: #0b2a4a !important;
    }

    .page-detalle-programa .fixed-btn-info.whatsapp-link .wa-icon {
        width: 15px;
        height: 15px;
        color: #25d366 !important;
        fill: #25d366 !important;
    }

    .page-detalle-programa {
        padding-bottom: 72px;
    }
}

@media (min-width: 769px) {

    .est-grid,
    #page-estudiante .est-grid,
    .bx-page#page-estudiante .est-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .contact-section {
        padding: 28px 0 0;
    }

    .cf-row {
        flex-direction: column;
        gap: 0;
    }

    .cf-send {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cf-btn {
        width: 100%;
    }

    .hero-search-bar span {
        font-size: 15px;
    }
}

/* ── DETALLE DE PROGRAMA: contenido Gutenberg ── */

.dm-content {
    padding: 0;
}

.dm-content .dm-section {
    margin-bottom: 28px;
}

.dm-content .dm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-azul-100);
}

.dm-content p {
    font-size: 16px;
    color: var(--color-texto-secundario);
    line-height: 1.7;
    margin-bottom: 10px;
}

.dm-content strong {
    color: var(--color-texto-principal);
}


/* ═══════════════════════════════════════════
   PALETA AZUL — REFINES COMPONENTES
═══════════════════════════════════════════ */

.topnav {
    background: rgba(244, 249, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-azul-100);
}

.nav-tabs-list li>a,
.nav-tabs a {
    color: var(--color-texto-principal);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nav-tabs-list li>a:hover,
.nav-tabs a:hover {
    color: var(--color-azul-500);
}

.nav-tabs-list li>a:focus-visible,
.nav-tabs a:focus-visible {
    outline: 2px solid var(--color-azul-500);
    outline-offset: 2px;
}

/* Pills / tabs outline */
.pg-filter-btn,
.lang-toggle button,
.mod-toggle button {
    border-color: var(--color-azul-700);
}

.pg-filter-btn,
.lang-btn,
.mod-btn {
    background: transparent;
    border: 1px solid var(--color-azul-700);
    color: var(--color-azul-700);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pg-filter-btn:hover,
.lang-btn:hover,
.mod-btn:hover {
    background: var(--color-azul-100);
    color: var(--color-azul-700);
}

.pg-filter-btn.is-active,
.lang-btn.is-active,
.mod-btn.is-active,
.pg-filter-btn.active {
    background: var(--color-azul-700);
    border-color: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
}

/* Quick nav pills */
.quick-pill,
.nav-pill,
.level-pill {
    background: var(--color-azul-100);
    color: var(--color-azul-700);
    transition: background 0.2s ease, color 0.2s ease;
}

.quick-pill:hover,
.nav-pill:hover,
.level-pill:hover {
    background: var(--color-azul-500);
    color: var(--color-texto-sobre-oscuro);
}

/* Primary buttons */
.req-btn,
.contact-section button[type="submit"],
.contact-form button,
.btn-primary {
    background: var(--color-azul-700) !important;
    color: var(--color-texto-sobre-oscuro) !important;
    border: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.req-btn:hover,
.contact-section button[type="submit"]:hover,
.contact-form button:hover,
.btn-primary:hover {
    background: var(--color-azul-500) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.req-btn:active,
.btn-primary:active {
    background: var(--color-azul-900) !important;
    transform: translateY(0);
    box-shadow: none;
}

/* Detalle de programa: CTAs respetan la paleta de la tarjeta */
.page-detalle-programa .ds-cta,
.page-detalle-programa .fixed-btn-cta,
.page-detalle-programa .soy-est-btn,
.page-detalle-programa .dm-req-btn,
.page-detalle-programa .req-btn {
    background: var(--c-card-accent, var(--color-azul-700)) !important;
    color: var(--color-texto-sobre-oscuro) !important;
}

.page-detalle-programa .dm-req-btn,
.page-detalle-programa .req-btn,
.page-detalle-programa .b2-req-btn {
    margin-top: 20px !important;
}

.page-detalle-programa .ds-cta:hover,
.page-detalle-programa .fixed-btn-cta:hover,
.page-detalle-programa .soy-est-btn:hover,
.page-detalle-programa .dm-req-btn:hover,
.page-detalle-programa .req-btn:hover {
    background: var(--c-card-accent, var(--color-azul-500)) !important;
    filter: brightness(1.08);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.page-detalle-programa .ds-cta:active,
.page-detalle-programa .soy-est-btn:active {
    filter: brightness(0.92);
    transform: translateY(0);
    box-shadow: none;
}

/*
 * Detalle: acentos del UI (supera CSS inline en el contenido WP,
 * p. ej. .ds-lvl-bot { color:#75ba13 } en mediodía).
 */
.page-detalle-programa .ds-lvl-bot,
.page-detalle-programa .ds-off,
.page-detalle-programa .dm-back-btn,
.page-detalle-programa .ver-mas-btn,
.page-detalle-programa .tag-cupos,
.page-detalle-programa .prog-inicio,
.page-detalle-programa .faq-q.open,
.page-detalle-programa .faq-q.open span {
    color: var(--c-card-accent, var(--color-azul-700)) !important;
}

.page-detalle-programa .dm-back-btn svg,
.page-detalle-programa .ver-mas-btn svg,
.page-detalle-programa .acc-icon svg,
.page-detalle-programa .faq-q svg {
    stroke: var(--c-card-accent, var(--color-azul-700)) !important;
}

.page-detalle-programa .ver-mas-btn span {
    border-bottom-color: var(--c-card-accent, var(--color-azul-700)) !important;
}

.page-detalle-programa .acc-icon {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 12%, transparent) !important;
}

.page-detalle-programa .tag-cupos {
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 35%, transparent) !important;
}

.page-detalle-programa .h-row.featured {
    border-color: var(--c-card-accent, var(--color-azul-700)) !important;
    background: color-mix(in srgb, var(--c-card-accent, var(--color-azul-700)) 8%, transparent) !important;
}

.page-detalle-programa .dm-content a:not(.whatsapp-link):not(.ds-info-btn):not(.pg-more-btn) {
    color: var(--c-card-accent, var(--color-azul-700));
}

/* Botones de tarjetas de programa: respetan --c-card-accent */
.c-more-btn,
.pg-more-btn,
button.c-more-btn {
    background: var(--c-card-accent, var(--color-azul-700)) !important;
    color: var(--color-texto-sobre-oscuro) !important;
    border: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.c-more-btn:hover,
.pg-more-btn:hover {
    background: var(--c-card-accent, var(--color-azul-500)) !important;
    filter: brightness(1.12);
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
}

.c-more-btn:active,
.pg-more-btn:active {
    filter: brightness(0.88);
    transform: translateY(0);
    box-shadow: none;
}

.pg-more-btn[style*="opacity"],
.pg-more-btn.is-disabled,
button:disabled,
.c-more-btn:disabled {
    background: var(--color-disabled) !important;
    color: var(--color-texto-secundario) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Cards */
.c-card,
.pg-card,
.student-card,
.req-box,
.faq-wrap,
.pg-filter-card {
    background: var(--color-azul-50);
    border: 1px solid var(--color-azul-100);
    box-shadow: var(--shadow-azul);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.c-card:hover,
.pg-card:hover {
    border-color: var(--c-card-accent, var(--color-azul-500));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--c-card-accent, var(--color-azul-500)) 22%, transparent);
    transform: translateY(-2px);
}

/* Meta notes (Próximamente, descuentos): heredan el accent de la tarjeta */
.c-meta-note,
.c-dot--promo+em,
.c-dot--status+em,
.c-badge--promo,
.badge-descuento {
    color: var(--c-card-accent, var(--color-azul-700));
    font-style: italic;
    font-size: 15px;
}

/* Hero overlay + dynamic gradient shift */
@keyframes blendexHeroShift {
    0% {
        background-position: 0% 40%;
    }

    100% {
        background-position: 100% 60%;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
}

.student-section,
.section-wrap {
    background: transparent;
}

.pg-wrap,
.req-section,
.est-page {
    background: transparent;
}

/* Forms */
.contact-form input,
.contact-form textarea,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    border-color: var(--color-azul-100);
    color: var(--color-texto-principal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-section input::placeholder,
.contact-section textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-placeholder);
    opacity: 1; /* Firefox aplica opacidad extra por defecto */
}

/* El bloque de contacto va sobre fondo oscuro: texto claro */
.contact-section input,
.contact-section textarea {
    color: var(--color-texto-sobre-oscuro);
    -webkit-text-fill-color: var(--color-texto-sobre-oscuro);
    caret-color: var(--color-texto-sobre-oscuro);
    border-color: rgba(255, 255, 255, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-section input::placeholder,
.contact-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

/* Chrome pinta un fondo claro al autorrellenar y no se puede quitar con
   background-color; el inset box-shadow es la unica forma de taparlo. */
.contact-section input:-webkit-autofill,
.contact-section input:-webkit-autofill:hover,
.contact-section input:-webkit-autofill:focus,
.contact-section textarea:-webkit-autofill,
.contact-section textarea:-webkit-autofill:hover,
.contact-section textarea:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--site-footer-bg, var(--color-azul-900));
    box-shadow: inset 0 0 0 1000px var(--site-footer-bg, var(--color-azul-900));
    -webkit-text-fill-color: var(--color-texto-sobre-oscuro);
    caret-color: var(--color-texto-sobre-oscuro);
}

/* al enfocar un campo autorrellenado hay que repetir el anillo de foco,
   porque box-shadow no se acumula entre reglas */
.contact-section input:-webkit-autofill:focus,
.contact-section textarea:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--site-footer-bg, var(--color-azul-900)), 0 0 0 3px rgba(47, 140, 255, 0.25);
    box-shadow: inset 0 0 0 1000px var(--site-footer-bg, var(--color-azul-900)), 0 0 0 3px rgba(47, 140, 255, 0.25);
}

.contact-section input:focus,
.contact-section textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-azul-500);
    box-shadow: 0 0 0 3px rgba(47, 140, 255, 0.25);
    outline: none;
}

/* FAQ */
.faq-q {
    color: var(--color-texto-principal);
    border-color: var(--color-azul-100);
}

.faq-q svg {
    stroke: var(--c-card-accent, var(--color-azul-700));
    color: var(--c-card-accent, var(--color-azul-700));
}

.faq-q.open {
    color: var(--c-card-accent, var(--color-azul-700));
    background: var(--color-azul-50);
}

.faq-wrap .faq-q,
.faq-item {
    border-bottom: 1px solid var(--color-azul-100);
}

/* Footer */
.site-footer,
.footer,
.ft {
    background: var(--color-azul-900);
}

.ft-col-title,
.site-footer .widget-title,
.footer-col h4 {
    color: var(--color-azul-300);
}

.site-footer a,
.footer a,
.ft a {
    color: var(--color-azul-300);
    transition: color 0.2s ease;
}

.site-footer a:hover,
.footer a:hover,
.ft a:hover {
    color: var(--color-azul-500);
}

.ft-copy,
.footer-legal,
.site-footer .copyright {
    color: var(--color-azul-300);
}

.site-footer .social a svg,
.ft-social svg,
.social-icon svg {
    fill: var(--color-azul-300);
    transition: fill 0.2s ease;
}

.site-footer .social a:hover svg,
.ft-social a:hover svg {
    fill: var(--color-azul-500);
}

/* WhatsApp: conservar verde oficial */
.whatsapp-link .wa-icon,
a[aria-label="WhatsApp"] svg,
a[href*="wa.me"] svg {
    color: var(--color-whatsapp);
    fill: var(--color-whatsapp);
}

/* Meta / secondary text */
.c-meta,
.c-meta-item,
.c-desc,
.dm-breadcrumb,
.pg-filter-hint {
    color: var(--color-texto-secundario);
}

.ct-top,
.c-card-title .ct-top,
.pg-card-title .ct-top {
    color: var(--color-texto-principal);
}

.c-card-title .ct-bot,
.pg-card-title .ct-bot,
.ct-bot {
    color: var(--c-card-accent, var(--color-azul-700));
}

/* Search overlay */
.search-overlay {
    background: var(--color-azul-50);
    border-color: var(--color-azul-100);
}

.hero-search-icon svg {
    stroke: var(--site-search-icon-on-btn, var(--color-texto-sobre-oscuro));
    color: var(--site-search-icon-on-btn, var(--color-texto-sobre-oscuro));
}

.mobile-menu-toggle svg,
.menu-close svg {
    stroke: var(--color-azul-700);
    color: var(--color-azul-700);
}

.mobile-nav,
.mnav-panel {
    background: var(--color-azul-50);
}

/* Estudiantes — íconos check / flechas con currentColor */
.est-card-arr,
.est-card-icon,
.faq-q {
    color: var(--site-icon, var(--color-azul-700));
}

.est-card-arr svg,
.est-card-icon svg {
    stroke: currentColor;
}


/* ═══════════════════════════════════════════
   PROGRAM BADGE (iniciales en el gradiente)
═══════════════════════════════════════════ */

.prog-badge {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--color-texto-sobre-oscuro);
    font-size: clamp(22px, 4.2vw, 28px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(11, 42, 74, 0.25);
}

.prog-badge--wide {
    font-size: clamp(15px, 3.2vw, 18px);
    letter-spacing: 0.03em;
}

.prog-badge--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    text-shadow: none;
}

.prog-badge-img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    pointer-events: none;
}

.home-badge-icons .c-card-color:not(.c-card-color--image) {
    min-height: 100px;
}

@media (max-width: 768px) {
    .prog-badge {
        font-size: 22px;
    }

    .prog-badge--wide {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════════
   404 — PÁGINA NO ENCONTRADA
═══════════════════════════════════════════ */

.e404 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 72px;
}

.e404__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 55% at 15% 20%, rgba(47, 140, 255, 0.22), transparent 60%),
        radial-gradient(ellipse 55% 50% at 90% 75%, rgba(21, 101, 192, 0.16), transparent 55%),
        linear-gradient(160deg, var(--color-azul-50) 0%, #E8F2FC 40%, var(--color-azul-100) 100%);
}

.e404__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    animation: e404-drift 12s ease-in-out infinite alternate;
}

.e404__blob--a {
    width: min(42vw, 320px);
    height: min(42vw, 320px);
    top: 8%;
    left: -6%;
    background: rgba(47, 140, 255, 0.35);
}

.e404__blob--b {
    width: min(48vw, 380px);
    height: min(48vw, 380px);
    right: -8%;
    bottom: 6%;
    background: rgba(11, 42, 74, 0.18);
    animation-delay: -4s;
    animation-duration: 15s;
}

.e404__inner {
    width: min(640px, 100%);
    text-align: center;
}

.e404__stage {
    position: relative;
    margin: 0 auto 28px;
    width: min(100%, 420px);
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e404__code {
    font-size: clamp(96px, 22vw, 148px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--color-azul-900);
    text-shadow: 0 10px 30px rgba(11, 42, 74, 0.12);
    animation: e404-bounce 3.2s ease-in-out infinite;
}

.e404__bubble {
    position: absolute;
    padding: 8px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #fff;
    border: 1.5px solid var(--color-azul-100);
    box-shadow: var(--shadow-azul);
    color: var(--color-azul-700);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    animation: e404-float 4.5s ease-in-out infinite;
}

.e404__bubble--1 {
    top: 8%;
    left: 2%;
    animation-delay: 0s;
}

.e404__bubble--2 {
    top: 0;
    right: 4%;
    animation-delay: 0.7s;
}

.e404__bubble--3 {
    bottom: 10%;
    left: 8%;
    animation-delay: 1.4s;
}

.e404__bubble--4 {
    bottom: 4%;
    right: 6%;
    color: var(--color-texto-secundario);
    font-weight: 600;
    font-style: italic;
    animation-delay: 2.1s;
}

.e404__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(47, 140, 255, 0.12);
    color: var(--color-azul-700);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.e404__title {
    margin: 0 0 14px;
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-azul-900);
    letter-spacing: -0.02em;
}

.e404__sub {
    margin: 0 auto 12px;
    max-width: 34em;
    color: var(--color-texto-secundario);
    font-size: clamp(16px, 2.4vw, 18px);
    line-height: 1.55;
}

.e404__tip {
    margin: 0 auto 28px;
    max-width: 32em;
    color: var(--color-azul-700);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.e404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.e404__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.e404__btn--primary {
    background: var(--color-azul-700);
    color: var(--color-texto-sobre-oscuro);
    box-shadow: var(--shadow-btn);
}

.e404__btn--primary:hover {
    background: var(--color-azul-500);
    transform: translateY(-1px);
}

.e404__btn--ghost {
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-azul-900);
    border: 1.5px solid var(--color-azul-100);
}

.e404__btn--ghost:hover {
    background: #fff;
    border-color: var(--color-azul-300);
    transform: translateY(-1px);
}

@keyframes e404-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes e404-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.95; }
    50% { transform: translateY(-10px) rotate(2deg); opacity: 1; }
}

@keyframes e404-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(18px, -14px) scale(1.06); }
}

@media (max-width: 560px) {
    .e404 {
        min-height: calc(100vh - 90px);
        padding: 32px 16px 56px;
    }

    .e404__stage {
        height: 130px;
        margin-bottom: 20px;
    }

    .e404__bubble {
        font-size: 15px;
        padding: 6px 10px;
    }

    .e404__actions {
        flex-direction: column;
    }

    .e404__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .e404__code,
    .e404__bubble,
    .e404__blob,
    .blog-hero-title {
        animation: none;
    }
}