/*
 * Estilos del blog de Catering Piegallo
 * Creado 2026-08-04. Se carga solo en la pagina de entradas y en los articulos
 * (ver mimundosocial_scripts en functions.php).
 *
 * Las fuentes (abril, poiretone, poppins-*) las declara la CSS global de
 * Visual Composer, en la opcion vcv-settingsGlobalCss.
 */

:root {
	--piegallo-tinta: #1d1d1b;
	--piegallo-tinta-suave: #55534f;
	--piegallo-linea: #e3ded6;
	--piegallo-fondo: #ffffff;
	--piegallo-fondo-alt: #faf8f5;
	--piegallo-acento: #9c7c46;
	--piegallo-ancho-texto: 44rem;
	--piegallo-ancho-total: 76rem;
}

/*
 * El CSS global de Visual Composer oculta .entry-title en todo el sitio.
 * En el blog el titulo SI tiene que verse, asi que lo revertimos aqui.
 */
.blog .entry-title,
.single-post .entry-title,
.archive .entry-title,
.search .entry-title {
	display: block;
}

/* ---------- Base ---------- */

.piegallo-blog {
	background: var(--piegallo-fondo);
	color: var(--piegallo-tinta);
	font-family: "poppins-extralight", "Poppins", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.75;
	padding: 4rem 1.25rem 5rem;
}

.piegallo-blog__interior {
	max-width: var(--piegallo-ancho-total);
	margin: 0 auto;
}

.piegallo-blog a {
	color: var(--piegallo-tinta);
	text-decoration-color: var(--piegallo-acento);
	text-underline-offset: 0.2em;
}

.piegallo-blog a:hover,
.piegallo-blog a:focus-visible {
	color: var(--piegallo-acento);
}

/* Foco visible: necesario para navegacion por teclado */
.piegallo-blog a:focus-visible,
.piegallo-blog button:focus-visible {
	outline: 2px solid var(--piegallo-acento);
	outline-offset: 3px;
}

/* ---------- Portada de cabecera ----------
 *
 * El header del tema usa logo blanco y hamburguesa blanca, pensados para ir
 * encima de una imagen oscura. En el blog, sobre fondo blanco, no se veian.
 * Esta banda oscura ocupa la altura del header y los devuelve a su contexto.
 */

.piegallo-portada {
	position: relative;
	min-height: 62vh;
	min-height: 26rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: #171716 center center / cover no-repeat;
	padding: 8rem 1.25rem 3.5rem;
	text-align: center;
	color: #fff;
}

/* Velo para que el texto y el logo se lean sobre cualquier foto */
.piegallo-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.65) 100%);
	pointer-events: none;
}

.piegallo-portada__texto {
	position: relative;
	z-index: 1;
	max-width: var(--piegallo-ancho-texto);
	margin: 0 auto;
}

.piegallo-portada h1 {
	font-family: "abril", Georgia, serif;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	line-height: 1.15;
	margin: 0 0 .75rem;
	font-weight: 400;
	color: #fff;
}

.piegallo-portada .piegallo-meta,
.piegallo-portada p {
	color: rgba(255,255,255,.88);
	margin: 0;
}

.piegallo-portada .piegallo-meta a {
	color: #fff;
}

/* Cuando hay portada, el contenido no necesita tanto aire arriba */
.piegallo-portada + .piegallo-blog {
	padding-top: 3.5rem;
}

/* ---------- Cabecera interior ---------- */

.piegallo-blog__cabecera {
	max-width: var(--piegallo-ancho-texto);
	margin: 0 auto 3.5rem;
	text-align: center;
}

.piegallo-blog__cabecera h1 {
	font-family: "abril", Georgia, serif;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.15;
	margin: 0 0 1rem;
	font-weight: 400;
}

.piegallo-blog__entradilla {
	color: var(--piegallo-tinta-suave);
	margin: 0;
}

@media (max-width: 600px) {
	.piegallo-portada {
		min-height: 20rem;
		padding: 7rem 1rem 2.5rem;
	}
}

/* ---------- Rejilla de articulos ---------- */

