/* Hero de seccion 2027. Creado 2026-09-17 · v1.19.0 (2026-09-29)
   v1.19.0 (2026-09-29) — Foto y texto juntos y centrados al ancho del contenido; la franja sigue de borde a borde. Ver el final.
   v1.18.0 (2026-09-29) — De borde a borde otra vez (sin el recuadro de la 1.17.0) y el texto siempre pegado a la foto. Ver el final.
   v1.16.0 (2026-09-29) — Sin corte: el borde interior de la foto se funde con el fondo. Ver el final.
   v1.15.0 (2026-09-29) — Vuelta a la opcion B (lado a lado, 250 px) con la foto ENTERA: su columna
   toma la forma de la foto. La prueba «como la portada» (1.14.0) recortaba la foto. Ver el final.
   v1.13.0 (2026-09-29) — Mas baja: 250 px en el ordenador, igual que la cabecera de la portada
   (Angel: que se vean los banners sin bajar en un portatil). Ver el final.
   v1.12.0 (2026-09-29) — Tableta y ordenador, opcion B de Angel: foto y texto lado a lado,
   nada encima de la foto. Ver el final.
   v1.11.0 (2026-09-27) — Calendarios en el movil: el texto de la cabecera plegado a
   dos lineas con «Leer mas» y el ancla #calendario. Ver el final.
   v1.10.0 (2026-09-27) — Movil, opcion A2 de Angel (maqueta-movil-fotos-2027.html):
   la foto arriba, sola, en 3:2 y sin nada encima; titulo y lema debajo. Y el
   titulo del movil a su tamano (Estilos lo dejaba a 40 px). Ver el final.
   v1.7.0 (2026-09-24) — Cabeceras homogeneas: dos variantes (con foto / franja
   crema) con el mismo titulo, subtitulo y margenes.
   v1.6.0 (2026-09-23) — Cabecera sencilla (Pagina 2027 sin foto): franja crema baja.
   v1.5.0 (2026-09-23) — El H1 para Google, en pequeño bajo el titulo grande.
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).

   v1.4.0 (2026-09-23) — Que se vea mas la foto (Angel). La franja sube de
   250 a 330 px y el crema solo cubre la columna del titulo: se disuelve en
   la mitad del espacio que antes.
   v1.3.0 (2026-09-23) — Los calendarios, sin foto.
   En Que hacer hoy, Fiestas y Excursiones lo que manda es el calendario: la
   cabecera baja a una franja crema, el titulo a la izquierda y el texto de la
   seccion entero a la derecha, sin plegar.

   v1.2.0 — Fuera las cajas de Elementor que ya no pintan nada.
   Al apartar el hero viejo y la banda de banners vieja quedaban cascarones
   vacios que seguian ocupando alto: una franja de 20 px y un hueco de 400 px
   en mitad de la pagina.
   v1.1.0 — El texto se va al lado que no estorba.
   En las fotos de Angel lo bueno esta a la izquierda (la torre, Es Vedra, la
   playa), asi que el texto va a la derecha y el crema se disuelve por ese
   lado. Para una foto con el motivo a la derecha —Ibiza consciente, la figura
   sentada— la pagina pone el campo Hero_lado a "izquierda" y todo se refleja.

   Mismo lenguaje que el hero de la portada: la foto ocupa toda la franja y se
   disuelve en el crema de la casa, asi que el texto se lee caiga la foto que
   caiga y no hay corte ni caja encima de la imagen.

   Todo va prefijado con .hs27 porque el kit de Elementor (.elementor-kit-99596)
   gana a las reglas de una sola clase.

   v1.8.0 · 2026-09-26 · fuera el bloque que escondía el hero viejo de Elementor
   (Elementor retirado: ya no hay cajas que esconder).
*/

.hs27{
	position:relative;
	width:100%;
	min-height:250px;
	display:flex;
	align-items:center;
	overflow:hidden;
	background:#F2E6D8;
	background-image:var(--hs27-foto);
	background-size:cover;
	background-position:center 45%;
}

/* La foto la pinta el propio .hs27; este bloque solo existe para el lector de
   pantalla y no ocupa. */
