/**
 * cvcarta.css — la banda de captación. Contrato de diseño §9 (tema 4.83.0).
 *
 * ⚠⚠ Vivía en un <style> en línea hasta la 1.1.1, y en los artículos `wpautop`
 * le metía <p> DENTRO: el navegador tira la hoja desde la primera regla mala.
 * Encolado no le pasa. Misma razón que `cvcarta.js`.
 *
 * ⚠ Los campos van con FONDO BLANCO y texto de tinta, nunca traslúcidos. Es una
 * regla heredada del tema (v4.80.0) y tiene motivo: un input semitransparente
 * sobre el verde deja el texto que se escribe por debajo del contraste mínimo,
 * y esto lo rellenan personas de 50 a 65 en un móvil, a menudo a pleno sol.
 *
 * Todo sale de tokens `--cv-*`; los literales son solo respaldo.
 */

/* ⚠⚠ El tema NO declara `box-sizing: border-box` global — solo en tres reglas
   sueltas. Sin esto, un campo con `width:100%` + `padding:0 16px` + `border:2px`
   mide 36 px MÁS que su contenedor y la banda se sale por la derecha en móvil.
   Visto en un móvil el 2026-09-04, con el formulario recortado. */
.cvcarta, .cvcarta *, .cvcarta *::before, .cvcarta *::after { box-sizing: border-box; }