.piegallo-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 2.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.piegallo-tarjeta {
	display: flex;
	flex-direction: column;
	background: var(--piegallo-fondo);
	border-bottom: 1px solid var(--piegallo-linea);
	padding-bottom: 1.75rem;
}

.piegallo-tarjeta__imagen {
	display: block;
	margin: 0 0 1.25rem;
	overflow: hidden;
	background: var(--piegallo-fondo-alt);
	aspect-ratio: 3 / 2;
}

.piegallo-tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.piegallo-tarjeta:hover .piegallo-tarjeta__imagen img {
	transform: scale(1.04);
}

.piegallo-tarjeta__titulo {
	font-family: "abril", Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.3;
	margin: 0 0 .6rem;
	font-weight: 400;
}

.piegallo-tarjeta__titulo a {
	text-decoration: none;
}

.piegallo-tarjeta__titulo a:hover {
	text-decoration: underline;
}

.piegallo-tarjeta__extracto {
	color: var(--piegallo-tinta-suave);
	margin: 0 0 1rem;
	font-size: .975rem;
}

.piegallo-meta {
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--piegallo-tinta-suave);
	margin: 0 0 .75rem;
}

.piegallo-meta a {
	text-decoration: none;
}

/* ---------- Articulo ---------- */

.piegallo-articulo {
	max-width: var(--piegallo-ancho-texto);
	margin: 0 auto;
}

.piegallo-articulo__cabecera {
	margin-bottom: 2.5rem;
	text-align: center;
}

.piegallo-articulo__cabecera h1 {
	font-family: "abril", Georgia, serif;
	font-size: clamp(1.9rem, 4.5vw, 2.75rem);
	line-height: 1.2;
	margin: .5rem 0 1rem;
	font-weight: 400;
}

.piegallo-articulo__portada {
	margin: 0 0 2.5rem;
	max-width: var(--piegallo-ancho-total);
}

.piegallo-articulo__portada img {
	width: 100%;
	height: auto;
	display: block;
}

.piegallo-articulo__portada figcaption {
	font-size: .8125rem;
	color: var(--piegallo-tinta-suave);
	text-align: center;
	padding-top: .6rem;
}

/* Contenido redactado: tipografia comoda de leer */

.piegallo-contenido > * + * {
	margin-top: 1.4em;
}

.piegallo-contenido h2 {
	font-family: "abril", Georgia, serif;
	font-size: 1.6rem;
	line-height: 1.25;
	margin-top: 2.6em;
	font-weight: 400;
}

.piegallo-contenido h3 {
	font-family: "poiretone", Georgia, serif;
	font-size: 1.28rem;
	line-height: 1.3;
	margin-top: 2em;
	font-weight: 700;
}

.piegallo-contenido img,
.piegallo-contenido iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

.piegallo-contenido ul,
.piegallo-contenido ol {
	padding-left: 1.4em;
}

.piegallo-contenido li + li {
	margin-top: .5em;
}

.piegallo-contenido blockquote {
	border-left: 3px solid var(--piegallo-acento);
	padding: .3em 0 .3em 1.4em;
	margin-left: 0;
	font-size: 1.1rem;
	color: var(--piegallo-tinta-suave);
	font-style: italic;
}

.piegallo-contenido table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.piegallo-contenido th,
.piegallo-contenido td {
	border: 1px solid var(--piegallo-linea);
	padding: .6em .8em;
	text-align: left;
}

/* Las tablas anchas no deben desbordar la pagina */
.piegallo-tabla-scroll {
	overflow-x: auto;
}

/* ---------- Llamada a la accion ---------- */

.piegallo-cta {
	margin: 3.5rem auto 0;
	max-width: var(--piegallo-ancho-texto);
	background: var(--piegallo-fondo-alt);
	border: 1px solid var(--piegallo-linea);
	padding: 2rem 1.75rem;
	text-align: center;
}

.piegallo-cta h2 {
	font-family: "abril", Georgia, serif;
	font-size: 1.4rem;
	margin: 0 0 .6rem;
	font-weight: 400;
}

.piegallo-cta p {
	margin: 0 0 1.4rem;
	color: var(--piegallo-tinta-suave);
}

