/**
* Estilos del formulario de boletín (Gravity Forms, form id 1) — footer.
* Alcance: .gf-newsletter-embargo (cssClass del formulario) para no
* afectar a otros formularios de Gravity Forms del sitio.
*/
/* Red de seguridad: si alguien vuelve a guardar la página del footer desde
el editor de Divi, el shortcode puede revertir a title="true" y sacar
este título por defecto de Gravity Forms. Lo ocultamos también por CSS
para que nunca se muestre, pase lo que pase con el shortcode. */
#gform_wrapper_1 .gform_title {
display: none !important;
}
/**
* Estructura real que genera Gravity Forms:
*
*
* Queremos: [email][Subscribe] siempre en la misma fila, y debajo el
* checkbox de privacidad a ancho completo. Como el checkbox vive dentro
* de .gform_fields (junto al email) y el botón vive fuera, en
* .gform_footer, usamos display:contents en los contenedores intermedios
* para "aplanarlos" y poder colocar campo, botón y checkbox con CSS Grid
* en áreas fijas (a diferencia de flex-wrap, un grid con áreas nombradas
* no reordena el botón a una fila nueva aunque el hueco disponible sea
* estrecho — sólo se encoge el campo de email).
*/
/**
* IMPORTANTE — cascada de Gravity Forms: sus 4 hojas de estilo (reset,
* foundation, framework, orbital) a veces se cargan DESPUÉS de esta hoja
* en el (ocurre cuando el shortcode sólo vive en la plantilla de
* footer, como aquí — GF no lo detecta a tiempo para encolar su CSS en
* el sitio habitual del , así que aterriza más tarde). Cuando eso
* pasa, sus reglas ganan cualquier propiedad que no lleve !important
* (p. ej. su .gform_fields{display:grid} de foundation.css pisaría
* nuestro display:contents). Por eso aquí TODA propiedad de estructura
* (display, grid-area, grid-template-*, min-width...) lleva !important,
* no sólo las visuales — a diferencia del resto de reglas de este
* archivo, donde basta con marcar las visuales.
*/
.gf-newsletter-embargo {
max-width: 540px;
width: 100%;
box-sizing: border-box;
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) auto !important;
grid-template-areas: "field button" "consent consent" !important;
column-gap: 8px !important;
row-gap: 20px !important;
align-items: stretch !important;
}
.gf-newsletter-embargo .gform-body,
.gf-newsletter-embargo .gform_fields {
display: contents !important;
}
.gf-newsletter-embargo .gfield {
margin: 0 !important;
}
/* Fila 1: campo de email (píldora blanca) + botón (píldora oscura) */
.gf-newsletter-embargo .gfield--type-email {
grid-area: field !important;
min-width: 0 !important; /* permite que el input se encoja en vez de desbordar */
height: 50px;
background-color: #ffffff !important;
border-radius: 30px !important;
overflow: hidden;
}
.gf-newsletter-embargo .gform_footer {
grid-area: button !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: 50px;
}
/* Sólo en pantallas realmente pequeñas dejamos que el botón baje debajo
del campo (a propósito, no como efecto colateral de un flex-wrap). */
@media ( max-width: 420px ) {
.gf-newsletter-embargo {
grid-template-columns: 1fr !important;
grid-template-areas: "field" "button" "consent" !important;
}
}
.gf-newsletter-embargo .ginput_container {
margin-top: 0 !important;
height: 100%;
}
.gf-newsletter-embargo input[type="email"] {
width: 100%;
height: 100%;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 18px 22px !important;
font-size: 15px !important;
color: #424242 !important;
box-shadow: none !important;
box-sizing: border-box;
}
.gf-newsletter-embargo input[type="email"]::placeholder {
color: #888078 !important;
opacity: 1 !important;
}
/* Quita el borde/anillo verde que Gravity Forms pinta al enfocar el campo. */
.gf-newsletter-embargo input[type="email"]:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.gf-newsletter-embargo .gform_button {
background-color: #424242 !important;
color: #ffffff !important;
border: none !important;
border-radius: 40px !important;
padding: 15px 30px !important;
height: 100%;
font-size: 15px !important;
font-weight: 600 !important;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.2s ease;
}
.gf-newsletter-embargo .gform_button:hover {
opacity: 0.85 !important;
}
/* Fila 2: aviso de privacidad, a ancho completo debajo de la píldora.
Este campo se renderiza como