/* ==================================================
   ÍNDICE DESPLEGABLE - ACORDEÓN MODERNO
================================================== */
.indice-desplegable {
	background: #ddf5fb;
	border: 1px solid #dde1e2;
	border-radius: 8px;
	padding: 0;
	width: 100%;
	max-width: 500px;
	margin: 20px 0;
/* izquierda en escritorio */
	font-size: 14px;
	box-sizing: border-box;
	overflow: hidden;
}

/* En móvil ocupa todo el ancho */
@media (max-width: 600px) {
	.indice-desplegable {
		font-size: 12px;
		margin: 15px 0;
	}
}

/* SUMMARY */
.indice-titulo {
	list-style: none;
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Elimina flecha nativa */
.indice-titulo::-webkit-details-marker {
	display: none;
}

/* Indicador Mostrar / Ocultar */
.indice-estado::after {
	content: "Mostrar";
	font-weight: 500;
	font-size: .9em;
	opacity: .7;
}

/* Cuando está abierto */
.indice-detalles[open] .indice-estado::after {
	content: "Ocultar";
}

/* Línea divisoria cuando abre */
.indice-detalles[open] .indice-titulo {
	border-bottom: 1px solid #dde1e2;
}

/* CONTENIDO */
.indice-contenido {
	padding: 0 16px 16px;
	animation: fadeSlide .3s ease forwards;
}

/* Animación suave */
@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==================================================
   NUMERACIÓN
================================================== */
/* ==================================================
   NUMERACIÓN CORREGIDA CON MARGEN IZQUIERDO
================================================== */
/* ==================================================
   NUMERACIÓN ALINEADA CORRECTAMENTE
================================================== */
ul.numeric-decimals {
	counter-reset: section;
	list-style: none;
	margin: 10px 0 0;
	padding-left: 20px;
/* margen izquierdo real */
}

ul.numeric-decimals li {
	counter-increment: section;
	margin-bottom: 6px;
}

ul.numeric-decimals li::before {
	content: counter(section) ". ";
	font-weight: bold;
}

ul.numeric-decimals li ul {
	counter-reset: subsection;
	margin-top: 6px;
	padding-left: 20px;
}

ul.numeric-decimals li ul li {
	counter-increment: subsection;
}

ul.numeric-decimals li ul li::before {
	content: counter(section) "." counter(subsection) " ";
	font-weight: bold;
}

/* ==================================================
   FINAL DE INDICE
================================================== */
/* Add tripadvisor icon to Social Icons block / 4127377-zen (br) */
.wp-social-link a[href*="tripadvisor.es"] {
	background: url('https://volandosinfiltro.com/wp-content/uploads/2021/07/trip-1.png') no-repeat center center;
	border-radius: 50%;
	background-size: contain;
}

.wp-block-social-links a.wp-block-social-link-anchor[href*="tripadvisor.es"] svg {
	fill: transparent;
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link.wp-social-link-chain {
	background-color: transparent;
}

window.dataLayer = window.dataLayer || [];
  function gtag() {
}

window.dataLayer = window.dataLayer || [];
  function gtag() {
}

/*  |  -  */
.page #main h1.entry-title {
	display: none;
}

/* Importar Google Fonts */
/* Estilos generales para el contenedor del banner de guía (clase genérica) */
.banner-guia {
	background-image: var(--banner-bg-image, none) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
/* Asegura que la imagen NO se repita */
	height: 111px !important;
/* La altura exacta de tu imagen de fondo */
	overflow: hidden !important;
/* Oculta cualquier contenido o parte del fondo que se desborde */
	display: flex !important;
/* Usamos flexbox para centrar y organizar los elementos */
	flex-direction: column !important;
/* Apila el título y el botón verticalmente */
	justify-content: center !important;
/* Centra verticalmente el contenido */
	align-items: center !important;
/* Centra horizontalmente el contenido */
	padding: 0 10px !important;
/* Reducimos el padding para maximizar el espacio para el contenido visible. */
	box-sizing: border-box !important;
/* Incluye padding y border en el ancho/alto total */
	color: white !important;
/* Color del texto para que contraste con el fondo */
	border-radius: 8px !important;
/* Bordes ligeramente redondeados */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
/* Sombra para darle profundidad */
	margin: 3em auto !important;
/* Centra el bloque horizontalmente y añade margen vertical */
	max-width: 850px !important;
/* Limita el ancho máximo del bloque */
}

/* Estilos para el título dentro del banner de guía */
.banner-guia h1 {
	font-family: 'Roboto', sans-serif !important;
/* Vuelve a Roboto */
	font-size: 1.8em !important;
/* Tamaño de fuente para el H1 */
	margin-bottom: 5px !important;
/* Menos espacio entre el título y el botón */
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
/* Sombra más sutil */
	color: white !important;
	font-weight: 900 !important;
/* Peso robusto para Roboto */
	line-height: 1.1 !important;
	max-width: 95% !important;
/* Permite que el título ocupe casi todo el ancho */
	white-space: nowrap !important;
/* Evita saltos de línea */
	overflow: hidden !important;
/* Oculta el texto que se desborde */
	text-overflow: ellipsis !important;
/* Añade puntos suspensivos si se recorta */
}

/* Estilos para el botón de descarga dentro del banner de guía (clase genérica) */
.banner-guia .boton-descarga-guia {
	font-family: 'Poppins', sans-serif !important;
/* Vuelve a Poppins */
	background-color: #ffffff !important;
	color: #000000 !important;
	padding: 8px 18px !important;
/* Reducimos el padding para un botón más compacto */
	font-size: 1em !important;
/* Aumentado a 1em (antes .9em, es decir, ~1px más grande) */
	border-radius: 20px !important;
	text-decoration: none !important;
	display: inline-block !important;
	text-align: center !important;
	transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
	border: none !important;
	cursor: pointer !important;
	font-weight: 700 !important;
/* Peso robusto para Poppins */
}

.banner-guia .boton-descarga-guia:hover {
	background-color: #0056b3 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Media queries para pantallas más pequeñas - Aseguran responsividad */
@media (max-width: 768px) {
	.banner-guia {
		padding: 0 10px !important;
	/* Padding reducido */
		height: 111px !important;
	/* Mantenemos la altura fija */
	}
	
	.banner-guia h1 {
		display: none !important;
	/* Oculta el H1 en móviles */
	}
	
	.banner-guia .boton-descarga-guia {
		padding: 12px 25px !important;
	/* Ajuste el padding para que el botón sea más visible al estar solo */
		font-size: 0.9em !important;
	/* Aumentado a 1.2em (antes 1.1em en mobile) */
		margin: auto !important;
	/* Asegura que el botón se centre vertical y horizontalmente */
	}
}

@media (max-width: 480px) {
	.banner-guia {
		padding: 0 5px !important;
	/* Mínimo padding lateral */
		height: 111px !important;
	}
	
	/* El h1 ya está oculto en la media query de 768px, no necesita más ajuste aquí */
	.banner-guia .boton-descarga-guia {
		padding: 10px 20px !important;
		font-size: 1.1em !important;
	/* Aumentado a 1.1em (antes 1em en mobile) */
	}
}

/* Importar fuentes de Google */
/* Contenedor principal de la galería */
.vst-gallery-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	max-width: 1200px;
	margin: 40px auto;
	perspective: 1000px;
	padding: 0 10px;
}

/* Enlace de cada tarjeta */
.vst-flip-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
/* Por defecto para móvil: 2 columnas */
	width: calc(50% - 10px);
	max-width: 300px;
	aspect-ratio: 1 / 1;
/* Mantiene la tarjeta cuadrada */
}