.piegallo-boton {
	display: inline-block;
	background: var(--piegallo-tinta);
	color: #fff !important;
	padding: .85em 1.9em;
	text-decoration: none;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .85rem;
	border: 1px solid var(--piegallo-tinta);
	transition: background .25s ease, color .25s ease;
}

.piegallo-boton:hover,
.piegallo-boton:focus-visible {
	background: transparent;
	color: var(--piegallo-tinta) !important;
}

/* ---------- Landings de servicio ---------- */

.piegallo-portada__acciones {
	margin-top: 1.75rem !important;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: center;
}

.piegallo-boton--claro {
	background: #fff;
	color: var(--piegallo-tinta) !important;
	border-color: #fff;
}

.piegallo-boton--claro:hover,
.piegallo-boton--claro:focus-visible {
	background: transparent;
	color: #fff !important;
	border-color: #fff;
}

.piegallo-tel {
	color: #fff !important;
	font-size: 1.05rem;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* En landings el texto puede ir algo mas ancho que en un articulo */
.piegallo-landing__contenido {
	max-width: 52rem;
	margin: 0 auto;
}

.piegallo-landing__contenido h2 {
	margin-top: 2.4em;
}

/*
 * Sistema de bloques de las landings.
 * El texto corrido va estrecho para que se lea comodo; los bloques de
 * composicion (imagen+texto, cifras, tarjetas) ocupan todo el ancho.
 */
.piegallo-landing__contenido > * {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

.piegallo-landing__contenido > .piegallo-media,
.piegallo-landing__contenido > .piegallo-cifras,
.piegallo-landing__contenido > .piegallo-cols,
.piegallo-landing__contenido > .piegallo-pasos,
.piegallo-landing__contenido > .piegallo-galeria,
.piegallo-landing__contenido > .piegallo-destacado {
	max-width: none;
}

/* Titulo de seccion con filete de acento */
.piegallo-landing__contenido h2 {
	position: relative;
	padding-top: 1.1rem;
	margin-top: 3.2em;
}

.piegallo-landing__contenido h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3rem;
	height: 2px;
	background: var(--piegallo-acento);
}

/* ---- Imagen + texto, en dos columnas ---- */

.piegallo-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 3rem;
	align-items: center;
	margin-top: 3.2em !important;
}

.piegallo-media--inv .piegallo-media__img {
	order: 2;
}

.piegallo-media__img {
	margin: 0;
	overflow: hidden;
	background: var(--piegallo-fondo-alt);
	aspect-ratio: 4 / 3;
}

.piegallo-media__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.piegallo-media__txt > *:first-child {
	margin-top: 0 !important;
	padding-top: 0;
}

.piegallo-media__txt h2::before {
	display: none;
}

.piegallo-media__txt h2 {
	padding-top: 0;
	margin-top: 0;
	font-size: 1.75rem;
}

.piegallo-media__txt p + p {
	margin-top: 1em;
}

/* Etiqueta pequena sobre el titulo */
.piegallo-eyebrow {
	display: block;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--piegallo-acento);
	margin-bottom: .7rem;
}

/* ---- Banda de cifras ---- */

.piegallo-cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0;
	margin-top: 3.2em !important;
	border: 1px solid var(--piegallo-linea);
	background: var(--piegallo-fondo-alt);
}

.piegallo-cifras > div {
	padding: 2rem 1.5rem;
	text-align: center;
	border-right: 1px solid var(--piegallo-linea);
}

.piegallo-cifras > div:last-child {
	border-right: 0;
}

.piegallo-cifras strong {
	display: block;
	font-family: "abril", Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .35rem;
}

.piegallo-cifras span {
	font-size: .82rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--piegallo-tinta-suave);
}

/* ---- Pasos numerados ---- */

.piegallo-pasos {
	list-style: none;
	counter-reset: paso;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	margin-top: 2.4em !important;
}

.piegallo-pasos li {
	counter-increment: paso;
	padding-top: 2.6rem;
	position: relative;
	margin: 0 !important;
}

