/* ==========================================================================
   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;
}

/* ==========================================================================
   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: var(--sv2-card-bg, #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: var(--sv2-icono, 48px);
    height: var(--sv2-icono, 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. */
/* Una sola columna se respeta en todos los anchos: si en tableta se partiera
   en dos, la opcion no serviria para lo que se pide. */
.prb-services-v2-grid--1 { grid-template-columns: 1fr; }

@media (min-width: 993px) {
    .prb-services-v2-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .prb-services-v2-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .prb-services-v2-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* --- Ajustes a medida --- */

.prb-services-v2-section { background: var(--sv2-bg, transparent); }

.prb-service-v2-card {
    padding: var(--sv2-pad, 3rem 2.5rem);
    border-radius: var(--sv2-radio, 4px);
}

.prb-service-v2-card--compacta { padding: var(--sv2-pad, 1.75rem 1.5rem); }

.prb-service-v2-title { color: var(--sv2-card-title, inherit); }

.prb-service-v2-sub,
.prb-service-v2-desc { color: var(--sv2-card-text, inherit); }

/* Color del texto de la seccion: alcanza a lo que vive fuera de las
   tarjetas, que tienen su propio fondo y sus propios colores. */
.prb-services-v2-section.is-texto-claro { color: #ffffff; }
.prb-services-v2-section.is-texto-oscuro { color: var(--prb-color-text, #1f2933); }

/* --- Giro al hacer clic --- */

.prb-service-v2-card--giro {
    position: relative;
    padding: 0;
    background: transparent;
    box-shadow: none;
    perspective: 1200px;
}

/*
 * Las dos caras comparten una unica celda de rejilla. Asi se superponen
 * igual que antes, pero las dos cuentan para el alto y la tarjeta crece
 * hasta la mas larga. Con el dorso en position absolute su texto no medía
 * nada y se salia por arriba y por abajo en cuanto pasaba del frente.
 */
.prb-service-v2-card--giro .prb-service-v2-caras {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 600ms ease;
}

.prb-service-v2-card--giro .prb-service-v2-cara { grid-area: 1 / 1; }

.prb-service-v2-card--giro.is-girada .prb-service-v2-caras { transform: rotateY(180deg); }

.prb-service-v2-card--giro .prb-service-v2-cara {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: var(--sv2-pad, 3rem 2.5rem);
    background: var(--sv2-card-bg, #ffffff);
    border-radius: var(--sv2-radio, 4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    backface-visibility: hidden;
    box-sizing: border-box;
}

/* El dorso se superpone al frente, asi que el alto de la tarjeta lo marca
   la cara de delante y las dos miden lo mismo sin calcular nada. */
.prb-service-v2-card--giro .prb-service-v2-cara--dorso {
    justify-content: center;
    transform: rotateY(180deg);
    color: var(--sv2-card-text, inherit);
}

/* El boton cubre la tarjeta entera: se pulsa donde sea y el teclado lo
   encuentra solo, sin sacar los titulos de su sitio en el HTML. */
.prb-service-v2-flip {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--sv2-radio, 4px);
    cursor: pointer;
}

.prb-service-v2-flip:focus-visible {
    outline: var(--prb-focus-ring, 3px) solid var(--prb-color-primary, #10243a);
    outline-offset: 3px;
}

/* Sin el efecto 3D no queda un giro a medias: se cambia una cara por otra. */
@media (prefers-reduced-motion: reduce) {

    .prb-service-v2-card--giro .prb-service-v2-caras { transition: none; }
    .prb-service-v2-card--giro.is-girada .prb-service-v2-caras { transform: none; }

    .prb-service-v2-card--giro .prb-service-v2-cara--dorso {
        transform: none;
        visibility: hidden;
    }

    .prb-service-v2-card--giro.is-girada .prb-service-v2-cara--dorso { visibility: visible; }
}

/* 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;
    }

    /* 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;
    }

}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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-rich-bg, 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; }

/* --- Coloreado progresivo con el scroll ---
   El recorrido lo calcula frontend/js/revelar.js y lo deja en --prb-rev-p, de
   0 a 1. Aqui solo se traduce ese numero a lo que se ve. */

/* Las dos direcciones de barrido comparten el relleno con degradado recortado
   a la forma de las letras: cambia el eje y de donde sale el corte. */
.prb-rich--rev-horizontal .prb-rich-inner > *,
.prb-rich--rev-vertical .prb-rich-inner > * {
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.prb-rich--rev-horizontal .prb-rich-inner > * {
    background-image: linear-gradient(
        90deg,
        var(--prb-rev-fin) 0 50%,
        var(--prb-rev-ini) 50% 100%
    );
    background-size: 200% 100%;
    background-position: calc(100% - var(--prb-rev-p, 0) * 100%) 0;
}

/* En vertical el corte baja linea a linea, que es lo que se lee bien en una
   pantalla estrecha donde el parrafo se parte en muchas lineas. */
.prb-rich--rev-vertical .prb-rich-inner > * {
    background-image: linear-gradient(
        180deg,
        var(--prb-rev-fin) 0 50%,
        var(--prb-rev-ini) 50% 100%
    );
    background-size: 100% 200%;
    background-position: 0 calc(100% - var(--prb-rev-p, 0) * 100%);
}

/* Palabra por palabra no usa degradado: cada palabra es un elemento propio y
   solo cambia de color. Sale mas nitido y no parte ninguna letra. */
.prb-rich--rev-palabra .prb-rich-inner { color: var(--prb-rev-ini); }

.prb-rich--rev-palabra .prb-rev-w {
    color: var(--prb-rev-ini);
    transition: color 220ms ease;
}

.prb-rich--rev-palabra .prb-rev-w.is-on { color: var(--prb-rev-fin); }

/* Los enlaces de dentro pierden su color en los dos modos de degradado, asi
   que el subrayado es lo unico que los distingue. */
.prb-rich--revelar .prb-rich-inner a { text-decoration: underline; }
.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);
    background: var(--prb-heading-bg, transparent);
}

.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-heading-sub-color, var(--prb-color-secondary, #b8892b));
}

.prb-heading-title {
    margin: 0;
    font-family: var(--prb-font-heading, inherit);
    /* Los tres numeros del clamp salen del maximo en vez de ser fijos: al
       bajarlo baja con el toda la curva, y el titulo sigue encogiendo solo en
       pantallas estrechas sin pedir un segundo campo para movil. Con el campo
       vacio da exactamente los mismos tamanos que antes. */
    font-size: clamp(
        calc(var(--prb-heading-size, 2.75rem) * 0.64),
        calc(var(--prb-heading-size, 2.75rem) * 0.4 + 3vw),
        var(--prb-heading-size, 2.75rem)
    );
    font-weight: 600;
    line-height: 1.15;
    color: var(--prb-heading-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-heading-sub-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: about
   ========================================================================== */

.db-about-img {
    overflow: hidden;
}

/* ==========================================================================
   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-boton-wrap,
.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 > .prb-boton-wrap { margin-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: 1px 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: rgba(255, 255, 255, 0.6);
	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; }
}

/* ==========================================================================
   SECCION: BOTON
   El estilo base sale de las variables del panel, asi que en un tema ajeno
   sigue teniendo un aspecto correcto. Cada anulacion es una variable propia
   con el valor base como respaldo: rellenar un campo pisa solo ese.
   @prb-section: boton
   ========================================================================== */

.prb-boton-wrap {
	margin-block: var(--prb-space-s, 1rem);
}

.prb-boton-wrap--centro  { text-align: center; }
.prb-boton-wrap--derecha { text-align: right; }

.prb-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	width: var(--prb-btn-ancho, auto);
	max-width: 100%;
	border: var(--prb-btn-borde-px, 2px) solid transparent;
	border-radius: var(--prb-radius, 4px);
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--prb-transition, 180ms ease),
	            color var(--prb-transition, 180ms ease),
	            border-color var(--prb-transition, 180ms ease);
}

/* El hundimiento al pulsar no es decorativo: es la unica senal de que el
   toque se registro en una pantalla tactil, donde no hay cursor encima. */
.prb-boton:active { transform: translateY(1px); }

.prb-boton--pequeno { padding: 0.6em 1.3em;  font-size: 0.9rem; }
.prb-boton--normal  { padding: 0.85em 1.9em; font-size: 1rem; }
.prb-boton--grande  { padding: 1.05em 2.4em; font-size: 1.1rem; }

.prb-boton--radio-cuadrado   { border-radius: 0; }
.prb-boton--radio-redondeado { border-radius: 12px; }
.prb-boton--radio-pildora    { border-radius: 999px; }

/* --- Relleno --- */
.prb-boton--relleno {
	background: var(--prb-btn-bg, var(--prb-color-primary, #0b1f3a));
	color: var(--prb-btn-color, #ffffff);
	border-color: var(--prb-btn-borde, var(--prb-btn-bg, var(--prb-color-primary, #0b1f3a)));
}

.prb-boton--relleno:hover,
.prb-boton--relleno:focus-visible {
	background: var(--prb-btn-bg-hover, var(--prb-color-secondary, #c9a227));
	color: var(--prb-btn-color-hover, var(--prb-btn-color, #ffffff));
	border-color: var(--prb-btn-borde, var(--prb-btn-bg-hover, var(--prb-color-secondary, #c9a227)));
}

/* --- Contorno --- */
.prb-boton--contorno {
	background: var(--prb-btn-bg, transparent);
	color: var(--prb-btn-color, var(--prb-color-primary, #0b1f3a));
	border-color: var(--prb-btn-borde, currentColor);
}

.prb-boton--contorno:hover,
.prb-boton--contorno:focus-visible {
	background: var(--prb-btn-bg-hover, var(--prb-color-primary, #0b1f3a));
	color: var(--prb-btn-color-hover, #ffffff);
	border-color: var(--prb-btn-borde, var(--prb-btn-bg-hover, var(--prb-color-primary, #0b1f3a)));
}

/* --- Solo texto --- */
.prb-boton--texto {
	padding-inline: 0;
	background: transparent;
	border-color: transparent;
	color: var(--prb-btn-color, var(--prb-color-primary, #0b1f3a));
}

.prb-boton--texto:hover,
.prb-boton--texto:focus-visible {
	background: transparent;
	color: var(--prb-btn-color-hover, var(--prb-color-secondary, #c9a227));
}

/* Sin caja que lo delate, el desplazamiento del icono es lo que avisa de
   que esto se puede pulsar. */
.prb-boton--texto .prb-boton-icono {
	transition: transform var(--prb-transition, 180ms ease);
}

.prb-boton--texto:hover .prb-boton-icono { transform: translateX(3px); }

/* --- Icono --- */

/* En em y no en pixeles: asi sigue al tamano del boton sin una regla por
   cada talla. */
.prb-boton-icono {
	display: inline-flex;
	flex-shrink: 0;
}

.prb-boton-icono svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
}

@media (prefers-reduced-motion: reduce) {
	.prb-boton,
	.prb-boton--texto .prb-boton-icono { transition: none; }
	.prb-boton:active { transform: none; }
}

/* ==========================================================================
   SECCION: CONTACTO UNIFICADO
   Todos los colores salen de las variables del panel con respaldo, asi que
   la seccion se adapta a la paleta de cada web. El texto no se escribe en
   blanco ni en negro: se hereda de is-texto-claro / is-texto-oscuro, que
   PHP decide mirando el fondo.
   @prb-section: contacto
   ========================================================================== */

.prb-contacto {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--prb-ct-bg, var(--prb-color-primary, #0d1b2a));
}

.prb-contacto-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(var(--prb-ct-velo, 0, 0, 0), var(--prb-ct-velo-op, 0.65));
    pointer-events: none;
}

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

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

.prb-contacto--pad-ninguno .prb-contacto-inner { padding-block: 0; }
.prb-contacto--pad-normal  .prb-contacto-inner { padding-block: clamp(2.5rem, 6vw, 4rem); }
.prb-contacto--pad-amplio  .prb-contacto-inner { padding-block: clamp(3.5rem, 9vw, 6rem); }

/* Movil primero: una columna. El formulario baja debajo del texto. */
.prb-contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 48em) {

    /* minmax(0, …) y no 4fr a secas: sin el, un formulario ancho estira su
       columna y se come la del texto. */
    .prb-contacto-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
        gap: clamp(3rem, 6vw, 6rem);
    }

    .prb-contacto--form-izquierda .prb-contacto-texto { order: 2; }
    .prb-contacto--form-izquierda .prb-contacto-form  { order: 1; }
}

.prb-contacto-title {
    margin: 0 0 1.25rem;
    font-family: var(--prb-font-heading, inherit);
    font-size: clamp(2.25rem, 5vw + 0.5rem, 3.75rem);
    line-height: 1.1;
    font-weight: 600;
    color: inherit;
}

.prb-contacto-desc {
    margin: 0 0 2.5rem;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 52ch;
}

.prb-contacto-lista {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* El titulo de grupo abre aire por encima, salvo si es el primero de la
   lista: ahi el hueco vendria de la descripcion y se sumarian dos. */
.prb-contacto-grupo {
    margin: 1.4rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: inherit;
}

.prb-contacto-grupo:first-child { margin-top: 0; }

/* width: fit-content para que el area sensible no se estire hasta el borde
   de la columna: sin eso el cursor cambia a mano en una franja vacia. */
.prb-contacto-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    font-size: 1.05rem;
    text-decoration: none;
    color: inherit;
    transition: color var(--prb-transition, 0.3s ease), transform var(--prb-transition, 0.3s ease);
}

.prb-contacto-icono {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--prb-transition, 0.3s ease);
}

.prb-contacto-icono svg {
    display: block;
    width: 1.25em;
    height: 1.25em;
}

/* El desplazamiento y el crecimiento del icono son el efecto de la seccion
   de contacto antigua, que era lo unico que merecia la pena conservarle. */
a.prb-contacto-item:hover,
a.prb-contacto-item:focus-visible {
    transform: translateX(5px);
}

a.prb-contacto-item:hover .prb-contacto-icono,
a.prb-contacto-item:focus-visible .prb-contacto-icono {
    transform: scale(1.1);
}

/* --- Color del texto segun el fondo --- */

.prb-contacto.is-texto-claro { color: #ffffff; }

.prb-contacto.is-texto-claro .prb-contacto-desc,
.prb-contacto.is-texto-claro .prb-contacto-item {
    color: rgba(255, 255, 255, 0.82);
}

.prb-contacto.is-texto-claro a.prb-contacto-item:hover,
.prb-contacto.is-texto-claro a.prb-contacto-item:focus-visible {
    color: #ffffff;
}

.prb-contacto.is-texto-oscuro { color: var(--prb-color-primary, #10243a); }

.prb-contacto.is-texto-oscuro .prb-contacto-desc,
.prb-contacto.is-texto-oscuro .prb-contacto-item {
    color: var(--prb-color-text, #1f2933);
}

.prb-contacto.is-texto-oscuro a.prb-contacto-item:hover,
.prb-contacto.is-texto-oscuro a.prb-contacto-item:focus-visible {
    color: var(--prb-color-primary, #10243a);
}

@media (prefers-reduced-motion: reduce) {
    .prb-contacto-item,
    .prb-contacto-icono { transition: none; }

    a.prb-contacto-item:hover,
    a.prb-contacto-item:hover .prb-contacto-icono { transform: none; }
}