.cvcarta {
	max-width: 100%;
	overflow-wrap: break-word;
	background: var( --cv-teal-900, #10423D );
	color: #fff;
	border-radius: var( --cv-radius-lg, 20px );
	padding: 48px 40px;
	margin: 64px 0 0;
	box-shadow: var( --cv-shadow-lg, 0 24px 48px -20px rgba( 30, 42, 45, .4 ) );
}

.cvcarta__titulo {
	font-size: var( --wp--preset--font-size--3xl, 34px );
	line-height: 1.12;
	letter-spacing: -.025em;
	font-weight: 800;
	color: #fff;
	margin: 0 0 12px;
	text-wrap: balance;
	max-width: 20ch;
}
.cvcarta__texto {
	font-size: var( --wp--preset--font-size--base, 19px );
	line-height: 1.55;
	color: #DCEFED;
	margin: 0 0 32px;
	max-width: 46ch;
}

/* ── Las dos portadas ────────────────────────────────────────────────────────
 * El texto promete «dos guías completas en PDF» y hasta la 1.5.0 no se veía
 * ninguna. Van pequeñas y quietas: esto es un formulario, no un escaparate — si
 * pesaran más que el campo del correo, competirían con la acción en vez de
 * justificarla.
 * ⚠ `height` fija y `width:auto`: las dos portadas son A4 pero no salen con el
 * mismo ancho exacto del rasterizador (240×340 y 240×339), y cuadrarlas por
 * altura las alinea por el pie, que es como se apoyan dos folios de verdad. */
.cvcarta__portadas {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	margin: 0 0 32px;
}
.cvcarta__portadas img {
	display: block;
	height: 124px;
	width: auto;
	border-radius: 3px;
	/* Sobre el petróleo, un borde claro al 18 % separa la portada del fondo sin
	   dibujar una caja: las dos portadas ya son oscuras por arriba. */
	box-shadow: 0 6px 18px -6px rgba( 0, 0, 0, .55 ), 0 0 0 1px rgba( 242, 237, 230, .18 );
}
@media ( max-width: 480px ) {
	.cvcarta__portadas img { height: 104px; }
}

.cvcarta__form { max-width: 32rem; }

/* ── Escritorio: dos columnas ────────────────────────────────────────────────
 * La banda es a todo el ancho, pero sus tres piezas estaban capadas (título
 * 20ch, texto 46ch, formulario 32rem) y apiladas a la izquierda: en un monitor
 * todo se amontonaba en un lado y sobraba media banda vacía. En dos columnas
 * —promesa a la izquierda, formulario a la derecha— la banda ocupa lo que mide
 * y el formulario sube a la altura del titular, que es donde se mira.
 *
 * ⚠ `:has()` no es un adorno: es la condición. El pop-up usa el MISMO
 * componente con `titulo=""` y `texto=""`, y ahí dos columnas dejarían la
 * izquierda vacía y el formulario descolgado a la derecha. Sin título no hay
 * promesa que enfrentar, así que se queda en una columna. En un navegador que
 * no entienda `:has()` la regla entera se descarta y todo sigue como estaba,
 * que es exactamente el comportamiento que se quiere de un respaldo.
 *
 * ⚠ 900px es el salto del sistema (móvil → 600 → 900), y 48px es el gutter de
 * esa parada. Nada de números inventados.
 */
@media ( min-width: 900px ) {
	.cvcarta:has( .cvcarta__promesa ) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
		align-items: start;
	}
	.cvcarta:has( .cvcarta__promesa ) .cvcarta__texto { margin-bottom: 0; }
	/* ⚠ Con portadas, el que cierra la columna es el bloque de portadas, no el
	   texto: el margen se devuelve al texto y se le quita al último elemento. */
	.cvcarta:has( .cvcarta__portadas ) .cvcarta__texto { margin-bottom: 24px; }
	.cvcarta__portadas { margin-bottom: 0; }
	.cvcarta:has( .cvcarta__promesa ) .cvcarta__form { max-width: none; }
}
.cvcarta__campo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.cvcarta__campo label {
	font-size: var( --wp--preset--font-size--sm, 16px );
	font-weight: 600;
	color: #DCEFED;
}
.cvcarta__campo input {
	font-family: inherit;
	font-size: var( --wp--preset--font-size--base, 19px );
	line-height: 1.3;
	min-height: 52px;
	padding: 14px 16px;
	width: 100%;
	color: var( --cv-ink, #1E2A2D );
	background: #fff;
	border: 2px solid transparent;
	border-radius: var( --cv-radius-md, 12px );
	transition: border-color .15s var( --cv-ease, ease );
}
.cvcarta__campo input::placeholder { color: var( --cv-muted, #5C6A6E ); }
.cvcarta__campo input:hover { border-color: var( --cv-teal-300, #8CC5BF ); }
.cvcarta__campo input:focus-visible {
	outline: 3px solid var( --cv-clay-300, #DEA282 );
	outline-offset: 2px;
	border-color: transparent;
}
.cvcarta__opt { font-weight: 400; color: #BADEDA; }

.cvcarta__consent {
	font-size: var( --wp--preset--font-size--sm, 16px );
	line-height: 1.5;
	color: #DCEFED;
	margin: 0 0 24px;
}
.cvcarta__consent label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.cvcarta__consent input[type="checkbox"] {
	width: 24px; height: 24px; margin: 1px 0 0;
	accent-color: var( --cv-clay-600, #A8502B );
}
/* Sobre fondo de color, el color solo no distingue un enlace: va subrayado. */
.cvcarta__consent a,
.cvcarta__letra a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.cvcarta__enviar { margin: 0; }
.cvcarta__boton {
	font-family: inherit;
	font-size: var( --wp--preset--font-size--base, 19px );
	font-weight: 700;
	letter-spacing: -.01em;
	min-height: 56px;
	padding: 16px 32px;
	width: 100%;
	border: 0;
	border-radius: var( --cv-radius-pill, 50px );
	background: var( --cv-clay-600, #A8502B );
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 0 #71321A;
	transition: transform .12s var( --cv-ease, ease ), box-shadow .12s var( --cv-ease, ease ), background .15s;
}
.cvcarta__boton:hover:not( [disabled] ) {
	background: var( --cv-clay-700, #8C4121 );
	transform: translateY( -2px );
	box-shadow: 0 6px 0 #71321A;
}
.cvcarta__boton:active:not( [disabled] ) { transform: translateY( 2px ); box-shadow: 0 2px 0 #71321A; }
.cvcarta__boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cvcarta__boton[disabled] { opacity: .65; cursor: progress; transform: none; }
/* ⚠⚠ `min()` y no `15rem` a secas. La media query mira el VIEWPORT, pero el
   ancho que manda es el del CONTENEDOR: este mismo formulario vive en la barra
   del artículo (340px de columna, 196px útiles dentro de la banda), y ahí un
   botón de 240px se salía **44px** por la derecha —medido en producción a
   1440px el 2026-09-07—. El mínimo cómodo se conserva donde la banda es ancha
   —la landing de `/guias/`— y se rinde al hueco donde no cabe. */
@media ( min-width: 600px ) { .cvcarta__boton { width: auto; min-width: min( 15rem, 100% ); max-width: 100%; } }

.cvcarta__letra {
	font-size: var( --wp--preset--font-size--sm, 16px );
	line-height: 1.5;
	color: #BADEDA;
	margin: 16px 0 0;
	max-width: 44ch;
}

.cvcarta__aviso:empty { display: none; }
.cvcarta__aviso {
	font-size: var( --wp--preset--font-size--sm, 16px );
	font-weight: 600;
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var( --cv-radius-md, 12px );
}
.cvcarta__aviso.is-bien { background: rgba( 200, 230, 204, .16 ); color: #C8E6CC; }
.cvcarta__aviso.is-mal  { background: rgba( 240, 205, 182, .16 ); color: #F0CDB6; }

/* Trampa de miel: fuera de pantalla, NO `display:none` — algunos robots lo detectan. */
.cvcarta__miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media ( max-width: 600px ) {
	.cvcarta { padding: 32px 24px; border-radius: var( --cv-radius-md, 12px ); margin-top: 48px; }
	.cvcarta__titulo { font-size: var( --wp--preset--font-size--2xl, 26px ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.cvcarta__campo input, .cvcarta__boton { transition: none; }
	.cvcarta__boton:hover, .cvcarta__boton:active { transform: none; }
}