.piegallo-pasos li::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-family: "abril", Georgia, serif;
	font-size: 1.5rem;
	color: var(--piegallo-acento);
	line-height: 1;
}

.piegallo-pasos h3 {
	margin: 0 0 .5rem !important;
	font-size: 1.05rem;
}

.piegallo-pasos p {
	margin: 0;
	font-size: .95rem;
	color: var(--piegallo-tinta-suave);
}

/* ---- Tarjetas de servicio ---- */

.piegallo-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.4em !important;
}

.piegallo-cols > div {
	background: var(--piegallo-fondo);
	border: 1px solid var(--piegallo-linea);
	border-top: 3px solid var(--piegallo-acento);
	padding: 1.75rem 1.6rem;
}

.piegallo-cols h3 {
	margin-top: 0 !important;
	font-size: 1.1rem;
	font-family: "abril", Georgia, serif;
	font-weight: 400;
}

.piegallo-cols p {
	margin-bottom: 0;
	font-size: .95rem;
	color: var(--piegallo-tinta-suave);
}

/* ---- Barra de navegacion entre recintos ----
 *
 * Va justo bajo la portada. En movil desborda: por eso hace scroll horizontal
 * dentro de su propia caja, nunca empujando el ancho de la pagina.
 */

.piegallo-tabs {
	background: var(--piegallo-fondo);
	border-bottom: 1px solid var(--piegallo-linea);
	font-family: "poppins-extralight", "Poppins", system-ui, sans-serif;
}

.piegallo-tabs__lista {
	display: flex;
	gap: .35rem;
	list-style: none;
	margin: 0 auto;
	padding: 0 1.25rem;
	max-width: var(--piegallo-ancho-total);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.piegallo-tabs__lista li {
	margin: 0;
	flex: 0 0 auto;
}

.piegallo-tabs a {
	display: block;
	padding: 1.05rem .95rem;
	text-decoration: none;
	white-space: nowrap;
	font-size: .9rem;
	color: var(--piegallo-tinta-suave);
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.piegallo-tabs a:hover,
.piegallo-tabs a:focus-visible {
	color: var(--piegallo-tinta);
	border-bottom-color: var(--piegallo-linea);
}

/* La ficha en la que estamos */
.piegallo-tabs a[aria-current="page"] {
	color: var(--piegallo-tinta);
	border-bottom-color: var(--piegallo-acento);
	font-weight: 700;
}

/* "Todas" se separa del resto: es de otro nivel */
.piegallo-tabs__todas {
	color: var(--piegallo-acento) !important;
	border-right: 1px solid var(--piegallo-linea);
	margin-right: .35rem;
	padding-right: 1.1rem !important;
}

@media (prefers-reduced-motion: reduce) {
	.piegallo-tabs a { transition: none; }
}

@media (max-width: 600px) {
	.piegallo-tabs__lista {
		padding: 0 1rem;
	}

	.piegallo-tabs a {
		padding: .9rem .75rem;
		font-size: .85rem;
	}
}

/* ---- Aviso (caja clara, para matices que deben leerse) ---- */

.piegallo-aviso {
	margin-top: 2.4em !important;
	padding: 1.5rem 1.6rem;
	background: var(--piegallo-fondo-alt);
	border-left: 3px solid var(--piegallo-acento);
}

.piegallo-aviso p {
	margin: 0;
	font-size: .97rem;
	color: var(--piegallo-tinta-suave);
}

.piegallo-aviso p + p {
	margin-top: .8rem;
}

/* ---- Listado de recintos del hub ---- */

.piegallo-recintos {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
	margin-top: 2.4em !important;
}

.piegallo-recintos li {
	margin: 0 !important;
	border: 1px solid var(--piegallo-linea);
	border-top: 3px solid var(--piegallo-acento);
	padding: 1.5rem 1.5rem 1.6rem;
}

.piegallo-recintos h3 {
	margin: 0 0 .3rem !important;
	font-family: "abril", Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
}

.piegallo-recintos .piegallo-municipio {
	display: block;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--piegallo-acento);
	margin-bottom: .8rem;
}

.piegallo-recintos p {
	margin: 0;
	font-size: .94rem;
	color: var(--piegallo-tinta-suave);
}

/* ---- Cita destacada ---- */

.piegallo-destacado {
	margin-top: 3.2em !important;
	padding: 2.75rem 2rem;
	background: var(--piegallo-tinta);
	color: #fff;
	text-align: center;
}

.piegallo-destacado p {
	max-width: 40rem;
	margin: 0 auto;
	font-family: "poiretone", Georgia, serif;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	line-height: 1.5;
}

/* Sobre fondo oscuro el enlace necesita su propio color */
.piegallo-destacado a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--piegallo-acento);
	text-underline-offset: .25em;
}

