/* =====================================================================
   Ecopark · base
   Paleta tomada del logo: azul principal con degradado a cian, y las
   franjas roja / amarilla / verde de la bandera como acentos.
   ===================================================================== */

:root {
	/* Azules del logo */
	--azul-900: #12245c;
	--azul-800: #313182;   /* parte alta de las letras */
	--azul-700: #0c4da2;   /* color dominante del logo: la barra */
	--azul-500: #008bd2;   /* parte baja de las letras */
	--azul-300: #6fc4ec;
	--azul-100: #e8f3fb;
	--azul-50:  #f4f9fd;

	/* Acentos de la franja */
	--rojo:     #ed1c24;
	--amarillo: #ffde00;
	--verde:    #00a651;

	--gris:     #6d6e71;   /* el gris de los iconos del logo */

	--tinta:     #16202e;
	--tinta-sub: #55606e;
	--papel:     #ffffff;
	--papel-alt: var(--azul-50);
	--borde:     #dde5ee;

	--radio:     16px;
	--radio-sm:  10px;
	--sombra:    0 1px 2px rgb(18 36 92 / .06), 0 8px 24px rgb(18 36 92 / .08);
	--sombra-alta: 0 2px 6px rgb(18 36 92 / .09), 0 20px 46px rgb(18 36 92 / .16);

	/* Alto de la barra de contacto. La cabecera fija de la portada se
	   coloca justo debajo usando este valor. */
	--barra-alto: 38px;

	/* Se pisan desde Personalizar */
	--pie-fondo: #0a1229;
	--hero-velo: .55;

	--ancho:  1200px;
	--gap:    clamp(1rem, 2.5vw, 2rem);
	--fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--fuente);
	line-height: 1.65;
	color: var(--tinta);
	background: var(--papel);
	-webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-700); text-underline-offset: 2px; }
