/*
 * Concierto Navideño 2026 — El Salvador.
 *
 * Las dos páginas van en plantilla Canvas, sin cabecera ni pie, igual que el
 * menú del Bingo, así que tienen que sostenerse solas: el banner hace de
 * portada y el contenido se recoge en una tarjeta centrada.
 *
 * La paleta no se inventa aquí. Es la misma que ya usan la tarjeta de
 * agradecimiento y el correo del concierto —verde, vino y dorado sobre
 * crema—, con el azul institucional del sitio para los enlaces. Así la página
 * de compra, la de gracias y el correo se leen como una sola pieza.
 */

.cns-pagina {
    /* Tomados de la tarjeta de agradecimiento y del correo del concierto. */
    --cns-verde: #174c36;
    --cns-vino: #9e002e;
    --cns-vino-oscuro: #7a1732;
    --cns-dorado: #b28a3d;
    --cns-dorado-claro: #f3d79b;
    --cns-crema: #f4f0e8;
    --cns-crema-suave: #faf7f1;
    /* El crema de campo del menú del Bingo; aquí hace de relleno al pasar. */
    --cns-crema-campo: #ede8e0;
    --cns-texto: #484848;

    /* El azul del sitio, el de los títulos y los enlaces. */
    --cns-azul: #264582;

    /* Las líneas son el dorado rebajado, no un gris nuevo. */
    --cns-linea: rgba(178, 138, 61, 0.3);
    --cns-linea-suave: rgba(178, 138, 61, 0.18);

    background-color: var(--cns-crema);
}

/* ======================================================================
 * La tarjeta: lo que en otras páginas separaban la cabecera y el pie, aquí
 * lo hace este bloque blanco montado sobre el banner.
 * ====================================================================== */

.cns-formulario .elementor-top-section.elementor-section-boxed {
    position: relative;
    z-index: 2;
    margin: -70px 0 70px;
}

.cns-formulario .elementor-top-section.elementor-section-boxed > .elementor-container {
    max-width: 780px;
    background: #fff;
    border: 1px solid var(--cns-linea);
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(23, 76, 54, 0.13);
    overflow: hidden;
}

/*
 * Elementor deja 10 px de canaleta alrededor de cada columna. Dentro de la
 * tarjeta esa canaleta se ve como un marco blanco que impide que la banda
 * verde llegue al borde, así que el relleno lo pone cada bloque.
 */
.cns-formulario .elementor-top-section.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0 !important;
}

/* El banner no debe tapar la tarjeta. */
.cns-pagina .elementor-top-section.elementor-section-full_width {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------------------
 * Encabezado de la tarjeta.
 *
 * Donde había una banda gris plana va el verde navideño de la tarjeta de
 * agradecimiento, con su filete dorado. Es el mismo gesto del correo.
 * -------------------------------------------------------------------- */

.cns-formulario .elementor-section.elementor-inner-section {
    position: relative;
    background-color: var(--cns-verde) !important;
    border-bottom: 3px solid var(--cns-dorado);
}

/* El hilo dorado interior, el que la tarjeta de gracias lleva en su banda. */
.cns-formulario .elementor-section.elementor-inner-section::before {
    content: "";
    position: absolute;
    inset: 7px 7px auto;
    height: 1px;
    background: var(--cns-linea);
}

.cns-formulario .elementor-section.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 34px 24px 30px !important;
}

/* El título: la Crimson Text del sitio, en el dorado claro de la banda. */
.cns-formulario .elementor-widget-heading .elementor-heading-title {
    color: var(--cns-dorado-claro) !important;
    line-height: 1.15 !important;
}

/*
 * El subtítulo queda como antefirma: versalitas doradas muy espaciadas, que
 * es como el correo escribe «Navidad 2026».
 */
.cns-formulario .elementor-inner-section .elementor-widget-text-editor {
    margin-top: 10px !important;
}

/*
 * El centrado se fija aquí porque el widget solo lo trae en escritorio: en
 * móvil el título quedaba centrado y la antefirma a la izquierda.
 */
.cns-formulario .elementor-inner-section .elementor-widget-text-editor,
.cns-formulario .elementor-inner-section .elementor-widget-heading {
    text-align: center;
}

