/* ==========================================================================
   Campañas «Intenciones Fieles Difuntos 2026» y
             «Peticiones Cristo Negro de Esquipulas 2026»
   --------------------------------------------------------------------------
   Páginas: 22342 / 22345  ·  22343 / 22344

   Aquí vive SOLO lo que ningún ajuste de Elementor alcanza. Cada bloque lleva
   encima el motivo por el que no cupo en un ajuste. Todo lo demás (colores,
   tipografías, rellenos, huecos, animaciones) está en los ajustes de los
   widgets, para que el cliente pueda editarlo desde el constructor.

   SOBRE LA ESPECIFICIDAD
   ----------------------
   Las reglas de la tarjeta de donación llevan delante
   `body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper`, y no
   es adorno: Elementor emite el hueco entre campos (`column_gap`) como relleno
   sobre un selector de tres clases, y gana a cualquier cosa más corta. Medido
   en la página publicada el 2026-10-16: con `body .ld26-form
   .elementor-field-group-amount` el relleno seguía siendo el de Elementor
   (2,5 px), no los 22 px de aquí.

   ÍNDICE DE CLASES
   ----------------
   .ld26-form               El formulario de las dos campañas
   .ld26-donacion-cabecera  Cabecera del bloque de donación
   .ld26-opcional           Etiqueta «Opcional»
   .ld26-donacion-titulo    «¡Apoye las obras de evangelización…!»
   .ld26-nota-mensual       Aviso de que lo mensual se completa en Apadrine
   ========================================================================== */

/* El relleno lateral de la tarjeta de donación se usa en dos sitios —el de los
   grupos de campo y la posición del prefijo «Q.»— y tienen que moverse juntos.
   Por eso es un token y no un número escrito dos veces. */
.ld26-form {
    --ld26-relleno-tarjeta: 22px;

    /* Ancho del campo «Otro monto». Lo consumen tres reglas —el ancho del
       campo, la posición del prefijo «Q.» y el centrado— y tienen que moverse
       juntas. */
    --ld26-ancho-monto: 320px;
}

/* El script oculta y muestra piezas de la donación con el atributo `hidden`.
   No basta: Elementor pinta cada grupo de campo con `display: flex` o `block`
   desde su propia hoja, y eso le gana al `display: none` que el navegador
   asocia a `hidden`. Sin esta regla el script hace su trabajo y no se ve nada.
   Comprobado en la página publicada el 2026-10-16. */
body .ld26-form .elementor-field-group[hidden] {
    display: none;
}

/* Elementor no expone la opacidad del texto de sugerencia: es un
   pseudoelemento. Sin esto, Chrome lo pinta al 54 % y sobre el fondo #EDE8E0
   de los campos no llega al contraste mínimo. */
.ld26-form input::placeholder,
.ld26-form textarea::placeholder {
    opacity: 1;
}

/* Ni «no redimensionable» ni la altura mínima del área de texto son ajustes
   del widget Formulario. La altura se fija aquí para que el campo invite a
   escribir más de una línea. */
.ld26-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Los controles de incremento del campo numérico son pseudoelementos del
   navegador. Se quitan porque el monto se escribe, no se pulsa, y porque
   además desplazan el prefijo «Q.» de más abajo. */
.ld26-form input[type="number"]::-webkit-inner-spin-button,
.ld26-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ld26-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --------------------------------------------------------------------------
   EL CAMPO «OTRO MONTO»

   Dos cosas que no alcanza ningún ajuste del widget. Los ajustes de campo del
   formulario valen para TODOS los campos a la vez, y aquí hace falta que solo
   este sea distinto.

   1. Angosto y centrado. A lo ancho de la tarjeta parecía un campo de texto
      largo y no un importe.
   2. Que se vea dónde se escribe. El fondo de los campos de este formulario
      es el mismo crema de la tarjeta, así que el campo desaparecía dentro de
      ella: solo se veía la «Q.» suelta. Va en blanco y con borde, que es como
      la gente reconoce una casilla donde escribir. Quien usa estas páginas no
      siempre ve bien.
   -------------------------------------------------------------------------- */
.ld26-form .elementor-field-group-amount {
    position: relative;
    justify-content: center;
}

