/* ========================================================================== Campaña «Gran Concierto Navideño 2026» -------------------------------------------------------------------------- Páginas: /concierto-navideno-2026/ (21980) /gracias-concierto-navideno-2026/ (22052) Encargo (correo de Mr. Jonathan Díaz + audio de Steffy, 2026-10-07): «darle estilo nada más». No se toca ni una funcionalidad, ni un campo, ni un texto, ni la estructura: solo cómo se ve lo que ya existe. Las dos páginas pasaron además a plantilla «Elementor Canvas» (sin encabezado ni pie), como el formulario del menú de la cena (página 11028), que es la referencia que dio el jefe. PALETA — no se inventó ningún color. Todos salen de la tarjeta de agradecimiento de ESTA misma campaña (meta `_corres_ebi_thankyou_text` del post 21994, con su CSS en el widget «CSS DE LA TARJETA» de la 22052), de la lluvia de notas musicales que ya corre en esta landing, o del sistema del sitio documentado en el README. #9E002E vino navideño titulares y cifras (tarjeta de gracias) #86262E vino del sitio etiquetas (sistema del sitio) #174C36 verde navideño filetes de acento (tarjeta de gracias) #B28A3D dorado antetítulos, filetes (tarjeta de gracias) #F4F0E8 crema de fondo lienzo de la página (tarjeta de gracias) #EDE8E0 crema del sitio relleno de campos (sistema del sitio) #E8DFD1 borde crema borde de la tarjeta (tarjeta de gracias) #DFD2BA borde crema borde de los campos (tarjeta de gracias) #EADFC9 borde crema borde del total (tarjeta de gracias) #79674A café texto de cuerpo (sistema del sitio) POR QUÉ TODO ESTÁ AQUÍ Y NO EN AJUSTES DE ELEMENTOR --------------------------------------------------- El método de la casa (README, Fase 3-9) manda poner en el ajuste del widget todo lo que el ajuste alcance. Aquí se hizo al revés **a propósito**: el encargo fue «no toques nada más», y una hoja aparte se revierte borrando un archivo, sin volver a escribir `_elementor_data` en una página que ya está cableada a la pasarela de BI y en producción. El precio es que el cliente no puede editar estos estilos desde el constructor. Si algún día se quiere esa edición, lo que está marcado «[ajuste]» abajo es lo que cabe en un ajuste de contenedor o de formulario y se puede subir allí sin cambiar el resultado. ÍNDICE ------ 1. Lienzo de las dos páginas 1 bis. El banner: ancho completo y sin recortar 2. Franja del titular (landing) 3. Tarjeta del formulario (landing) 4. Campos 5. Caja del total 6. Botón de envío 6 bis. Botón de la música 7. Tarjeta de agradecimiento (gracias) 8. Respeto a «reducir movimiento» ========================================================================== */ /* ========================================================================== 1 · LIENZO Sin encabezado ni pie, la página quedaba sobre blanco puro y se veía recortada. El crema de la propia tarjeta de gracias le devuelve el fondo cálido y cose las dos páginas entre sí. [ajuste] ========================================================================== */ body.page-id-21980, body.page-id-22052 { background-color: #F4F0E8; } /* En Canvas nada separa el último elemento del borde inferior de la ventana. */ body.page-id-21980 .elementor-element-281ea28, body.page-id-22052 .elementor-element-282786c { margin-bottom: 70px; } @media (max-width: 767px) { body.page-id-21980 .elementor-element-281ea28, body.page-id-22052 .elementor-element-282786c { margin-bottom: 40px; } } /* El banner pegado al borde superior. Arriba del todo hay un contenedor (3ec0087) cuyo único contenido es el banner de móvil, oculto de tablet para arriba. Vacío sigue ocupando 20 px, y con el encabezado fuera esos 20 px son una franja de crema entre el borde de la ventana y el banner. De tablet para arriba el contenedor no pinta nada: se retira entero. */ @media (min-width: 768px) { body.page-id-21980 .elementor-element.elementor-element-3ec0087 { display: none; } } /* En móvil sí pinta —es el banner— pero traía 40 px de margen arriba, que antes lo separaban del encabezado y ahora lo despegan del borde. */ @media (max-width: 767px) { body.page-id-21980 .elementor-element.elementor-element-3ec0087 { margin-top: 0; } body.page-id-21980 .elementor-element-3ec0087 > .e-con-inner { padding-top: 0; padding-bottom: 0; } } /* ========================================================================== 1 bis · EL BANNER: ANCHO COMPLETO Y SIN RECORTAR -------------------------------------------------------------------------- EL PROBLEMA DE FONDO, Y NO SE ARREGLA CON CSS `Navidad.png` mide 1080 × 1080: es CUADRADA, formato de Instagram. Los demás héroes de escritorio de este sitio son de 1500 × 600 — `banner_binco_2026_hero.jpg`, `banner_peticiones_flores_fatima_2026_hero.jpg`, `construyamos_con_fe_2026_landing_pc.jpg`—, o sea 2,5:1. El concierto es el único que no tiene su arte en esa proporción. Con `cover`, que es lo que trae Elementor, un cuadrado metido en una caja de 2,5:1 pierde más de la mitad: se veía solo la franja central y faltaban el titular y el «Donación Q125». Con `contain` no se pierde nada pero quedan dos franjas de crema a los lados, y eso no parece un banner. LO QUE SE HACE MIENTRAS NO HAYA ARTE APAISADO Dos capas sobre el mismo ancho completo: abajo la misma imagen a `cover` y muy desenfocada, que llena el ancho de pared a pared con el color del cartel arriba el cartel ENTERO, nítido, centrado, a `contain` El resultado ocupa toda la pantalla, no corta nada y no deja franjas muertas. Es el recurso de siempre para meter material cuadrado en un hueco apaisado. >>> ESTO ES UN PARCHE, NO LA SOLUCIÓN. Pídanle al diseñador el banner en >>> 1500 × 600 como los de las otras campañas. Con él, esta sección entera >>> se borra y basta con cambiar la imagen en Elementor. OJO AL MANTENERLO La capa desenfocada lleva la URL de la imagen ESCRITA AQUÍ, porque un pseudoelemento no puede heredar el fondo del hermano que lo pinta. Si cambian la imagen del héroe desde Elementor, el cartel nítido sí cambia —ese lo pinta Elementor— pero el desenfoque de detrás se queda con el anterior. Se eligió así a propósito: lo que la gente lee siempre queda correcto, y lo que puede quedar desfasado es solo la mancha de color. ========================================================================== */ /* La altura sigue la proporción 2,5:1 de los héroes del sitio: a 1440 px de ancho da 576 px de alto, que es exactamente el formato de los demás. */ body.page-id-21980 .elementor-widget.elementor-element.elementor-element-f27f3bb .swiper-slide, body.page-id-21980 .elementor-widget.elementor-element.elementor-element-f27f3bb .elementor-slides-wrapper, body.page-id-21980 .elementor-widget.elementor-element.elementor-element-f27f3bb .elementor-swiper { height: clamp(380px, 40vw, 600px); } body.page-id-21980 .elementor-element-f27f3bb .swiper-slide { position: relative; overflow: hidden; background-color: #5A0E1E; } /* CAPA DE ABAJO · el relleno desenfocado que llega a los bordes. El `scale` es imprescindible: sin él, el desenfoque deja el borde del recuadro lavado y se ve el corte. */ body.page-id-21980 .elementor-element-f27f3bb .swiper-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("https://salvemaria.org/wp-content/uploads/2026/09/Navidad.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; filter: blur(34px) saturate(1.08) brightness(.88); transform: scale(1.18); pointer-events: none; } /* CAPA DE ARRIBA · el cartel entero y nítido. Lo pinta Elementor, así que conserva la imagen que esté puesta en el widget. */ body.page-id-21980 .elementor-widget.elementor-element.elementor-element-f27f3bb .swiper-slide .swiper-slide-bg { /* Viene en `position: static`, y así su `z-index` no cuenta: la capa desenfocada, que sí está posicionada, le pasaba por encima y tapaba el cartel. Posicionarlo es lo que lo pone delante. */ position: absolute; inset: 0; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center center; } /* El efecto Ken Burns amplía la imagen poco a poco. Sobre el cartel contenido lo volvería a sacar del encuadre, que es justo lo que se está arreglando. */ body.page-id-21980 .elementor-element-f27f3bb .swiper-slide-bg.elementor-ken-burns--active { animation: none; transform: none; } /* ========================================================================== 2 · FRANJA DEL TITULAR (landing) Solo el redondeo de las esquinas. 2026-10-07 · Llevó dos filetes dorados (#B28A3D, arriba y abajo). El usuario los mandó quitar. No volver a ponerlos. [ajuste] ========================================================================== */ body.page-id-21980 .elementor-element-42dcd25 { border-radius: 14px; } /* El titular se monta sobre sí mismo. Tiene 75 px de letra con 53 px de interlineado: la segunda línea sube por encima de la primera y, de paso, recorta la tilde de la Ñ de «NAVIDEÑO», que es la razón de que se leyera «NAVIDENO». 1.12 deja las dos líneas separadas y la tilde entera. Solo hace falta en escritorio: de 1024 px para abajo el titular baja a 35 px y los mismos 53 px ya son holgados; en móvil el propio widget pone 1.5 em. Por eso el corte en 1025, que es el de Elementor en este sitio. La regla que hay que ganar es de cuatro clases (`.elementor-21980 .elementor-element.elementor-element-0024e42 .elementor-heading-title`), de ahí el doblar `.elementor-element` aquí también. */ @media (min-width: 1025px) { body.page-id-21980 .elementor-element.elementor-element-0024e42 .elementor-heading-title { line-height: 1.12; } } /* El antetítulo «CONCIERTO NAVIDEÑO 2026» iba del mismo vino y del mismo tamaño que el titular, así que competía con él. Pasa a ser lo que es: un antetítulo dorado, pequeño y espaciado, como el «Navidad 2026» de la tarjeta de gracias. [ajuste] */ body.page-id-21980 .elementor-element-1647eb7 { color: #B28A3D; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; } /* ========================================================================== 3 · TARJETA DEL FORMULARIO (landing) El formulario flotaba suelto sobre el fondo: eso es lo «plano y feo» del audio. Se le da el mismo cuerpo que a la tarjeta del correo y de la página de gracias: blanco, 14 px de radio y un filete crema de 1 px que marca el borde. 2026-10-07 · Llevó además un filete verde de 4 px arriba (#174C36). El usuario lo mandó quitar. No volver a ponerlo. [ajuste] ========================================================================== */ body.page-id-21980 .elementor-element-b9a5f90 { padding: 38px 34px 30px; background: #FFFFFF; border: 1px solid #E8DFD1; border-radius: 14px; box-shadow: 0 12px 34px rgba(134, 38, 46, 0.08); } @media (max-width: 767px) { body.page-id-21980 .elementor-element-b9a5f90 { padding: 26px 20px 22px; border-radius: 10px; } } /* ========================================================================== 4 · CAMPOS Eran bloques de color crema sin borde, uno encima de otro: no se leía dónde empezaba y terminaba cada uno. Se les da borde, radio y aire, y un estado de foco visible, que antes no existía. [ajuste] SOBRE LA ESPECIFICIDAD DE AQUÍ ABAJO ------------------------------------ Elementor emite para este widget reglas de cinco clases, del tipo `.elementor-21980 .elementor-element.elementor-element-d1500dc .elementor-field-group .elementor-field`, con el color, el tamaño y el borde que tiene puesto el formulario en sus ajustes. Una regla corta pierde contra esa. De ahí el prefijo largo `body.page-id-21980 .elementor-widget-form.frmopa ...` y el doblar la clase en `.elementor-field.elementor-field-textual`: son seis clases y un elemento, lo justo para ganar sin recurrir a `!important`. ========================================================================== */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group .elementor-field.elementor-field-textual { padding: 12px 15px; border: 1px solid #DFD2BA; border-radius: 8px; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } /* EL TELÉFONO Y LA BANDERA. El campo de teléfono lo envuelve `intl-tel-input`, que coloca el selector de país (`.iti__flag-container`) en posición absoluta **encima del borde izquierdo del campo**, ocupando 48 px. El plugin lo compensa dándole al campo su propio relleno izquierdo; el `padding: 12px 15px` de la regla de arriba se lo comió, y el número se montaba sobre la bandera. 48 px de la bandera + 10 px de aire. Solo para este campo: los demás no llevan nada encima. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-phone .elementor-field.elementor-field-textual { padding-left: 58px; } /* Elementor no expone el estado de foco del campo: hay que escribirlo. Sin esto, con el teclado no se ve en qué campo se está. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group .elementor-field.elementor-field-textual:focus { background-color: #FAF7F1; border-color: #9E002E; box-shadow: 0 0 0 3px rgba(158, 0, 46, 0.10); outline: none; } /* La opacidad del texto de sugerencia es un pseudoelemento, fuera del alcance de cualquier ajuste. Chrome lo pinta al 54 % y sobre #EDE8E0 no llega al contraste mínimo. Mismo arreglo que en la hoja de Fátima. */ body.page-id-21980 .frmopa input::placeholder, body.page-id-21980 .frmopa textarea::placeholder { color: #9A8B73; opacity: 1; } /* Etiquetas: el vino del sitio, con algo de peso, para que se distingan del texto que escribe el devoto. [ajuste] */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group > .elementor-field-label { color: #86262E; font-weight: 600; letter-spacing: .3px; } /* El desplegable de la cantidad lo pintaba el navegador con su propia flecha gris de sistema, que no pega con nada. La flecha es parte del control, no un ajuste de Elementor: se quita la del sistema y se dibuja una en dorado con dos degradados. */ body.page-id-21980 .elementor-widget-form.frmopa select.elementor-field-textual { padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, #B28A3D 50%), linear-gradient(135deg, #B28A3D 50%, transparent 50%); background-position: calc(100% - 21px) calc(50% - 1px), calc(100% - 16px) calc(50% - 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* El contenedor del desplegable lleva su propio chevron de la fuente `eicons` en un `::before`. En esta página viene con el contenido vacío, pero sigue ocupando sitio a la derecha del campo: se retira para que no empuje nada. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-select-wrapper::before { display: none; } /* El reCAPTCHA se queda pegado al campo anterior y al botón. */ body.page-id-21980 .frmopa .elementor-field-type-recaptcha { margin: 6px 0 2px; } /* ========================================================================== 5 · CAJA DEL TOTAL `amount` es de solo lectura: lo calcula el script de la página a partir de la cantidad de tickets. Siendo la cifra que el devoto va a pagar, era el dato más importante del formulario y se veía igual que un campo cualquiera. Se le da la forma de la caja «Total de la donación» de la tarjeta de gracias: fondo blanco, borde crema y la cifra grande en vino. ========================================================================== */ /* Los rellenos van en longhand: Elementor pone `padding-left` y `padding-right` por su cuenta en todos los grupos, para abrir el hueco entre columnas, y se comerían los lados de un `padding` abreviado. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group.elementor-field-group-amount { position: relative; margin-top: 10px; padding-top: 16px; padding-right: 18px; padding-bottom: 14px; padding-left: 18px; background: #FFFFFF; border: 1px solid #EADFC9; border-radius: 10px; } /* La etiqueta pasa a ser el rótulo pequeño de la caja, como en la tarjeta. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount > .elementor-field-label { margin-bottom: 2px; color: #B28A3D; font-size: 13px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } /* El campo deja de parecer un campo: dentro de la caja es la cifra. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount .elementor-field.elementor-field-textual { padding: 0 0 0 26px; background: transparent; border: 0; border-radius: 0; color: #9E002E; font-family: "Crimson Text", Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; line-height: 1.25; /* El campo traía 40 px de alto contra 37,5 px de interlineado. Esos 2,5 px de más empujaban la cifra hacia arriba dentro de su caja y dejaban la «Q» de abajo desalineada con ella. Con la altura automática la caja del campo mide exactamente su línea, y las dos cosas se apoyan en el mismo borde inferior. */ height: auto; min-height: 0; } body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount .elementor-field.elementor-field-textual:focus { background: transparent; border: 0; box-shadow: none; } /* Mientras no hay tickets elegidos el campo está vacío y enseña su texto de sugerencia, «Monto». A 30 px y en vino gritaría más que la propia cifra. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount .elementor-field-textual::placeholder { color: #9D8762; font-size: 19px; font-weight: 400; } /* El sitio YA imprime una «Q» delante de este campo. Es una regla global, sin página ni formulario que la acote, que vive en el CSS adicional del Personalizador: `.elementor-field-group-amount:before`, en Cormorant de 16 px y color #9D8762. Con la cifra a 16 px pasaba desapercibida; junto a una de 30 px se quedaba pequeña y descolgada abajo a la izquierda. No se añade una segunda «Q»: se reescala la que ya está, y solo en esta página, para no tocar los demás formularios del sitio que dependen de esa misma regla. */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount::before { bottom: 14px; left: 18px; color: #9E002E; font-family: "Crimson Text", Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; line-height: 1.25; } /* Sin cantidad elegida el campo está vacío y enseña su texto de sugerencia, «Monto». Una «Q» de 30 px al lado de esa palabra se lee como un error. `:placeholder-shown` es exactamente «el campo está vacío». */ body.page-id-21980 .elementor-widget-form.frmopa .elementor-field-group-amount:has(.elementor-field-textual:placeholder-shown)::before { opacity: 0; } /* Los controles de incremento del campo numérico son pseudoelementos del navegador. Aquí sobran dos veces: el campo es de solo lectura y además desplazarían la cifra. */ body.page-id-21980 .frmopa .elementor-field-group-amount input[type="number"]::-webkit-inner-spin-button, body.page-id-21980 .frmopa .elementor-field-group-amount input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body.page-id-21980 .frmopa .elementor-field-group-amount input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* ========================================================================== 6 · BOTÓN DE ENVÍO El color, el radio y el relleno son ajustes del widget y se dejan como están. Aquí solo va el relieve y el movimiento, que el widget no expone. ========================================================================== */ body.page-id-21980 .frmopa .e-form__buttons { margin-top: 18px; } body.page-id-21980 .elementor-widget-form.frmopa .elementor-button { box-shadow: 0 6px 18px rgba(122, 23, 50, 0.22); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } body.page-id-21980 .elementor-widget-form.frmopa .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(122, 23, 50, 0.26); } /* ========================================================================== 6 bis · BOTÓN DE LA MÚSICA El reproductor vive en el widget HTML, con su `