.hs27 .hs27-foto{display:none}

.hs27 .hs27-velo{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
}

/* Texto a la derecha: el crema solido esta a la derecha y se va a nada hacia
   la izquierda, que es donde esta la foto buena. */
.hs27--derecha .hs27-velo{
	background:linear-gradient(270deg,
		#F2E6D8 0%,
		#F2E6D8 24%,
		rgba(242,230,216,.92) 34%,
		rgba(242,230,216,.60) 48%,
		rgba(242,230,216,.22) 62%,
		rgba(242,230,216,0) 76%);
}

/* Texto a la izquierda: justo al reves. */
.hs27--izquierda .hs27-velo{
	background:linear-gradient(90deg,
		#F2E6D8 0%,
		#F2E6D8 24%,
		rgba(242,230,216,.92) 34%,
		rgba(242,230,216,.60) 48%,
		rgba(242,230,216,.22) 62%,
		rgba(242,230,216,0) 76%);
}

.hs27 .hs27-dentro{
	position:relative;
	z-index:2;
	width:100%;
	max-width:1280px;
	margin:0 auto;
	padding:30px 24px;
	box-sizing:border-box;
	display:flex;
}

/* La caja de texto: siempre alineada a un lado, y el texto dentro empieza por
   la izquierda, como en el resto de la casa. */
.hs27 .hs27-caja{max-width:46ch}
.hs27--derecha .hs27-dentro{justify-content:flex-end}
.hs27--izquierda .hs27-dentro{justify-content:flex-start}

.hs27 .hs27-titulo{
	margin:0;
	font-family:"Oswald",sans-serif;
	font-weight:500;
	font-size:clamp(30px,3vw,46px);
	line-height:1.04;
	letter-spacing:.005em;
	color:#1B1512;
	text-wrap:balance;
}
.hs27 .hs27-titulo .hs27-l1,
.hs27 .hs27-titulo .hs27-l2{display:block}
.hs27 .hs27-titulo .hs27-l2{color:#F57C00}

.hs27 .hs27-sub{
	margin:12px 0 0;
	font-size:16px;
	line-height:1.55;
	color:#6B5B50;
}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.hs27{min-height:230px}
	.hs27 .hs27-dentro{padding:24px 20px}
	.hs27 .hs27-caja{max-width:40ch}
	.hs27--derecha .hs27-velo{
		background:linear-gradient(270deg,
			#F2E6D8 0%,
			#F2E6D8 30%,
			rgba(242,230,216,.90) 42%,
			rgba(242,230,216,.45) 60%,
			rgba(242,230,216,0) 82%);
	}
	.hs27--izquierda .hs27-velo{
		background:linear-gradient(90deg,
			#F2E6D8 0%,
			#F2E6D8 30%,
			rgba(242,230,216,.90) 42%,
			rgba(242,230,216,.45) 60%,
			rgba(242,230,216,0) 82%);
	}
	.hs27 .hs27-sub{font-size:15.5px}
}

/* ---------- movil: no hay lados, el difuminado va de abajo arriba ---------- */
@media (max-width:640px){
	.hs27{min-height:290px;align-items:flex-end;background-position:center 38%}
	.hs27--derecha .hs27-velo,
	.hs27--izquierda .hs27-velo{
		background:linear-gradient(0deg,
			#F2E6D8 0%,
			#F2E6D8 30%,
			rgba(242,230,216,.90) 46%,
			rgba(242,230,216,.35) 70%,
			rgba(242,230,216,0) 92%);
	}
	.hs27 .hs27-dentro{padding:20px 16px 22px}
	.hs27--derecha .hs27-dentro,
	.hs27--izquierda .hs27-dentro{justify-content:flex-start}
	.hs27 .hs27-caja{max-width:none}
	.hs27 .hs27-titulo{font-size:30px}
	.hs27 .hs27-sub{font-size:15px;margin-top:9px}
}

/* ---------------------------------------------------------------------------
   v1.3.0 — Calendarios: franja baja sin foto, titulo | texto.
   --------------------------------------------------------------------------- */
