/* ==========================================================================
   PB Design System
   PAGE · Presentación
   ========================================================================== */

/* --------------------------------------------------------------
   Intro
-------------------------------------------------------------- */

.pb-root .presentacion-intro {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    overflow: hidden;
}

.pb-root .presentacion-intro__contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4);
    margin-right: var(--space-5);
}

.pb-root .presentacion-intro__media {
    display: flex;
    background: var(--color-blanco);
}

.pb-root .presentacion-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: var(--border-gold);
    box-shadow: var(--shadow-derecha);
}

/* --------------------------------------------------------------
   Trayectoria
-------------------------------------------------------------- */

/* --------------------------------------------------------------
   Trayectoria
-------------------------------------------------------------- */

.pb-root .presentacion-trayectoria {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--space-6);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    overflow: hidden;
}

.pb-root .presentacion-trayectoria__contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4);
    margin-left: var(--space-5);
    margin-bottom: var(--space-4);
}

.pb-root .presentacion-trayectoria__grid {
    display: grid;
    gap: var(--space-7);
    text-align: justify;
    margin: var(--space-4);
}

.pb-root .presentacion-trayectoria__media {
    display: flex;
    background: var(--color-blanco);
}

.pb-root .presentacion-trayectoria__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-left: var(--border-gold);
    box-shadow: var(--shadow-izquierda);
}

/* --------------------------------------------------------------
   Valores
-------------------------------------------------------------- */

.pb-root .presentacion-valores {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    overflow: hidden;
}

.pb-root .presentacion-valores__contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4);
    margin-right: var(--space-5);
    margin-bottom: var(--space-4);
}

.pb-root .presentacion-valores__grid {
    display: grid;
    gap: var(--space-7);
    text-align: justify;
}

.pb-root .presentacion-valores__media {
    display: flex;
    background: var(--color-blanco);
}

.pb-root .presentacion-valores__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: var(--border-gold);
    box-shadow: var(--shadow-derecha);
}


/* --------------------------------------------------------------
   Método
-------------------------------------------------------------- */

.pb-root .presentacion-metodo {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--space-6);

    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    overflow: hidden;
}

.pb-root .presentacion-metodo__media {
    display: flex;
    background: var(--color-blanco);
}

.pb-root .presentacion-metodo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-left: var(--border-gold);
    box-shadow: var(--shadow-izquierda);
}

.pb-root .presentacion-metodo__contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4);
    margin-left: var(--space-5);
}


@media (max-width: 980px) {
    .pb-root .presentacion-intro,
    .pb-root .presentacion-metodo,
    .pb-root .presentacion-valores,
    .pb-root .presentacion-trayectoria {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .pb-root .presentacion-seccion {
        padding-block: var(--space-4);
    }

    .pb-root .presentacion-intro__contenido,
    .pb-root .presentacion-metodo__contenido,
    .pb-root .presentacion-valores__contenido,
    .pb-root .presentacion-trayectoria__contenido {
        margin: 0;
        padding: var(--space-4);
        gap: var(--space-3);
        justify-content: center;
    }


    .pb-root .presentacion-intro__media,
    .pb-root .presentacion-metodo__media,
    .pb-root .presentacion-valores__media,
    .pb-root .presentacion-trayectoria__media {
        aspect-ratio: 1 / 1;
        max-height: 32rem;
    }

    .pb-root .presentacion-intro__media img,
    .pb-root .presentacion-valores__media img {
        border-right: none;
        border-bottom: var(--border-gold);
        box-shadow: var(--shadow-abajo);
    }

    .pb-root .presentacion-metodo__media img,
    .pb-root .presentacion-trayectoria__media img {
        border-left: none;
        border-top: var(--border-gold);
        box-shadow: var(--shadow-arriba);
    }

    .pb-root .presentacion-trayectoria__grid,
    .pb-root .presentacion-valores__grid {
        grid-template-columns: 1fr;
    }

    .pb-root .presentacion-intro__contenido p,
    .pb-root .presentacion-trayectoria__grid p,
    .pb-root .presentacion-valores__grid p,
    .pb-root .presentacion-metodo__contenido p {
        font-size: var(--fs-100);
    }
}