/* ==========================================================================
   DHEMA BUILDER: Frontend Styles (Isolated)
   ========================================================================== */

/* Utilidades Base del Constructor */
.prb-content-wrap {
    width: 100%;
    overflow: hidden;
}

.db-container {
    padding-left: 4%;
    padding-right: 4%;
    margin: 0 auto;
}

.db-section-title {
    color: var(--prb-color-primary, #111111);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -1.5px;
    margin: 0;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.db-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 6rem;
}

.db-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.db-hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    width: 100%;
}

/*
   El color va aqui y no solo en .db-hero-content. El tema pinta
   h1..h6 con su color primario, y una regla sobre el elemento siempre
   gana a lo que el titulo heredaria del contenedor: sin esta linea el
   titulo salia azul oscuro sobre la foto.
*/
.db-hero-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
    max-width: 800px;
    margin: 0;
}

.db-hero-desc {
    font-size: 1.2rem;
    margin-top: 1rem;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   2. PROYECTOS
   ========================================================================== */
.db-projects-section {
    padding: 8rem 0;
    background-color: #ffffff;
}

.db-projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5rem;
    gap: 4rem;
}

.db-projects-header .db-section-title {
    flex-shrink: 0;
}

.db-projects-desc {
    max-width: 600px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.db-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
}

.db-project-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.db-project-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f0f0f0;
}

.db-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.db-project-card:hover .db-project-thumb img {
    transform: scale(1.04);
}

.db-thumb-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}

.db-project-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.db-project-title {
    color: var(--prb-color-primary, #111111);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0;
}

.db-project-title a {
    text-decoration: none;
    color: #111111;
}

.db-project-terms {
    font-size: 0.85rem;
    color: #666666;
    font-weight: 400;
}

/* ==========================================================================
   3. SERVICIOS (Acordeón y Versión 2)
   ========================================================================== */
.db-services {
    padding: 6rem 0;
    background: #ffffff;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.db-services-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.db-service-item {
    border-bottom: 1px solid #eaeaea;
}

.db-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    cursor: pointer;
}

/*
 * Sin descripcion no hay nada que desplegar: ni cursor de mano ni signo. El
 * signo se esconde en lugar de quitarse para que la fila conserve su alto y
 * la lista no quede desigual.
 */
.db-service-item--simple .db-service-header {
    cursor: default;
}

.db-service-item--simple .db-icon {
    visibility: hidden;
}

