/*
 Theme Name: GeneratePress Child
 Template: generatepress
 Version: 1.0.1
*/

/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    --pink: #e5007e;
    --pink-dark: #c90070;
    --pink-soft: #fff1f7;
    --pink-soft-2: #ffe5f1;

    --text: #24143d;
    --muted: #777181;

    --border: #e9e5ec;
    --bg: #f7f7f9;
    --white: #ffffff;

    --radius: 12px;
}


/* ==========================================================
   PÁGINA
   ========================================================== */

body {
    background: var(--bg);
}

.site-content {
    padding-top: 0 !important;
}

.content-area,
.site-main,
.inside-article {
    width: 100%;
}

.inside-article {
    padding: 0 !important;
    background: transparent !important;
}


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

.encuesta-satisfaccion {
    max-width: 1180px;
    margin: 42px auto 80px;
    padding: 0 22px;

    font-family: inherit;
}

.encuesta-satisfaccion .gform_fields {
    gap: 22px 22px !important;
}


/* ==========================================================
   LEYENDA OBLIGATORIOS
   ========================================================== */

.encuesta-satisfaccion .gform_required_legend {
    margin-bottom: 28px;

    color: var(--muted);

    font-size: 13px;
}


/* ==========================================================
   LABELS
   ========================================================== */

.encuesta-satisfaccion .gfield_label {
    margin-bottom: 9px !important;

    color: var(--text);

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.4;
}

.encuesta-satisfaccion .gfield_required {
    color: var(--pink) !important;
}


/* ==========================================================
   CABECERA: PROCEDENCIA / SEXO / CONOCIDO
   ========================================================== */

@media (min-width: 769px) {

    .encuesta-satisfaccion #field_1_3,
    .encuesta-satisfaccion #field_1_17,
    .encuesta-satisfaccion #field_1_16 {
        grid-column: span 4 !important;
    }
}


/* ==========================================================
   SELECTS
   ========================================================== */

.encuesta-satisfaccion select,
.encuesta-satisfaccion .gfield_select {

    width: 100% !important;
    min-height: 50px !important;

    padding: 0 44px 0 15px !important;

    background: #fff !important;

    border: 1px solid var(--border) !important;
    border-radius: 9px !important;

    color: var(--text) !important;

    font-size: 14px !important;

    box-shadow: none !important;

    transition: .2s ease;
}

.encuesta-satisfaccion select:hover {
    border-color: #d7cedb !important;
}

.encuesta-satisfaccion select:focus {
    border-color: var(--pink) !important;

    box-shadow:
        0 0 0 3px rgba(229, 0, 126, .10) !important;

    outline: none !important;
}


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

.encuesta-satisfaccion #field_1_4,
.encuesta-satisfaccion #field_1_8,
.encuesta-satisfaccion #field_1_20,
.encuesta-satisfaccion #field_1_24,
.encuesta-satisfaccion #field_1_32 {

    grid-column: 1 / -1 !important;

    margin-top: 34px !important;
    margin-bottom: -4px !important;

    padding: 18px 24px !important;

    background:
        linear-gradient(
            90deg,
            var(--pink-dark),
            var(--pink)
        ) !important;

    border: 0 !important;
    border-radius: 12px 12px 0 0 !important;

    box-shadow:
        0 8px 24px rgba(30, 15, 45, .08);
}


/* ==========================================================
   TÍTULOS DE SECCIÓN
   ========================================================== */

.encuesta-satisfaccion #field_1_4 .gsection_title,
.encuesta-satisfaccion #field_1_8 .gsection_title,
.encuesta-satisfaccion #field_1_20 .gsection_title,
.encuesta-satisfaccion #field_1_24 .gsection_title,
.encuesta-satisfaccion #field_1_32 .gsection_title {

    margin: 0 !important;

    color: #fff !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    line-height: 1.3;

    text-transform: uppercase;
}


/* ==========================================================
   TARJETAS DE PREGUNTAS
   ========================================================== */

.encuesta-satisfaccion #field_1_5,
.encuesta-satisfaccion #field_1_6,
.encuesta-satisfaccion #field_1_7,

.encuesta-satisfaccion #field_1_9,
.encuesta-satisfaccion #field_1_15,
.encuesta-satisfaccion #field_1_12,
.encuesta-satisfaccion #field_1_11,
.encuesta-satisfaccion #field_1_18,

.encuesta-satisfaccion #field_1_19,
.encuesta-satisfaccion #field_1_21,
.encuesta-satisfaccion #field_1_22,

.encuesta-satisfaccion #field_1_23,
.encuesta-satisfaccion #field_1_25,
.encuesta-satisfaccion #field_1_26,
.encuesta-satisfaccion #field_1_28,
.encuesta-satisfaccion #field_1_29,
.encuesta-satisfaccion #field_1_30,