/* Estos dos selectores son largos a propósito, y menos de esto no funciona.
   La hoja que Elementor genera para la página (post-22342.css) pinta el fondo
   y el borde de los campos con

     .elementor-22342 .elementor-element.elementor-element-XXXX
     .elementor-field-group .elementor-field:not(.elementor-…)

   que son seis clases. Cualquier selector más corto pierde y el campo se
   queda con el crema y sin borde. Comprobado el 2026-10-16: con cinco clases
   la regla coincidía pero no se aplicaba. */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-amount.elementor-field-type-number .elementor-field.elementor-field-textual {
    /* El grupo de campo es un contenedor flex y Elementor deja el campo
       creciendo, así que un `width` solo no lo encoge: hay que decirle que
       deje de estirarse. Comprobado el 2026-10-16: con `width` a secas el
       campo seguía midiendo los 1101 px del grupo. */
    flex: 0 1 auto;
    width: var(--ld26-ancho-monto);
    max-width: 100%;
    padding: 12px 14px 12px 36px;
    border: 1px solid #B3A48A;
    border-radius: 4px;
    background-color: #FFFFFF;
    font-size: 19px;
}

body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-amount.elementor-field-type-number .elementor-field.elementor-field-textual:focus {
    border-color: #86262E;
    outline: 2px solid rgba(134, 38, 46, 0.25);
    outline-offset: 1px;
}

/* El prefijo de moneda es un pseudoelemento: no existe ningún ajuste de
   Elementor que ponga texto dentro de un campo. Va sobre el grupo, que es
   quien tiene el `position: relative`, así que hay que calcularle el sitio.

   El `max()` cubre los dos estados del campo sin una consulta de medios:
   cuando la tarjeta da de sí, el campo mide lo que diga el token y va
   centrado, y su borde izquierdo cae en `50% - ancho/2`; cuando no cabe, el
   campo se queda al 100 % y su borde izquierdo es el relleno de la tarjeta.
   El mayor de los dos es siempre el correcto. */