a:hover { color: var(--azul-500); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; color: var(--azul-900); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p  { margin: 0 0 1em; text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; border-radius: 3px; }

/* --- utilidades ------------------------------------------------------ */

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.seccion { padding-block: clamp(2.5rem, 6vw, 5rem); }
.seccion--alt { background: var(--papel-alt); }
.seccion--oscura { background: var(--azul-900); color: #cfdbea; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--oscura a { color: var(--azul-300); }

.solo-lectores {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saltar-al-contenido {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: .75rem 1.25rem; background: var(--azul-900); color: #fff;
	border-radius: 0 0 var(--radio-sm) 0;
}
.saltar-al-contenido:focus { left: 0; color: #fff; }

/* Encabezado de sección con antetítulo, como en el sitio actual */
.encabezado { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.encabezado--centrado { margin-inline: auto; text-align: center; }
.antetitulo {
	display: inline-block;
	margin-bottom: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--azul-500);
}
.antetitulo::after {
	content: "";
	display: block;
	width: 46px; height: 4px;
	margin-top: .45rem;
	border-radius: 2px;
	/* las tres franjas del logo */
	background: linear-gradient(90deg,
		var(--rojo) 0 33.3%, var(--amarillo) 33.3% 66.6%, var(--verde) 66.6% 100%);
}
.encabezado--centrado .antetitulo::after { margin-inline: auto; }

/* --- botones ---------------------------------------------------------- */

.boton {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.6rem;
	border: 1px solid transparent; border-radius: 999px;
	font-weight: 600; font-size: .95rem; line-height: 1;
	text-decoration: none; cursor: pointer;
	transition: background-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.boton:hover { transform: translateY(-1px); }
.boton svg { width: 1.1em; height: 1.1em; }

.boton--principal {
	background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
	color: #fff;
	box-shadow: 0 4px 14px rgb(12 77 162 / .3);
}
.boton--principal:hover { color: #fff; box-shadow: 0 6px 20px rgb(12 77 162 / .42); }

.boton--whatsapp { background: #25d366; color: #06301a; }
.boton--whatsapp:hover { background: #1fbb59; color: #06301a; }

.boton--linea { background: transparent; color: var(--azul-700); border-color: var(--borde); }
.boton--linea:hover { background: var(--azul-100); color: var(--azul-900); }

.boton--claro { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .35); }
.boton--claro:hover { background: #fff; color: var(--azul-900); }

/* --- barra superior de contacto --------------------------------------- */

.barra-util {
	position: relative; z-index: 101;
	min-height: var(--barra-alto);
	background: var(--azul-900);
	color: rgb(255 255 255 / .78);
	font-size: .8rem;
}
.barra-util__fila {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	min-height: var(--barra-alto); padding-block: .35rem;
}
.barra-util__dato,
.barra-util a {
	display: inline-flex; align-items: center; gap: .4rem;
	color: inherit; text-decoration: none;
}
.barra-util a:hover { color: #fff; }
.barra-util svg { width: 15px; height: 15px; opacity: .7; }
.barra-util__acciones { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }

@media (max-width: 720px) {
	/* En móvil el dato de ubicación sobra: manda el contacto. */
	.barra-util__dato { display: none; }
	.barra-util__fila { justify-content: center; }
}

@media (max-width: 420px) {
	/* Con los dos contactos en dos líneas la barra crece, y la cabecera
	   tiene que bajar con ella. */
	:root { --barra-alto: 60px; }
	.barra-util__acciones { flex-direction: column; align-items: center; gap: .15rem; }
}

/* --- cabecera --------------------------------------------------------- */

.cabecera {
	position: sticky; top: 0; z-index: 100;
	background: var(--papel);
	border-bottom: 1px solid var(--borde);
	transition: background-color .3s, border-color .3s, box-shadow .3s;
}

/* La cabecera es sólida en todas las páginas, portada incluida. Se probó
   transparente sobre el hero con el logo en blanco y quedaba peor: el
   logo se perdía sobre la foto. Al bajar solo añade sombra. */
.cabecera[data-fijada="true"] {
	box-shadow: 0 4px 24px rgb(18 36 92 / .1);
}

.cabecera__fila {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--gap); min-height: 78px;
}

.cabecera__logo {
	display: flex; align-items: center; flex-shrink: 0;
	font-weight: 800; font-size: 1.05rem; color: var(--azul-900);
	text-decoration: none;
}
.cabecera__logo img {
	width: auto; height: 46px;
	transition: height .3s;
}
.cabecera[data-fijada="true"] .cabecera__logo img { height: 40px; }

/* --- menú ------------------------------------------------------------- */

.menu { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.menu li { position: relative; }

.menu > li > a {
	position: relative;
	display: block; padding: .6rem .85rem;
	font-size: .82rem; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;   /* las mayúsculas piden más aire entre letras */
	color: var(--tinta); text-decoration: none;
	transition: color .2s;
}

/* Subrayado que crece desde el centro, con las franjas del logo */
.menu > li > a::after {
	content: "";
	position: absolute; left: 50%; right: 50%; bottom: .25rem;
	height: 3px; border-radius: 2px;
	background: linear-gradient(90deg,
		var(--rojo) 0 25%, var(--amarillo) 25% 50%, var(--verde) 50% 75%, var(--azul-500) 75% 100%);
	transition: left .25s ease, right .25s ease;
}
.menu > li > a:hover::after,
.menu > .current-menu-item > a::after,
.menu > .current_page_item > a::after,
.menu > .current-menu-parent > a::after { left: .85rem; right: .85rem; }

.menu > li > a:hover,
.menu > .current-menu-item > a { color: var(--azul-700); }

/* Indicador de que hay submenú */
.menu > li.menu-item-has-children > a::before {
	content: "";
	position: absolute; right: .1rem; top: 50%;
	width: 5px; height: 5px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
}
.menu > li.menu-item-has-children > a { padding-right: 1.3rem; }

/* Submenú */
.menu .sub-menu {
	position: absolute; top: calc(100% + .25rem); left: 0; z-index: 10;
	min-width: 240px; padding: .45rem;
	list-style: none; margin: 0;
	background: var(--papel); border: 1px solid var(--borde);
	border-radius: var(--radio-sm); box-shadow: var(--sombra-alta);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}

/* Franja de marca arriba, para que el desplegable no sea una caja sosa */
.menu .sub-menu::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 3px;
	border-radius: var(--radio-sm) var(--radio-sm) 0 0;
	background: linear-gradient(90deg,
		var(--rojo) 0 25%, var(--amarillo) 25% 50%, var(--verde) 50% 75%, var(--azul-700) 75% 100%);
}
.menu .sub-menu > li:first-child { margin-top: .35rem; }

.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
}

.menu .sub-menu a {
	display: block; padding: .5rem .75rem;
	border-radius: 6px;
	font-size: .78rem; font-weight: 600; line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tinta); text-decoration: none;
}
.menu .sub-menu a:hover { background: var(--azul-100); color: var(--azul-700); }
.menu .sub-menu .current-menu-item > a { background: var(--azul-100); color: var(--azul-700); }

/* A partir de siete ítems pasamos a dos columnas: las once instalaciones
   en una sola hacían un desplegable de casi media pantalla. */
.menu .sub-menu:has(> li:nth-child(7)) {
	columns: 2;
	column-gap: .35rem;
	width: max-content;
	max-width: min(90vw, 520px);
}
.menu .sub-menu:has(> li:nth-child(7)) > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* Si el desplegable es de los últimos del menú, se alinea a la derecha
   para no salirse de la pantalla. */
.menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }

/* --- acciones de la cabecera ------------------------------------------ */

.cabecera__acciones { display: flex; align-items: center; gap: .6rem; }
.cabecera__cta { padding: .7rem 1.3rem; font-size: .9rem; }
.cabecera__cta svg { width: 17px; height: 17px; }

/* Botón de menú. Con la palabra "Menú" al lado de las barras: el icono
   solo no es evidente para todo el mundo, y aquí abre 23 enlaces. */
.alternar-menu {
	display: none; align-items: center; gap: .5rem;
	padding: .6rem .9rem;
	background: var(--azul-100); color: var(--azul-700);
	border: 1px solid var(--azul-300); border-radius: 999px;
	font: inherit; font-size: .8rem; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.alternar-menu:hover { background: var(--azul-300); border-color: var(--azul-500); }

.alternar-menu__barras {
	display: flex; flex-direction: column; justify-content: center;
	gap: 4px; width: 18px; height: 14px;
}
.alternar-menu__barras span {
	display: block; height: 2px; width: 100%;
	background: currentColor; border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

/* Con el menú abierto las barras se convierten en una equis */
.alternar-menu[aria-expanded="true"] { background: var(--azul-700); color: #fff; border-color: var(--azul-700); }
.alternar-menu[aria-expanded="true"] .alternar-menu__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.alternar-menu[aria-expanded="true"] .alternar-menu__barras span:nth-child(2) { opacity: 0; }
.alternar-menu[aria-expanded="true"] .alternar-menu__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.alternar-menu__barras span { transition: none; }
}

@media (max-width: 1000px) {
	.alternar-menu { display: inline-flex; }

	/* El botón de la cabecera se oculta salvo que se pida lo contrario:
	   el flotante de WhatsApp ya cubre esa función. */
	.cabecera__cta--solo-escritorio { display: none; }

	.cabecera__nav {
		display: none;
		position: absolute; inset: 100% 0 auto;
		padding: .75rem 1rem 1.25rem;
		background: var(--papel);
		border-bottom: 1px solid var(--borde);
		box-shadow: var(--sombra-alta);
		max-height: 76vh; overflow-y: auto;
	}
	.cabecera__nav[data-abierto="true"] { display: block; }

	.menu { flex-direction: column; align-items: stretch; gap: 0; }
	.menu > li > a { padding: .85rem .5rem; font-size: .86rem; color: var(--tinta); text-shadow: none; }
	.menu > li + li { border-top: 1px solid var(--borde); }
	.menu > li > a::after { display: none; }
	.menu > li.menu-item-has-children > a::before { right: .8rem; transform: rotate(45deg); }

	.menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 .5rem .75rem;
		min-width: 0;
	}

	/* En el desplegable de escritorio las dos columnas ahorran alto, pero
	   en 375 px parten los nombres largos ("ÁREA DE BILLAR Y / GAMER").
	   Aquí manda una sola columna. */
	.menu .sub-menu,
	.menu .sub-menu:has(> li:nth-child(7)) {
		columns: 1;
		width: auto;
		max-width: none;
	}
	.menu .sub-menu::before { display: none; }
	.menu .sub-menu a { padding: .5rem; color: var(--tinta-sub); }

}

@media (max-width: 560px) {
	.cabecera__cta span { display: none; }
	.cabecera__cta { padding: .7rem; }
	.cabecera__logo img { height: 36px; }
	.alternar-menu { padding: .55rem .75rem; font-size: .74rem; }
}

/* =====================================================================
   PORTADA · hero con imagen
   ===================================================================== */

.hero { position: relative; isolation: isolate; color: #fff; }


.hero__diapositivas { position: absolute; inset: 0; z-index: -2; }

.hero__diapositiva {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.hero__diapositiva[data-activa="true"] { opacity: 1; }
.hero__diapositiva img { width: 100%; height: 100%; object-fit: cover; }


.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	/* Velo negro, no azul: no tiñe la foto, solo la oscurece para que
	   el texto se lea. La intensidad se ajusta en Personalizar. */
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / calc(var(--hero-velo) * .45)) 0%,
		rgb(0 0 0 / calc(var(--hero-velo) * .85)) 55%,
		rgb(0 0 0 / var(--hero-velo)) 100%
	);
}

.hero__cuerpo {
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(82vh, 720px);
	padding-block: clamp(4rem, 12vw, 7rem) clamp(2.5rem, 6vw, 4rem);
}
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 24px rgb(0 0 0 / .55); }
.hero__bajada {
	max-width: 56ch;
	font-size: clamp(1.05rem, 1.9vw, 1.3rem);
	color: rgb(255 255 255 / .93);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* Pastillas que rotan con la diapositiva, con barra de progreso */
.hero__indice {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin-top: clamp(1.8rem, 4vw, 3rem);
	padding: 0; list-style: none;
}

.hero__indice button {
	position: relative;
	overflow: hidden;
	padding: .55rem 1rem;
	background: rgb(255 255 255 / .12);
	border: 1px solid rgb(255 255 255 / .32);
	border-radius: 999px;
	color: #fff; font: inherit; font-size: .82rem; font-weight: 600;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.hero__indice button:hover { background: rgb(255 255 255 / .24); }

/* Barra de progreso. Va al pie de la pastilla y no rellenando toda su
   superficie: el barrido de blanco sobre blanco dejaba media palabra
   ilegible mientras avanzaba.
   Es un elemento real y no un ::before porque JS tiene que reiniciarle
   la animación en cada cambio, y un pseudo-elemento no se puede tocar. */
.hero__indice .relleno {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--azul-500), var(--azul-700));
	border-radius: 0 0 999px 999px;
	pointer-events: none;
}

.hero__indice button > span { position: relative; z-index: 1; }

/* La activa: su barra recorre el intervalo configurado en Personalizar. */
.hero__indice button[aria-selected="true"] {
	background: #fff;
	border-color: #fff;
	color: var(--azul-900);
}
.hero__indice button[aria-selected="true"] .relleno {
	animation: eco-progreso var(--intervalo, 6s) linear forwards;
}

/* Cuando la siguiente foto aún no está descargada esperamos: la barra
   deja de avanzar y late, para que se note que está cargando. */
.hero__indice button[aria-selected="true"][data-esperando="true"] .relleno {
	animation: eco-cargando 1.1s ease-in-out infinite;
}

/* En pausa (puntero encima, foco dentro o pestaña oculta) se congela. */
.hero[data-pausa="true"] .hero__indice button[aria-selected="true"] .relleno {
	animation-play-state: paused;
}

@keyframes eco-progreso {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes eco-cargando {
	0%, 100% { transform: scaleX(.15); opacity: .5; }
	50%      { transform: scaleX(.45); opacity: 1; }
}

/* Sin animación: la activa se marca en sólido y no hay barra. */
@media (prefers-reduced-motion: reduce) {
	.hero__indice button[aria-selected="true"] .relleno {
		animation: none;
		transform: scaleX(1);
	}
}

/* Barra fina al pie del hero, por si las pastillas quedan fuera de vista */
.hero__barra {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	height: 3px;
	background: rgb(255 255 255 / .2);
}
.hero__barra span {
	display: block; height: 100%;
	transform-origin: left center; transform: scaleX(0);
	background: linear-gradient(90deg,
		var(--rojo) 0 25%, var(--amarillo) 25% 50%, var(--verde) 50% 75%, var(--azul-500) 75% 100%);
	animation: eco-progreso var(--intervalo, 6s) linear forwards;
}
.hero[data-pausa="true"] .hero__barra span { animation-play-state: paused; }
.hero[data-esperando="true"] .hero__barra span { animation: eco-cargando 1.1s ease-in-out infinite; }

/* Franja de datos rápidos bajo el hero */
.franja-datos {
	display: grid; gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	background: var(--borde);
	border-block: 1px solid var(--borde);
}
.franja-datos > div {
	display: flex; gap: .9rem; align-items: flex-start;
	padding: 1.4rem clamp(1rem, 3vw, 2rem);
	background: var(--papel);
}
.franja-datos svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--azul-500); }
.franja-datos b { display: block; color: var(--azul-900); font-size: .98rem; }
.franja-datos span { font-size: .86rem; color: var(--tinta-sub); }

/* =====================================================================
   Rejillas y tarjetas
   ===================================================================== */

.rejilla {
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }

.tarjeta {
	display: flex; flex-direction: column;
	background: var(--papel);
	border: 1px solid var(--borde); border-radius: var(--radio);
	overflow: hidden;
	transition: box-shadow .22s, transform .22s, border-color .22s;
}
.tarjeta:hover {
	box-shadow: var(--sombra-alta);
	transform: translateY(-3px);
	border-color: var(--azul-300);
}

.tarjeta__medio { position: relative; aspect-ratio: 4 / 3; background: var(--azul-100); overflow: hidden; }
.tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tarjeta:hover .tarjeta__medio img { transform: scale(1.045); }

.tarjeta__etiqueta {
	position: absolute; top: .8rem; left: .8rem;
	padding: .34rem .8rem; border-radius: 999px;
	background: rgb(18 36 92 / .86); color: #fff;
	font-size: .74rem; font-weight: 700; letter-spacing: .03em;
	backdrop-filter: blur(4px);
}

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .6rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1; }
.tarjeta__titulo { margin: 0; font-size: 1.12rem; }
.tarjeta__titulo a { color: inherit; text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tarjeta { position: relative; }
.tarjeta__titulo a:hover { color: var(--azul-700); }

.tarjeta__resumen {
	margin: 0; font-size: .89rem; color: var(--tinta-sub);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Lista corta de "qué trae" dentro de la tarjeta */
.tarjeta__puntos { list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--tinta-sub); }
.tarjeta__puntos li { position: relative; padding-left: 1.1rem; margin-bottom: .2rem; }
.tarjeta__puntos li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--azul-500);
}

.tarjeta__pie {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 1rem; margin-top: auto; padding-top: .7rem;
	border-top: 1px solid var(--borde);
}

.precio { display: flex; flex-direction: column; line-height: 1.15; }
.precio__cifra { font-size: 1.55rem; font-weight: 800; color: var(--azul-900); letter-spacing: -.02em; }
.precio__unidad { font-size: .76rem; color: var(--tinta-sub); }

/* --- tarjeta de paquete ------------------------------------------------ */

/* El precio va sobre la foto: es lo primero que busca quien compara,
   y así el cuerpo de la tarjeta queda libre para lo que incluye. */
.tarjeta--paquete .tarjeta__medio::after {
	content: "";
	position: absolute; inset: auto 0 0 0; height: 55%;
	background: linear-gradient(180deg, transparent, rgb(0 0 0 / .72));
	pointer-events: none;
}

.tarjeta__precio {
	position: absolute; bottom: .85rem; left: 1rem; right: 1rem;
	z-index: 1;
	display: flex; align-items: baseline; gap: .4rem;
	line-height: 1;
}
.tarjeta__precio .precio__cifra {
	color: #fff;
	font-size: 1.75rem;
	text-shadow: 0 2px 10px rgb(0 0 0 / .4);
}
.tarjeta__precio .precio__unidad { color: rgb(255 255 255 / .88); font-size: .78rem; }

.tarjeta--paquete .tarjeta__cuerpo { gap: .55rem; }

/* Cortesía: es el gancho de venta del paquete, así que se trata como un
   cupón y no como un aviso. La muesca de la izquierda y el borde
   discontinuo son lo que lo hacen leer como algo que te regalan. */
.regalo {
	position: relative;
	display: flex; align-items: center; gap: .6rem;
	margin: 0;
	padding: .55rem .7rem .55rem .85rem;
	background:
		linear-gradient(90deg, #fff6dc 0%, #fffdf6 60%);
	border: 1px dashed #e6c86a;
	border-left: 0;
	border-radius: 0 10px 10px 0;
	overflow: hidden;
}

/* Franja sólida y muesca: el recorte del cupón */
.regalo::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--amarillo), #e8a33c);
}
.regalo::after {
	content: "";
	position: absolute; left: -5px; top: 50%;
	width: 10px; height: 10px; margin-top: -5px;
	border-radius: 50%;
	background: var(--papel);
	box-shadow: inset -1px 0 0 #e6c86a;
}

