/* ==========================================================================
   PB Design System
   COMPONENT · Footer
   ========================================================================== */

/* --------------------------------------------------------------
   Footer base
-------------------------------------------------------------- */

.pb-root .footer-global {
    border-top: var(--border-gold);
    padding-top: var(--space-7);
    background: var(--color-footer);
    color: var(--color-texto);
    box-shadow: var(--shadow-arriba);
    text-align: center;
}

/* --------------------------------------------------------------
   Contenedor
-------------------------------------------------------------- */

.pb-root .footer-contenedor {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-8);
    width: min(100% - (2 * var(--space-5)), var(--container-lg));
    margin-inline: auto;
    padding-bottom: var(--space-7);
}

.pb-root .footer-contenedor > :only-child {
    width: 100%;
}

.pb-root .footer-col-form {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    max-width: 32rem;
}

.pb-root .footer-col-info {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    max-width: 32rem;
}

/* --------------------------------------------------------------
   Tipografía
-------------------------------------------------------------- */

.pb-root .footer-global h3 {
    font-size: var(--fs-700);
    color: var(--color-seleccion);
}

.pb-root .footer-global p,
.pb-root .footer-global a {
    font-size: var(--fs-300);
    color: var(--color-texto);
}

.pb-root .footer-global a {
    text-decoration: none;
}

.pb-root .footer-global a:hover {
    color: var(--color-seleccion);
}

/* --------------------------------------------------------------
   Redes
-------------------------------------------------------------- */

.pb-root .footer-global .redes-sociales {
    justify-content: center;
    color: var(--color-blanco);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    gap: calc(var(--space-5) * 1.15);
}

/* --------------------------------------------------------------
   Formulario
-------------------------------------------------------------- */

.pb-root .footer-global .form-campo {
    width: 100%;
    max-width: 25rem;
    margin-inline: auto;
}

.pb-root .footer-global .form-campo input:not([type="hidden"]):not([type="checkbox"]),
.pb-root .footer-global .form-campo textarea,
.pb-root .footer-global .form-campo select {
    width: 100%;
}

.pb-root .footer-global .check-privacidad {
    color: var(--color-texto);
}

.pb-root .footer-global .check-privacidad-etiqueta {
    color: var(--color-bordoy);
}

.pb-root .footer-global .check-privacidad-etiqueta a,
.pb-root .footer-global a.check-privacidad-etiqueta {
    color: var(--color-seleccion);
    font-size: inherit;
}

/* --------------------------------------------------------------
   Legal
-------------------------------------------------------------- */

.pb-root .borde-separacion {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-gold);
    box-shadow: var(--shadow-arriba);
}

.pb-root .borde-separacion p {
    font-size: var(--fs-300);
    color: var(--color-texto);
}

/* --------------------------------------------------------------
   Responsive
-------------------------------------------------------------- */

@media (max-width: 980px) {
    .pb-root .footer-contenedor {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .pb-root .footer-col-form {
        width: 100%;
        margin-bottom: var(--space-5);
    }

    .pb-root .footer-col-info {
        width: 100%;
        margin-top: var(--space-5);
    }
}