.ld26-form .elementor-field-group-amount::before {
    content: "Q.";
    position: absolute;
    left: max(
        calc(var(--ld26-relleno-tarjeta) + 14px),
        calc(50% - var(--ld26-ancho-monto) / 2 + 14px)
    );
    top: 50%;
    transform: translateY(-50%);
    color: #9E002E;
    font-family: "Crimson Text", Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   EL BLOQUE DE DONACIÓN

   El cliente lo quiere separado del formulario, pero tiene que seguir siendo
   el MISMO formulario: es la única forma de que la petición y la donación
   lleguen a HubSpot en un solo envío. Así que la separación es visual.

   Se consigue dando el mismo fondo a los grupos de campo que lo componen:
   Elementor los pinta uno debajo de otro y, con el mismo fondo, se leen como
   una sola tarjeta. El primero abre (margen, relleno y esquinas de arriba) y
   el último cierra. Ningún ajuste del widget permite esto: los ajustes de
   campo son para todos los campos a la vez, no para unos cuantos.

   `nota_mensual` cierra la tarjeta y por eso su grupo está SIEMPRE visible:
   lo que se muestra y se oculta es el párrafo de dentro. Si se ocultara el
   grupo, la tarjeta perdería su borde inferior.
   -------------------------------------------------------------------------- */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-separador_donacion,
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-modalidad_donacion,
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-monto_opcion,
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-amount,
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-nota_mensual {
    background-color: #EDE8E0;
    padding-right: var(--ld26-relleno-tarjeta);
    padding-left: var(--ld26-relleno-tarjeta);

    /* El aire entre piezas tiene que ser relleno, no margen.
       Elementor separa los campos con `margin-bottom` (el `row_gap` del
       widget, 5 px), y un margen no lleva fondo: entre pieza y pieza
       aparecían tres rayas blancas que partían la tarjeta en cuatro.
       Medido el 2026-10-16: tres huecos de 5 px exactos. Pasándolo a
       relleno, el fondo es continuo y la tarjeta se lee como un bloque. */
    margin-bottom: 0;
    padding-bottom: 14px;
}

body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-separador_donacion {
    margin-top: 30px;
    padding-top: 24px;
    padding-bottom: 16px;
    border-radius: 6px 6px 0 0;
}

/* La última pieza cierra la tarjeta: redondea abajo y repone, como margen, el
   aire que el resto perdió, para no quedar pegada al reCAPTCHA. */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-nota_mensual {
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-radius: 0 0 6px 6px;
}

.ld26-donacion-cabecera {
    text-align: center;
}

/* Pastilla «Opcional». Es texto dentro del HTML de un campo, así que ningún
   ajuste del widget la alcanza. */
.ld26-opcional {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 11px;
    border: 1px solid #B3A48A;
    border-radius: 999px;
    color: #9C8A6E;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ld26-donacion-titulo {
    margin: 0 0 6px;
    color: #86262E;
    font-family: "Crimson Pro", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .ld26-donacion-titulo {
        font-size: 21px;
    }
}

/* --------------------------------------------------------------------------
   LAS OPCIONES COMO CUADROS

   Elementor pinta los campos de opción como un radio nativo más su etiqueta,
   y no ofrece ningún ajuste para darles forma de cuadro. Se esconde el radio
   —sin sacarlo del foco del teclado— y se dibuja la etiqueta.
   -------------------------------------------------------------------------- */
/* El `width: 100%` es lo que hace que el centrado se note: sin él el grupo de
   opciones se encoge al ancho de las pastillas y centrarlas dentro de sí
   mismas no mueve nada. Medido el 2026-10-16: 542 px de subgrupo dentro de un
   grupo de 1145 px. */
.ld26-form .elementor-field-subgroup {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.ld26-form .elementor-field-subgroup .elementor-field-option {
    position: relative;
    margin: 0;
}

.ld26-form .elementor-field-subgroup input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* El prefijo largo, otra vez por la hoja que Elementor genera para la página:
   el color de las etiquetas lo pone con cuatro clases (`label_color` del
   widget) y le ganaba a un selector corto. Sin esto, las pastillas sin elegir
   salían en el marrón del cuerpo y no en el granate del borde. */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-subgroup input[type="radio"] + label {
    display: block;
    padding: 10px 22px;
    border: 1px solid #86262E;
    border-radius: 4px;
    background-color: #FBF9F6;
    color: #86262E;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 18px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-subgroup input[type="radio"]:hover + label {
    background-color: #E3DCD1;
}

body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-subgroup input[type="radio"]:checked + label {
    background-color: #86262E;
    color: #FFFFFF;
}

/* El foco del teclado tiene que verse: el radio real es invisible. */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-subgroup input[type="radio"]:focus-visible + label {
    outline: 2px solid #86262E;
    outline-offset: 2px;
}

/* La modalidad va en pastilla redonda, para distinguirla de los montos. */
body .ld26-form.elementor-widget-form .elementor-form-fields-wrapper .elementor-field-group-modalidad_donacion input[type="radio"] + label {
    border-radius: 999px;
    padding-right: 26px;
    padding-left: 26px;
}

@media (prefers-reduced-motion: reduce) {
    .ld26-form .elementor-field-subgroup input[type="radio"] + label {
        transition: none;
    }
}

/* El aviso de la donación mensual se imprime dentro del HTML de un campo, así
   que ningún ajuste del widget lo alcanza: ni su alineación ni sus márgenes.
   Nace oculto y lo muestra el script cuando se elige «mensual». */
.ld26-nota-mensual {
    margin: 0;
    padding: 13px 16px;
    background-color: #FBF9F6;
    color: #79674A;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 17px;
    line-height: 1.5;
    text-align: center;
}

.ld26-nota-mensual[hidden] {
    display: none;
}

.ld26-nota-mensual strong {
    color: #86262E;
    font-weight: 600;
}

/* El texto de sugerencia del teléfono.

   Tres cosas lo tapaban, y hay que deshacer la última aquí:
   1. El plugin telephone-field-for-elementor-forms arma el <input> a mano en
      su render() y nunca imprime el placeholder, aunque Elementor lo tenga
      configurado. Eso se arregla en inc/landings2026-assets.php.
   2. Al llegar el campo sin placeholder, intl-tel-input lo rellenaba con un
      número de ejemplo del país: es su autoPlaceholder en modo «polite», que
      solo escribe cuando el campo venía vacío de placeholder. Al imprimirlo
      nosotros, deja de hacerlo.
   3. Para quitarse ese número de encima, el CSS global (custom-css-js 436
      «Estilo de la pagina», línea 630) hace:
         #form-field-phone::placeholder { opacity: 0 !important; }
      Esa regla es de todo el sitio y no se toca. Se neutraliza solo aquí, con
      un selector más específico, porque esta hoja únicamente se carga en las
      cuatro páginas de estas campañas.

   El 0.7 iguala al del resto de campos de este formulario. */
body #form-field-phone::placeholder {
    opacity: 0.7 !important;
}