.db-service-name {
    color: var(--prb-color-primary, #111111);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
}

.db-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.db-service-item.active .db-icon {
    transform: rotate(45deg);
}

.db-service-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.db-service-item.active .db-service-content {
    max-height: 500px;
    opacity: 1;
    padding-bottom: 1.5rem;
}

.db-service-content a {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.db-btn-small {
    display: inline-block;
    padding: 0.8rem 2rem;
    border: 1px solid #111111;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 2rem;
    text-decoration: none;
    color: #111111;
    transition: all 0.3s ease;
}

.db-btn-small:hover {
    background: #111111;
    color: #ffffff;
}

/* ESTILOS DE SERVICIOS VERSIÓN 2 (Cajas Flotantes) */
.prb-services-v2-section {
    position: relative;
    z-index: 10;
    margin-top: -80px;
    padding-bottom: 6rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Forzamos a que use la misma estructura y márgenes laterales del .db-container global */
.prb-services-v2-section .db-container {
    width: 100%;
    max-width: 1400px; /* O el ancho máximo que usen tus contenedores principales */
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
    margin: 0 auto;
}

.prb-services-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    box-sizing: border-box;
    width: 100%;
}

.prb-service-v2-card {
    background: #ffffff;
    padding: 3rem 2.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    min-width: 0; /* Evita que los elementos hijos con texto largo expandan la grid de forma forzosa */
}

.prb-service-v2-card:hover {
    transform: translateY(-5px);
}

.prb-service-v2-icon {
    margin-bottom: 0.5rem;
}

.prb-service-v2-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.prb-service-v2-sub {
    font-size: 0.8rem;
    color: #888888;
    display: block;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prb-service-v2-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 1rem 0;
    letter-spacing: -0.3px;
    word-break: break-word; /* Asegura que palabras largas no rompan el layout horizontal */
}

.prb-service-v2-desc {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    word-break: break-word;
}

.prb-service-v2-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
    margin-top: auto;
}

.prb-service-v2-link:hover {
    color: #c5a880;
}

@media (max-width: 992px) {
    .prb-services-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .prb-services-v2-section {
        margin-top: -40px;
    }
}

@media (max-width: 768px) {
    .prb-services-v2-grid {
        grid-template-columns: 1fr;
    }
    .prb-services-v2-section {
        margin-top: 0;
        padding: 4rem 0;
    }
}

/* --- Variantes de la seccion (todas opcionales) --- */

/*
 * Sin efecto flotante la seccion deja de subirse sobre la de arriba, asi
 * que necesita su propio aire por arriba. Va con la clase repetida para
 * ganarle al margen negativo de las consultas de medios de aqui encima.
 */
.prb-services-v2-section.prb-services-v2-section--fijo {
    margin-top: 0;
    padding-top: 3rem;
}

/* Cuatro columnas solo en escritorio: por debajo mandan las reglas de
   arriba, que ya bajan a dos y a una. */
@media (min-width: 993px) {
    .prb-services-v2-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Caja compacta: para tiras de iconos con un texto corto debajo. */
.prb-service-v2-card--compacta {
    padding: 1.75rem 1.5rem;
    gap: 0.85rem;
}

.prb-service-v2-card--compacta .prb-service-v2-icon { margin-bottom: 0; }
.prb-service-v2-card--compacta .prb-service-v2-title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.prb-service-v2-card--compacta .prb-service-v2-desc { margin-bottom: 0.85rem; }

/*
 * Centrada. El icono es una imagen en display block, y un bloque no lo
 * centra el text-align: hay que decirselo con los margenes.
 */
.prb-service-v2-card--centro { text-align: center; }
.prb-service-v2-card--centro .prb-service-v2-icon img { margin-inline: auto; }

/* Boton comun al pie de toda la seccion. */
.prb-services-v2-boton {
    margin-top: 2.5rem;
    text-align: center;
}

.prb-services-v2-boton a {
    display: inline-block;
    padding: 13px 32px;
    border: 2px solid var(--ft-color-primary, #0D1B2A);
    border-radius: 6px;
    background: var(--ft-color-primary, #0D1B2A);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.prb-services-v2-boton a:hover,
.prb-services-v2-boton a:focus-visible {
    background: transparent;
    color: var(--ft-color-primary, #0D1B2A);
}

/* ==========================================================================
   4. TESTIMONIOS
   Fusion de las dos secciones que habia: la del carrusel automatico sobre
   fondo gris y la de flechas sobre una foto. Fondo, avance automatico,
   flechas y puntos son ahora opciones.
   @prb-section: testimonios
   ========================================================================== */
.prb-test {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.prb-test-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000b29;
    opacity: 0.85;
}

.prb-test-inner {
    position: relative;
    z-index: 2;
    padding-block: 7rem;
    text-align: center;
}

/* --- Cabecera --- */
.prb-test-cab { margin-bottom: 3rem; }

.prb-test-sub {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.prb-test-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0 0 1rem;
}

.prb-test-linea {
    width: 60px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
}

/* --- Carrusel --- */
.prb-test-carrusel {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.prb-test-pista { overflow: hidden; }

.prb-test-item {
    display: none;
    animation: prbTestEntra 0.5s ease-in-out;
}

.prb-test-item.is-activa { display: block; }

/* Todas a la vez: solo pasa cuando no hay ni avance automatico ni forma de
   pasar a mano. Ver la nota en sections.js. */
.prb-test-carrusel.is-todas .prb-test-item { animation: none; }
.prb-test-carrusel.is-todas .prb-test-item + .prb-test-item { margin-top: 3rem; }

.prb-test-cita {
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    line-height: 1.45;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

.prb-test-nombre {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prb-test-cargo {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes prbTestEntra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- Flechas --- */
.prb-test-flecha {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background 0.2s ease;
}

.prb-test-flecha:hover { opacity: 1; }

.prb-test-flecha svg { width: 26px; height: 26px; }

.prb-test-prev { left: -3rem; }
.prb-test-next { right: -3rem; }

/* --- Puntos --- */
.prb-test-puntos {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.prb-test-punto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.prb-test-punto.is-activa {
    opacity: 1;
    transform: scale(1.25);
}

/* --- Boton de pausa --- */
.prb-test-pausa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid currentColor;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.prb-test-pausa:hover { opacity: 1; }

.prb-test-pausa svg { width: 14px; height: 14px; }

/* --- Texto oscuro: fondo claro --- */
.prb-test.is-texto-oscuro .prb-test-title  { color: var(--prb-color-primary, #111111); }
.prb-test.is-texto-oscuro .prb-test-sub    { color: #888888; }
.prb-test.is-texto-oscuro .prb-test-cita   { color: #1f2933; }
.prb-test.is-texto-oscuro .prb-test-nombre { color: var(--prb-color-primary, #111111); }
.prb-test.is-texto-oscuro .prb-test-cargo  { color: #888888; }
.prb-test.is-texto-oscuro .prb-test-linea  { background-color: var(--prb-color-secondary, #b8892b); }

.prb-test.is-texto-oscuro .prb-test-flecha,
.prb-test.is-texto-oscuro .prb-test-pausa { color: var(--prb-color-primary, #111111); }

.prb-test.is-texto-oscuro .prb-test-punto { background-color: var(--prb-color-primary, #111111); }

/* --- Texto claro: foto o fondo oscuro --- */
.prb-test.is-texto-claro .prb-test-title  { color: #ffffff; }
.prb-test.is-texto-claro .prb-test-sub    { color: rgba(255, 255, 255, 0.7); }
.prb-test.is-texto-claro .prb-test-cita   { color: rgba(255, 255, 255, 0.95); }
.prb-test.is-texto-claro .prb-test-nombre { color: #ffffff; }
.prb-test.is-texto-claro .prb-test-cargo  { color: rgba(255, 255, 255, 0.7); }
.prb-test.is-texto-claro .prb-test-linea  { background-color: #ffffff; }

.prb-test.is-texto-claro .prb-test-flecha,
.prb-test.is-texto-claro .prb-test-pausa { color: #ffffff; }

.prb-test.is-texto-claro .prb-test-punto { background-color: #ffffff; }

@media (max-width: 768px) {

    .prb-test-inner { padding-block: 4rem; }

    .prb-test-cita { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }

    /* Sin sitio a los lados: las flechas se meten dentro. */
    .prb-test-prev { left: -0.75rem; }
    .prb-test-next { right: -0.75rem; }

    .prb-test-flecha svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   5. ABOUT / MÉTRICAS (Estructura Overlap)
   ========================================================================== */
.db-about {
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #ffffff;
    padding: 4rem 0;
}

.db-about-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
}

.db-about-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    padding: 3rem;
    width: 50%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    margin-right: 4%;
}

.db-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.db-stat-item {
    border-top: 1px solid #eeeeee;
    padding-top: 1.5rem;
}

.db-stat-num {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
}

.db-stat-label {
    font-size: 0.85rem;
    color: #888888;
}

/* ==========================================================================
   6. LLAMADA A LA ACCION / BANNER
   Fusion de las dos secciones que hacian lo mismo con distinta piel: la de
   fondo gris y la de foto a pantalla completa. El fondo, la altura y la
   alineacion son ahora opciones.
   @prb-section: cta_banner
   ========================================================================== */
.prb-cta {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.prb-cta-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000b29;
    opacity: 0.7;
}

.prb-cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.prb-cta--compacta .prb-cta-inner { padding-block: 4rem; }
.prb-cta--normal   .prb-cta-inner { padding-block: 6rem; }
.prb-cta--grande   .prb-cta-inner { padding-block: 8rem; }

.prb-cta--izquierda .prb-cta-inner { text-align: left; }

.prb-cta-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 1rem;
}

.prb-cta-sub {
    font-size: 1.15rem;
    line-height: 1.5;
    max-width: 60ch;
    margin: 0 auto 2.5rem;
}

.prb-cta--izquierda .prb-cta-sub { margin-inline: 0; }

.prb-cta-btn {
    display: inline-block;
    padding: 1rem 3rem;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- Texto oscuro: fondo claro --- */
.prb-cta.is-texto-oscuro .prb-cta-title { color: var(--prb-color-primary, #111111); }
.prb-cta.is-texto-oscuro .prb-cta-sub   { color: #666666; }

.prb-cta.is-texto-oscuro .prb-cta-btn {
    border: 2px solid #111111;
    color: #111111;
}

.prb-cta.is-texto-oscuro .prb-cta-btn:hover {
    background: #111111;
    color: #ffffff;
}

/* --- Texto claro: foto o fondo oscuro --- */
.prb-cta.is-texto-claro .prb-cta-title { color: #ffffff; }
.prb-cta.is-texto-claro .prb-cta-sub   { color: rgba(255, 255, 255, 0.85); }

.prb-cta.is-texto-claro .prb-cta-btn {
    border: 1px solid #ffffff;
    color: #ffffff;
}

.prb-cta.is-texto-claro .prb-cta-btn:hover {
    background: #ffffff;
    color: #000b29;
}

@media (max-width: 768px) {

    .prb-cta--normal .prb-cta-inner,
    .prb-cta--grande .prb-cta-inner { padding-block: 4rem; }

    .prb-cta-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

/* ==========================================================================
   MEDIA QUERIES (Ajuste exacto al diseño original)
   ========================================================================== */
@media (max-width: 992px) {
    /* Proyectos */
    .db-projects-header {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    /* Servicios */
    .db-services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* About / Métricas - Efecto Overlap en Móvil */
    .db-about {
        padding: 4rem 1rem;
        justify-content: center;
    }

    .db-about-img {
        width: 100%;
        height: 100%;
    }

    .db-about-card {
        width: 92%;
        margin: 0 auto;
        padding: 2.5rem 1.5rem;
        border-radius: 4px;
    }
}

@media (max-width: 768px) {
    /* Reducción global de paddings */
    .db-projects-section,
    .db-services {
        padding: 4rem 0;
    }

    /* Hero */
    .db-hero {
        padding-bottom: 3rem;
        min-height: 70vh;
    }

    .db-hero-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    /* Proyectos Grid Móvil */
    .db-projects-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Quiénes somos (Métricas en columna única) */
    .db-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .db-stat-item {
        border: 1px solid #eaeaea;
        border-radius: 6px;
        padding: 1.2rem;
        text-align: center;
        border-top: 1px solid #eaeaea;
    }

    .db-stat-num {
        font-size: 1.5rem;
    }

}

/* ==========================================================================
   7. CONTACTO (FORMULARIO Y TEXTOS)
   ========================================================================== */
.db-contact-hero {
    background-color: #0D1B2A; /* Azul marino profundo */
    color: #ffffff;
    padding: 2rem 0;
    width: 100%;
}

.db-contact-grid {
    max-width: 1200px;
    width: 90%; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: 8rem;
    align-items: start;
}

.db-contact-massive-title {
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    letter-spacing: -2px;
}

.db-contact-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* Nueva Info de Contacto y Redes */
.db-contact-direct-info,
.db-contact-social {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.db-social-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.db-social-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.db-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    width: fit-content;
}

.db-contact-item svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.db-contact-item:hover {
    color: #ffffff;
    transform: translateX(5px);
}

.db-contact-item:hover svg {
    transform: scale(1.1);
}

/* ==========================================================================
   MEDIA QUERIES PARA LOS NUEVOS BLOQUES DE CONTACTO
   ========================================================================== */
@media (max-width: 992px) {
    .db-contact-grid { gap: 4rem; }
}

@media (max-width: 768px) {
    .db-contact-grid { 
        grid-template-columns: 1fr; 
        gap: 0rem; 
    }
    /* Aumentamos el padding superior para librar el menú fijo, conservando el inferior ajustado */
    .db-contact-hero { padding: calc(var(--header-height, 0px) + 2rem) 0 4rem 0; }
}

/* ==========================================================================
   HERO VERSIÓN 2 (Ajuste de Altura y Estilo de Botón)
   ========================================================================== */
.prb-hero-v2 {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 0;
}

.prb-hero-v2-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 11, 41, 0.65);
    z-index: 1;
}

.prb-hero-v2-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mismo motivo que en .db-hero-title: el color se declara, no se hereda. */
.prb-hero-v2-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.prb-hero-v2-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    margin: 0 auto 2rem auto;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* Estilo exacto del botón con bordes redondeados y tipografía limpia */
.prb-hero-v2-btn-wrap {
    margin-top: 0.5rem;
}

.prb-hero-v2-btn-wrap a.prb-btn-outline-white {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.prb-hero-v2-btn-wrap a.prb-btn-outline-white:hover {
    background: #ffffff;
    color: #000b29;
    border-color: #ffffff;
}

/* ==========================================================================
   SECCIÓN: NUESTROS CURSOS (Corregido desbordamiento)
   ========================================================================== */
.prb-courses-section {
    padding: 3rem 0;
    background-color: #ffffff;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden; /* Evita cualquier fuga horizontal */
}

.prb-courses-section .db-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.prb-courses-header {
    text-align: center;
    margin-bottom: 4rem;
}

.prb-courses-sub {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
    display: block;
    margin-bottom: 0.5rem;
}

.prb-courses-main-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #111111;
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
}

.prb-courses-line {
    width: 60px;
    height: 3px;
    background-color: #000b29;
    margin: 0 auto;
    border-radius: 2px;
}

/* ==========================================================================
   SECCIÓN: ÚLTIMAS NOTICIAS / BLOG GRID
   ========================================================================== */
.prb-news-section {
    padding: 3rem 0;
    background-color: #ffffff;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
}

.prb-news-section .db-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.prb-news-header {
    margin-bottom: 3.5rem;
}

.prb-news-sub {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444444;
    display: block;
    margin-bottom: 0.5rem;
}

.prb-news-main-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #111111;
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.prb-news-line {
    width: 60px;
    height: 3px;
    background-color: #28a745; /* Línea de acento verde a juego con la referencia */
    border-radius: 2px;
}

.prb-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    box-sizing: border-box;
}

.prb-news-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.prb-news-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    transition: opacity 0.3s ease;
}

.prb-news-img-wrap:hover {
    opacity: 0.9;
}

.prb-news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.prb-news-meta svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    stroke: #888888;
}

.prb-news-sep {
    color: #cccccc;
}

.prb-news-title {
    color: var(--prb-color-primary, #111111);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.prb-news-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.prb-news-title a:hover {
    color: #000b29;
}

.prb-news-excerpt {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.prb-news-readmore {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.prb-news-readmore span {
    font-size: 1.1rem;
    line-height: 1;
}

.prb-news-readmore:hover {
    color: #000b29;
    gap: 10px;
}

/* Responsivo para tablets y móviles */
@media (max-width: 992px) {
    .prb-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .prb-news-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SECCIÓN: PREGUNTAS FRECUENTES (FAQ Acordeón - Corregido Total)
   ========================================================================== */
.prb-faq-section {
    padding: 3rem 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.prb-faq-section .db-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.prb-faq-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.prb-faq-sub {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 0.5rem;
}

.prb-faq-main-title {
    color: var(--prb-color-primary, #111111);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
}

.prb-faq-line {
    width: 60px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
}

/* Control dinámico de colores limpios (Sin bordes blancos extraños) */
.prb-faq-section.prb-faq-light .prb-faq-sub { color: #666666; }
.prb-faq-section.prb-faq-light .prb-faq-main-title { color: #111111; }
.prb-faq-section.prb-faq-light .prb-faq-line { background-color: #000b29; }
.prb-faq-section.prb-faq-light .prb-faq-item { background-color: #ffffff; border-color: #e0e0e0; }
.prb-faq-section.prb-faq-light .prb-faq-question { color: #111111; }
.prb-faq-section.prb-faq-light .prb-faq-icon { color: #555555; }
.prb-faq-section.prb-faq-light .prb-faq-answer { background-color: #fafafa; border-top-color: #e0e0e0; }
.prb-faq-section.prb-faq-light .prb-faq-answer-inner p { color: #555555; }

.prb-faq-section.prb-faq-dark .prb-faq-sub { color: #a0aec0; }
.prb-faq-section.prb-faq-dark .prb-faq-main-title { color: #ffffff; }
.prb-faq-section.prb-faq-dark .prb-faq-line { background-color: #ffffff; }
.prb-faq-section.prb-faq-dark .prb-faq-item { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); }
.prb-faq-section.prb-faq-dark .prb-faq-question { color: #ffffff; }
.prb-faq-section.prb-faq-dark .prb-faq-icon { color: #cbd5e0; }
.prb-faq-section.prb-faq-dark .prb-faq-answer { background-color: rgba(0, 0, 0, 0.25); border-top-color: rgba(255, 255, 255, 0.1); }
.prb-faq-section.prb-faq-dark .prb-faq-answer-inner p { color: #e2e8f0; }

.prb-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.prb-faq-item {
    border: 1px solid;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.prb-faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.prb-faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    gap: 1rem; /* Evita que el texto y el icono colisionen */
}

.prb-faq-q-text {
    flex: 1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.prb-faq-icon {
    font-size: 1.5rem;
    font-weight: 400;
    flex-shrink: 0;
    transition: transform 0.3s ease, color 0.3s ease;
    line-height: 1;
}

.prb-faq-answer {
    display: none; /* Oculto por defecto de forma segura */
    border-top: 0px solid transparent;
    box-sizing: border-box;
    width: 100%;
}

.prb-faq-answer-inner {
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
    width: 100%;
}

.prb-faq-answer-inner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Estados Activos del Acordeón (Controlados por clase limpia) */
.prb-faq-item.is-open {
    border-color: currentColor;
}

.prb-faq-item.is-open .prb-faq-icon {
    transform: rotate(45deg);
}

.prb-faq-item.is-open .prb-faq-answer {
    display: block; /* Muestra el contenido instantáneamente sin bloqueos de JS */
    border-top-width: 1px;
}

/* ==========================================================================
   Contacto V2 - Tarjetas + Formulario Minimalista Integrado
   ========================================================================== */

.prb-contact-v2-section {
    padding: 60px 20px;
    background-color: transparent;
    font-family: var(--prb-font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.prb-contact-v2-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: start;
}

/* Columna Izquierda */
.prb-contact-v2-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.prb-c2-card {
    background-color: #f3f4f6;
    border-radius: 24px;
    padding: 30px;
}

.prb-c2-title {
    font-family: var(--prb-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
}

.prb-c2-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prb-c2-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #111827;
}

.prb-c2-icon {
    fill: #111827;
    flex-shrink: 0;
}

.prb-c2-link {
    color: #111827;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.prb-c2-link:hover {
    opacity: 0.7;
}

/* Botones Inferiores Izquierda */
.prb-c2-actions {
    display: grid;
    margin-top: 5px;
}

.prb-c2-btn {
    background-color: #f3f4f6;
    color: #111827;
    text-align: center;
    padding: 14px 20px;
    border-radius: 50px;
    font-family: var(--prb-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.prb-c2-btn:hover {
    background-color: #e5e7eb;
}

/* Columna Derecha - Contenedor sin fondo */
.prb-contact-v2-right {
    width: 100%;
}

.prb-c2-form-wrapper {
    background: transparent;
    padding: 10px 0;
}

.prb-c2-placeholder {
    color: #6b7280;
    text-align: center;
    padding: 40px 0;
}

/* Formulario: Líneas inferiores e integración limpia */
.prb-c2-form-wrapper form p,
.prb-c2-form-wrapper .wpcf7-form-control-wrap {
    margin-bottom: 24px;
    display: block;
}

.prb-c2-form-wrapper label {
    display: block;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.prb-c2-form-wrapper input[type="text"],
.prb-c2-form-wrapper input[type="email"],
.prb-c2-form-wrapper input[type="tel"],
.prb-c2-form-wrapper textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #d1d5db;
    color: #111827;
    padding: 10px 0;
    font-size: 1rem;
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.prb-c2-form-wrapper input[type="text"]:focus,
.prb-c2-form-wrapper input[type="email"]:focus,
.prb-c2-form-wrapper input[type="tel"]:focus,
.prb-c2-form-wrapper textarea:focus {
    border-bottom-color: #111827;
}

.prb-c2-form-wrapper textarea {
    resize: vertical;
    min-height: 100px;
}

/* Botón de Envío Gradiente */
.prb-c2-form-wrapper input[type="submit"],
.prb-c2-form-wrapper button[type="submit"] {
    width: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 16px 30px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 15px;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.prb-c2-form-wrapper input[type="submit"]:hover,
.prb-c2-form-wrapper button[type="submit"]:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

@media (max-width: 992px) {
    .prb-contact-v2-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SECCIÓN: NOSOTROS / PERFIL
   ========================================================================== */
.prb-about-section {
    padding: 80px 0;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.prb-about-section .db-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.prb-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Orientación: Texto a la Izquierda / Imagen a la Derecha */
.prb-about-text-left .prb-about-grid {
    grid-template-columns: 1fr 1fr;
}
.prb-about-text-left .prb-about-image-col {
    order: 2;
}
.prb-about-text-left .prb-about-content-col {
    order: 1;
}

/* Estilo de la Imagen con esquinas redondeadas suaves */
.prb-about-image-col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    display: block;
}

/* Tipografía del Título: Playfair Display */
.prb-about-title {
    font-family: var(--prb-font-heading, 'Playfair Display', serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.2;
    color: #111111;
    margin-bottom: 24px;
    font-weight: 700;
}

/* Tipografía de los Textos y Listas: Lato */
.prb-about-text {
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 17px;
    line-height: 1.6;
    color: #444444;
}

.prb-about-text p {
    margin-bottom: 16px;
}

/* Estilos personalizados para listas o viñetas con iconos check */
.prb-about-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prb-about-text ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
}

.prb-about-text ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #111111;
    font-weight: bold;
    font-size: 18px;
}

/* Reducir el padding general de las secciones en mobile */
@media (max-width: 992px) {
    .prb-about-section {
        padding: 20px 0; /* Bajamos el padding de 80px a 40px para acercar las secciones */
    }

    .prb-about-grid {
        grid-template-columns: 1fr;
        gap: 20px; /* Reducimos el espacio entre la imagen y el texto interno */
        display: flex;
        flex-direction: column;
    }

    /* Orden vertical por defecto: Texto arriba, Imagen abajo */
    .prb-about-image-col {
        order: 2;
        margin-top: 10px; /* Evita que la imagen deje un espacio fantasma abajo */
    }
    .prb-about-content-col {
        order: 1;
    }

    /* Si se usa la variante invertida (text_left): Imagen arriba, Texto abajo */
    .prb-about-text-left .prb-about-image-col {
        order: 1;
        margin-top: 0;
        margin-bottom: 10px;
    }
    .prb-about-text-left .prb-about-content-col {
        order: 2;
    }

    .prb-about-title {
        font-size: 2rem;
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   ESTILOS DEL BOTÓN EN SECCIÓN NOSOTROS / PERFIL
   ========================================================================== */
.prb-about-action {
    margin-top: 24px;
}

.prb-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: #d79e20; /* Naranja vibrante de referencia */
    color: #000000; /* Texto en negro fuerte */
    padding: 14px 24px;
    border-radius: 4px;
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-sizing: border-box;
}

.prb-about-btn:hover {
    background-color: #e03d00;
    transform: translateY(-2px);
}

.prb-about-btn .btn-text {
    line-height: 1;
}

.prb-about-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.prb-about-btn .btn-icon svg {
    stroke: #000000;
}

/* ==========================================================================
   SECCIÓN: BANNER CON FONDO Y TEXTOS SUPUESTOS (HERO BANNER)
   ========================================================================== */
.prb-hero-banner {
    position: relative;
    padding: 100px 0;
    background-color: #111111;
    color: #ffffff;
    overflow: hidden;
}

/* Capa oscura semitransparente para legibilidad del texto sobre la imagen */
.prb-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.prb-hero-banner .db-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.prb-banner-content {
    max-width: 700px;
}

/* Subtítulos */
.prb-banner-sub {
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.4;
    display: block;
    color: #f1f1f1;
}

.prb-banner-sub.top {
    margin-bottom: 12px;
}

.prb-banner-sub.bottom {
    margin-top: 12px;
    margin-bottom: 30px;
}

/* Título principal grande */
.prb-banner-title {
    font-family: var(--prb-font-heading, 'Playfair Display', serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Botón interactivo */
.prb-banner-action {
    margin-top: 10px;
}

.prb-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.prb-banner-btn:hover {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

.prb-banner-btn .arrow {
    font-weight: bold;
    font-size: 18px;
}

/* Adaptación Responsive para Móviles */
@media (max-width: 992px) {
    .prb-hero-banner {
        padding: 60px 0;
    }
    
    .prb-banner-overlay {
        background: rgba(0, 0, 0, 0.65); /* Capa más uniforme en mobile */
    }

    .prb-banner-content {
        max-width: 100%;
        text-align: left;
    }

    .prb-banner-title {
        font-size: 2.3rem;
    }
}

/* ==========================================================================
   BLOQUE: ESPACIADOR RESPONSIVO
   ========================================================================== */
.prb-spacer {
    width: 100%;
    height: var(--spacer-desktop, 40px);
    background-color: transparent;
    pointer-events: none;
}

@media (max-width: 992px) {
    .prb-spacer {
        height: var(--spacer-mobile, 20px);
    }
}

/* ==========================================================================
   SECCIÓN: TARJETA CON CAPAS Y FRANJA OSCURA ENCAJADA (CARD FEATURE - FINAL)
   ========================================================================== */
.prb-card-section {
    padding: 30px 0;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.prb-card-section .db-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Contenedor principal gris con el desborde superior izquierdo */
.prb-card-wrapper {
    background-color: #eaece5;
    border-radius: 24px;
    padding: 80px 60px 60px 60px;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
}

/* Inversión de columnas si se selecciona text_left */
.prb-card-text-left .prb-card-image-col {
    order: 2;
}
.prb-card-text-left .prb-card-content-col {
    order: 1;
}

/* Columna de imagen que sobresale por encima del contenedor gris */
.prb-card-img-container {
    position: relative;
    width: 100%;
    margin-top: -110px;
    margin-bottom: 0;
    overflow: hidden; /* Mantiene la franja perfectamente contenida dentro de los límites de la imagen */
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.prb-card-img-container img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* Franja oscura translúcida perfectamente encajada abajo sobre la imagen (en desktop y móvil) */
.prb-card-dark-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(38, 42, 48, 0.88);
    backdrop-filter: blur(8px);
    color: #ffffff;
    /* Redondeo elegante: esquina superior derecha pronunciada y las demás adaptadas */
    border-radius: 16px 45px 0 0; 
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.2);
    z-index: 3;
}

.dark-badge-left {
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: #e0e0e0;
}

.dark-badge-right {
    font-family: var(--prb-font-heading, 'Playfair Display', serif);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

/* Columna de contenidos de texto */
.prb-card-title {
    font-family: var(--prb-font-heading, 'Playfair Display', serif);
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.15;
    color: #111111;
    margin-bottom: 20px;
    font-weight: 700;
}

.prb-card-text {
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
}

.prb-card-text p {
    margin-bottom: 16px;
}

/* Botón corporativo estilo naranja con icono */
.prb-card-action {
    margin-top: 30px;
}

.prb-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: #df9b27;
    color: #000000;
    padding: 14px 24px;
    border-radius: 6px;
    font-family: var(--prb-font-body, 'Lato', sans-serif);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(223, 155, 39, 0.3);
}

.prb-card-btn:hover {
    background-color: #c9881d;
    transform: translateY(-2px);
}

.prb-card-btn .btn-text {
    line-height: 1;
}

.prb-card-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.prb-card-btn .btn-icon svg {
    stroke: #000000;
}

/* Adaptación Responsive para Móviles y Tablets */
@media (max-width: 992px) {
    .prb-card-wrapper {
        grid-template-columns: 1fr;
        /* Quitamos el padding superior e izquierdo/derecho. Solo dejamos abajo (30px) */
        padding: 0 0 30px 0; 
        margin-top: 15px;
        gap: 20px;
        overflow: hidden; /* Esto corta la imagen exactamente con la forma redondeada del contenedor gris */
        border-radius: 24px;
    }

    .prb-card-text-left .prb-card-image-col,
    .prb-card-text-left .prb-card-content-col {
        order: unset;
    }

    /* La imagen ahora se pega arriba del todo */
    .prb-card-img-container {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-radius: 0; /* El recorte superior lo hace el contenedor padre automáticamente */
        box-shadow: none;
    }

    .prb-card-img-container img {
        border-radius: 0;
        width: 100%;
        height: auto;
        display: block;
    }

    /* Padding exclusivo para el contenido de texto para que no toque los bordes laterales */
    .prb-card-content-col {
        padding: 0 20px;
    }

    /* Franja oscura translúcida encajada abajo de la imagen en móvil */
    .prb-card-dark-badge {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px 18px;
        border-radius: 12px 35px 0 0;
    }

    .dark-badge-right {
        font-size: 1.2rem;
    }

    .prb-card-section {
        padding: 30px 0;
    }
}

/* ==========================================================================
   NUESTROS CURSOS — Tarjetas, filtros y ficha ampliada
   ========================================================================== */

/* --- Barra de orden y filtros --- */
.prb-cx-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 26px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec;
}

.prb-cx-campo { display: flex; flex-direction: column; gap: 6px; }

.prb-cx-campo label {
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
}

.prb-cx-campo select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 34px 9px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 13px;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ft-color-primary, #0D1B2A);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.prb-cx-campo select:focus {
    outline: none;
    border-color: var(--ft-color-secondary, #C6A64D);
}

.prb-cx-count {
    margin-left: auto;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    color: #999;
    padding-bottom: 9px;
}

/* --- Rejilla --- */
.prb-cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.prb-cx-vacio {
    margin: 40px 0 0;
    padding: 40px 20px;
    text-align: center;
    color: #888;
    background: #fafafa;
    border-radius: 10px;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
}

/* --- Tarjeta --- */
.prb-cx-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(13, 27, 42, 0.09);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.prb-cx-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(13, 27, 42, 0.16);
}
.prb-cx-card.prb-cx-oculto { display: none; }

/* --- Zona de imagen --- */
.prb-cx-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--ft-color-primary, #0D1B2A);
}
.prb-cx-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13,27,42,0.28) 0%, rgba(13,27,42,0.05) 45%, rgba(13,27,42,0.62) 100%);
}

.prb-cx-media-link { position: absolute; inset: 0; z-index: 3; }

.prb-cx-media[data-video] { cursor: pointer; }

.prb-cx-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--ft-color-secondary, #C6A64D);
    color: #fff;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.prb-cx-alumnos {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
}
.prb-cx-alumnos svg { width: 15px; height: 15px; }

.prb-cx-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 54px;
    height: 54px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(13, 27, 42, 0.72);
    transition: color 0.2s ease, transform 0.2s ease;
}
.prb-cx-play svg { width: 100%; height: 100%; display: block; }
.prb-cx-card:hover .prb-cx-play {
    color: var(--ft-color-secondary, #C6A64D);
    transform: translate(-50%, -50%) scale(1.08);
}

/* --- Cuerpo --- */
.prb-cx-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.prb-cx-titulo {
    color: var(--prb-color-primary, #0D1B2A);
    font-family: var(--ft-font-heading, 'Playfair Display', serif);
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 0 8px;
}
.prb-cx-titulo a {
    color: var(--ft-color-primary, #0D1B2A);
    text-decoration: none;
}
.prb-cx-titulo a:hover { color: var(--ft-color-secondary, #C6A64D); }

.prb-cx-autor {
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 14px;
}

.prb-cx-precios {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    margin-top: auto;
}
.prb-cx-precio {
    font-family: var(--ft-font-heading, 'Playfair Display', serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ft-color-primary, #0D1B2A);
    line-height: 1;
}
.prb-cx-precios del {
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    color: #b0b0b0;
}

.prb-cx-acciones { display: flex; gap: 10px; }

.prb-cx-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 2px solid var(--ft-color-primary, #0D1B2A);
    border-radius: 6px;
    color: var(--ft-color-primary, #0D1B2A);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.prb-cx-cart svg { width: 20px; height: 20px; }
.prb-cx-cart:hover {
    background: var(--ft-color-primary, #0D1B2A);
    color: #fff;
}

.prb-cx-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 13px 18px;
    border: 2px solid var(--ft-color-primary, #0D1B2A);
    border-radius: 6px;
    background: var(--ft-color-primary, #0D1B2A);
    color: #fff;
    text-decoration: none;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.prb-cx-buy:hover {
    background: var(--ft-color-secondary, #C6A64D);
    border-color: var(--ft-color-secondary, #C6A64D);
    color: #fff;
}

/* --- Botón "Ver todos" --- */
.prb-cx-vertodos {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
    padding: 14px 34px;
    border: 2px solid var(--ft-color-primary, #0D1B2A);
    border-radius: 6px;
    color: var(--ft-color-primary, #0D1B2A);
    text-decoration: none;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}
.prb-cx-vertodos:hover {
    background: var(--ft-color-primary, #0D1B2A);
    color: #fff;
}

/* --- Ventana emergente --- */
.prb-cx-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 4vw;
    background: rgba(5, 10, 18, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: 100000;
    overflow-y: auto;
}
.prb-cx-modal-open { opacity: 1; visibility: visible; }

.prb-cx-modal-close {
    position: fixed;
    top: 22px;
    right: 30px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.prb-cx-modal-close span { font-size: 1.6rem; line-height: 1; }
.prb-cx-modal-close:hover { color: var(--ft-color-secondary, #C6A64D); }

.prb-cx-modal-box {
    width: min(900px, 100%);
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.prb-cx-modal-video { aspect-ratio: 16 / 9; background: #000; }
.prb-cx-modal-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.prb-cx-modal-info {
    background: #fff;
    padding: 28px 32px 30px;
    font-family: var(--ft-font-body, 'Lato', sans-serif);
}

.prb-cx-m-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ft-font-heading, 'Playfair Display', serif);
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--ft-color-primary, #0D1B2A);
    margin: 0 0 6px;
}
.prb-cx-m-ext { color: var(--ft-color-secondary, #C6A64D); flex-shrink: 0; line-height: 0; }
.prb-cx-m-ext svg { width: 17px; height: 17px; }

.prb-cx-m-autor { margin: 0 0 16px; color: #888; font-size: 0.9rem; }

.prb-cx-m-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
}
.prb-cx-m-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ft-color-primary, #0D1B2A);
}
.prb-cx-m-meta svg { width: 16px; height: 16px; color: var(--ft-color-secondary, #C6A64D); }
.prb-cx-m-cat {
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--ft-color-light, #F4F4F4);
    font-size: 0.78rem;
}

.prb-cx-m-desc {
    margin: 0 0 22px;
    color: #666;
    line-height: 1.65;
    font-size: 0.92rem;
}

.prb-cx-m-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}
.prb-cx-m-foot .prb-cx-precios { margin: 0; }
.prb-cx-m-foot .prb-cx-buy { flex: 0 0 auto; padding: 13px 32px; }

/* --- Responsive --- */
@media (max-width: 700px) {
    .prb-cx-bar { gap: 14px 18px; }
    .prb-cx-campo { flex: 1 1 45%; }
    .prb-cx-campo select { width: 100%; }
    .prb-cx-count { margin-left: 0; flex-basis: 100%; padding-bottom: 0; }

    .prb-cx-grid { grid-template-columns: 1fr; gap: 22px; }

    .prb-cx-modal { padding: 0; }
    .prb-cx-modal-box { border-radius: 0; }
    .prb-cx-modal-close { top: 10px; right: 14px; }
    .prb-cx-modal-info { padding: 22px 20px 26px; }
    .prb-cx-m-titulo { font-size: 1.2rem; }
    .prb-cx-m-foot { justify-content: space-between; }
    .prb-cx-m-foot .prb-cx-buy { flex: 1; }
}

/* ==========================================================================
   SECCION: SHORTCODE
   @prb-section: shortcode
   ========================================================================== */

.prb-sc {
    padding-block: clamp(2rem, 6vw, 3.5rem);
}

.prb-sc--aire-ninguno { padding-block: 0; }
.prb-sc--aire-amplio  { padding-block: clamp(3rem, 9vw, 6rem); }

.prb-sc-inner {
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.prb-sc--normal .prb-sc-inner { max-width: 720px; }
.prb-sc--ancho  .prb-sc-inner { max-width: 1140px; }
.prb-sc--total  .prb-sc-inner { max-width: none; }

/* Aviso que solo ve quien puede editar la pagina. */
.prb-sc-aviso {
    max-width: 720px;
    margin: 1.5rem auto;
    padding: 0.9rem 1.1rem;
    border: 1px dashed var(--prb-color-border, #e2e6ea);
    border-radius: var(--prb-radius, 6px);
    background: var(--prb-color-surface, #f6f7f9);
    color: var(--prb-color-muted, #5c6874);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ==========================================================================
   SECCION: TEXTO Y CONTENIDO (editor completo)
   @prb-section: rich_text
   ========================================================================== */

.prb-rich {
    padding-block: clamp(2rem, 6vw, 3.5rem);
    font-family: var(--prb-font-body, inherit);
    color: var(--prb-color-text, #1f2933);
}

.prb-rich--fondo {
    background: var(--prb-color-surface, #f6f7f9);
}

.prb-rich-inner {
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    line-height: 1.7;
}

.prb-rich--normal .prb-rich-inner { max-width: 720px; }
.prb-rich--ancho  .prb-rich-inner { max-width: 1140px; }
.prb-rich--total  .prb-rich-inner { max-width: none; }

.prb-rich-inner > * + * { margin-top: 1.5rem; }

.prb-rich-inner h2,
.prb-rich-inner h3,
.prb-rich-inner h4 {
    margin-top: 2.5rem;
    margin-bottom: 0;
    font-family: var(--prb-font-heading, inherit);
    font-weight: 600;
    line-height: 1.2;
    color: var(--prb-color-primary, #10243a);
}

.prb-rich-inner h2 { font-size: clamp(1.625rem, 2.2vw + 1.1rem, 2.25rem); }
.prb-rich-inner h3 { font-size: clamp(1.3125rem, 1vw + 1.05rem, 1.625rem); }
.prb-rich-inner h4 { font-size: 1.125rem; }

.prb-rich-inner h2 + *,
.prb-rich-inner h3 + *,
.prb-rich-inner h4 + * { margin-top: 1rem; }

.prb-rich-inner ul,
.prb-rich-inner ol { padding-left: 1.35em; }

.prb-rich-inner li + li { margin-top: 0.35em; }

/* Un enlace no puede distinguirse solo por el color: eso incumple
   el criterio WCAG 1.4.1. Va subrayado siempre. */
.prb-rich-inner a {
    color: var(--prb-color-primary, #10243a);
    text-decoration: underline;
    text-decoration-color: var(--prb-color-secondary, #b8892b);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.prb-rich-inner blockquote {
    margin: 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--prb-color-secondary, #b8892b);
    font-style: italic;
    color: var(--prb-color-primary, #10243a);
}

.prb-rich-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.prb-rich-inner figure { margin: 0; }

.prb-rich-inner figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--prb-color-muted, #5c6874);
    text-align: center;
}

.prb-rich-inner table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.prb-rich-inner th,
.prb-rich-inner td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--prb-color-border, #e2e6ea);
    text-align: left;
}

/* ==========================================================================
   SECCION: TITULO DE SECCION
   @prb-section: heading
   ========================================================================== */

.prb-heading {
    padding-block: clamp(2rem, 5vw, 3rem);
}

.prb-heading-inner {
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.prb-heading--normal .prb-heading-inner { max-width: 720px; }
.prb-heading--ancho  .prb-heading-inner { max-width: 1140px; }

.prb-heading--centro .prb-heading-inner {
    text-align: center;
}

.prb-heading--centro .prb-heading-sub {
    margin-inline: auto;
}

.prb-heading-eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--prb-font-body, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--prb-color-secondary, #b8892b);
}

.prb-heading-title {
    margin: 0;
    font-family: var(--prb-font-heading, inherit);
    font-size: clamp(1.75rem, 3vw + 1.1rem, 2.75rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--prb-color-primary, #10243a);
    text-wrap: balance;
}

.prb-heading-sub {
    max-width: 62ch;
    margin: 1rem 0 0;
    font-family: var(--prb-font-body, inherit);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--prb-color-muted, #5c6874);
}

/* ==========================================================================
   SECCION: IMAGEN
   @prb-section: image
   ========================================================================== */

.prb-img {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.prb-img-inner {
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.prb-img--normal .prb-img-inner { max-width: 720px; }
.prb-img--ancho  .prb-img-inner { max-width: 1140px; }

.prb-img--total .prb-img-inner {
    max-width: none;
    padding-inline: 0;
}

.prb-img-el {
    display: block;
    width: 100%;
    height: auto;
}

.prb-img-el--redonda { border-radius: 10px; }

.prb-img--total .prb-img-el--redonda { border-radius: 0; }

.prb-img-link {
    display: block;
    text-decoration: none;
}

.prb-img-caption {
    margin-top: 0.6rem;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    font-family: var(--prb-font-body, inherit);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--prb-color-muted, #5c6874);
    text-align: center;
}

/* ==========================================================================
   SECCION: GALERIA DE IMAGENES
   @prb-section: gallery
   ========================================================================== */

.prb-gal {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.prb-gal-inner {
    display: grid;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    grid-template-columns: repeat(2, 1fr);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.prb-gal--normal .prb-gal-inner { max-width: 720px; }
.prb-gal--ancho  .prb-gal-inner { max-width: 1140px; }

.prb-gal--total .prb-gal-inner {
    max-width: none;
    padding-inline: 0;
    gap: 4px;
}

/* En movil siempre dos columnas: el numero elegido entra a partir de tablet. */
@media (min-width: 48em) {
    .prb-gal-inner {
        grid-template-columns: repeat(var(--prb-gal-cols, 3), 1fr);
    }
}

.prb-gal-item { margin: 0; }

.prb-gal-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: var(--prb-color-surface, #f6f7f9);
}

.prb-gal--total .prb-gal-img { border-radius: 0; }

.prb-gal-link {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    cursor: zoom-in;
}

.prb-gal--total .prb-gal-link { border-radius: 0; }

.prb-gal-link .prb-gal-img {
    transition: transform 400ms ease;
}

.prb-gal-link:hover .prb-gal-img { transform: scale(1.04); }

.prb-gal-link:focus-visible {
    outline: 3px solid var(--prb-color-secondary, #b8892b);
    outline-offset: 3px;
}

.prb-gal-pie {
    margin-top: 0.4rem;
    font-family: var(--prb-font-body, inherit);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--prb-color-muted, #5c6874);
}

@media (prefers-reduced-motion: reduce) {
    .prb-gal-link .prb-gal-img { transition: none; }
    .prb-gal-link:hover .prb-gal-img { transform: none; }
}

/* --- Visor a pantalla completa --- */

body.prb-lb-abierto { overflow: hidden; }

.prb-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(8, 12, 18, 0.92);
}

.prb-lb[hidden] { display: none; }

.prb-lb-figura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.prb-lb-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 4px;
}

.prb-lb-pie {
    max-width: 60ch;
    margin: 0;
    font-family: var(--prb-font-body, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #e6e9ee;
    text-align: center;
}

.prb-lb-pie[hidden] { display: none; }

.prb-lb-cerrar,
.prb-lb-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 180ms ease;
}

.prb-lb-cerrar:hover,
.prb-lb-nav:hover { background: rgba(255, 255, 255, 0.22); }

.prb-lb-cerrar:focus-visible,
.prb-lb-nav:focus-visible {
    outline: 3px solid var(--prb-color-secondary, #b8892b);
    outline-offset: 2px;
}

.prb-lb-cerrar {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
}

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

.prb-lb-contador {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    left: 0;
    right: 0;
    margin: 0;
    font-family: var(--prb-font-body, sans-serif);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* En movil las flechas estorban a los lados: se bajan sobre la imagen. */
@media (max-width: 47.99em) {
    .prb-lb { padding-inline: 0.5rem; }
    .prb-lb-nav {
        position: absolute;
        bottom: 3rem;
    }
    .prb-lb-prev { left: 1rem; }
    .prb-lb-next { right: 1rem; }
}

/* ==========================================================================
   IMAGENES QUE RELLENAN SU CONTENEDOR
   Sustituyen a los fondos CSS: un fondo no admite srcset, una <img> si.

   Va marcado como "common", no como propiedad de unas secciones concretas:
   .prb-fit-img la usan el hero, el hero v2, el hero banner, testimonios v2,
   nosotros, el banner de contacto, los cursos y las noticias. Una regla
   compartida tiene que cargarse siempre, o las secciones que no esten en
   la lista se quedan sin ella.
   @prb-section: common
   ========================================================================== */

.prb-fit-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.prb-cx-media { overflow: hidden; }

/* Los adornos que van sobre la miniatura del curso (etiqueta "Popular",
   valoracion, boton de reproducir) deben quedar por delante de la imagen. */
.prb-cx-media > :not(img) { z-index: 2; }

.prb-news-img-wrap {
    position: relative;
    overflow: hidden;
}

/* Antes esto iba en un atributo style dentro del HTML. */
.db-banner-bg { object-fit: cover; }

/* ==========================================================================
   FONDOS DE SECCION CONVERTIDOS EN IMAGEN
   La regla .prb-fit-img ya esta definida mas arriba: aqui solo se resuelven
   las capas de las secciones que antes usaban un fondo CSS.
   @prb-section: hero, hero_v2, hero_banner, about
   ========================================================================== */

.db-hero,
.prb-hero-v2,
.prb-hero-banner,
.db-about-img {
    overflow: hidden;
}

/*
   En estas dos secciones el contenedor del texto no declaraba z-index. Con
   el fondo como CSS daba igual, pero una imagen es un elemento posicionado
   y taparia el texto. Se le da capa propia por encima del velo.
*/
.prb-hero-banner > .db-container {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   BUSCADOR
   Pinta su propio formulario en vez de usar el del tema: el plugin se
   instala en temas ajenos y alli no controlamos esos estilos.
   @prb-section: buscador
   ========================================================================== */

.prb-busca {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

.prb-busca-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000b29;
    opacity: 0.7;
}

.prb-busca-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.prb-busca--compacta .prb-busca-inner { padding-block: 3rem; }
.prb-busca--normal   .prb-busca-inner { padding-block: 5rem; }
.prb-busca--grande   .prb-busca-inner { padding-block: 7rem; }

.prb-busca--izquierda .prb-busca-inner { text-align: left; }

.prb-busca-title {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 0.8rem;
}

.prb-busca-sub {
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 55ch;
    margin: 0 auto 2rem;
}

.prb-busca--izquierda .prb-busca-sub { margin-inline: 0; }

/* El nombre del campo se oculta a la vista pero sigue ahi para quien
   navegue con lector de pantalla: el titulo de la seccion es opcional. */
.prb-busca-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.prb-busca-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 40rem;
    margin-inline: auto;
}

.prb-busca--izquierda .prb-busca-form { margin-inline: 0; }

.prb-busca-input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.95rem 1.2rem;
    background: #ffffff;
    border: 1px solid #d9dde3;
    border-radius: 40px;
    color: #111111;

    /* Nunca por debajo de 16px: mas pequeno, Safari en iPhone hace zoom a
       la pagina en cuanto se toca el campo. */
    font-size: max(16px, 1rem);
    line-height: 1.3;
}

.prb-busca-input::placeholder { color: #8a919b; }

.prb-busca-input:focus-visible {
    outline: none;
    border-color: var(--prb-color-primary, #111111);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.prb-busca-btn {
    flex: 0 0 auto;
    padding: 0.95rem 2.2rem;
    border: 0;
    border-radius: 40px;
    background: var(--prb-color-primary, #111111);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.prb-busca-btn:hover { background: var(--prb-color-secondary, #333333); }

/* --- Texto oscuro: fondo claro --- */
.prb-busca.is-texto-oscuro .prb-busca-title { color: var(--prb-color-primary, #111111); }
.prb-busca.is-texto-oscuro .prb-busca-sub   { color: #666666; }

/* --- Texto claro: foto o fondo oscuro --- */
.prb-busca.is-texto-claro .prb-busca-title { color: #ffffff; }
.prb-busca.is-texto-claro .prb-busca-sub   { color: rgba(255, 255, 255, 0.85); }

.prb-busca.is-texto-claro .prb-busca-input { border-color: rgba(255, 255, 255, 0.6); }

.prb-busca.is-texto-claro .prb-busca-btn {
    background: #ffffff;
    color: #000b29;
}

.prb-busca.is-texto-claro .prb-busca-btn:hover { background: rgba(255, 255, 255, 0.85); }

@media (max-width: 768px) {

    .prb-busca--normal .prb-busca-inner,
    .prb-busca--grande .prb-busca-inner { padding-block: 3.5rem; }

    /* En un movil estrecho el boton pasa debajo y ocupa todo el ancho: en
       la misma linea el campo se quedaria sin sitio para escribir. */
    .prb-busca-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   COLUMNAS
   Va al final del archivo a proposito: los trozos se sirven en el orden en
   que aparecen aqui, asi que estas reglas se cargan despues de las de los
   bloques que van dentro y pueden neutralizarles el ancho y el margen.
   @prb-section: columnas
   ========================================================================== */

.prb-cols {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.prb-cols-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000b29;
    opacity: 0.7;
}

.prb-cols-inner {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.prb-cols-inner--normal { max-width: 720px; }
.prb-cols-inner--ancho  { max-width: 1140px; }

.prb-cols-inner--total {
    max-width: none;
    padding-inline: 0;
}

.prb-cols--pad-ninguno .prb-cols-inner { padding-block: 0; }
.prb-cols--pad-normal  .prb-cols-inner { padding-block: clamp(2rem, 5vw, 3rem); }
.prb-cols--pad-amplio  .prb-cols-inner { padding-block: clamp(3rem, 8vw, 5.5rem); }

/* --- La rejilla --- */
.prb-cols-grid {
    display: grid;
    grid-template-columns: 1fr;   /* en movil, una debajo de otra */
    gap: var(--prb-cols-hueco, 2rem);
}

.prb-cols--hueco-ninguna { --prb-cols-hueco: 0rem; }
.prb-cols--hueco-pequena { --prb-cols-hueco: 1rem; }
.prb-cols--hueco-normal  { --prb-cols-hueco: 2rem; }
.prb-cols--hueco-amplia  { --prb-cols-hueco: 3.5rem; }

.prb-cols--v-arriba  .prb-cols-grid { align-items: start; }
.prb-cols--v-centro  .prb-cols-grid { align-items: center; }
.prb-cols--v-estirar .prb-cols-grid { align-items: stretch; }

/* En tablet, tres y cuatro columnas caben de dos en dos. */
@media (min-width: 36em) and (max-width: 47.9375em) {

    .prb-cols--3 .prb-cols-grid,
    .prb-cols--4 .prb-cols-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48em) {

    .prb-cols--2 .prb-cols-grid { grid-template-columns: repeat(2, 1fr); }
    .prb-cols--3 .prb-cols-grid { grid-template-columns: repeat(3, 1fr); }
    .prb-cols--4 .prb-cols-grid { grid-template-columns: repeat(4, 1fr); }

    /* La proporcion solo tiene sentido con dos o tres columnas. Con cuatro
       no hay regla, asi que se quedan iguales. */
    .prb-cols--2.prb-cols--ancha-estrecha .prb-cols-grid { grid-template-columns: 2fr 1fr; }
    .prb-cols--2.prb-cols--estrecha-ancha .prb-cols-grid { grid-template-columns: 1fr 2fr; }
    .prb-cols--3.prb-cols--ancha-estrecha .prb-cols-grid { grid-template-columns: 2fr 1fr 1fr; }
    .prb-cols--3.prb-cols--estrecha-ancha .prb-cols-grid { grid-template-columns: 1fr 1fr 2fr; }
}

/* --- Los bloques de dentro ---
   Cada uno trae su propio espaciado y su ancho maximo, pensados para ocupar
   la pagina entera. Dentro de una columna eso sobra: el ancho lo pone la
   rejilla y el aire, la separacion entre bloques. */

.prb-cols-col > .prb-rich,
.prb-cols-col > .prb-heading,
.prb-cols-col > .prb-img,
.prb-cols-col > .prb-sc,
.prb-cols-col > .prb-gal {
    padding-block: 0;
}

.prb-cols-col > * + * { margin-top: 1.5rem; }

.prb-cols-col .prb-rich-inner,
.prb-cols-col .prb-heading-inner,
.prb-cols-col .prb-img-inner,
.prb-cols-col .prb-sc-inner,
.prb-cols-col .prb-gal-inner,
.prb-cols-col .prb-busca-inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* Una galeria en una columna estrecha no admite cuatro fotos de ancho. */
.prb-cols--3 .prb-cols-col .prb-gal-inner,
.prb-cols--4 .prb-cols-col .prb-gal-inner {
    grid-template-columns: repeat(2, 1fr);
}

/* --- Texto claro: foto o fondo oscuro --- */
.prb-cols.is-texto-claro .prb-cols-col,
.prb-cols.is-texto-claro .prb-cols-col .prb-rich-inner,
.prb-cols.is-texto-claro .prb-cols-col .prb-heading-sub,
.prb-cols.is-texto-claro .prb-cols-col .prb-heading-eyebrow {
    color: rgba(255, 255, 255, 0.9);
}

.prb-cols.is-texto-claro .prb-cols-col .prb-heading-title,
.prb-cols.is-texto-claro .prb-cols-col .prb-rich-inner h2,
.prb-cols.is-texto-claro .prb-cols-col .prb-rich-inner h3,
.prb-cols.is-texto-claro .prb-cols-col .prb-rich-inner h4 {
    color: #ffffff;
}

.prb-cols.is-texto-claro .prb-cols-col .prb-rich-inner a {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Sobre un fondo oscuro, el gris suave del bloque de texto no se ve. */
.prb-cols.is-texto-claro .prb-cols-col .prb-rich--fondo {
    background: transparent;
}

/* ==========================================================================
   SECCION PRINCIPAL (HERO) UNIFICADA
   Escrito movil primero: los tamanos salen de clamp() y la fila se parte
   sola, asi que no hace falta ninguna consulta de medios para el telefono.
   @prb-section: hero_v3
   ========================================================================== */

.prb-hero3 {
	position: relative;
	display: flex;
	overflow: hidden;
	isolation: isolate;
	background: var(--hero3-bg, var(--prb-color-primary, #0b1f3a));
	color: #fff;
}

/* dvh y no vh: en el movil la barra del navegador aparece y desaparece al
   desplazar, y con vh el hero pega un salto cada vez. El vh delante es el
   respaldo para navegadores que no conocen dvh. */
.prb-hero3--pantalla { min-height: var(--hero3-alto, 100dvh); }
.prb-hero3--alto     { min-height: var(--hero3-alto, 78dvh); }
.prb-hero3--medio    { min-height: var(--hero3-alto, 56dvh); }

/* El campo de movil pisa al de escritorio, y si esta vacio se cae a el. */
@media (max-width: 47.9375em) {
	.prb-hero3--pantalla { min-height: var(--hero3-alto-movil, var(--hero3-alto, 100dvh)); }
	.prb-hero3--alto     { min-height: var(--hero3-alto-movil, var(--hero3-alto, 78dvh)); }
	.prb-hero3--medio    { min-height: var(--hero3-alto-movil, var(--hero3-alto, 56dvh)); }
}

.prb-hero3-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 600ms ease;
	pointer-events: none;
}

.prb-hero3-video.is-playing { opacity: 1; }

.prb-hero3-velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* El degradado lateral es el de fabrica: oscurece el lado donde vive el
   texto y deja respirar la imagen en el otro. Los tres tramos salen de la
   misma opacidad, escalada, para que subirla o bajarla mantenga la forma. */
.prb-hero3--velo-lateral .prb-hero3-velo {
	background: linear-gradient(90deg,
		rgba(var(--hero3-velo), var(--hero3-velo-op)) 0%,
		rgba(var(--hero3-velo), calc(var(--hero3-velo-op) * 0.6)) 60%,
		rgba(var(--hero3-velo), calc(var(--hero3-velo-op) * 0.25)) 100%);
}

/* Con el texto a la derecha el degradado se voltea, o oscureceria el lado
   contrario al que hay que leer. */
.prb-hero3--h-derecha.prb-hero3--velo-lateral .prb-hero3-velo {
	transform: scaleX(-1);
}

.prb-hero3--velo-inferior .prb-hero3-velo {
	background: linear-gradient(to top,
		rgba(var(--hero3-velo), var(--hero3-velo-op)) 0%,
		rgba(var(--hero3-velo), calc(var(--hero3-velo-op) * 0.35)) 55%,
		rgba(var(--hero3-velo), 0) 100%);
}

.prb-hero3--velo-uniforme .prb-hero3-velo {
	background: rgba(var(--hero3-velo), var(--hero3-velo-op));
}

.prb-hero3--velo-ninguno .prb-hero3-velo { display: none; }

/* El hueco de arriba reserva sitio para la cabecera, que sobre el hero esta
   flotando por encima: sin el, el texto colocado arriba se le metia debajo. */
.prb-hero3-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-block: var(--hero3-aire, 3rem);
}

/* Solo la primera seccion reserva sitio para la cabecera: es la unica sobre
   la que flota. Mas abajo ese hueco seria un vacio sin motivo. */
.prb-hero3--primero .prb-hero3-inner {
	padding-top: calc(var(--prb-header-height, 4.25rem) + var(--hero3-aire, 3rem));
}

/* Con un alto pedido a mano el aire se reduce: si no, el relleno empujaria
   la seccion por encima del numero y una franja estrecha nunca saldria
   estrecha. */
.prb-hero3--compacto { --hero3-aire: 1rem; }

.prb-hero3--v-arriba .prb-hero3-inner { justify-content: flex-start; }
.prb-hero3--v-centro .prb-hero3-inner { justify-content: center; }
.prb-hero3--v-abajo  .prb-hero3-inner { justify-content: flex-end; }

/* La fila reparte el texto y el shortcode. Con flex-basis grande y wrap, en
   el telefono se apilan solos sin necesidad de consulta de medios. */
.prb-hero3-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--prb-space-l, 2rem);
	width: 100%;
}

.prb-hero3--sc-izquierda .prb-hero3-fila { flex-direction: row-reverse; }
.prb-hero3--sc-debajo .prb-hero3-fila { flex-direction: column; align-items: stretch; }

.prb-hero3-sc { flex: 1 1 22rem; min-width: 0; }

.prb-hero3--sc-derecha .prb-hero3-bloque,
.prb-hero3--sc-izquierda .prb-hero3-bloque { flex: 1 1 22rem; }

.prb-hero3--ancho-estrecho .prb-hero3-bloque { max-width: 34rem; }
.prb-hero3--ancho-normal   .prb-hero3-bloque { max-width: 48rem; }
.prb-hero3--ancho-total    .prb-hero3-bloque { max-width: none; }

.prb-hero3--h-izquierda .prb-hero3-bloque { margin-inline-end: auto; }
.prb-hero3--h-derecha   .prb-hero3-bloque { margin-inline-start: auto; }

.prb-hero3--h-centro .prb-hero3-bloque {
	margin-inline: auto;
	text-align: center;
}

/* Una sombra corta bajo el texto. El velo ya hace el trabajo grueso, pero
   sobre una foto con zonas claras esto es lo que salva los remates finos de
   la letra. Sobre un color plano no hace falta y no se pone. */
.prb-hero3--con-media .prb-hero3-bloque {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.prb-hero3-eyebrow {
	display: block;
	margin-bottom: var(--prb-space-xs, 0.75rem);
	font-size: clamp(0.75rem, 0.4vw + 0.7rem, 0.95rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.prb-hero3-title {
	margin: 0;
	font-family: var(--prb-font-heading, inherit);
	/* Los tres numeros del clamp salen del maximo en vez de ser fijos: al
	   bajar el maximo baja con el toda la curva, y el titulo sigue encogiendo
	   solo en pantallas estrechas sin pedir un segundo campo para movil. */
	font-size: clamp(
		calc(var(--hero3-title-max, 4.5rem) * 0.44),
		calc(var(--hero3-title-max, 4.5rem) * 0.3 + 3.6vw),
		var(--hero3-title-max, 4.5rem)
	);
	line-height: 1.05;
	font-weight: 600;
	color: inherit;
}

.prb-hero3-desc {
	margin: var(--prb-space-s, 1rem) 0 0;
	font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem);
	line-height: 1.55;
	max-width: 46ch;
}

.prb-hero3--h-centro .prb-hero3-desc { margin-inline: auto; }

.prb-hero3-accion { margin: var(--prb-space-l, 2rem) 0 0; }

.prb-hero3-btn {
	display: inline-block;
	padding: 0.85em 1.9em;
	border: 2px solid transparent;
	border-radius: var(--prb-radius, 4px);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--prb-transition, 180ms ease), color var(--prb-transition, 180ms ease), border-color var(--prb-transition, 180ms ease);
}

.prb-hero3-btn--relleno {
	background: var(--prb-header-cta-bg, var(--prb-color-secondary, #c9a227));
	color: var(--prb-header-cta-text, #111111);
}

.prb-hero3-btn--relleno:hover {
	background: var(--prb-header-cta-bg-hover, var(--prb-color-primary, #0b1f3a));
	color: #ffffff;
}

.prb-hero3-btn--contorno {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
}

.prb-hero3-btn--contorno:hover {
	background: #ffffff;
	color: var(--prb-color-primary, #0b1f3a);
}

/* Cinturon y tirantes: video.js ya se niega a cargar el archivo, y si algo
   fallara el video seguiria sin verse. */
@media (prefers-reduced-motion: reduce) {
	.prb-hero3-video { display: none; }
}