.cns-formulario .elementor-inner-section .elementor-widget-text-editor p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: var(--cns-dorado) !important;
}

/* El adorno del correo: ✦ ❄ ✦ */
.cns-formulario .elementor-inner-section .elementor-widget-text-editor::after {
    content: "✦ ❄ ✦";
    display: block;
    margin-top: 14px;
    font-size: 15px;
    letter-spacing: 7px;
    text-indent: 7px;
    /* El centrado se fija aquí: en móvil el widget deja de venir centrado. */
    text-align: center;
    color: var(--cns-dorado);
}

/* ======================================================================
 * El formulario de entradas
 * ====================================================================== */

.cns-formulario .elementor-widget-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 38px 48px 44px;
}

.cns-formulario .elementor-form .elementor-field-group {
    margin-bottom: 6px;
}

/* Las etiquetas: la tipografía del sitio, en el gris de la tarjeta. */
.cns-formulario .elementor-form .elementor-field-label {
    color: var(--cns-texto) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cns-formulario .elementor-form .elementor-mark-required .elementor-field-label:after,
.cns-formulario .elementor-form .elementor-field-required .elementor-field-label:after {
    color: var(--cns-vino);
}

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

.cns-formulario .elementor-form .elementor-field-textual,
.cns-formulario .elementor-form .iti input[type="tel"] {
    min-height: 50px;
    padding: 12px 16px;
    background-color: var(--cns-crema-suave) !important;
    border: 1px solid var(--cns-linea-suave) !important;
    border-radius: 8px !important;
    color: var(--cns-texto) !important;
    box-shadow: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.cns-formulario .elementor-form .elementor-field-textual::placeholder {
    color: #9a9080;
    opacity: 1;
}

.cns-formulario .elementor-form .elementor-field-textual:focus,
.cns-formulario .elementor-form .iti input[type="tel"]:focus {
    background-color: #fff !important;
    border-color: var(--cns-dorado) !important;
    box-shadow: 0 0 0 3px rgba(178, 138, 61, 0.18);
    outline: 0;
}

/* La flecha del desplegable, en dorado y sin el gris del navegador. */
.cns-formulario .elementor-form select.elementor-field-textual {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cns-dorado) 50%),
        linear-gradient(135deg, var(--cns-dorado) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

/*
 * El monto lo calcula el guion de la página a partir de la cantidad de
 * entradas: se muestra, no se escribe. Que se lea como un importe y no como
 * un campo vacío más.
 */
.cns-formulario .elementor-form .elementor-field-group-amount input {
    background-color: #fff !important;
    border-color: var(--cns-linea) !important;
    color: var(--cns-vino) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
    cursor: default;
    /* Deja sitio al «$» que el sitio antepone a todos sus campos de monto. */
    padding-left: 38px;
}

/*
 * Ese «$» lo coloca una regla global anclada al borde inferior del campo.
 * Aquí el campo es más alto y la cifra más grande, así que hay que recolocarlo
 * para que quede a la misma altura que el importe.
 */
.cns-formulario .elementor-form .elementor-field-group-amount:before {
    bottom: 13px;
    left: 18px;
    color: var(--cns-vino);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 700;
}

/* El selector de país del teléfono, a juego con el resto. */
.cns-formulario .elementor-form .iti {
    width: 100%;
}

.cns-formulario .elementor-form .iti__flag-container .iti__selected-flag {
    border-radius: 8px 0 0 8px;
}

/*
 * El campo HTML del formulario hace de rótulo del teléfono: que se lea como
 * las demás etiquetas y no como un párrafo suelto.
 */
.cns-formulario .elementor-form .elementor-field-type-html {
    margin-bottom: 0;
    color: var(--cns-texto) !important;
    font-weight: 600;
}

/* ---------- Tarjetas aceptadas ---------- */

/*
 * Lo pinta sw-payments al final de los campos de tarjeta. Separado por un
 * filete dorado cierra el bloque de pago sin añadir nada al formulario.
 */
.cns-formulario .credomatic-card-images {
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--cns-linea-suave);
    color: var(--cns-dorado);
}

.cns-formulario .credomatic-card-images .credomatic-card-images-icons {
    flex-wrap: wrap;
    margin: 12px 0 0 !important;
}

/* El rótulo «Tarjetas aceptadas» venía en el azul del sitio; aquí va en dorado. */
.cns-formulario .credomatic-card-images .credomatic-card-images-icons::before {
    flex: 0 0 100%;
    margin-bottom: 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cns-dorado);
}

