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

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

.pb-root .form-campo {
    display: grid;
    gap: var(--space-4);
    width: 100%;
}

@media (min-width: 768px) {
    .pb-root .form-campo {
        max-width: 70%;
        margin-inline: auto;
    }
}

.pb-root .form-campo-compacto {
    gap: var(--space-3);
}

/* --------------------------------------------------------------
   Labels
-------------------------------------------------------------- */

.pb-root .form-campo label {
    font-family: var(--fuente-acento);
    font-size: var(--fs-100);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: capitalize;
    color: var(--color-bordoy);
}

.pb-root .form-campo-compacto label[for$="-nombre"],
.pb-root .form-campo-compacto label[for$="-email"],
.pb-root .form-campo-compacto label[for$="-telefono"],
.pb-root .form-campo-compacto label[for$="-mensaje"] {
    display: none;
}

/* --------------------------------------------------------------
   Campos
-------------------------------------------------------------- */

.pb-root .form-campo input:not([type="hidden"]):not([type="checkbox"]),
.pb-root .form-campo textarea,
.pb-root .form-campo select {
    display: block;
    width: 100%;
    min-height: 2.8rem;
    padding: var(--space-2) var(--space-3);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    box-shadow: var(--shadow-bordoy);
    background: var(--color-blanco);
    font-family: var(--fuente-texto);
    font-size: var(--fs-200);
    line-height: 1.4;
    color: var(--color-negro);
}

.pb-root .form-campo textarea {
    min-height: 6rem;
    resize: vertical;
}

.pb-root .form-campo input::placeholder,
.pb-root .form-campo textarea::placeholder {
    color: var(--color-texto);
    opacity: .7;
}

/* --------------------------------------------------------------
   Privacidad
-------------------------------------------------------------- */

.pb-root .check-privacidad {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    color: var(--color-texto);
}

.pb-root .check-privacidad input {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .2rem;
    border: var(--border-gold);
    border-radius: 0.25rem;
    background: var(--color-blanco);
    cursor: pointer;
    box-shadow: none;
}

.pb-root .check-privacidad input:checked::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--color-seleccion);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.pb-root .check-privacidad-etiqueta {
    display: block;
    font-size: var(--fs-100);
    line-height: 1.4;
    color: var(--color-bordoy);
}

.pb-root .check-privacidad-etiqueta a,
.pb-root a.check-privacidad-etiqueta {
    color: var(--color-seleccion);
    font-size: inherit;
    text-underline-offset: .18em;
}

/* --------------------------------------------------------------
   Acciones
-------------------------------------------------------------- */

.pb-root .form-campo .acciones {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
}

.pb-root .form-campo .acciones .boton {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------------
   Estado
-------------------------------------------------------------- */

.pb-root .estado-formulario {
    padding: var(--space-3) var(--space-4);
    border: var(--border-light);
    border-radius: var(--radio-md);
    background: var(--color-fondo);
    font-size: var(--fs-100);
    font-weight: 600;
}

.pb-root .estado-formulario.ok {
    color: var(--color-verde);
}

.pb-root .estado-formulario.error {
    color: var(--color-rojo);
}

/* --------------------------------------------------------------
   Campos ocultos
-------------------------------------------------------------- */

.pb-root .campo-oculto {
    display: none;
}

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

.pb-root .footer-global .form-campo {
    max-width: 25rem;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .pb-root .footer-global .form-campo {
        gap: var(--space-6);
    }
}

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

.pb-root .footer-global .form-campo .acciones {
    width: 100%;
    gap: var(--space-6);
    justify-content: center;
}

.pb-root .footer-global .form-campo .acciones .boton {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------------
   Campos ocultos y honeypot
-------------------------------------------------------------- */

.pb-root .campo-oculto,
.pb-root input.campo-oculto,
.pb-root .form-campo .campo-oculto,
.pb-root .form-campo input[type="hidden"],
.pb-root .form-campo-compacto input[type="hidden"],
.pb-root form input[type="hidden"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}