/* Newsletter y banda de imagen. Creado 2026-09-17 · v1.2.0 (2026-09-27)
   v1.2.0 (2026-09-27) — Opcion B1 de Angel: la banda de imagen a 2:1 en el movil y
   la tableta. Ver el final.
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).
   Todo prefijado para ganarle al kit de Elementor. */

/* ==========================================================================
   La banda de imagen: un respiro entre bloques de texto. Sin texto encima:
   no es un bloque mas, es aire.

   2026-09-18: mas alta, por decision de Angel. Las fotos son 1920x600 y a
   240 px se quedaban en una rendija; a 380 se ve la foto y sigue siendo una
   banda, no una portada.
   ========================================================================== */
.i27{width:100%;line-height:0;background:#F3EFEA}
.i27 img{
	width:100%;
	height:clamp(220px,26vw,380px);
	object-fit:cover;
	object-position:center 55%;
	display:block;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.w27{
	--w27-naranja:#F57C00;
	--w27-marron:#7A5238;
	--w27-crema:#FFF4E5;
	--w27-tinta:#1B1512;
	background:var(--w27-naranja);
	padding:34px 0 36px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.w27 .w27-dentro{
	max-width:1280px;
	margin:0 auto;
	padding:0 22px;
	box-sizing:border-box;
	display:grid;
	grid-template-columns:300px minmax(0,1fr) 300px;
	gap:34px;
	align-items:start;
}

/* ---------- izquierda ---------- */
.w27 .w27-titulo{
	margin:0;
	font-family:"Oswald",sans-serif;
	font-weight:400;
	font-size:30px;
	line-height:36px;
	color:#fff;
	text-transform:uppercase;
}
.w27 .w27-lema{
	margin:10px 0 0;
	padding-top:12px;
	border-top:1px solid rgba(255,255,255,.45);
	font-size:15px;
	line-height:1.55;
	color:rgba(255,255,255,.92);
}

/* ---------- el formulario ----------
   Una sola linea: nombre, correo y boton. Hoy son tres cajas apiladas y una
   caja gris de aviso legal tan grande como el propio formulario. */
.w27 .w27-campos{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;
	gap:10px;
}
.w27 .w27-campo,
.w27 .w27-campo:focus{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	height:52px;
	box-sizing:border-box;
	padding:0 16px;
	border:2px solid transparent;
	border-radius:10px;
	background:#fff;
	color:var(--w27-tinta);
	font-size:15.5px;
	outline:none;
	box-shadow:none;
}
.w27 .w27-campo::placeholder{color:#9A9087}
.w27 .w27-campo:focus{border-color:var(--w27-marron)}

.w27 .w27-boton,
.w27 .w27-boton:hover,
.w27 .w27-boton:focus,
.w27 .w27-boton:active{
	-webkit-appearance:none !important;
	appearance:none !important;
	height:52px;
	padding:0 26px !important;
	border:0 !important;
	border-radius:10px !important;
	background:var(--w27-tinta) !important;
	color:#fff !important;
	font-family:"Oswald",sans-serif;
	font-size:17px;
	font-weight:500;
	letter-spacing:.06em;
	text-transform:uppercase;
	cursor:pointer;
	outline:none !important;
	box-shadow:none !important;
	transition:background .18s ease,transform .18s ease;
}
.w27 .w27-boton:hover{background:#3A2A20 !important;transform:translateY(-1px)}

/* ---------- la casilla y el aviso ---------- */
.w27 .w27-acepto{
	display:flex;
	align-items:flex-start;
	gap:9px;
	margin-top:14px;
	font-size:13.5px;
	line-height:1.45;
	color:rgba(255,255,255,.95);
	cursor:pointer;
}
.w27 .w27-acepto input{
	-webkit-appearance:none;
	appearance:none;
	flex:none;
	width:17px;height:17px;
	margin:2px 0 0;
	border:2px solid rgba(255,255,255,.85);
	border-radius:4px;
	background:transparent;
	cursor:pointer;
}
.w27 .w27-acepto input:checked{
	background:#fff;
	box-shadow:inset 0 0 0 3px var(--w27-naranja);
}
.w27 .w27-acepto a{color:#fff;text-decoration:underline}

/* El aviso legal completo, pero en una linea fina y no en una caja gris. */
.w27 .w27-legal{
	margin:10px 0 0;
	font-size:12px;
	line-height:1.5;
	color:rgba(255,255,255,.80);
	max-width:72ch;
}
.w27 .w27-legal a{color:#fff;text-decoration:underline}

.w27 .w27-sr{
	position:absolute;width:1px;height:1px;
	padding:0;margin:-1px;overflow:hidden;
	clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- el banner ---------- */
.w27 .w27-banner{display:grid;place-items:start center}
.w27 .w27-banner img{max-width:100%;height:auto;display:block;border-radius:8px}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.w27{padding:28px 0 30px}
	.w27 .w27-dentro{grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:0 18px}
	.w27 .w27-texto{grid-column:1 / -1}
	.w27 .w27-campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
	.w27 .w27-boton{grid-column:1 / -1}
}

/* ---------- movil ---------- */
@media (max-width:640px){
	.w27{padding:24px 0 26px}
	.w27 .w27-dentro{grid-template-columns:1fr;gap:20px;padding:0 16px}
	.w27 .w27-campos{grid-template-columns:1fr;gap:9px}
	.w27 .w27-boton{grid-column:auto}
	.w27 .w27-titulo{font-size:26px;line-height:31px}
	.i27 img{height:200px}
}

/* ---------------------------------------------------------------------------
   v1.2.0 (2026-09-27) — Opcion B1 de Angel: la banda de imagen, 2:1 en el movil
   y la tableta (hasta 1200 px). Antes: 200 px de alto en el movil (1,6:1 a 320
   px) y 220-310 px en la tableta (3,5:1 a 3,9:1, mas recortada que la foto).
   El ordenador, igual.
   --------------------------------------------------------------------------- */
@media (max-width:1200px){
	.i27 img{height:auto;aspect-ratio:2/1}
}