/* ---------- reCAPTCHA ---------- */

.cns-formulario .elementor-form .elementor-field-type-recaptcha {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* ---------- El botón ---------- */

.cns-formulario .elementor-form .elementor-field-type-submit {
    justify-content: center;
    margin-top: 26px;
}

.cns-formulario .elementor-form button[type="submit"] {
    min-width: 260px;
    min-height: 54px;
    padding: 0 44px;
    background-color: var(--cns-vino) !important;
    border: 1px solid var(--cns-vino) !important;
    border-radius: 40px !important;
    color: #fff !important;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 22px rgba(158, 0, 46, 0.22);
    transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cns-formulario .elementor-form button[type="submit"]:hover,
.cns-formulario .elementor-form button[type="submit"]:focus {
    background-color: var(--cns-vino-oscuro) !important;
    border-color: var(--cns-vino-oscuro) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(122, 23, 50, 0.28);
    transform: translateY(-1px);
}

.cns-formulario .elementor-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--cns-dorado);
    outline-offset: 3px;
}

/* ---------- El reproductor del villancico ---------- */

/*
 * El botón de la música vive en un widget HTML al final de la columna. Sin la
 * canaleta de Elementor quedaba pegado a la esquina de la tarjeta; centrado
 * bajo el botón se lee como lo que es, un extra de la página.
 */
.cns-formulario .elementor-widget-html {
    padding: 0 48px 34px;
    text-align: center;
}

/*
 * El rosa del tema.
 *
 * `reset.css` pinta de #cc3366 el fondo de CUALQUIER <button> del sitio al
 * pasar el ratón o al enfocarlo:
 *
 *     button:focus, button:hover { background-color: #c36; color: #fff; }
 *
 * La trampa está en que esa regla va sobre el <button> de DENTRO de la
 * píldora, no sobre la píldora: darle color a `.music-player-navidad` no
 * sirve de nada porque el rosa se pinta encima. Hay que apagar el fondo del
 * botón y dejar que el color lo ponga el contenedor.
 *
 * Esto no puede vivir en el <style> que el propio widget HTML ya trae: ese
 * bloque va antes en el documento y pierde contra `reset.css` en :hover y
 * en :focus.
 */
