/* "Que hacer hoy" 2027. Creado 2026-09-17 · v1.21.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).
   Todo prefijado con .q27: Elementor imprime `.elementor-kit-99596 a{...}` y
   `h2/h3{...}` en linea y pesa mas que una sola clase. */

.q27{
	--q27-naranja:#F57C00;
	--q27-marron:#7A5238;
	--q27-tinta:#1B1512;
	--q27-gris:#8A817B;
	--q27-linea:#E8E2DA;
	max-width:1280px;
	margin:0 auto;
	padding:34px 22px 30px;
	box-sizing:border-box;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- cabecera del bloque ---------- */
/* Cabecera de bloque de la casa, la MISMA en todos: la fecha arriba en su
   linea (cuando la hay), y debajo titulo · lema · enlace, alineados arriba.
   Con rejilla la fila de la fecha dejaba un hueco en los bloques que no la
   llevan, como el Magazine, y la cabecera se veia distinta. */
.q27 .q27-dia{
	flex:1 0 100%;
	/* En tinta, no en naranja: encima va el titulo de seccion, que ya es
	   naranja, y debajo las horas de las tarjetas, que tambien. Tres naranjas
	   en vertical se comen entre ellos. */
	margin:0 0 4px;
	font-family:"Oswald",sans-serif;
	font-size:13px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--q27-tinta);
}
/* El lema, cuando el bloque lo lleva (Magazine): al lado del titulo, alineado
   arriba, igual que en noticias y en Bienvenido. */
.q27 .q27-todos{
	/* Solo la colocacion. La pinta (pildora) vive en wti-base-2027. */
	flex:none;
	margin-left:auto;
	margin-top:9px;
	justify-self:end;
	white-space:nowrap;
}
.q27 .q27-todos span{margin-left:6px}

/* ---------- la tira: una sola linea que se desliza ----------
   Con 34 planes al dia cualquier rejilla crece sin fin. Una linea mantiene el
   alto fijo y deja ver todos los planes deslizando. */
.q27 .q27-carro{position:relative}

.q27 .q27-tira{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:0;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	scroll-behavior:smooth;
}
.q27 .q27-tira::-webkit-scrollbar{display:none}

/* Cinco tarjetas y media a la vista: la sexta se corta por el borde y es lo que
   le dice al ojo que la tira sigue. */
/* Sin lineas entre fichas: encajonaban cada plan y la tira parecia una tabla.
   Las separa el aire, y una sola linea fina por debajo sostiene la fila. */
/* Cada plan es una tarjeta: sin caja no se sabe donde acaba uno y empieza el
   siguiente. Es la misma tarjeta que la de los menus del dia.
   El ancho descuenta los huecos para que sigan entrando cinco y se vea media
   mas, que es lo que avisa de que hay mas deslizando. */
.q27 .q27-plan{
	flex:0 0 calc((100% - 5 * 16px) / 5.5);
	width:calc((100% - 5 * 16px) / 5.5);
	min-width:0;
	scroll-snap-align:start;
	/* Aire arriba: la hora se pegaba al borde de la tarjeta. */
	padding:18px 14px 16px;
	box-sizing:border-box;
	background:#fff;
	border:1px solid var(--q27-linea);
	border-radius:14px;
	box-shadow:0 12px 26px -20px rgba(27,21,18,.45);
	transition:transform .2s ease,box-shadow .2s ease;
}
.q27 .q27-plan:hover{
	transform:translateY(-3px);
	box-shadow:0 18px 34px -20px rgba(27,21,18,.5);
}

/* las flechas: solo donde hay raton */
.q27 .q27-flecha{
	position:absolute;
	top:88px;
	z-index:3;
	width:42px;height:42px;
	display:grid;place-items:center;
	border:1px solid var(--q27-linea);
	border-radius:50%;
	background:#fff;
	color:var(--q27-marron);
	cursor:pointer;
	padding:0;
	box-shadow:0 6px 18px -8px rgba(27,21,18,.45);
	transition:opacity .18s ease,transform .18s ease,color .18s ease;
}
.q27 .q27-flecha:hover{color:var(--q27-naranja);transform:scale(1.07)}
.q27 .q27-atras{left:-14px}
.q27 .q27-alante{right:-14px}
.q27 .q27-flecha[hidden]{display:none}

/* ---------- la tarjeta ---------- */
/* La foto va entre el titulo y el sitio: el orden lo pone el CSS, no el HTML,
   para poder cambiarlo en movil sin tocar el marcado. */
.q27 .q27-enlace{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.q27 .q27-hora  {order:1}
.q27 .q27-nombre{order:2}
.q27 .q27-foto  {order:3}
.q27 .q27-sitio {order:4}
.q27 .q27-zona  {order:5}

.q27 .q27-foto{
	position:relative;
	aspect-ratio:2 / 1;
	overflow:hidden;
	border-radius:10px;
	background:#F3EFEA;
	margin:2px 0 12px;
}
.q27 .q27-foto img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s ease;
}
.q27 .q27-enlace:hover .q27-foto img{transform:scale(1.04)}

