/* bellamar/cta-formulario — cierre con foto, titular y formulario. */

.bellamar-cta {
	position: relative;
	background-color: var(--wp--preset--color--navy);
	background-position: center;
	background-size: cover;
	color: #fff;
	isolation: isolate;
}

/* El velo: sin él, un texto blanco sobre una foto clara deja de leerse. El
   degradado carga más el lado del texto y deja respirar la foto al otro. */
.bellamar-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 100deg, rgba( 44, 59, 90, 0.92 ) 0%, rgba( 44, 59, 90, 0.82 ) 45%, rgba( 56, 75, 113, 0.62 ) 100% );
}

.bellamar-cta.is-overlay-azul-suave::before {
	background: linear-gradient( 100deg, rgba( 44, 59, 90, 0.78 ) 0%, rgba( 44, 59, 90, 0.55 ) 60%, rgba( 56, 75, 113, 0.35 ) 100% );
}

.bellamar-cta.is-overlay-sin-foto,
.bellamar-cta.is-sin-imagen {
	background-image: none !important;
}

.bellamar-cta.is-overlay-sin-foto::before,
.bellamar-cta.is-sin-imagen::before {
	background: linear-gradient( 100deg, #2c3b5a 0%, #384b71 55%, #4a5f8d 100% );
}

/* Variante clara: la de la página de contacto, donde la maqueta pone el
   formulario sobre blanco y no sobre una foto. */
.bellamar-cta.is-overlay-claro {
	background-color: var( --wp--preset--color--bg-soft );
	background-image: none !important;
	color: var( --wp--preset--color--text );
}

.bellamar-cta.is-overlay-claro::before {
	background: none;
}

.bellamar-cta.is-overlay-claro .bellamar-cta__titulo,
.bellamar-cta.is-overlay-claro .bellamar-cta__cuerpo,
.bellamar-cta.is-overlay-claro .bellamar-form__campo label,
.bellamar-cta.is-overlay-claro .bellamar-form__consent,
.bellamar-cta.is-overlay-claro .bellamar-form__nota {
	color: var( --wp--preset--color--text );
}

.bellamar-cta.is-overlay-claro .bellamar-cta__titulo em {
	color: var( --wp--preset--color--primary );
}

/* Sobre blanco el campo necesita un borde: sin él no se ve dónde escribir. */
.bellamar-cta.is-overlay-claro .bellamar-form__campo input,
.bellamar-cta.is-overlay-claro .bellamar-form__campo textarea {
	border-color: var( --wp--preset--color--border );
	background: #fff;
}

.bellamar-cta.is-overlay-claro .bellamar-form__consent a {
	color: var( --wp--preset--color--primary-fuerte );
}

/* La maqueta no parte esta sección en dos columnas: apila el titular (553 px)
   y debajo el formulario (656 px), los dos centrados en la página. */
.bellamar-cta__inner {
	max-width: var( --wp--style--global--wide-size, 1104px );
	margin-inline: auto;
	padding: clamp( 3rem, 6vw, 4.375rem ) var( --wp--preset--spacing--40 );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.bellamar-cta__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 34.5rem;
	text-align: center;
}

.bellamar-cta__titulo {
	margin: 0;
	color: #fff;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--xxxl );
	line-height: 1.1;
}

/* La segunda línea del titular va en cursiva y en azulón claro, como en la
   maqueta. Se escribe con <em> desde el editor. */
.bellamar-cta__titulo em {
	color: #b9c8ff;
	font-style: italic;
}

.bellamar-cta__cuerpo {
	margin: 0;
	color: var( --wp--preset--color--text-light );
	font-size: var( --wp--preset--font-size--md );
	line-height: 1.5;
}

.bellamar-cta__botones {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
}

/* Botones — comparten forma con los del tema para no inventar una tercera. */
.bellamar-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 2rem;
	border-radius: 8px;
	background: var( --wp--preset--color--primary-fuerte );
	color: #fff;
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bellamar-boton:hover,
.bellamar-boton:focus-visible {
	background: var( --wp--preset--color--primary-hover );
	color: #fff;
}

.bellamar-boton--whatsapp {
	background: var( --wp--preset--color--whatsapp );
	color: #10351d;
}

.bellamar-boton--whatsapp:hover,
.bellamar-boton--whatsapp:focus-visible {
	background: #1fbe5b;
	color: #10351d;
}

.bellamar-boton--claro {
	background: #fff;
	color: var( --wp--preset--color--navy );
}

.bellamar-boton--claro:hover,
.bellamar-boton--claro:focus-visible {
	background: var( --wp--preset--color--bg-soft );
	color: var( --wp--preset--color--navy );
}

/* En la maqueta «Enviar» es azul, no salmón: el salmón se reserva para el CTA
   de la cabecera y para «¿Hablamos?». Hereda el azul y el blanco de
   `.bellamar-boton`. */
.bellamar-boton--enviar {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--md );
}

/* Formulario. */
.bellamar-cta__formulario {
	width: 100%;
	max-width: 41rem;
}

.bellamar-form {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
}

/* Consentimientos a la izquierda, «Enviar» a la derecha y los dos apoyados en
   la misma línea de base, como en la maqueta. */