.cns-pagina .elementor-widget-html .music-player-navidad button,
.cns-pagina .elementor-widget-html .music-player-navidad button:hover,
.cns-pagina .elementor-widget-html .music-player-navidad button:focus,
.cns-pagina .elementor-widget-html .music-player-navidad button:active {
    background: transparent;
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

/*
 * Los tres estados de la píldora, como quedó en Guatemala: en reposo no
 * compite con el botón de donar, y solo se tiñe de verde mientras suena.
 */
.cns-pagina .elementor-widget-html .music-player-navidad {
    background: #fff;
    border: 1px solid var(--cns-vino-oscuro);
    color: var(--cns-vino-oscuro);
    box-shadow: 0 4px 14px rgba(122, 23, 50, 0.14);
    transition: background-color 0.18s ease, color 0.18s ease,
        border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/*
 * Al pasar el ratón va en crema, no en vino: un relleno vino sobre la tarjeta
 * blanca se lee como otro bloque rojo, que es justo lo que se quería quitar.
 */
.cns-pagina .elementor-widget-html .music-player-navidad:hover {
    background: var(--cns-crema-campo);
    border-color: var(--cns-vino-oscuro);
    color: var(--cns-vino-oscuro);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(122, 23, 50, 0.18);
}

/* Sonando. */
.cns-pagina .elementor-widget-html .music-player-navidad.reproduciendo {
    background: var(--cns-verde);
    border-color: var(--cns-verde);
    color: var(--cns-dorado-claro);
    box-shadow: 0 4px 14px rgba(23, 76, 54, 0.22);
}

.cns-pagina .elementor-widget-html .music-player-navidad.reproduciendo:hover {
    background: var(--cns-verde);
    border-color: var(--cns-verde);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23, 76, 54, 0.3);
}

/*
 * El <style> del widget apaga el contorno con `outline: 0`, así que con el
 * teclado no se veía dónde estaba el foco. Se devuelve como filete por fuera:
 * una sombra traslúcida en vino se leería como la misma mancha rosa que se
 * está quitando.
 */
.cns-pagina .elementor-widget-html .music-player-navidad:focus-within {
    outline: 2px solid var(--cns-vino-oscuro);
    outline-offset: 3px;
}

.cns-pagina .elementor-widget-html .music-player-navidad.reproduciendo:focus-within {
    outline-color: var(--cns-verde);
}

@media (prefers-reduced-motion: reduce) {
    .cns-pagina .elementor-widget-html .music-player-navidad {
        transition: none;
    }

    .cns-pagina .elementor-widget-html .music-player-navidad:hover,
    .cns-pagina .elementor-widget-html .music-player-navidad.reproduciendo:hover {
        transform: none;
    }
}

/* Los avisos del formulario, en los colores de la página. */
.cns-formulario .elementor-message.elementor-message-success {
    color: var(--cns-verde) !important;
}

.cns-formulario .elementor-message.elementor-message-danger,
.cns-formulario .elementor-form .elementor-field-group .elementor-field-required .elementor-message-danger {
    color: var(--cns-vino) !important;
}

/* ======================================================================
 * La página de gracias
 *
 * La tarjeta que pinta [global_thank_you_render] ya viene vestida: aquí solo
 * se le da sitio, se la centra y se cierra la página con el saludo.
 * ====================================================================== */

.cns-gracias .elementor-top-section.elementor-section-boxed {
    position: relative;
    z-index: 2;
    margin: -60px 0 70px;
}

/* La banda gris que envolvía la tarjeta sobraba: la tarjeta ya es el marco. */
.cns-gracias .elementor-section.elementor-inner-section {
    background-color: transparent !important;
}

.cns-gracias .elementor-section.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0 !important;
}

.cns-gracias .elementor-widget-text-editor {
    margin: 0 !important;
    padding: 0 !important;
}

.cns-gracias .email-navidad {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--cns-linea);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(23, 76, 54, 0.13);
}

/*
 * El saludo que cierra la página, debajo de la tarjeta: dos líneas sueltas
 * que sin estilo se leían como un pie de página olvidado.
 */
.cns-gracias .elementor-widget-text-editor > .elementor-widget-container > p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
    color: var(--cns-texto) !important;
}

.cns-gracias .elementor-widget-text-editor > .elementor-widget-container > p:first-of-type {
    margin-top: 34px;
}

.cns-gracias .elementor-widget-text-editor > .elementor-widget-container > p:last-child {
    margin-bottom: 10px;
    font-size: 20px;
    color: var(--cns-vino) !important;
}

/* ======================================================================
 * Móvil
 * ====================================================================== */

@media (max-width: 767px) {
    .cns-formulario .elementor-top-section.elementor-section-boxed {
        margin: -40px 0 46px;
    }

    .cns-formulario .elementor-top-section.elementor-section-boxed > .elementor-container {
        border-radius: 12px;
    }

    .cns-formulario .elementor-section.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
        padding: 26px 18px 24px !important;
    }

    /* A 40 px el título partía en dos líneas y dejaba la banda medio vacía. */
    .cns-formulario .elementor-widget-heading .elementor-heading-title {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }

    .cns-formulario .elementor-inner-section .elementor-widget-text-editor p {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .cns-formulario .elementor-widget-form {
        padding: 28px 20px 34px;
    }

    .cns-formulario .elementor-form button[type="submit"] {
        width: 100%;
        min-width: 0;
    }

    /* El recuadro de reCAPTCHA no cabe entero en pantallas estrechas. */
    .cns-formulario .elementor-form .elementor-field-type-recaptcha > div {
        transform: scale(0.88);
        transform-origin: center;
    }
}