/* =========================================================
   BUZÓN PAM
   ========================================================= */

:root {

    --verde: #67518F;
    --verde-dark: #67518F;
    --verde-light: #e9f4ef;

    --dorado: #c6a15b;
    --dorado-dark: #a98238;
    --dorado-light: #f7f0df;

    --blanco: #fff;

    --gris-50: #fafbfa;
    --gris-100: #f4f6f5;
    --gris-200: #e8ecea;
    --gris-300: #d3dad6;
    --gris-400: #adb6b1;
    --gris-500: #747e79;
    --gris-600: #59625e;
    --gris-700: #3d4541;

    --negro: #202522;

    --rojo: #b42318;
    --azul: #1261a0;

    --sombra:
        0 5px 20px rgba(0,0,0,.08);

    --radio: 8px;

    --transicion:
        all .25s ease;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #f2f4f3;

    color: var(--negro);

    line-height: 1.6;

    font-size: 16px;

}


body.large-text {
    font-size: 18px;
}


body.high-contrast {

    background: #fff;

    color: #000;

}


img {
    max-width: 100%;
    height: auto;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: var(--verde);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.container {

    width:
        min(
            calc(100% - 32px),
            1120px
        );

    margin:
        0 auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    background:
        var(--blanco);

    border-bottom:
        1px solid var(--gris-200);

    box-shadow:
        0 2px 10px rgba(0,0,0,.05);

}


.header-container {

    min-height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        40px;

    padding:
        20px 0;

}


.logo img {

    width:
        180px;

    max-height:
        80px;

    object-fit:
        contain;

}


.header-title {
    text-align: center;
}


.header-title h1 {

    color:
        var(--verde);

    font-size:
        clamp(
            1.4rem,
            3vw,
            2.1rem
        );

    line-height:
        1.2;

}


.header-title p {

    color:
        var(--gris-600);

    margin-top:
        5px;

}


/* =========================================================
   BARRA
   ========================================================= */

.institutional-bar {

    height:
        6px;

    display:
        flex;

}


.institutional-bar-green {

    flex:
        3;

    background:
        var(--verde);

}


.institutional-bar-gold {

    flex:
        1;

    background:
        var(--dorado);

}


/* =========================================================
   MAIN
   ========================================================= */

.main-content {

    padding:
        40px
        0
        65px;

}


/* =========================================================
   INTRO
   ========================================================= */

.intro-box {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        25px;

    padding:
        22px 25px;

    background:
        #fff;

    border:
        1px solid var(--gris-200);

    border-left:
        5px solid var(--verde);

    border-radius:
        var(--radio);

    box-shadow:
        0 3px 12px rgba(0,0,0,.05);

}


.intro-icon {

    width:
        55px;

    height:
        55px;

    flex:
        0 0 55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--verde);

    color:
        #fff;

    font-size:
        1.4rem;

}


.intro-box h2 {

    color:
        var(--verde);

    font-size:
        1.25rem;

}


.intro-box p {

    color:
        var(--gris-600);

    font-size:
        .95rem;

}


/* =========================================================
   FORMULARIO
   ========================================================= */

.form-buzon {

    background:
        #fff;

    border:
        1px solid var(--gris-200);

    border-radius:
        12px;

    box-shadow:
        var(--sombra);

    padding:
        40px;

}


/* =========================================================
   SECCIONES
   ========================================================= */

.form-section {

    padding-bottom:
        32px;

    margin-bottom:
        32px;

    border-bottom:
        1px solid var(--gris-200);

}


.form-section h2 {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--verde);

    font-size:
        1.3rem;

    margin-bottom:
        23px;

}


.form-section h2 i {

    width:
        30px;

    color:
        var(--dorado);

    text-align:
        center;

}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-group {
    margin-bottom: 20px;
}


.form-row {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        20px;

}


.form-row:has(
    .form-group:nth-child(2):last-child
) {

    grid-template-columns:
        repeat(2,1fr);

}


label,
legend {

    display:
        block;

    color:
        var(--gris-700);

    font-weight:
        600;

    margin-bottom:
        8px;

}


.required {
    color: var(--rojo);
}


/* =========================================================
   INPUTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {

    width:
        100%;

    min-height:
        46px;

    padding:
        10px 14px;

    border:
        1px solid var(--gris-300);

    border-radius:
        var(--radio);

    background:
        #fff;

    color:
        var(--negro);

    outline:
        none;

    transition:
        var(--transicion);

}


textarea {

    min-height:
        145px;

    resize:
        vertical;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--verde);

    box-shadow:
        0 0 0 3px
        rgba(0,107,63,.12);

}


.field-help {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--gris-500);

    font-size:
        .8rem;

    margin-top:
        5px;

}


/* =========================================================
   TARJETAS
   ========================================================= */

.option-cards {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}


.option-card {

    position:
        relative;

    cursor:
        pointer;

}


.option-card input {

    position:
        absolute;

    opacity:
        0;

}