.q27 .q27-hora{
	margin:0 0 6px;
	font-family:"Oswald",sans-serif;
	font-size:13px;
	font-weight:500;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--q27-naranja);
}
.q27 .q27-nombre{
	/* dos lineas reservadas: asi la foto arranca a la misma altura en todas. */
	min-height:2.4em;
	margin:0 0 4px;
	font-family:"Oswald",sans-serif;
	font-weight:500;
	font-size:17px;
	line-height:1.2;
	color:var(--q27-tinta);
	text-transform:none;
}
.q27 .q27-enlace:hover .q27-nombre{color:var(--q27-naranja)}

/* el sitio manda; la zona va debajo y en gris */
.q27 .q27-sitio{
	margin:0;
	font-size:13.5px;
	line-height:1.35;
	font-weight:600;
	color:var(--q27-marron);
}
.q27 .q27-zona{
	margin:2px 0 0;
	font-size:13px;
	line-height:1.35;
	color:var(--q27-gris);
}

/* la ultima tarjeta: el acceso a todos */
.q27 .q27-plan-final{display:flex}
.q27 .q27-mas{
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:12px;
	height:100%;
	width:100%;
}
.q27 .q27-mas-flecha{
	width:52px;height:52px;
	display:grid;place-items:center;
	border-radius:50%;
	background:var(--q27-naranja);
	color:#fff;
	font-size:22px;
	line-height:1;
}
.q27 .q27-mas-texto{
	font-family:"Oswald",sans-serif;
	font-weight:500;
	font-size:17px;
	line-height:1.2;
	color:var(--q27-tinta);
}
.q27 .q27-mas:hover .q27-mas-texto{color:var(--q27-naranja)}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.q27{padding:26px 18px 22px}
	.q27 .q27-plan{flex:0 0 calc((100% - 3 * 14px) / 3.4);width:calc((100% - 3 * 14px) / 3.4);padding:16px 12px 15px}
	.q27 .q27-tira{gap:14px}
}

/* ---------- movil: lista, no rejilla ---------- */
/* ---------- movil: la misma tira, se desliza con el dedo ---------- */
@media (max-width:640px){
	.q27{padding:22px 0 16px}
				.q27 .q27-todos{margin-left:0;margin-top:10px}
	.q27 .q27-flecha{display:none}
	.q27 .q27-tira{padding:0 16px;scroll-padding-left:16px}
	.q27 .q27-plan{flex:0 0 calc(100% / 1.7);width:calc(100% / 1.7);padding:14px 12px 16px}
	.q27 .q27-tira{border-bottom:0}
	.q27 .q27-nombre{font-size:17px;min-height:2.6em}
}


/* ==========================================================================
   Magazine: otra carta, sin tocar la foto.
   El titulo encima de la imagen no vale: la tapa, y con 2:1 —la proporcion de
   la casa— se come media carta. Aqui la foto se queda entera arriba y el
   titulo debajo. Lo que lo distingue de la agenda es que esto SI es una carta
   —marco, esquinas y sombra— y que se levanta al pasar por encima; la agenda
   son fichas sueltas separadas por lineas.
   ========================================================================== */
/* Aire entre el filete de la seccion y las cartas: pegadas, la linea parecia
   el borde de la primera carta. */
.q27.q27-magazine .q27-tira{padding-top:20px}
/* Bloques alternos: el Magazine tambien sobre crema, como las noticias. */
.q27.q27-magazine{
	max-width:none;
	padding:34px 0 30px;
	background:#FBF7F2;
}
.q27.q27-magazine .q27-cabeza{
	max-width:1280px;
	margin-left:auto;margin-right:auto;
	padding-left:22px;padding-right:22px;
	box-sizing:border-box;
}
/* La tira NO va a todo ancho.
   Cuando la tira ocupaba toda la pantalla con un relleno grande a los lados,
   lo que se iba quedando atras seguia viendose por debajo de ese relleno: al
   deslizar aparecian medias tarjetas a izquierda y derecha. El fondo crema
   si va a todo ancho; el carril, no. */
.q27.q27-magazine .q27-tira{
	max-width:1280px;
	margin:0 auto;
	padding-left:22px;
	padding-right:22px;
	scroll-padding-left:22px;
	box-sizing:border-box;
}
.q27.q27-magazine .q27-atras{left:calc(max(22px, (100vw - 1236px) / 2) - 21px)}
.q27.q27-magazine .q27-alante{right:calc(max(22px, (100vw - 1236px) / 2) - 21px)}