.bellamar-form__pie {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.bellamar-form__consentimientos {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1 1 20rem;
}

.bellamar-boton--enviar {
	min-width: 11.8rem;
	min-height: 3.5rem;
}

.bellamar-form__fila {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
}

@media ( max-width: 600px ) {
	.bellamar-form__fila {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.bellamar-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.bellamar-form__campo label {
	color: #fff;
	font-size: var( --wp--preset--font-size--sm );
}

.bellamar-form__campo input,
.bellamar-form__campo textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: var( --wp--preset--color--navy );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--md );
}

.bellamar-form__campo textarea {
	min-height: 6rem;
	resize: vertical;
}

.bellamar-form__campo input:focus-visible,
.bellamar-form__campo textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* Un campo que no pasó la validación se marca también con color, no sólo con
   aria-invalid: quien no usa lector de pantalla también tiene que verlo. */
.bellamar-form__campo input[ aria-invalid="true" ],
.bellamar-form__campo textarea[ aria-invalid="true" ] {
	border-color: var( --wp--preset--color--error );
	box-shadow: 0 0 0 2px rgba( 192, 57, 43, 0.35 );
}

.bellamar-form__nota {
	margin: -0.25rem 0 0;
	color: var( --wp--preset--color--text-light );
	font-size: var( --wp--preset--font-size--xs );
}

.bellamar-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: #fff;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.5;
}

.bellamar-form__consent input {
	margin-top: 0.25rem;
	flex-shrink: 0;
	accent-color: var( --wp--preset--color--accent );
}

.bellamar-form__consent a {
	color: #fff;
	text-decoration: underline;
}

/* Fuera de la vista pero presente para el robot que la rellena. `display:none`
   no vale: algunos robots saltan justo lo que está oculto así. */
.bellamar-form__trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Avisos de resultado. */
.bellamar-aviso {
	margin-bottom: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--30 );
	border-radius: 8px;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.5;
}

.bellamar-aviso--ok {
	background: var( --wp--preset--color--success );
	color: #fff;
}

.bellamar-aviso--error {
	background: var( --wp--preset--color--error );
	color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   La franja de Contacto

   El lienzo dibuja dos cierres distintos. El de siempre pone titular y texto
   sobre una foto, con el formulario en una columna estrecha al lado. El de
   Contacto no: es sólo el formulario, sobre una franja clara y a todo el ancho
   del contenido, con los cuatro campos cortos en una sola fila.

   Es la misma marca en los dos: cambia la disposición, no el formulario.
   ────────────────────────────────────────────────────────────────────────── */
.bellamar-cta.is-franja .bellamar-cta__inner {
	/* 120 px arriba y abajo, como el resto de secciones de la página: la franja
	   es una sección más, no un cierre apretado. */
	padding-block: clamp( 3rem, 8.5vw, 7.5rem );
	/* El contenido tiene que caer en la misma vertical que el titular de arriba.
	   Con sólo el ancho máximo se quedaba 24 px adentro, porque el relleno
	   lateral come del propio ancho. */
	max-width: calc( var( --wp--style--global--wide-size, 1104px ) + 2 * var( --wp--preset--spacing--40 ) );
	align-items: stretch;
	gap: 0;
}

.bellamar-cta.is-franja .bellamar-cta__formulario {
	max-width: none;
}

/* Las dos filas del marcado se disuelven con `display: contents` para que sus
   cuatro campos caigan en la misma rejilla. Así el mismo marcado sirve a las
   dos disposiciones y no hay que escribir el formulario dos veces. */
.bellamar-cta.is-franja .bellamar-form {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	column-gap: 1.5rem;
	row-gap: 1.5rem;
}

.bellamar-cta.is-franja .bellamar-form__fila {
	display: contents;
}

/* Lo que no es un campo corto ocupa la fila entera. */
.bellamar-cta.is-franja .bellamar-form > .bellamar-form__campo,
.bellamar-cta.is-franja .bellamar-form__nota,
.bellamar-cta.is-franja .bellamar-form__pie {
	grid-column: 1 / -1;
}

/* El mensaje respira un poco más que la fila de arriba: 32 px en el lienzo. */
.bellamar-cta.is-franja .bellamar-form > .bellamar-form__campo {
	margin-top: 0.5rem;
}

.bellamar-cta.is-franja .bellamar-form__campo label {
	font-size: var( --wp--preset--font-size--xs );
}

.bellamar-cta.is-franja .bellamar-form__campo textarea {
	/* `rows="4"` pesa más que un mínimo, así que aquí se fija el alto del
	   lienzo y se deja que la persona lo estire si escribe mucho. */
	height: 5.5rem;
	min-height: 5.5rem;
}

/* Casillas de 24 px, cuadradas, como en el lienzo. De paso son un blanco
   razonable para un dedo: las de 13 px que pone el navegador no lo son. */
.bellamar-cta.is-franja .bellamar-form__consent input {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0;
	border-radius: 0;
}

.bellamar-cta.is-franja .bellamar-form__nota {
	margin: 0;
}

/* Los consentimientos arrancan arriba, a la altura del botón. */
.bellamar-cta.is-franja .bellamar-form__pie {
	align-items: flex-start;
}

/* Aquí «Enviar» es la única acción de la franja y el lienzo la pinta en salmón,
   no en azul como en el cierre con foto —allí el salmón sobre la foto oscura no
   se leería—. */
.bellamar-cta.is-franja .bellamar-boton--enviar {
	width: 13rem;
	min-width: 0;
	min-height: 2.5rem;
	padding-block: 0.5rem;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--deep );
}

.bellamar-cta.is-franja .bellamar-boton--enviar:hover,
.bellamar-cta.is-franja .bellamar-boton--enviar:focus-visible {
	background: var( --wp--preset--color--accent-fuerte, #d9705a );
	color: var( --wp--preset--color--deep );
}

/* En pantallas estrechas los cuatro campos no caben en fila: primero de dos en
   dos y luego uno debajo de otro. */
@media ( max-width: 900px ) {
	.bellamar-cta.is-franja .bellamar-form {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.bellamar-cta.is-franja .bellamar-form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.bellamar-cta.is-franja .bellamar-boton--enviar {
		width: 100%;
	}
}