.option-card-content {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-height:
        100px;

    padding:
        17px;

    border:
        2px solid var(--gris-200);

    border-radius:
        var(--radio);

    transition:
        var(--transicion);

}


.option-card:hover
.option-card-content {

    border-color:
        var(--verde);

    background:
        var(--verde-light);

}


.option-card input:checked
+ .option-card-content {

    border-color:
        var(--verde);

    background:
        var(--verde-light);

}


.option-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

}


.complaint {

    color:
        #b42318;

    background:
        #fde8e7;

}


.suggestion {

    color:
        #9a7200;

    background:
        #fff4d6;

}


.other {

    color:
        #1261a0;

    background:
        #e4f0fb;

}


.option-card strong {
    display: block;
}


.option-card small {

    display:
        block;

    color:
        var(--gris-500);

    font-size:
        .8rem;

}


/* =========================================================
   RADIOS
   ========================================================= */

.radio-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

}


.radio-buttons label {

    margin:
        0;

    cursor:
        pointer;

}


.radio-buttons input {

    position:
        absolute;

    opacity:
        0;

}


.radio-buttons label span {

    min-width:
        115px;

    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 20px;

    border:
        1px solid var(--gris-300);

    border-radius:
        6px;

    transition:
        var(--transicion);

}


.radio-buttons input:checked
+ span {

    background:
        var(--verde);

    border-color:
        var(--verde);

    color:
        #fff;

}


/* =========================================================
   CONTACTO
   ========================================================= */

.contact-options {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        25px;

}


.contact-options label {

    margin:
        0;

}


.contact-options input {

    position:
        absolute;

    opacity:
        0;

}


.contact-options label span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px 18px;

    border:
        1px solid var(--gris-300);

    border-radius:
        6px;

    cursor:
        pointer;

}


.contact-options input:checked
+ span {

    background:
        var(--verde-light);

    border-color:
        var(--verde);

    color:
        var(--verde);

}


/* =========================================================
   PRIVACIDAD
   ========================================================= */

.privacy-section {

    display:
        flex;

    gap:
        18px;

    padding:
        23px;

    background:
        var(--dorado-light);

    border-left:
        5px solid var(--dorado);

    border-radius:
        var(--radio);

}


.privacy-icon {

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--dorado);

    color:
        #fff;

}


.privacy-content h2 {

    color:
        var(--verde);

    font-size:
        1.1rem;

    margin-bottom:
        10px;

}


.privacy-check {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    font-weight:
        400;

}


.privacy-check input {

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    accent-color:
        var(--verde);

    margin-top:
        3px;

}


/* =========================================================
   BOTONES
   ========================================================= */

.form-actions {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        35px;

    padding-top:
        28px;

    border-top:
        1px solid var(--gris-200);

}


.btn {

    min-width:
        145px;

    min-height:
        46px;

    padding:
        10px 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        none;

    border-radius:
        6px;

    color:
        #fff;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        var(--transicion);

}


.btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.15);

    text-decoration:
        none;

}


.btn-primary {
    background: var(--verde);
}


.btn-primary:hover {
    background: var(--verde-dark);
}


.btn-warning {
    background: var(--dorado);
}


.btn-warning:hover {
    background: var(--dorado-dark);
}


.btn-secondary {
    background: #6c757d;
}


.btn-secondary:hover {
    background: #565e64;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.accessibility-button {

    position:
        fixed;

    left:
        18px;

    top:
        45%;

    z-index:
        1000;

}


.accessibility-button button {

    width:
        52px;

    height:
        52px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--verde);

    color:
        #fff;

    font-size:
        1.35rem;

    box-shadow:
        0 4px 12px rgba(0,0,0,.2);

}


.accessibility-panel {

    position:
        fixed;

    left:
        18px;

    top:
        calc(45% + 62px);

    width:
        235px;

    padding:
        12px;

    background:
        #fff;

    border:
        1px solid var(--gris-200);

    border-radius:
        9px;

    box-shadow:
        0 7px 25px rgba(0,0,0,.18);

    z-index:
        999;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-10px);

    transition:
        var(--transicion);

}


.accessibility-panel.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.accessibility-header {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--verde);

    padding:
        6px 5px 12px;

}


.accessibility-header button {

    border:
        none;

    background:
        transparent;

    color:
        var(--gris-600);

}


.accessibility-panel > button {

    width:
        100%;

    padding:
        9px;

    margin-top:
        5px;

    text-align:
        left;

    border:
        1px solid var(--gris-200);

    border-radius:
        5px;

    background:
        var(--gris-50);

    color:
        var(--gris-700);

}


.accessibility-panel > button:hover {

    background:
        var(--verde-light);

    color:
        var(--verde);

}


/* =========================================================
   FLOTANTES
   ========================================================= */

.floating-button {

    position:
        fixed;

    right:
        20px;

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    color:
        #fff;

    text-decoration:
        none;

    box-shadow:
        0 4px 12px rgba(0,0,0,.2);

    z-index:
        900;

}