.hs27.hs27--calendario{
	min-height:0;
	background:#F2E6D8;
	background-image:none;
	border-bottom:1px solid rgba(27,21,18,.08);
}
.hs27--calendario .hs27-dentro{
	padding:28px 24px;
	display:grid;
	grid-template-columns:minmax(240px,340px) 1fr;
	gap:40px;
	align-items:center;
}
.hs27--calendario .hs27-caja{max-width:none}
.hs27--calendario .hs27-titulo{font-size:clamp(28px,2.6vw,40px)}
.hs27--calendario .hs27-sub{font-size:15px;margin-top:8px}
.hs27--calendario .hs27-texto{
	font-size:15px;
	line-height:1.65;
	color:#4A3F38;
	padding-left:40px;
	border-left:2px solid #F57C00;
}
.hs27--calendario .hs27-texto p{margin:0 0 .6em}
.hs27--calendario .hs27-texto p:last-child{margin-bottom:0}
.hs27--calendario .hs27-texto h1,
.hs27--calendario .hs27-texto h2,
.hs27--calendario .hs27-texto h3{display:none}
.hs27--calendario .hs27-texto a{color:#7A5238;text-decoration:underline;text-underline-offset:2px}

@media (max-width:1024px){
	.hs27--calendario .hs27-dentro{grid-template-columns:1fr;gap:14px;padding:22px 20px}
	.hs27--calendario .hs27-texto{padding-left:16px}
}
@media (max-width:640px){
	.hs27.hs27--calendario{min-height:0;align-items:stretch}
	.hs27--calendario .hs27-dentro{padding:18px 16px}
	.hs27--calendario .hs27-titulo{font-size:28px}
	.hs27--calendario .hs27-texto{font-size:14.5px}
}

/* ---------------------------------------------------------------------------
   v1.4.0 — Mas foto.
   --------------------------------------------------------------------------- */
.hs27:not(.hs27--calendario){min-height:330px}
.hs27--derecha .hs27-velo{
	background:linear-gradient(270deg,
		rgba(242,230,216,.94) 0%,
		rgba(242,230,216,.88) 20%,
		rgba(242,230,216,.45) 32%,
		rgba(242,230,216,0) 44%);
}
.hs27--izquierda .hs27-velo{
	background:linear-gradient(90deg,
		rgba(242,230,216,.94) 0%,
		rgba(242,230,216,.88) 20%,
		rgba(242,230,216,.45) 32%,
		rgba(242,230,216,0) 44%);
}
@media (max-width:1024px){
	.hs27:not(.hs27--calendario){min-height:290px}
	.hs27--derecha .hs27-velo{background:linear-gradient(270deg,rgba(242,230,216,.94) 0%,rgba(242,230,216,.85) 28%,rgba(242,230,216,.35) 44%,rgba(242,230,216,0) 58%)}
	.hs27--izquierda .hs27-velo{background:linear-gradient(90deg,rgba(242,230,216,.94) 0%,rgba(242,230,216,.85) 28%,rgba(242,230,216,.35) 44%,rgba(242,230,216,0) 58%)}
}
/* movil: foto arriba despejada y el crema solo bajo el texto */
@media (max-width:640px){
	.hs27:not(.hs27--calendario){min-height:320px}
	.hs27--derecha .hs27-velo,
	.hs27--izquierda .hs27-velo{
		background:linear-gradient(0deg,
			#F2E6D8 0%,
			rgba(242,230,216,.92) 26%,
			rgba(242,230,216,.30) 44%,
			rgba(242,230,216,0) 58%);
	}
}

/* v1.5.0 — la frase para Google (el H1) bajo el titulo grande */
.hs27 .hs27-seo{
	margin:10px 0 0;
	font-family:"Oswald",sans-serif;
	font-weight:500;
	font-size:clamp(15px,1.25vw,19px);
	line-height:1.3;
	letter-spacing:.02em;
	color:#7A5238;
	text-wrap:balance;
}
.hs27 p.hs27-titulo{margin:0}
@media (max-width:640px){.hs27 .hs27-seo{font-size:15px;margin-top:8px}}

/* v1.6.0 — cabecera sencilla: sin foto, franja crema baja, titulo y subtitulo */
.hs27.hs27--sencilla{min-height:0;background:#F2E6D8;background-image:none;border-bottom:1px solid rgba(27,21,18,.08)}
.hs27.hs27--sencilla .hs27-velo{display:none}
.hs27.hs27--sencilla .hs27-dentro{padding:34px 24px;justify-content:flex-start}
.hs27.hs27--sencilla .hs27-caja{max-width:72ch}
.hs27.hs27--sencilla .hs27-titulo{font-size:clamp(28px,2.8vw,42px)}
@media (max-width:640px){.hs27.hs27--sencilla{min-height:0}.hs27.hs27--sencilla .hs27-dentro{padding:22px 16px}}
.s27-atajo{padding:28px 0}

/* v1.7.0 — mismas medidas en todas las cabeceras */
.hs27 .hs27-titulo,
.hs27.hs27--calendario .hs27-titulo{font-family:"Oswald",sans-serif;font-weight:500;font-size:clamp(30px,2.8vw,44px);line-height:1.06;letter-spacing:.005em;color:#1B1512;text-wrap:balance}
.hs27 .hs27-sub,
.hs27.hs27--calendario .hs27-sub{margin:12px 0 0;font-size:16px;line-height:1.55;color:#6B5B50;max-width:60ch}
.hs27 .hs27-dentro,
.hs27.hs27--calendario .hs27-dentro{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.hs27.hs27--calendario{padding:0}
.hs27.hs27--calendario .hs27-dentro{padding-top:34px;padding-bottom:34px}
.hs27.hs27--sin-texto .hs27-dentro{display:block}
.hs27.hs27--sin-texto .hs27-caja{max-width:72ch}
@media (max-width:640px){
	.hs27 .hs27-titulo,.hs27.hs27--calendario .hs27-titulo{font-size:28px}
	.hs27 .hs27-sub,.hs27.hs27--calendario .hs27-sub{font-size:15px;margin-top:8px}
	.hs27 .hs27-dentro,.hs27.hs27--calendario .hs27-dentro{padding-left:16px;padding-right:16px}
	.hs27.hs27--calendario .hs27-dentro{padding-top:20px;padding-bottom:20px}
}

/* ---------------------------------------------------------------------------
   v1.9.0/1.9.1 (2026-09-26) — Esenciales en la cabecera (1.9.1: 4 por línea y más pequeños), junto al título (Angel:
   «como en las fichas, en la cabecera con el título»). Franja sin foto:
   título y lema a la izquierda, los logos a la derecha en tres columnas.
   --------------------------------------------------------------------------- */
.hs27--con-lado .hs27-dentro{grid-template-columns:minmax(260px,1fr) minmax(0,560px);gap:44px;padding-top:22px;padding-bottom:22px}
.hs27-lado .a27{padding:0;margin:0;background:none}
.hs27-lado .a27-dentro{padding:0;max-width:none;margin:0}
.hs27-lado .a27-cabeza{margin:0 0 12px;padding:0;border:0}
.hs27-lado .a27-cabeza::after{display:none}
.hs27-lado .a27-cabeza .wti-titulo{font-size:15px;line-height:1.3;letter-spacing:.1em;margin:0;color:#7A5238}
.hs27-lado .a27-cabeza .wti-titulo::before,
.hs27-lado .a27-cabeza .wti-titulo::after{width:6px;height:6px}
.hs27-lado .a27-cabeza .wti-lema,
.hs27-lado .a27-cabeza .wti-enlace{display:none}
.hs27-lado .a27 .a27-logos{--a27-n:4;justify-content:flex-start;gap:10px}
.hs27-lado .a27 .a27-logos > .a27-tarjeta{border-radius:10px;box-shadow:0 6px 16px -12px rgba(27,21,18,.4)}
.hs27-lado .a27 .a27-logos .a27-foto img{object-fit:contain;padding:4px}
@media (max-width:1024px){
	.hs27--con-lado .hs27-dentro{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
	.hs27-lado .a27 .a27-logos{gap:8px}
	.hs27-lado .a27 .a27-logos > .a27-tarjeta{flex-basis:calc((100% - 3 * 8px) / 4);max-width:calc((100% - 3 * 8px) / 4)}
}

/* ---------------------------------------------------------------------------
   v1.9.2 (2026-09-26) — Fundido oscuro para fotos oscuras (opción del panel,
   Angel: portada de Fiestas). Texto claro sobre un velo casi negro.
   --------------------------------------------------------------------------- */
.hs27--oscuro.hs27--derecha .hs27-velo{background:linear-gradient(270deg,rgba(18,13,11,.92) 0%,rgba(18,13,11,.86) 26%,rgba(18,13,11,.62) 44%,rgba(18,13,11,.25) 62%,rgba(18,13,11,0) 80%)}
.hs27--oscuro.hs27--izquierda .hs27-velo{background:linear-gradient(90deg,rgba(18,13,11,.92) 0%,rgba(18,13,11,.86) 26%,rgba(18,13,11,.62) 44%,rgba(18,13,11,.25) 62%,rgba(18,13,11,0) 80%)}
.hs27--oscuro .hs27-titulo{color:#fff}
.hs27--oscuro .hs27-titulo .hs27-l2{color:#FF9A2E}
.hs27--oscuro .hs27-sub{color:rgba(255,255,255,.86)}
.hs27--oscuro .hs27-seo{color:rgba(255,255,255,.7)}
@media (max-width:1024px){
	.hs27--oscuro.hs27--derecha .hs27-velo{background:linear-gradient(270deg,rgba(18,13,11,.92) 0%,rgba(18,13,11,.84) 34%,rgba(18,13,11,.45) 60%,rgba(18,13,11,0) 84%)}
	.hs27--oscuro.hs27--izquierda .hs27-velo{background:linear-gradient(90deg,rgba(18,13,11,.92) 0%,rgba(18,13,11,.84) 34%,rgba(18,13,11,.45) 60%,rgba(18,13,11,0) 84%)}
}
@media (max-width:640px){
	.hs27--oscuro.hs27--derecha .hs27-velo,
	.hs27--oscuro.hs27--izquierda .hs27-velo{background:linear-gradient(0deg,rgba(18,13,11,.94) 0%,rgba(18,13,11,.86) 34%,rgba(18,13,11,.45) 64%,rgba(18,13,11,0) 92%)}
}

/* ---------------------------------------------------------------------------
   v1.10.0 (2026-09-27) — Movil (hasta 640 px), opcion A2 de Angel.
   Antes: la foto (1920x600, muy alargada) era el fondo de un hueco casi
   cuadrado de 390x320 y el texto iba encima: se veia el 38 % de lo ancho y
   limpia entre el 8 y el 20 % de la foto. Ahora la foto va arriba como imagen
   propia (.hs27-img), en 3:2 y sin nada encima (47 % de lo ancho, entera de
   alto); la parte que se ve la elige el panel («Parte de la foto que se ve»,
   --hs27-x: 12 % / 50 % / 88 %). Titulo y lema debajo, sobre crema; con
   «Fundido oscuro», sobre oscuro. Tableta y ordenador, igual que antes.
   Los calendarios (hs27--calendario) no llevan foto: no cambian.
   --------------------------------------------------------------------------- */
.hs27 .hs27-img{display:none}
@media (max-width:640px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){display:flex;flex-direction:column;align-items:stretch;min-height:0;background-image:none}
	.hs27:not(.hs27--calendario) .hs27-img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:3/2;margin:0;border:0;border-radius:0;object-fit:cover;object-position:var(--hs27-x,50%) 50%;background:#F2EDE6}
	.hs27:not(.hs27--calendario) .hs27-velo{display:none}
	.hs27:not(.hs27--calendario) .hs27-dentro{padding:18px 16px 22px}
	.hs27.hs27--oscuro{background:#120D0B}
	/* El titulo del movil a su tamano. «Estilos → Unificar piezas» escribe
	   .hs27 .hs27-titulo{font-size:var(--h1-s)} (40 px, el del ordenador) y le
	   ganaba a la regla del movil de esta hoja. Con «body» delante gana siempre;
	   si en Estilos se elige un H1 menor de 30 px, manda ese. */
	body .hs27 .hs27-titulo,
	body .hs27.hs27--calendario .hs27-titulo{font-size:min(var(--h1-s,30px),30px);line-height:1.08}
}

/* ---------------------------------------------------------------------------
   v1.11.0 (2026-09-27) — Calendarios (Que hacer hoy, Fiestas, Excursiones).
   Angel: «para el calendario el texto solo me vale para el SEO… los banners
   tienen que verse». En el movil (hasta 767 px) el texto de la cabecera se
   pliega a unas dos lineas con «Leer mas» (el plegado de la casa, .wti-plegado
   de wti-base y wti-plegado-2027-1.3.0.js). El texto entero sigue en el HTML:
   solo se recorta el alto, nada de display:none. En la tableta y el ordenador
   sale entero, como antes.
   El ancla #calendario va justo despues de la cabecera, donde empiezan los
   banners de encima del calendario. Hasta 1200 px la barra fija ya se respeta
   con el scroll-padding de la cabecera (--c27-alto); en el ordenador la
   cabecera compacta mide unos 150 px.
   --------------------------------------------------------------------------- */
.hs27-ancla{display:block;height:0;overflow:hidden}
@media (min-width:1201px){.hs27-ancla{scroll-margin-top:150px}}
.hs27-plegado{--wti-plegado-fondo-rgb:242,230,216}
/* El texto sigue con su letra de siempre: el plegado de la casa trae la suya
   (entradilla a 18 px, parrafos a 16 px) y la de Estilos para los textos largos. */
.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo p{margin:0 0 .6em;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo p:last-child{margin-bottom:0}
.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo b,
.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo strong{font-weight:700;color:inherit}
@media (max-width:767px){
	.hs27.hs27--calendario .hs27-plegado{align-items:flex-start}
	.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo{max-height:3.3em}
	.hs27.hs27--calendario .hs27-plegado.esta-abierto .wti-plegado-cuerpo{max-height:4000px}
	.hs27.hs27--calendario .hs27-plegado:not(.esta-abierto) .wti-plegado-cuerpo::after{height:1.6em}
	.hs27.hs27--calendario .hs27-plegado .wti-plegado-mas{margin-top:8px;font-size:14px}
}
@media (min-width:768px){
	.hs27.hs27--calendario .hs27-plegado{display:block}
	.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo{max-height:none;overflow:visible}
	.hs27.hs27--calendario .hs27-plegado .wti-plegado-cuerpo::after{display:none}
	.hs27.hs27--calendario .hs27-plegado .wti-plegado-mas{display:none !important}
}

/* ---------------------------------------------------------------------------
   v1.12.0 (2026-09-29) — Tableta y ordenador (desde 641 px), opcion B de Angel
   (maqueta «Portadas de seccion · opciones»; Mini-Spec
   docs/specs/2026-09-29_portadas-ordenador-opcion-b.md). Antes: la foto de
   1920x600 era el fondo de una franja de 330 px a todo lo ancho (≈6:1): se
   perdia casi la mitad (en Compras, las cabezas) y el texto iba encima con un
   velo que en las fotos claras no bastaba. Ahora: dos columnas, la foto entera
   de alto y sin nada encima (la misma .hs27-img del movil; la parte que se ve,
   «Parte de la foto que se ve» del panel, --hs27-x) y el texto en su panel
   crema (u oscuro con «Fundido oscuro»). Hero_lado «izquierda» cambia de lado.
   Calendarios y cabecera sencilla, sin cambios. El movil (hasta 640 px), igual.
   --------------------------------------------------------------------------- */
@media (min-width:641px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){
		display:grid;
		grid-template-columns:minmax(0,5fr) minmax(340px,3fr);
		align-items:stretch;
		min-height:clamp(300px,29vw,440px);
		background:#F2E6D8;
		background-image:none;
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla){grid-template-columns:minmax(340px,3fr) minmax(0,5fr)}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-velo{display:none}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		display:block;
		grid-row:1;
		grid-column:1;
		width:100%;
		height:100%;
		min-height:100%;
		max-width:none;
		margin:0;
		border:0;
		border-radius:0;
		object-fit:cover;
		object-position:var(--hs27-x,50%) 50%;
		background:#F2EDE6;
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{grid-column:2}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{
		grid-row:1;
		grid-column:2;
		max-width:none;
		margin:0;
		padding:44px clamp(28px,4.6vw,72px) 44px clamp(28px,3.6vw,56px);
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:flex-start;
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{grid-column:1}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-caja{max-width:34em}
	/* La raya naranja de la casa encima del titulo */
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-caja::before{
		content:"";
		display:block;
		width:44px;
		height:4px;
		margin:0 0 18px;
		border-radius:2px;
		background:#F57C00;
	}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-sub{font-size:17px;line-height:1.6;margin-top:16px}
	.hs27.hs27--oscuro:not(.hs27--calendario):not(.hs27--sencilla){background:#1B1512}
}
/* Tableta: la foto un poco mas estrecha y el texto con menos aire */
@media (min-width:641px) and (max-width:1024px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){
		grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
		min-height:clamp(280px,38vw,360px);
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding:28px 24px}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-sub{font-size:15.5px;margin-top:12px}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-caja::before{margin-bottom:14px}
}

/* ---------------------------------------------------------------------------
   v1.13.0 (2026-09-29) — Mas baja (Angel, viendo Descubre en su portatil de
   1470 px: «es muy alto, tiene que ser mas estrecho para que se vean los
   banners en primera vista; y todas iguales, la portada es mas estrecha y se
   ve bien la foto y el texto»). En el ordenador todas miden 250 px, lo mismo
   que la cabecera de la portada (.h27, wti-hero-2027-1.8.0.css). Para que el
   texto quepa: columna de texto al 40 % y titulo un poco menor. Con los textos
   de las 17 portadas de hoy, la mas larga (Compras) ocupa ≈225 px. El lema no
   pasa de cuatro lineas (el texto entero sigue en el HTML). La tableta, sin alto
   fijo (el texto manda).
   --------------------------------------------------------------------------- */
@media (min-width:1025px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){
		height:250px;
		min-height:0;
		grid-template-columns:minmax(0,3fr) minmax(0,2fr);
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{
		padding:20px clamp(28px,3.4vw,56px) 20px clamp(24px,2.8vw,44px);
		overflow:hidden;
	}
	body .hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-titulo{font-size:clamp(26px,2.3vw,34px);line-height:1.06}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-caja::before{margin-bottom:12px}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-seo{margin-top:6px;font-size:15px}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-sub{
		margin-top:10px;
		font-size:15.5px;
		line-height:1.5;
		display:-webkit-box;
		-webkit-line-clamp:4;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}
}

/* ---------------------------------------------------------------------------
   v1.15.0 (2026-09-29) — La foto entera. Angel probo la cabecera «como la
   portada» (1.14.0, foto de fondo a lo ancho) y en Restaurantes: «no vale, la
   imagen no se ve entera»: a 250 px de alto y todo lo ancho la foto se recorta
   siempre. Vuelta a la B (1.13.0) y ademas, en el ordenador, la columna de la
   foto toma la forma de la foto (250 px de alto y su ancho natural: 800 px en
   las de 1920x600, 500 en las de 2:1), asi se ve entera, sin recortar. Tope:
   62 % del ancho de la pantalla (si la foto es mas alargada, se recorta solo
   por los lados, con «Parte de la foto que se ve»). El texto, en el resto, en
   su lado (Hero_lado / panel). El tamano de la foto va en la etiqueta <img>
   (tema 5.11.1) para que no salte al cargar.
   --------------------------------------------------------------------------- */
@media (min-width:1025px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){grid-template-columns:auto minmax(0,1fr)}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla){grid-template-columns:minmax(0,1fr) auto}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		width:auto;
		height:250px;
		min-height:0;
		max-width:62vw;
	}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding-left:clamp(28px,3.4vw,64px);padding-right:clamp(28px,3.4vw,64px)}
}

/* ---------------------------------------------------------------------------
   v1.16.0 (2026-09-29) — Sin corte. Angel, viendo la 1.15.0 y la segunda
   ronda de la maqueta: «tendrías que quitar el corte de la foto y usar un
   degradado». La foto sigue entera y en su sitio (1.15.0); su borde interior
   (el del lado del texto) se funde con el fondo de la cabecera: crema, o casi
   negro con «Fundido oscuro». Es una mascara sobre la propia foto: el texto
   sigue fuera de ella, sobre fondo liso. Tableta y ordenador; el movil, igual.
   --------------------------------------------------------------------------- */
@media (min-width:641px){
	.hs27--derecha:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
		mask-image:linear-gradient(90deg,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
		mask-image:linear-gradient(270deg,#000 0%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
	}
	/* El texto se acerca un poco a la foto: ya no hay borde que respetar */
	.hs27--derecha:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding-left:clamp(12px,1.6vw,28px)}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding-right:clamp(12px,1.6vw,28px)}
}

/* ---------------------------------------------------------------------------
   v1.18.0 (2026-09-29) — Fuera de la caja y sin separar. Angel, viendo el
   recuadro de la 1.17.0: «esto no; fuera de caja, como estaba antes, pero que
   no se separen el texto y la foto». Vuelve la 1.16.0 (la franja de borde a
   borde, foto entera con el borde fundido, 250 px) y el texto va siempre junto
   a la foto: con el texto a la izquierda (Consciente, Restaurantes…) la foto
   iba al borde derecho y el texto al izquierdo, y en una pantalla ancha
   quedaba un hueco grande en medio. Ahora el texto se arrima a la foto. Con el
   texto a la derecha ya iba pegado. Tableta y móvil, sin cambios.
   --------------------------------------------------------------------------- */
@media (min-width:1025px){
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{align-items:flex-end}
}

/* ---------------------------------------------------------------------------
   v1.19.0 (2026-09-29) — Centrada. Angel, viendo la 1.18.0 en su pantalla
   ancha (2000 px, Restaurantes con la foto al borde derecho y medio hueco
   vacío a la izquierda): «¿puede estar centrado?». La franja sigue de borde a
   borde, sin recuadro; foto y texto van juntos dentro del ancho del contenido
   (1232 px, el mismo borde que la cabecera, Esenciales y los banners). La foto
   como mucho al 64 % de ese ancho (788 px). Cuando sobra sitio a los lados, su
   borde de fuera también se funde con el fondo, así no queda un corte seco en
   medio de la franja. Tableta y móvil, sin cambios.
   --------------------------------------------------------------------------- */
@media (min-width:1025px){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){
		box-sizing:border-box;
		padding-left:max(0px,calc((100% - 1232px) / 2));
		padding-right:max(0px,calc((100% - 1232px) / 2));
	}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{max-width:min(62vw,788px)}
	/* El texto llega hasta el borde del contenido: más sitio para los títulos largos */
	.hs27--derecha:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding-right:24px}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding-left:24px}
}
@media (min-width:1300px){
	.hs27--derecha:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
		mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
	}
	.hs27--izquierda:not(.hs27--calendario):not(.hs27--sencilla) .hs27-img{
		-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 9%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
		mask-image:linear-gradient(270deg,transparent 0%,#000 9%,#000 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.30) 88%,transparent 100%);
	}
}

/* ---------------------------------------------------------------------------
   v1.20.0 (2026-09-29) — iPad en vertical (700–1024 px, más alto que ancho).
   Angel: «el hero más estrecho». Baja de 292 a unos 200–240 px: título y lema
   un poco menores y el lema en tres líneas como mucho. Foto y texto, igual.
   --------------------------------------------------------------------------- */
@media (min-width:700px) and (max-width:1024px) and (orientation:portrait){
	.hs27:not(.hs27--calendario):not(.hs27--sencilla){min-height:0;height:clamp(190px,26vw,240px)}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-dentro{padding:14px 22px;overflow:hidden}
	body .hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-titulo{font-size:clamp(24px,3.4vw,32px);line-height:1.06}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-caja::before{margin-bottom:10px}
	.hs27:not(.hs27--calendario):not(.hs27--sencilla) .hs27-sub{margin-top:8px;font-size:14.5px;line-height:1.45;
		display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}