/* Las tres tiras del dia en pestanas. Creado 2026-09-17 · v1.7.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket). */

.t27{
	--t27-naranja:#F57C00;
	--t27-marron:#7A5238;
	--t27-tinta:#1B1512;
	--t27-gris:#8A817B;
	--t27-linea:#E8E2DA;
	max-width:1280px;
	margin:0 auto;
	/* Aire abajo: las tarjetas quedaban pegadas al bloque siguiente. */
	padding:34px 22px 34px;
	box-sizing:border-box;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.t27 .t27-dia{
	margin:0 0 6px;
	font-family:"Oswald",sans-serif;
	font-size:13px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--t27-tinta);
}

.t27 .t27-barra{
	display:flex;
	align-items:baseline;
	gap:22px;
	padding-bottom:12px;
	border-bottom:2px solid var(--t27-tinta);
}
/* El nombre de la seccion manda y no cambia; las pestanas son el filtro.
   No usa la cabecera del sistema porque aqui el titulo convive con las
   pestanas en la misma linea: es un filtro, no una cabecera. */
.t27 .t27-titulo{
	flex:none;
	margin:0;
	font-family:var(--wti-titulos,"Oswald",sans-serif);
	font-weight:400;
	font-size:30px;
	line-height:36px;
	color:var(--t27-naranja);
	text-transform:uppercase;
}
.t27 .t27-titulo span{opacity:.5;margin-left:1px}
.t27 .t27-pestanas{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;flex:1 1 auto}

/* La pestaña es el titulo de seccion: mismo tipo y mismo cuerpo. La que no
   esta activa, en gris; la activa, naranja y subrayada. */
/* El kit de Elementor estiliza TODOS los <button> de la web —fondo, borde,
   relleno, esquinas y contorno— y lo hace en varios estados a la vez. Aqui se
   anula sin discusion: es un boton nuestro, no suyo. */
.t27 .t27-pestanas .t27-pestana,
.t27 .t27-pestanas .t27-pestana:hover,
.t27 .t27-pestanas .t27-pestana:focus,
.t27 .t27-pestanas .t27-pestana:focus-visible,
.t27 .t27-pestanas .t27-pestana:active{
	-webkit-appearance:none !important;
	appearance:none !important;
	background:none !important;
	background-color:transparent !important;
	border:0 !important;
	border-radius:0 !important;
	outline:none !important;
	padding:0 0 11px !important;
	margin:0 !important;
	box-shadow:none !important;
	text-shadow:none !important;
}

.t27 .t27-pestana{
	position:relative;
	margin:0;
	padding:0 0 11px;
	border:0;
	background:none;
	cursor:pointer;
	font-family:"Oswald",sans-serif;
	font-weight:400;
	font-size:20px;
	line-height:26px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#B0A79D;
	transition:color .18s ease;
	-webkit-tap-highlight-color:transparent;
}
.t27 .t27-pestana:hover{color:var(--t27-marron)}
.t27 .t27-pestana.t27-activa{color:var(--t27-marron)}

/* El subrayado de la activa: un filete de 3 px, no un bloque. */
.t27 .t27-pestana::after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:-2px;
	height:3px;
	background:var(--t27-naranja);
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .22s ease;
}
.t27 .t27-pestana.t27-activa::after{transform:scaleX(1)}
.t27 .t27-pestana:hover::after{transform:scaleX(1);background:var(--t27-crema-bd,#E3D0BA)}
.t27 .t27-pestana.t27-activa:hover::after{background:var(--t27-naranja)}

/* Sin recuadro del navegador: el foco del teclado se marca con el mismo filete. */
.t27 .t27-pestana:focus{outline:none}
.t27 .t27-pestana:focus-visible{color:var(--t27-marron)}
.t27 .t27-pestana:focus-visible::after{transform:scaleX(1);background:var(--t27-marron)}

/* La pinta la pone .wti-enlace, en wti-base-2027: es el mismo "ver todos" que
   el resto de bloques. Aqui solo queda la colocacion. */
.t27 .t27-todos{
	flex:none;
	align-self:center;
}


/* La tira de dentro ya no lleva su propia cabecera ni su propio ancho. */
.t27 .q27{max-width:none;padding:0}

/* Las fichas llevan 13 px de relleno lateral: se compensan aqui para que el
   TEXTO de la primera cuadre con el titulo de seccion, y el de la ultima con
   el enlace de la derecha. */
.t27 .q27-tira{
	margin-left:-13px;
	margin-right:-13px;
	scroll-padding-left:13px;
}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.t27{padding:26px 18px 4px}
		.t27 .t27-pestana{font-size:18px;line-height:24px}
	.t27 .t27-pestanas{gap:18px}
}

/* ---------- movil: las pestañas se deslizan ---------- */
@media (max-width:640px){
	.t27{padding:22px 16px 2px}
	.t27 .t27-barra{flex-wrap:wrap;align-items:baseline;gap:8px 14px}
		.t27 .t27-pestanas{
		flex-wrap:nowrap;
		width:100%;
		overflow-x:auto;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
		gap:18px;
	}
	.t27 .t27-pestanas::-webkit-scrollbar{display:none}
	.t27 .t27-pestana{font-size:17px;line-height:22px;padding-bottom:8px}
	.t27 .t27-todos{margin-bottom:0}
	.t27 .q27{margin:0 -16px;width:calc(100% + 32px)}
}


/* Con una sola tira no hay entre que elegir: la pestaña sobra y ademas repite
   lo que ya dice el titulo del bloque. Al quitarla, el enlace de la derecha se
   quedaba pegado al titulo: se le devuelve su sitio. */
.t27 .t27-pestanas.t27-sin-pestanas{display:none}
.t27 .t27-pestanas.t27-sin-pestanas ~ .t27-todos{margin-left:auto}


/* v1.15.0 — Aire donde se tocaban las cosas: la fecha con el titulo, y la raya
   de la barra con las tarjetas. */
.t27 .t27-dia{margin-bottom:18px}
.t27 .t27-caja{padding-top:22px}


/* El lema del bloque: linea propia dentro de la barra, encima de la raya, como
   en la cabecera de la casa. La barra venia sin ajuste de linea, asi que el
   lema se metia en la misma fila por mucho que pidiera el 100%. */
.t27 .t27-barra{flex-wrap:wrap}
.t27 .t27-lema{
	order:9;
	flex:0 0 100%;
	max-width:none;
	margin:10px 0 0;
}