.encuesta-satisfaccion #field_1_31,
.encuesta-satisfaccion #field_1_33,
.encuesta-satisfaccion #field_1_34 {

    padding: 22px !important;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 11px;

    box-shadow:
        0 5px 18px rgba(30, 15, 45, .05);
}


/* ==========================================================
   DOS COLUMNAS
   ========================================================== */

@media (min-width: 769px) {

    .encuesta-satisfaccion #field_1_5,
    .encuesta-satisfaccion #field_1_6,
    .encuesta-satisfaccion #field_1_7,

    .encuesta-satisfaccion #field_1_9,
    .encuesta-satisfaccion #field_1_15,
    .encuesta-satisfaccion #field_1_12,
    .encuesta-satisfaccion #field_1_11,
    .encuesta-satisfaccion #field_1_18,

    .encuesta-satisfaccion #field_1_19,
    .encuesta-satisfaccion #field_1_21,
    .encuesta-satisfaccion #field_1_22,

    .encuesta-satisfaccion #field_1_23,
    .encuesta-satisfaccion #field_1_25,
    .encuesta-satisfaccion #field_1_26,
    .encuesta-satisfaccion #field_1_28,
    .encuesta-satisfaccion #field_1_29,
    .encuesta-satisfaccion #field_1_30,

    .encuesta-satisfaccion #field_1_31,
    .encuesta-satisfaccion #field_1_33,
    .encuesta-satisfaccion #field_1_34 {

        grid-column: span 6 !important;
    }
}


/* ==========================================================
   RADIO BUTTONS
   ========================================================== */

.encuesta-satisfaccion .gfield_radio {

    display: grid !important;

    grid-template-columns:
        repeat(auto-fit, minmax(115px, 1fr));

    gap: 9px !important;

    margin-top: 14px !important;
}

.encuesta-satisfaccion .gfield_radio .gchoice {
    position: relative;
    margin: 0 !important;
}

.encuesta-satisfaccion .gfield_radio input[type="radio"] {

    position: absolute !important;

    opacity: 0 !important;

    width: 1px !important;
    height: 1px !important;

    pointer-events: none;
}

.encuesta-satisfaccion .gfield_radio label {

    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100% !important;
    max-width: none !important;

    min-height: 48px;

    padding: 10px 12px !important;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--muted);

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.25;

    text-align: center;

    cursor: pointer;

    transition: .18s ease;
}

.encuesta-satisfaccion .gfield_radio label:hover {

    color: var(--pink);

    background: var(--pink-soft);

    border-color: var(--pink);
}

.encuesta-satisfaccion
.gfield_radio
input[type="radio"]:checked + label {

    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            var(--pink-dark),
            var(--pink)
        ) !important;

    border-color: var(--pink) !important;

    box-shadow:
        0 5px 15px rgba(229,0,126,.20);
}


/* ==========================================================
   COORDINADORAS INFO - ID 37
   ========================================================== */

.encuesta-satisfaccion #field_1_37 {

    grid-column: 1 / -1 !important;

    padding: 16px 18px !important;

    background: var(--pink-soft);

    border-left: 4px solid var(--pink);
    border-radius: 8px;

    color: var(--text);

    font-size: 13px;
    line-height: 1.6;
}

.encuesta-satisfaccion #field_1_37 p {
    margin: 0 !important;
}


/* ==========================================================
   MÉDICO - ID 38
   ========================================================== */

.encuesta-satisfaccion #field_1_38 {

    grid-column: 1 / -1 !important;

    max-width: 420px;

    margin-top: 4px;
}


/* ==========================================================
   COMENTARIOS - ID 35
   ========================================================== */

.encuesta-satisfaccion #field_1_35 {

    grid-column: 1 / -1 !important;

    margin-top: 22px;

    padding: 24px !important;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 11px;

    box-shadow:
        0 5px 18px rgba(30,15,45,.05);
}

.encuesta-satisfaccion textarea {

    width: 100% !important;

    min-height: 160px !important;

    padding: 16px !important;

    background: #fff !important;

    border: 1px solid var(--border) !important;
    border-radius: 9px !important;

    color: var(--text);

    font-size: 14px !important;

    resize: vertical;

    box-shadow: none !important;

    transition: .2s ease;
}

.encuesta-satisfaccion textarea:focus {

    border-color: var(--pink) !important;

    box-shadow:
        0 0 0 3px rgba(229,0,126,.10) !important;

    outline: none !important;
}


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