/* v1.27.0 — El Magazine usa LA MISMA tarjeta que los demas.
   Tenia la suya: la foto a sangre pegada al borde, el titulo dentro y una
   flecha que aparecia al pasar. Se veia distinto en cada bloque de la web.
   Ahora es la tarjeta comun y aqui solo queda lo suyo: caben menos por
   pantalla, porque los titulos del Magazine son largos. */
.q27.q27-magazine .q27-plan{
	flex:0 0 calc((100% - 4 * 16px) / 4.2);
	width:calc((100% - 4 * 16px) / 4.2);
}
.q27.q27-magazine .q27-enlace{
	display:flex;
	flex-direction:column;
	height:100%;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	transform:none;
}
.q27.q27-magazine .q27-foto{
	order:1;
	margin:0;
	aspect-ratio:2 / 1;
}
.q27.q27-magazine .q27-nombre{
	order:2;
	margin:0;
	padding:12px 0 0;
	min-height:0;
	font-size:16px;
	line-height:1.25;
	color:var(--q27-tinta);
}
.q27.q27-magazine .q27-plan:hover .q27-nombre{color:var(--q27-naranja)}

/* La ultima tarjeta, el acceso a todo: la misma caja, en crema. */
.q27.q27-magazine .q27-plan-final{
	background:var(--q27-crema,#F2E6D8);
	border-color:var(--q27-crema,#F2E6D8);
	box-shadow:none;
}
.q27.q27-magazine .q27-plan-final .q27-enlace{
	justify-content:center;
	align-items:center;
	gap:10px;
	text-align:center;
}
.q27.q27-magazine .q27-mas-texto{color:var(--q27-marron);text-align:center}

@media (max-width:1024px){
	/* Bloques alternos: el Magazine tambien sobre crema, como las noticias. */
.q27.q27-magazine{
	max-width:none;
	padding:34px 0 30px;
	background:#FBF7F2;
}
.q27.q27-magazine .q27-cabeza{
	max-width:1280px;
	margin-left:auto;margin-right:auto;
	padding-left:22px;padding-right:22px;
	box-sizing:border-box;
}
/* La tira NO va a todo ancho.
   Cuando la tira ocupaba toda la pantalla con un relleno grande a los lados,
   lo que se iba quedando atras seguia viendose por debajo de ese relleno: al
   deslizar aparecian medias tarjetas a izquierda y derecha. El fondo crema
   si va a todo ancho; el carril, no. */
.q27.q27-magazine .q27-tira{
	max-width:1280px;
	margin:0 auto;
	/* 22 del contenido menos los 7 de relleno de la tarjeta: asi cuadra el
	   BORDE VISIBLE de la primera con el titulo. */
	padding-left:15px;
	padding-right:15px;
	scroll-padding-left:15px;
	box-sizing:border-box;
}
.q27.q27-magazine .q27-atras{left:calc(max(22px, (100vw - 1236px) / 2) - 21px)}
.q27.q27-magazine .q27-alante{right:calc(max(22px, (100vw - 1236px) / 2) - 21px)}

.q27.q27-magazine .q27-plan{flex:0 0 calc(100% / 2.4);width:calc(100% / 2.4)}
}

@media (max-width:640px){
	.q27.q27-magazine .q27-tira{padding-top:16px}
	/* Bloques alternos: el Magazine tambien sobre crema, como las noticias. */
.q27.q27-magazine{
	max-width:none;
	padding:34px 0 30px;
	background:#FBF7F2;
}
.q27.q27-magazine .q27-cabeza{
	max-width:1280px;
	margin-left:auto;margin-right:auto;
	padding-left:22px;padding-right:22px;
	box-sizing:border-box;
}
/* La tira NO va a todo ancho.
   Cuando la tira ocupaba toda la pantalla con un relleno grande a los lados,
   lo que se iba quedando atras seguia viendose por debajo de ese relleno: al
   deslizar aparecian medias tarjetas a izquierda y derecha. El fondo crema
   si va a todo ancho; el carril, no. */
.q27.q27-magazine .q27-tira{
	max-width:1280px;
	margin:0 auto;
	/* 22 del contenido menos los 7 de relleno de la tarjeta: asi cuadra el
	   BORDE VISIBLE de la primera con el titulo. */
	padding-left:15px;
	padding-right:15px;
	scroll-padding-left:15px;
	box-sizing:border-box;
}
.q27.q27-magazine .q27-atras{left:calc(max(22px, (100vw - 1236px) / 2) - 21px)}
.q27.q27-magazine .q27-alante{right:calc(max(22px, (100vw - 1236px) / 2) - 21px)}

.q27.q27-magazine .q27-plan{flex:0 0 calc(100% / 1.35);width:calc(100% / 1.35);padding:4px 5px 18px}
	.q27.q27-magazine .q27-nombre{font-size:16px;padding:13px 40px 15px 14px}
}