.piegallo-destacado a:hover,
.piegallo-destacado a:focus-visible {
	color: var(--piegallo-acento);
}

@media (max-width: 720px) {
	.piegallo-media {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.piegallo-media--inv .piegallo-media__img {
		order: 0;
	}

	.piegallo-cifras > div {
		border-right: 0;
		border-bottom: 1px solid var(--piegallo-linea);
	}

	.piegallo-cifras > div:last-child {
		border-bottom: 0;
	}
}

/* Galeria de fotos dentro de una landing */
.piegallo-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin-top: 1.6em;
}

.piegallo-galeria figure {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--piegallo-fondo-alt);
}

.piegallo-galeria img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.piegallo-galeria figure:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.piegallo-galeria img { transition: none; }
	.piegallo-galeria figure:hover img { transform: none; }
}

/* Preguntas frecuentes */
.piegallo-faq {
	margin-top: 1.6em;
	border-top: 1px solid var(--piegallo-linea);
}

.piegallo-faq details {
	border-bottom: 1px solid var(--piegallo-linea);
	padding: 1rem 0;
}

.piegallo-faq summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.piegallo-faq summary::-webkit-details-marker {
	display: none;
}

.piegallo-faq summary::after {
	content: "+";
	color: var(--piegallo-acento);
	font-size: 1.4rem;
	line-height: 1;
	flex: 0 0 auto;
}

.piegallo-faq details[open] summary::after {
	content: "−";
}

.piegallo-faq details > *:not(summary) {
	margin-top: .9rem;
	color: var(--piegallo-tinta-suave);
}

.piegallo-cta__pie {
	margin: 1.1rem 0 0 !important;
	font-size: .95rem;
}

/* ---------- Navegacion ---------- */

.piegallo-nav {
	max-width: var(--piegallo-ancho-texto);
	margin: 3.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--piegallo-linea);
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	font-size: .95rem;
}

.piegallo-nav .nav-previous,
.piegallo-nav .nav-next {
	max-width: 48%;
}

.piegallo-nav .nav-next {
	text-align: right;
	margin-left: auto;
}

.piegallo-paginacion {
	margin-top: 3.5rem;
	text-align: center;
}

.piegallo-paginacion .page-numbers {
	display: inline-block;
	padding: .5em .9em;
	margin: 0 .15em;
	text-decoration: none;
	border: 1px solid var(--piegallo-linea);
}

.piegallo-paginacion .page-numbers.current {
	background: var(--piegallo-tinta);
	color: #fff;
	border-color: var(--piegallo-tinta);
}

/* ---------- Sin resultados ---------- */

.piegallo-vacio {
	max-width: var(--piegallo-ancho-texto);
	margin: 0 auto;
	text-align: center;
	color: var(--piegallo-tinta-suave);
}

/* ---------- Movil ---------- */

@media (max-width: 600px) {
	.piegallo-blog {
		padding: 2.5rem 1rem 3.5rem;
	}

	.piegallo-rejilla {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.piegallo-nav {
		flex-direction: column;
	}

	.piegallo-nav .nav-previous,
	.piegallo-nav .nav-next {
		max-width: 100%;
		text-align: left;
		margin-left: 0;
	}
}

/* Respeta a quien pide menos animacion */
@media (prefers-reduced-motion: reduce) {
	.piegallo-tarjeta__imagen img,
	.piegallo-boton {
		transition: none;
	}

	.piegallo-tarjeta:hover .piegallo-tarjeta__imagen img {
		transform: none;
	}
}