.floating-button:hover {

    color:
        #fff;

    transform:
        scale(1.08);

}


.whatsapp {

    bottom:
        80px;

    background:
        #25D366;

    font-size:
        1.45rem;

}


.back-top {

    bottom:
        20px;

    background:
        var(--verde);

}


/* =========================================================
   PÁGINA DE ÉXITO / ERROR
   ========================================================= */

.success-page,
.error-page {

    max-width:
        700px;

    margin:
        30px auto;

    padding:
        45px 30px;

    background:
        #fff;

    border-radius:
        12px;

    box-shadow:
        var(--sombra);

    text-align:
        center;

}


.success-icon,
.error-icon {

    font-size:
        4.5rem;

    margin-bottom:
        20px;

}


.success-icon {

    color:
        var(--verde);

}


.error-icon {

    color:
        var(--rojo);

}


.success-page h1,
.error-page h1 {

    color:
        var(--verde);

    margin-bottom:
        12px;

}


.folio-box {

    margin:
        25px auto;

    padding:
        20px;

    max-width:
        380px;

    background:
        var(--verde-light);

    border:
        2px dashed var(--verde);

    border-radius:
        var(--radio);

}


.folio-box span {

    display:
        block;

    color:
        var(--gris-600);

}


.folio-box strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--verde);

    font-size:
        1.7rem;

    letter-spacing:
        1px;

}


.success-help {

    color:
        var(--gris-600);

}


.error-page ul {

    max-width:
        450px;

    margin:
        20px auto;

    text-align:
        left;

    color:
        var(--rojo);

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    padding:
        28px 0;

    background:
        var(--verde-dark);

    color:
        rgba(255,255,255,.9);

}


.footer-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.footer-content {

    text-align:
        center;

}


.copyright {

    opacity:
        .7;

    font-size:
        .8rem;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .option-cards {

        grid-template-columns:
            1fr;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .form-row:has(
        .form-group:nth-child(2):last-child
    ) {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .container {

        width:
            calc(100% - 20px);

    }


    .header-container {

        flex-direction:
            column;

        gap:
            12px;

    }


    .logo img {

        width:
            145px;

    }


    .main-content {

        padding:
            20px 0 40px;

    }


    .form-buzon {

        padding:
            20px 16px;

    }


    .intro-box {

        align-items:
            flex-start;

        padding:
            17px;

    }


    .privacy-section {

        flex-direction:
            column;

    }


    .contact-options {

        flex-direction:
            column;

    }


    .contact-options label span {

        width:
            100%;

    }


    .form-actions {

        flex-direction:
            column;

    }


    .btn {

        width:
            100%;

    }


    .accessibility-button {

        left:
            10px;

    }


    .accessibility-panel {

        left:
            10px;

        max-width:
            calc(100vw - 20px);

    }


    .floating-button {

        right:
            12px;

    }

}


@media (max-width: 400px) {

    .radio-buttons {

        flex-direction:
            column;

    }


    .radio-buttons label span {

        width:
            100%;

    }

}


/* =========================================================
   IMPRESIÓN
   ========================================================= */

@media print {

    .accessibility-button,
    .accessibility-panel,
    .floating-button {

        display:
            none !important;

    }


    .site-header {

        box-shadow:
            none;

    }


    .success-page {

        box-shadow:
            none;

        border:
            1px solid #ccc;

    }

}

/* =========================================================
   MENSAJES DEL FORMULARIO
   ========================================================= */

.alert {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    padding: 20px 55px 20px 22px;

    border-radius: 9px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.08);

    animation:
        alertEntrada .35s ease;

}


/* ÉXITO */

.alert-success {

    background:
        #e9f7ef;

    border:
        1px solid #a8d8bb;

    border-left:
        6px solid var(--verde);

    color:
        #174d30;

}


.alert-success .alert-icon {

    color:
        var(--verde);

}


/* ERROR */

.alert-error {

    background:
        #fff1f0;

    border:
        1px solid #f1b5b0;

    border-left:
        6px solid #b42318;

    color:
        #702018;

}


.alert-error .alert-icon {

    color:
        #b42318;

}


/* ICONO */

.alert-icon {

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        2rem;

}


/* CONTENIDO */

.alert-content h2 {

    margin:
        0 0 4px;

    font-size:
        1.15rem;

}


.alert-content p {

    margin:
        2px 0;

    font-size:
        .95rem;

}


/* CERRAR */

.alert-close {

    position:
        absolute;

    top:
        12px;

    right:
        12px;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        50%;

    background:
        transparent;

    color:
        currentColor;

    font-size:
        1rem;

}


.alert-close:hover {

    background:
        rgba(0,0,0,.08);

}


/* ANIMACIÓN */

@keyframes alertEntrada {

    from {

        opacity: 0;

        transform:
            translateY(-12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* MÓVIL */

@media (max-width: 600px) {

    .alert {

        align-items:
            flex-start;

        padding:
            17px 45px 17px 16px;

    }


    .alert-icon {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        font-size:
            1.6rem;

    }

}