/* Contenedor de la tarjeta que permite el volteo */
.vst-flip-card {
	width: 100%;
	height: 100%;
	position: relative;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}

/* El elemento que realmente gira (frente y dorso) */
.vst-flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 1s;
/* Duración de la animación */
	transform-style: preserve-3d;
}

/* Voltear al pasar el ratón (desktop) o al tocar (móvil, con el comportamiento de activación inmediata) */
.vst-flip-card-link:hover .vst-flip-card-inner,
.vst-flip-card-link:focus .vst-flip-card-inner {
/* :focus añadido para accesibilidad y algunos táctiles */
	transform: rotateY(180deg);
}

/* Posición de las caras frontal y trasera */
.vst-flip-card-front,
.vst-flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	border-radius: 8px;
}

/* Estilos de la cara frontal (la imagen) */
.vst-flip-card-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

/* Estilos de la cara trasera (SÓLIDO color azul sin imagen ni opacidad) */
.vst-flip-card-back {
	transform: rotateY(180deg);
	background-color: #a8e1f5;
	color: #FFFFFF;
	padding: 20px;
	box-sizing: border-box;
}

/* Estilos del H1 en la cara trasera */
.vst-card-title {
	font-family: 'Open Sans' !important, sans-serif;
/* ¡ASEGÚRATE DE QUE ESTA LÍNEA ESTÉ CORRECTA! */
	font-weight: 800 !important;
	font-size: 1.8em;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.2;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* MEDIA QUERIES para Responsividad */
/* Diseño de escritorio: 4 columnas */
@media (min-width: 768px) {
	.vst-flip-card-link {
		width: calc(25% - 15px);
	}
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 480px) {
	.vst-flip-card-link {
		width: calc(100% - 20px);
	}
	
	.vst-card-title {
		font-size: 1.5em;
	}
}