.regalo__icono {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: linear-gradient(140deg, #ffe47a, #f0b03c);
	color: #5c4408;
	box-shadow: 0 1px 3px rgb(150 110 20 / .3);
}
.regalo__icono svg { width: 17px; height: 17px; }

.regalo__cuerpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.regalo__etiqueta {
	display: flex; align-items: center; gap: .35rem;
	font-size: .64rem; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase;
	color: #a07c16;
}

/* Contador cuando el paquete trae más de una cortesía */
.regalo__mas {
	padding: .05rem .3rem;
	border-radius: 999px;
	background: #a07c16;
	color: #fffdf6;
	font-size: .6rem; letter-spacing: .02em;
}

.regalo__detalle {
	font-size: .82rem; line-height: 1.35;
	color: #4a3a12;
	/* Dos líneas: lo justo para que se entienda el regalo sin romper la
	   altura de la tarjeta. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Al pasar por la tarjeta el cupón se aviva un poco */
.tarjeta:hover .regalo { border-color: #dbb845; }
.tarjeta:hover .regalo__icono { box-shadow: 0 2px 6px rgb(150 110 20 / .4); }

.tarjeta__extra { font-size: .78rem; color: var(--tinta-sub); }

.tarjeta--paquete .tarjeta__pie { align-items: center; }

.enlace-flecha {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .88rem; font-weight: 700; color: var(--azul-700); text-decoration: none;
}
.enlace-flecha::after { content: "→"; transition: transform .2s; }
.tarjeta:hover .enlace-flecha::after { transform: translateX(3px); }

/* =====================================================================
   Bloques de contenido de la portada
   ===================================================================== */

/* Bloque de dos columnas: texto + media */
.bloque-duo {
	display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.bloque-duo { grid-template-columns: 1fr 1fr; }
	.bloque-duo--invertido .bloque-duo__media { order: -1; }
}
.bloque-duo__media { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.bloque-duo__media img,
.bloque-duo__media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Tarjetas de las arcillas */
.arcillas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.arcilla {
	padding: 1.25rem; border-radius: var(--radio);
	background: var(--papel); border: 1px solid var(--borde);
	border-top: 4px solid var(--tono);
}
.arcilla h3 { margin-bottom: .3rem; font-size: 1.02rem; }
.arcilla p { margin: 0; font-size: .88rem; color: var(--tinta-sub); }
.arcilla--blanca   { --tono: #d8dee8; }
.arcilla--roja     { --tono: var(--rojo); }
.arcilla--amarilla { --tono: var(--amarillo); }

/* =====================================================================
   Ficha de paquete
   ===================================================================== */

.ficha { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 950px) { .ficha { grid-template-columns: 1fr 350px; align-items: start; } }

.ficha__portada { margin: 1.5rem 0 2rem; border-radius: var(--radio); overflow: hidden; }
.ficha__portada img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.ficha__texto :is(h2, h3) { margin-top: 1.6em; }
.ficha__texto :is(ul, ol) { padding-left: 1.25rem; }
.ficha__texto img { border-radius: var(--radio-sm); margin-block: 1rem; }
.ficha__texto figure { margin-inline: 0; }

/* Cuerpo de texto justificado en entradas, páginas e instalaciones.
   El guionado no es opcional aquí: justificar sin partir palabras abre
   huecos enormes entre palabras y forma "ríos" blancos verticales.
   El navegador parte en español porque el documento declara lang="es". */
.ficha__texto p,
.ficha__texto li {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	/* Evita que una palabra suelta quede colgando en la última línea */
	text-wrap: pretty;
}

/* Una línea corta justificada queda rarísima: dos palabras separadas por
   media pantalla. Por debajo de ese ancho volvemos a bandera. */
@media (max-width: 460px) {
	.ficha__texto p,
	.ficha__texto li { text-align: left; }
}

/* Los pies de foto y las citas no se justifican: son bloques cortos. */
.ficha__texto figcaption,
.ficha__texto blockquote p { text-align: left; hyphens: manual; }

.lista-check { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.lista-check li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; line-height: 1.55; }
.lista-check li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 1.2rem; height: 1.2rem; border-radius: 50%;
	background: var(--azul-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c4da2' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.lista-check--regalo li::before {
	background-color: #fff7d6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a07c00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='1'/%3E%3Cpath d='M8 6.5V14M2 9.5h12M5.5 6.5a1.8 1.8 0 1 1 2.5-2.4 1.8 1.8 0 1 1 2.5 2.4'/%3E%3C/svg%3E");
	background-size: 12px;
}

.panel-reserva {
	position: sticky; top: 94px;
	padding: 1.5rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-top: 4px solid var(--azul-700);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}
.panel-reserva .boton { width: 100%; justify-content: center; }

.tarifas { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.tarifas li {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: .6rem 0; border-bottom: 1px dashed var(--borde); font-size: .94rem;
}
.tarifas li:last-child { border-bottom: 0; }
.tarifas b { font-variant-numeric: tabular-nums; color: var(--azul-900); }
.tarifas .destacada b { font-size: 1.35rem; }

.aviso {
	margin-top: 1rem; padding: .75rem .95rem;
	border-left: 3px solid var(--amarillo);
	background: #fffdf2; border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
	font-size: .82rem; color: var(--tinta-sub);
}

/* Migas · en una sola línea, sin desbordar en móvil */
.migas {
	display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
	margin-bottom: .6rem;
	font-size: .82rem; line-height: 1.2;
	color: var(--tinta-sub);
}
.migas a { color: var(--azul-700); text-decoration: none; font-weight: 600; }
.migas a:hover { text-decoration: underline; }
.migas span { margin-inline: .4rem; opacity: .5; }

/* Cabecera compacta: la foto, las migas, el título y el precio comparten
   el mismo espacio en vez de apilarse. Antes el primer "Incluye" quedaba
   a 455 px del inicio; así arranca mucho antes. */
.paquete-hero { position: relative; isolation: isolate; color: #fff; }
.paquete-hero > img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
}
.paquete-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / calc(var(--hero-velo) * .45)),
		rgb(0 0 0 / calc(var(--hero-velo) + .15))
	);
}
.paquete-hero__cuerpo {
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(32vh, 260px);
	padding-block: clamp(1.5rem, 4vw, 2.25rem) clamp(1.1rem, 2.5vw, 1.5rem);
}
.paquete-hero h1 { margin: 0; color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.paquete-hero .migas { color: rgb(255 255 255 / .82); margin-bottom: .5rem; }
.paquete-hero .migas a { color: #fff; }

.paquete-hero__fila {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: 1rem 2rem;
}
.paquete-hero__precio {
	display: flex; flex-direction: column; align-items: flex-end;
	margin: 0; line-height: 1.1;
}
.paquete-hero__precio .precio__cifra { color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.paquete-hero__precio .precio__unidad { color: rgb(255 255 255 / .8); }

/* Sin foto no dejamos un bloque vacío: se pinta el degradado de marca. */
.paquete-hero:not(:has(> img)) {
	background: linear-gradient(135deg, var(--azul-900), var(--azul-700));
}

/* Tras una cabecera con foto no hace falta tanto aire arriba: el propio
   corte de la imagen ya separa las dos zonas. */
.paquete-hero + .seccion,
.instalacion-hero + .seccion { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* El panel lateral se alinea con el contenido, no queda flotando abajo */
.ficha__detalle > h2:first-child { margin-top: 0; }
.panel-reserva { margin-top: 0; }

/* Navegación entre paquetes (anterior / siguiente) */
.salto-paquetes {
	display: grid; gap: 1rem; margin-top: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.salto-paquetes a {
	display: block; padding: 1rem 1.2rem;
	border: 1px solid var(--borde); border-radius: var(--radio);
	text-decoration: none; background: var(--papel);
	transition: border-color .2s, box-shadow .2s;
}
.salto-paquetes a:hover { border-color: var(--azul-300); box-shadow: var(--sombra); }
.salto-paquetes small { display: block; font-size: .75rem; color: var(--tinta-sub); text-transform: uppercase; letter-spacing: .08em; }
.salto-paquetes b { color: var(--azul-900); }
.salto-paquetes .siguiente { text-align: right; }

/* =====================================================================
   Instalaciones
   ===================================================================== */

.instalacion-hero { position: relative; isolation: isolate; color: #fff; }
.instalacion-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.instalacion-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / calc(var(--hero-velo) * .5)),
		rgb(0 0 0 / var(--hero-velo))
	);
}
.instalacion-hero__cuerpo {
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(40vh, 340px);
	padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.2rem, 3vw, 1.75rem);
}
.instalacion-hero h1 { color: #fff; margin: 0; }
.instalacion-hero .migas { color: rgb(255 255 255 / .8); }
.instalacion-hero .migas a { color: #fff; }

.galeria-instalacion {
	display: grid; gap: .75rem; margin-top: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.galeria-instalacion img { border-radius: var(--radio-sm); aspect-ratio: 1; object-fit: cover; }

/* Otras instalaciones, al pie de la ficha */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips a {
	display: inline-block; padding: .5rem 1rem;
	background: var(--papel); border: 1px solid var(--borde); border-radius: 999px;
	font-size: .87rem; font-weight: 600; color: var(--azul-700); text-decoration: none;
}
.chips a:hover { background: var(--azul-100); border-color: var(--azul-300); }

/* =====================================================================
   Filtros, paginación, búsqueda
   ===================================================================== */

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem 2rem; }
.filtros .es-activo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.filtros .es-activo:hover { background: var(--azul-500); color: #fff; }

.pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding-inline: .6rem;
	border: 1px solid var(--borde); border-radius: var(--radio-sm);
	text-decoration: none; color: var(--tinta); font-weight: 600;
}
.pagination .page-numbers:hover { background: var(--azul-100); }
.pagination .current { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }

.search-form { display: flex; gap: .5rem; margin-top: 1.5rem; }
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%; padding: .75rem 1rem;
	border: 1px solid var(--borde); border-radius: var(--radio-sm); font: inherit;
}
.search-form .search-submit {
	padding: .75rem 1.3rem; border: 0; border-radius: var(--radio-sm);
	background: var(--azul-700); color: #fff; font-weight: 600; cursor: pointer;
}

/* =====================================================================
   Pie
   ===================================================================== */

.pie { margin-top: clamp(3rem, 7vw, 5rem); background: var(--pie-fondo); color: #9fb0c8; }

/* Franja del logo como remate superior del pie */
.pie::before {
	content: ""; display: block; height: 5px;
	background: linear-gradient(90deg,
		var(--rojo) 0 25%, var(--amarillo) 25% 50%, var(--verde) 50% 75%, var(--azul-700) 75% 100%);
}

.pie__interior { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.pie a { color: #dce7f4; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie h3 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }

.pie__rejilla {
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.pie__marca img { max-height: 56px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; font-size: .91rem; }

/* Los títulos vienen dispares de la base ("PARQUEADERO" junto a
   "Caminata a la selva"), así que la uniformidad la pone el CSS y no
   el contenido: da igual cómo se escriban los títulos a futuro. */
.pie__lista a {
	text-transform: uppercase;
	letter-spacing: .03em;   /* las mayúsculas necesitan algo más de aire */
	font-size: .86rem;
}

.pie__contacto li { display: flex; gap: .6rem; align-items: flex-start; }
.pie__contacto svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: .25em; color: var(--azul-300); }

.pie__legal {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	margin-top: 2.5rem; padding-top: 1.3rem;
	border-top: 1px solid rgb(255 255 255 / .13);
	font-size: .82rem;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }


/* =====================================================================
   Botón flotante de WhatsApp (propio, sin plugin)
   ===================================================================== */

.wa-flotante {
	position: fixed;
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 200;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem 1.15rem;
	background: #25d366;
	color: #06301a;
	border-radius: 999px;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 22px rgb(0 0 0 / .28);
	transition: transform .2s, box-shadow .2s;
}
.wa-flotante:hover {
	color: #06301a;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgb(0 0 0 / .34);
}
.wa-flotante svg { width: 24px; height: 24px; flex-shrink: 0; }

.wa-flotante[data-posicion="derecha"]   { right: clamp(1rem, 3vw, 1.75rem); }
.wa-flotante[data-posicion="izquierda"] { left:  clamp(1rem, 3vw, 1.75rem); }

/* En móvil dejamos solo el icono para no tapar contenido */
@media (max-width: 560px) {
	.wa-flotante { padding: .85rem; }
	.wa-flotante span { display: none; }
}

/* =====================================================================
   Caja de luz de las galerías
   ===================================================================== */

body.con-caja-luz { overflow: hidden; }

/* Esta regla tiene que ir ANTES y ganarle a la de abajo: un
   `display` declarado por el autor anula el [hidden]{display:none} del
   navegador, porque las hojas del autor pesan más que las de la UA.
   Sin esto, poner el atributo hidden no ocultaba nada. */
.caja-luz[hidden] { display: none !important; }

.caja-luz {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgb(8 12 22 / .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: eco-aparecer .2s ease;
}

@keyframes eco-aparecer { from { opacity: 0; } to { opacity: 1; } }

.caja-luz__marco {
	margin: 0;
	display: flex; flex-direction: column; align-items: center; gap: .8rem;
	max-width: 100%; max-height: 100%;
}
.caja-luz__marco img {
	max-width: 100%;
	max-height: calc(100vh - 10rem);
	width: auto; height: auto;
	border-radius: var(--radio-sm);
	box-shadow: 0 24px 70px rgb(0 0 0 / .5);
	transition: opacity .2s;
}
.caja-luz[data-cargando="true"] .caja-luz__marco img { opacity: .25; }

.caja-luz figcaption {
	max-width: 60ch;
	color: rgb(255 255 255 / .82);
	font-size: .88rem; text-align: center;
}

/* Indicador de carga: el aro solo aparece mientras descarga la foto */
.caja-luz::before {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 3px solid rgb(255 255 255 / .25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0; pointer-events: none;
	animation: eco-girar .8s linear infinite;
}
.caja-luz[data-cargando="true"]::before { opacity: 1; }

@keyframes eco-girar { to { transform: rotate(360deg); } }

.caja-luz__cerrar,
.caja-luz__nav {
	position: absolute; z-index: 1;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	background: rgb(255 255 255 / .12);
	border: 1px solid rgb(255 255 255 / .28);
	border-radius: 50%;
	color: #fff; cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.caja-luz__cerrar:hover,
.caja-luz__nav:hover { background: rgb(255 255 255 / .26); }
.caja-luz__cerrar svg,
.caja-luz__nav svg { width: 22px; height: 22px; }

.caja-luz__cerrar { top: clamp(.75rem, 2.5vw, 1.5rem); right: clamp(.75rem, 2.5vw, 1.5rem); }
.caja-luz__nav--prev { left: clamp(.5rem, 2.5vw, 1.75rem); top: 50%; margin-top: -23px; }
.caja-luz__nav--next { right: clamp(.5rem, 2.5vw, 1.75rem); top: 50%; margin-top: -23px; }

.caja-luz__contador {
	position: absolute; bottom: clamp(.75rem, 2.5vw, 1.5rem); left: 0; right: 0;
	margin: 0; text-align: center;
	color: rgb(255 255 255 / .7);
	font-size: .82rem; font-variant-numeric: tabular-nums;
}

/* Las galerías se ven clicables */
.ficha__texto a[href$=".jpg"],
.ficha__texto a[href$=".jpeg"],
.ficha__texto a[href$=".png"],
.ficha__texto a[href$=".webp"] { cursor: zoom-in; display: block; }

@media (prefers-reduced-motion: reduce) {
	.caja-luz { animation: none; }
	.caja-luz::before { animation-duration: 2s; }
}

/* Galerías sin enlace: la imagen abre igual la caja de luz */
.ficha__texto .wp-block-gallery img { cursor: zoom-in; }

/* =====================================================================
   Paralaje
   Con animaciones ligadas al scroll (animation-timeline). Sin escuchar
   el evento scroll en JS: el navegador lo resuelve en el compositor, así
   que no roba trabajo al hilo principal ni entrecorta el desplazamiento.
   Donde no esté soportado, la imagen simplemente se queda quieta.
   ===================================================================== */

/* El hero NO lleva paralaje: al estar arriba del todo obligaba a
   escalar la foto un 12% de forma permanente para que el desplazamiento
   no descubriera los bordes, y eso recortaba la imagen y estropeaba la
   portada. El paralaje se queda solo en las bandas intermedias, que sí
   cruzan la pantalla entera y pueden moverse sin recortes visibles. */
@keyframes eco-paralaje-cruce {
	from { transform: translate3d(0, -8%, 0) scale(1.16); }
	to   { transform: translate3d(0,  8%, 0) scale(1.16); }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		.con-paralaje .banda-paralaje__fondo {
			animation: eco-paralaje-cruce linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* --- banda con foto de fondo ------------------------------------------ */

.banda-paralaje {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
}
.banda-paralaje__fondo {
	position: absolute; inset: 0; z-index: -2;
	/* La escala evita que se vean los bordes al desplazarse. */
	transform: scale(1.16);
}
.banda-paralaje__fondo img { width: 100%; height: 100%; object-fit: cover; }

.banda-paralaje::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / calc(var(--hero-velo) * .7)),
		rgb(0 0 0 / calc(var(--hero-velo) + .12))
	);
}
.banda-paralaje h2 { color: #fff; }
.banda-paralaje p { color: rgb(255 255 255 / .9); }

/* =====================================================================
   Página de contacto
   ===================================================================== */

.contacto { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) {
	.contacto { grid-template-columns: 1fr 340px; }
}

.contacto__intro {
	max-width: 56ch;
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	color: var(--tinta-sub);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* --- canales de contacto ---------------------------------------------- */

.contacto__canales { display: flex; flex-direction: column; gap: .75rem; }

.canal {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.canal:hover {
	border-color: var(--azul-300);
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

.canal__icono {
	flex-shrink: 0;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--azul-100);
	color: var(--azul-700);
}
.canal__icono svg { width: 22px; height: 22px; }

/* WhatsApp con su color, que es lo que la gente reconoce */
.canal--wa .canal__icono { background: #e7f9ee; color: #128c4a; }
.canal--wa:hover { border-color: #8fdcae; }

.canal__cuerpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.canal__cuerpo b { color: var(--azul-900); font-size: 1rem; }
.canal__cuerpo span {
	font-size: .88rem; color: var(--tinta-sub);
	overflow-wrap: anywhere;   /* los correos largos no desbordan */
}

.canal__flecha {
	margin-left: auto;
	color: var(--azul-500);
	font-size: 1.1rem;
	transition: transform .2s;
}
.canal:hover .canal__flecha { transform: translateX(4px); }

/* --- ficha de ubicación ----------------------------------------------- */

.contacto__ficha {
	position: sticky; top: 130px;
	padding: 1.5rem;
	background: var(--papel-alt);
	border: 1px solid var(--borde);
	border-top: 4px solid var(--azul-700);
	border-radius: var(--radio);
}
.contacto__ficha h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.contacto__ficha .boton { width: 100%; justify-content: center; }

.contacto__direccion { font-size: .95rem; line-height: 1.55; margin-bottom: .75rem; }

.contacto__horario {
	display: flex; align-items: center; gap: .45rem;
	margin-bottom: 1.25rem;
	font-size: .9rem; font-weight: 600;
	color: var(--azul-700);
}
.contacto__horario svg { width: 17px; height: 17px; flex-shrink: 0; }

.contacto__nota {
	margin: 1rem 0 0;
	font-size: .83rem; line-height: 1.5;
	color: var(--tinta-sub);
}

@media (max-width: 899px) {
	.contacto__ficha { position: static; }
}

/* --- mapa -------------------------------------------------------------- */

.contacto__mapa { border-top: 1px solid var(--borde); }
.contacto__mapa iframe {
	display: block; width: 100%; height: clamp(320px, 48vh, 480px);
	border: 0;
}

/* =====================================================================
   "Sigue explorando" · salida al final de los listados
   ===================================================================== */

.explora__rejilla {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.explora__zona {
	position: relative;
	display: flex; flex-direction: column; gap: .4rem;
	padding: 1.4rem 1.3rem 3.1rem;
	background: var(--papel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.explora__zona:hover {
	border-color: var(--azul-300);
	box-shadow: var(--sombra);
	transform: translateY(-3px);
}

.explora__icono {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	margin-bottom: .35rem;
	border-radius: 12px;
	background: var(--azul-100);
	color: var(--azul-700);
}
.explora__icono svg { width: 22px; height: 22px; }

.explora__zona b { color: var(--azul-900); font-size: 1.05rem; }
.explora__texto { font-size: .87rem; line-height: 1.5; color: var(--tinta-sub); }

.explora__flecha {
	position: absolute; left: 1.3rem; bottom: 1.2rem;
	font-size: 1.05rem; font-weight: 700; color: var(--azul-700);
	transition: transform .2s;
}
.explora__zona:hover .explora__flecha { transform: translateX(4px); }

.explora__cta { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; text-align: center; }

/* =====================================================================
   Aviso de protección de datos
   Discreto a propósito: informa sin robarle la pantalla al contenido.
   ===================================================================== */

.aviso-datos {
	position: fixed;
	left: clamp(.6rem, 2vw, 1.25rem);
	bottom: clamp(.6rem, 2vw, 1.25rem);
	z-index: 250;   /* sobre el botón flotante (200), bajo la caja de luz (300) */

	display: flex; flex-wrap: wrap; align-items: center;
	gap: .5rem .9rem;
	width: min(calc(100% - 1.2rem), 440px);
	padding: .7rem .85rem;

	background: rgb(255 255 255 / .97);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--borde);
	border-radius: var(--radio-sm);
	box-shadow: 0 4px 16px rgb(18 36 92 / .12);

	animation: eco-aviso-entra .3s ease both;
	transition: opacity .3s ease, transform .3s ease;
}

@keyframes eco-aviso-entra {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.aviso-datos[data-saliendo="true"] {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

/* Una regla de display del autor gana al [hidden] del navegador. */
.aviso-datos[hidden] { display: none !important; }

.aviso-datos__texto {
	flex: 1 1 100%;
	margin: 0;
	font-size: .76rem; line-height: 1.45;
	color: var(--tinta-sub);
}

.aviso-datos__acciones {
	display: flex; align-items: center; gap: .85rem;
	margin-left: auto;
}

.aviso-datos__enlace {
	font-size: .76rem; font-weight: 600;
	color: var(--azul-700);
	white-space: nowrap;
}

/* Botón sobrio: no compite con "Reservar", que es la acción que sí
   queremos que destaque. */
.aviso-datos__aceptar {
	padding: .4rem 1rem;
	background: var(--azul-100);
	color: var(--azul-700);
	border: 1px solid var(--azul-300);
	box-shadow: none;
	font-size: .78rem; font-weight: 700;
}
.aviso-datos__aceptar:hover {
	background: var(--azul-700);
	color: #fff;
	border-color: var(--azul-700);
	box-shadow: none;
}

/* El botón flotante de WhatsApp está a la derecha y el aviso a la
   izquierda, así que ya no hace falta apartarlo. */

@media (max-width: 560px) {
	.aviso-datos {
		left: .6rem; right: .6rem;
		width: auto;
	}
	.aviso-datos__acciones { width: 100%; justify-content: space-between; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.aviso-datos { animation: none; transition: none; }
}

/* Enlace a la propiedad hermana, en el pie */
.pie__grupo {
	display: inline-flex; flex-direction: column; gap: .1rem;
	margin-top: 1.1rem;
	padding: .6rem .9rem;
	background: rgb(255 255 255 / .07);
	border: 1px solid rgb(255 255 255 / .14);
	border-radius: var(--radio-sm);
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}
.pie__grupo:hover {
	background: rgb(255 255 255 / .13);
	border-color: rgb(255 255 255 / .3);
	text-decoration: none;
}
.pie__grupo-titulo {
	font-size: .7rem; font-weight: 800;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--azul-300);
}
.pie__grupo-detalle { font-size: .84rem; color: #dce7f4; }

/* Selector de idioma. Solo aparece cuando hay más de uno. */
.idiomas { display: flex; align-items: center; gap: .1rem; }
.idiomas a {
	padding: .35rem .5rem;
	border-radius: var(--radio-sm);
	font-size: .76rem; font-weight: 700; letter-spacing: .05em;
	color: var(--tinta-sub); text-decoration: none;
}
.idiomas a:hover { background: var(--azul-100); color: var(--azul-700); }
.idiomas a[aria-current="true"] { color: var(--azul-700); background: var(--azul-100); }
@media (max-width: 560px) { .idiomas a { padding: .3rem .35rem; font-size: .72rem; } }