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

.webform-submission-form {

    background:
        linear-gradient(
            rgba(255,255,255,0.92),
            rgba(255,255,255,0.92)
        ),
        url('/sites/default/files/2026-10/concurso_historia_1.jpg');

    background-repeat: no-repeat;

    background-position: center center;

    background-size: 90% auto;

    background-origin: content-box;

}

/* ======================================
   TARJETA DEL FORMULARIO
====================================== */

.webform-submission-form .webform-wizard-page,
.webform-submission-form .fieldset-wrapper {

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    border-top:8px solid #003A70;

    padding:35px;

    margin:20px auto;
}

/* ======================================
   BARRA DE PROGRESO
====================================== */

.webform-progress{
    margin-bottom:30px;
}

.webform-progress__status{
    font-weight:600;
}

/* ======================================
   TÍTULOS
====================================== */

.webform-submission-form h1,
.webform-submission-form h2{
    color:#003A70;
    text-align:center;
}

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

.webform-submission-form label{

    color:#003A70;

    font-weight:700;

    font-size:15px;

    margin-bottom:8px;
}

/* ======================================
   CAMPOS
====================================== */

.webform-submission-form input,
.webform-submission-form textarea,
.webform-submission-form select {

    border:1px solid #d8dde6 !important;

    border-radius:10px !important;

    padding:14px 16px;

    font-size:16px;

    background:#ffffff;

    transition:.3s;
}

.webform-submission-form input:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {

    border-color:#003A70 !important;

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

    outline:none;
}

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

.webform-button--submit {

    background:#003A70 !important;

    border:none !important;

    color:#ffffff !important;

    border-radius:10px !important;

    padding:14px 35px !important;

    font-size:16px;

    font-weight:700;

    box-shadow:0 4px 12px rgba(0,58,112,.18);

    transition:.3s;
}

.webform-button--submit:hover {

    background:#00264C !important;

    transform:translateY(-2px);
}

/* ======================================
   TEXTO INTRODUCTORIO
====================================== */

.encabezado-concurso{

    text-align:center;

    margin-bottom:35px;
}

.encabezado-concurso h2{

    color:#003A70;

    font-size:38px;

    font-weight:700;

    margin-bottom:15px;
}

.intro-concurso{

    max-width:800px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#555;
}

/* ======================================
   CONFIRMACIÓN
====================================== */

.confirmacion-concurso{

    max-width:900px;

    margin:40px auto;

    padding:45px 35px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    border-top:8px solid #003A70;

    text-align:center;
}

.confirmacion-icono{

    margin:0 auto 10px auto;

    text-align:center;
}

.confirmacion-icono img{

    width:120px;

    max-width:100%;

    height:auto;
}

.subtitulo-concurso{

    color:#C8A247;

    font-weight:700;

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:15px;
}

.confirmacion-concurso h1{

    color:#003A70;

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;
}

.confirmacion-concurso p{

    max-width:760px;

    margin:0 auto 20px auto;

    font-size:20px;

    line-height:1.8;

    color:#444;
}

.mensaje-patrimonio{

    max-width:720px;

    margin:35px auto;

    padding:20px;

    background:#F4F6F9;

    border-left:6px solid #C8A247;

    border-radius:12px;

    font-size:22px;

    font-weight:700;

    color:#003A70;
}

.mensaje-emocional{

    color:#003A70 !important;

    font-style:italic;

    font-size:20px !important;

    margin-top:30px !important;
}

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

@media
.webform-submission-form ul{

    background:#F4F6F9;

    padding:20px 20px 20px 40px;

    border-left:5px solid #C8A247;

    border-radius:10px;

    margin-bottom:25px;
}
.webform-actions{

    text-align:center;
}

.webform-button--submit{

    min-width:180px;
}
.webform-actions{
    display:flex;
    justify-content:center;
    margin-top:30px;
}
.webform-submission-form ul{

    background:#F4F6F9;

    border-left:6px solid #C8A247;

    border-radius:12px;

    padding:20px 20px 20px 40px;

    margin:20px 0 25px 0;
}
.webform-counter,
.webform-counter-message,
.counter,
.text-count-message {

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    color:#003A70 !important;

    font-weight:600;

    margin-top:8px;
}