.encuesta-satisfaccion .gform_footer {

    display: flex !important;

    justify-content: flex-end;
    align-items: center;

    margin-top: 24px !important;

    padding: 24px !important;

    background:
        linear-gradient(
            90deg,
            var(--pink-soft),
            var(--pink-soft-2)
        );

    border-radius: 11px;
}


/* ==========================================================
   BOTÓN
   ========================================================== */

.encuesta-satisfaccion .gform_button,
.encuesta-satisfaccion input[type="submit"] {

    min-width: 190px !important;
    min-height: 50px;

    margin: 0 !important;

    padding: 13px 30px !important;

    background:
        linear-gradient(
            90deg,
            var(--pink-dark),
            var(--pink)
        ) !important;

    border: 0 !important;
    border-radius: 8px !important;

    color: #fff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(229,0,126,.22);

    transition: .2s ease;
}

.encuesta-satisfaccion .gform_button:hover,
.encuesta-satisfaccion input[type="submit"]:hover {

    transform: translateY(-2px);

    box-shadow:
        0 9px 24px rgba(229,0,126,.30);
}


/* ==========================================================
   ERRORES
   ========================================================== */

.encuesta-satisfaccion .gfield_error {

    background: #fff8fa !important;

    border-color: #ffd5df !important;
}

.encuesta-satisfaccion .validation_message {

    margin-top: 8px !important;

    color: #c92c55 !important;

    font-size: 12px !important;
}


/* ==========================================================
   HERO ENCUESTA
   ========================================================== */

.encuesta-hero {
    position: relative;

    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 24px;

    background-image:
        linear-gradient(
            rgba(229, 0, 126, 0.78),
            rgba(201, 0, 112, 0.82)
        ),
        url('https://surveysdev.fivdona.com/wp-content/uploads/2026/08/chicas.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #fff;
    text-align: center;

    overflow: hidden;
}

.encuesta-hero__content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.encuesta-hero h1 {
    margin: 0 0 18px;

    color: #fff;

    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: .5px;
}

.encuesta-hero p {
    max-width: 650px;

    margin: 0 auto;

    color: #fff;

    font-size: 17px;
    line-height: 1.7;
}

.encuesta-hero::after {
    content: "";

    position: absolute;

    left: -5%;
    bottom: -55px;

    width: 110%;
    height: 90px;

    background: #f7f7f9;

    border-radius: 50% 50% 0 0;
}

@media (max-width: 768px) {

    .encuesta-hero {
        min-height: 260px;
        padding: 45px 20px;
    }

    .encuesta-hero h1 {
        font-size: 32px;
    }

    .encuesta-hero p {
        font-size: 15px;
    }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    .encuesta-satisfaccion {
        margin-top: 24px;
        padding: 0 14px;
    }

    .encuesta-satisfaccion .gform_fields {
        gap: 16px !important;
    }

    .encuesta-satisfaccion .gfield {
        grid-column: 1 / -1 !important;
    }

    .encuesta-satisfaccion #field_1_3,
    .encuesta-satisfaccion #field_1_17,
    .encuesta-satisfaccion #field_1_16 {

        grid-column: 1 / -1 !important;
    }

    .encuesta-satisfaccion #field_1_4,
    .encuesta-satisfaccion #field_1_8,
    .encuesta-satisfaccion #field_1_20,
    .encuesta-satisfaccion #field_1_24,
    .encuesta-satisfaccion #field_1_32 {

        margin-top: 22px !important;

        padding: 15px 17px !important;
    }

    .encuesta-satisfaccion #field_1_4 .gsection_title,
    .encuesta-satisfaccion #field_1_8 .gsection_title,
    .encuesta-satisfaccion #field_1_20 .gsection_title,
    .encuesta-satisfaccion #field_1_24 .gsection_title,
    .encuesta-satisfaccion #field_1_32 .gsection_title {

        font-size: 14px !important;
    }

    .encuesta-satisfaccion .gfield_radio {

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

        gap: 8px !important;
    }

    .encuesta-satisfaccion .gfield_radio label {

        min-height: 46px;

        font-size: 10px !important;
    }

    .encuesta-satisfaccion #field_1_38 {
        max-width: none;
    }

    .encuesta-satisfaccion #field_1_35 {
        padding: 18px !important;
    }

    .encuesta-satisfaccion .gform_footer {
        padding: 18px !important;
    }

    .encuesta-satisfaccion .gform_button,
    .encuesta-satisfaccion input[type="submit"] {

        width: 100% !important;
    }
}


/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width: 430px) {

    .encuesta-satisfaccion .gfield_radio {
        grid-template-columns: 1fr;
    }

    .encuesta-satisfaccion .gfield_radio label {

        justify-content: flex-start;

        padding: 11px 14px !important;

        text-align: left;
    }
}