/* Green & Blue Villas — listado y ficha de villa con el lenguaje de la home y Experiencias
   (docs/diseno-villas.md, «Sumario y reportaje»). Móvil primero. Todo el movimiento va bajo html.animar. */

:root { --ambar-oscuro: #8a5f00; }
body.sin-scroll { overflow: hidden; }

/* De la tarjeta a la ficha, y vuelta: transición nativa entre páginas (la foto con nombre «villa-foto» crece) */
@view-transition { navigation: auto; }
::view-transition-group(villa-foto) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1); }
/* La cabecera tiene su propio grupo y no se mueve: se funde en su sitio (sin el destello del fundido general) */
.cabecera { view-transition-name: cabecera; }
::view-transition-group(cabecera) { animation-name: none; } /* sin moverse, pero old y new se funden (0,25 s) */
/* Si la foto solo está en una de las dos páginas, se funde con la página (no se queda flotando 0,5 s) */
::view-transition-old(villa-foto):only-child, ::view-transition-new(villa-foto):only-child { animation-duration: 0.2s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
/* Sin espacio: los ::view-transition-* nacen del propio <html>, no de un descendiente */
html:not(.animar)::view-transition-group(*), html:not(.animar)::view-transition-old(*), html:not(.animar)::view-transition-new(*) { animation: none; }

/* ── Piezas comunes ──────────────────────────────────────────────────────── */
.punto-tipo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.punto-tipo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgb(144 201 71 / 0.22); }
.punto-tipo--blue::before { background: #2f8fb8; box-shadow: 0 0 0 3px rgb(47 143 184 / 0.22); }
.punto-tipo--city::before { background: #3d7f93; box-shadow: 0 0 0 3px rgb(61 127 147 / 0.22); }
.punto-tipo--specials::before { background: var(--ambar); box-shadow: 0 0 0 3px rgb(217 154 0 / 0.22); }
/* Sobre blanco (tarjeta), los tonos del diseño: azul de marca y ámbar oscuro; los claros quedan para la portada oscura */
.villa__ante .punto-tipo--blue::before { background: var(--azul); }
.villa__ante .punto-tipo--city::before { background: var(--azul-noche); }
.villa__ante .punto-tipo--specials::before { background: var(--ambar-oscuro); }

.boton-vidrio {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; background: rgb(12 30 36 / 0.32);
	-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
	color: #fff; font-size: var(--t-s); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
	transition: background-color var(--suave), border-color var(--suave);
}
.boton-vidrio:hover { background: rgb(12 30 36 / 0.5); border-color: rgb(255 255 255 / 0.6); }
.boton-vidrio .icono { width: 18px; height: 18px; }
.boton-vidrio--redondo { width: 44px; padding: 0; }
.boton-vidrio--fav[aria-pressed="true"] .icono { fill: #ff6b6b; stroke: #ff6b6b; }
.boton-vidrio:focus-visible { outline-color: #fff; }

.porque { display: flex; flex-wrap: wrap; gap: 6px; }
.porque span { padding: 4px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-oscuro); font-size: var(--t-xs); }

/* ── Tarjeta «portadilla» (listado y parecidas) ──────────────────────────── */
.villa--revista { position: relative; }
.villa--revista .villa__enlace { display: grid; gap: 14px; height: 100%; color: inherit; text-decoration: none; }
.villa--revista .villa__enlace:focus-visible { outline-offset: 6px; border-radius: var(--radio); }
.villa--revista .villa__foto { display: block; aspect-ratio: 3 / 2; border-radius: 20px; background: var(--tono, var(--verde-suave)); }
.villa--revista .villa__foto img { display: block; }
.villa--revista .villa__enlace:hover .villa__foto img, .villa--revista .villa__enlace:focus-visible .villa__foto img { transform: scale(1.04); }
.villa--revista .villa__cuerpo { display: grid; gap: 6px; padding: 0 2px; }
.villa__ante { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.villa__ante .punto-tipo { letter-spacing: 0.08em; color: var(--tinta); }
.villa--revista .villa__nombre { margin: 2px 0 0; font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.villa--revista .villa__nombre em { display: block; margin-bottom: 2px; font-size: max(1rem, 0.5em); font-style: italic; color: var(--tinta-suave); }
.villa--revista .villa__nombre > span {
	background: linear-gradient(90deg, var(--verde), var(--azul)) no-repeat 0 100% / 0 1.5px; padding-bottom: 2px;
	transition: background-size 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.villa--revista .villa__enlace:hover .villa__nombre > span, .villa--revista .villa__enlace:focus-visible .villa__nombre > span { background-size: 100% 1.5px; }
.villa--revista .villa__enlace:hover .villa__nombre { text-decoration: none; }
.villa--revista .villa__nombre small, .siguiente-casa__nombre small { display: block; margin-top: 4px; font-size: max(0.95rem, 0.5em); font-style: italic; letter-spacing: 0; color: var(--tinta-suave); }
/* Al volver de una ficha con «atrás», la casa de la que se viene se marca un momento */
.villa--revista.is-vuelta .villa__foto { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--verde); }
.animar .villa--revista.is-vuelta .villa__foto { animation: casa-vuelta 1.6s ease both; }
@keyframes casa-vuelta { 0%, 60% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--verde); } 100% { box-shadow: 0 0 0 3px transparent, 0 0 0 6px transparent; } }
.villa__rasgos { font-family: var(--f-titulo); font-style: italic; font-size: 1.0625rem; color: var(--verde-oscuro); }
.villa__pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: var(--t-s); color: var(--tinta-suave); }
.villa__desde { white-space: nowrap; }
.villa__desde b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.3rem; color: var(--tinta); }
.villa--revista .porque { margin-top: 4px; }
.villa--revista .villa__fav { top: 12px; right: 12px; }

/* Hojear en la tarjeta (listado): las flechas van en una capa con la proporción de la foto, centradas en ella
   (sin consultas de contenedor, que obligaban a maquetar cada tarjeta por separado) */
.villa--revista[data-hojas] .villa__foto { touch-action: pan-y; }
.villa__hoja { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.villa__hoja.is-vista { opacity: 1; }
.villa__hoja.is-vista.is-oculta { opacity: 0; }
.animar .villa__foto .villa__hoja { transition: opacity 0.28s ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.animar .villa__foto .villa__hoja.is-vista { animation: hoja-funde 0.28s ease backwards; }
@keyframes hoja-funde { from { opacity: 0; } }
/* Las flechas, solo cuando listado.js las ha enganchado (antes se veían y no hacían nada) */
.listado:not(.con-hojear) .villa__hojear { visibility: hidden; }
.villa__hojear-n[hidden], .villa__entrar[hidden] { display: none; }
html:not(.js) .villa__hojear { display: none; } /* sin JS no hay hojear */
.villa__hojear-n { position: absolute; left: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgb(12 30 36 / 0.5); color: #fff; font-size: var(--t-xs); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.villa__entrar {
	position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center;
	background: rgb(8 26 32 / 0.66);
	color: #fff; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.2;
}
.villa__hojear { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; justify-content: space-between; aspect-ratio: 3 / 2; padding-inline: 4px; pointer-events: none; }
.villa__hojear button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; pointer-events: auto; }
.villa__hojear .icono { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.9); box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); transition: transform var(--suave); }
.villa__hojear button:hover .icono { transform: scale(1.08); }
@media (hover: hover) {
	.villa__hojear button { opacity: 0; transition: opacity var(--suave); }
	.villa--revista:hover .villa__hojear button, .villa__hojear button:focus-visible { opacity: 1; }
}
@media (min-width: 760px) { .listado .villa.is-abre .villa__hojear { aspect-ratio: 16 / 9; } }
@media (max-width: 759px) { .listado .villa.is-abre .villa__hojear { aspect-ratio: 4 / 5; } }

/* ── F1 · Portada de cine de la casa ─────────────────────────────────────── */
.ficha--casa { padding-top: 0; }
/* Fondo mientras llega la foto: el tono de la casa oscurecido (el texto blanco sigue leyéndose) */
.portada-casa { position: relative; isolation: isolate; height: 78svh; min-height: 480px; max-height: 1000px; overflow: hidden; background-color: color-mix(in oklab, var(--tono, #0b1b20) 45%, #0b1b20); color: #fff; }
@media (min-width: 960px) { .portada-casa { height: 92svh; min-height: 600px; } }
/* Una sola foto (sin galería): en escritorio no se estira a todo el ancho; detrás, la misma foto muy desenfocada */
@media (min-width: 960px) {
	.portada-casa--una { height: min(78svh, 733px); }
	.portada-casa--una::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--foto) center / cover; filter: blur(40px) saturate(1.1) brightness(0.7); }
	.portada-casa--una .portada-casa__foto { max-width: 1100px; margin-inline: auto; }
}
.portada-casa__tira.is-abre-visor .portada-casa__foto { cursor: zoom-in; }
.portada-casa__tira { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.portada-casa__tira::-webkit-scrollbar { display: none; }
.portada-casa__tira:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.portada-casa__foto { flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.portada-casa__foto img { width: 100%; height: 100%; object-fit: cover; }
.animar .portada-casa__foto:first-child img { transform: scale(1.02); animation: casa-acercar-tarde 9s cubic-bezier(0.25, 0.6, 0.3, 1) 1.6s backwards; }
.animar .portada-casa.is-lista .portada-casa__foto:first-child img { animation: casa-acercar 9s cubic-bezier(0.25, 0.6, 0.3, 1) backwards; }
@keyframes casa-acercar { from { transform: scale(1.12); } }
@keyframes casa-acercar-tarde { from { transform: scale(1.12); } }
.portada-casa__velo {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	/* Más oscuro antes: el antetítulo y «Villa» (texto pequeño) quedan sobre un velo de 0,6 o más (contraste 4,5:1) */
	background: linear-gradient(180deg, rgb(4 18 22 / 0.5) 0%, rgb(4 18 22 / 0) 24%, rgb(4 18 22 / 0) 34%, rgb(4 18 22 / 0.6) 58%, rgb(4 18 22 / 0.82) 80%, rgb(4 18 22 / 0.9) 100%);
}
.portada-casa__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(84px, 11svh, 120px); pointer-events: none; text-shadow: 0 1px 18px rgb(0 0 0 / 0.35); }
.portada-casa__ante { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; }
.portada-casa__ante .punto-tipo { letter-spacing: 0.1em; }
.portada-casa__titulo { margin-top: 12px; font-size: clamp(2.8rem, 1.2rem + 6.4vw, 7.2rem); line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.portada-casa__pre { display: block; margin-bottom: 0.08em; font-size: max(1.25rem, 0.36em); font-style: italic; letter-spacing: 0; opacity: 0.92; }
.portada-casa__nombre { display: block; }
.portada-casa__sub { display: block; margin-top: 0.3em; font-size: max(1.15rem, 0.24em); font-style: italic; letter-spacing: 0; opacity: 0.92; }
.portada-casa__desde { margin-top: 16px; font-size: var(--t-m); }
.portada-casa__desde strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.6em; letter-spacing: -0.01em; }
/* Entrada de cine, como la home: cada línea del título sale de su máscara y después aparecen el antetítulo y el
   precio. Espera a que la primera foto esté lista (.is-lista, villa.js); si el JS no llega, entra igual a los 1,6 s.
   Dos nombres de animación para que el cambio de clase la arranque de cero. Solo transform/opacity. */
.portada-casa__linea { display: block; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.animar .portada-casa__linea { clip-path: inset(-0.6em -1em 0 -1em); } /* solo tapa por abajo, por donde entra */
.portada-casa__linea > span { display: inline-block; }
.portada-casa__pre.portada-casa__linea { margin-bottom: -0.04em; } /* la máscara se come 0,12em: deja los 0,08em de antes */
.portada-casa__pre { --d: 0.05s; }
.portada-casa__nombre { --d: 0.2s; }
.portada-casa__sub { --d: 0.35s; }
.animar .portada-casa__linea > span { animation: casa-linea-tarde 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) calc(1.6s + var(--d, 0s)) backwards; }
.animar .portada-casa.is-lista .portada-casa__linea > span { animation: casa-linea 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) var(--d, 0s) backwards; }
.animar .portada-casa__ante, .animar .portada-casa__desde { animation: casa-aparecer-tarde 0.9s ease calc(1.6s + var(--d, 0.7s)) backwards; }
.animar .portada-casa.is-lista .portada-casa__ante, .animar .portada-casa.is-lista .portada-casa__desde { animation: casa-aparecer 0.9s ease var(--d, 0.7s) backwards; }
.portada-casa__ante { --d: 0.65s; }
.portada-casa__desde { --d: 0.85s; }
@keyframes casa-linea { from { transform: translateY(110%); } }
@keyframes casa-linea-tarde { from { transform: translateY(110%); } }
@keyframes casa-aparecer { from { opacity: 0; transform: translateY(12px); } }
@keyframes casa-aparecer-tarde { from { opacity: 0; transform: translateY(12px); } }
/* Mandos y acciones alineados con el título y la cabecera (la envoltura de 1280 px), no con el borde de la ventana */
.portada-casa { --margen: max(var(--hueco), calc((100% - 1280px) / 2 + var(--hueco))); }
.portada-casa__mandos { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: var(--margen); }
.portada-casa__pasos { display: inline-flex; align-items: center; gap: 10px; }
.portada-casa__pasos[hidden] { display: none; }
.portada-casa__cuenta { min-width: 4.5ch; font-variant-numeric: tabular-nums; font-size: var(--t-s); text-align: center; text-shadow: 0 1px 8px rgb(0 0 0 / 0.4); }
.portada-casa__mandos > .boton-vidrio { margin-left: auto; }
.portada-casa__acciones { position: absolute; top: calc(var(--cabecera) + 12px); right: var(--margen); z-index: 3; display: flex; gap: 8px; }
@media (min-width: 1120px) { .portada-casa__acciones { top: calc(var(--cabecera) + 20px); } }
/* Móvil: mientras el aviso de la demo está arriba, compartir y favorita bajan para no quedar debajo */
@media (max-width: 767px) { body:has(.aviso-demo:not([hidden]):not(.is-ido)) .portada-casa__acciones { top: calc(var(--cabecera) + 70px); } }

.migas--casa { padding-block: 14px 0; }
.migas--casa ol { font-size: var(--t-xs); }

/* ── F2 · La casa en una mirada ──────────────────────────────────────────── */
.mirada { display: grid; gap: 22px; padding-block: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); }
.mirada__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; margin: 0; }
.mirada__cifra { display: flex; flex-direction: column-reverse; gap: 2px; padding-inline: 16px; border-left: 1px solid var(--linea); }
.mirada__cifra:nth-child(odd) { padding-left: 0; border-left: 0; }
.mirada__cifra dd { margin: 0; font-family: var(--f-titulo); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.mirada__cifra dt { font-size: var(--t-s); color: var(--tinta-suave); }
@media (min-width: 700px) {
	.mirada__cifras { display: flex; flex-wrap: wrap; gap: 18px 0; }
	.mirada__cifra { padding-inline: clamp(20px, 3vw, 40px); }
	.mirada__cifra:nth-child(odd) { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--linea); }
	.mirada__cifra:first-child { padding-left: 0; border-left: 0; }
}
.mirada__rasgos { display: flex; gap: 8px; margin-inline: calc(var(--hueco) * -1); padding: 2px var(--hueco); overflow-x: auto; scrollbar-width: none; }
.mirada__rasgos::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .mirada__rasgos { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; } }
.mirada__rasgo { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-s); white-space: nowrap; }
.mirada__rasgo .icono { width: 18px; height: 18px; color: var(--acento, var(--verde-oscuro)); }
.mirada__rasgo--raro { background: var(--verde-claro); box-shadow: none; color: var(--verde-oscuro); }
.mirada__licencia { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--tinta-suave); }
/* Escritorio: la misma rejilla que el cuerpo; las cifras a la izquierda y, alineado con la caja de reserva, lo que
   distingue a la casa y la licencia (sin el hueco blanco a la derecha) */
@media (min-width: 1040px) {
	.mirada { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: center; }
	.mirada__cifras { grid-row: span 2; }
	.mirada__rasgos, .mirada__licencia { grid-column: 2; }
	.mirada__rasgos { align-self: end; }
	.mirada__licencia { align-self: start; }
}
.mirada__licencia .icono { width: 16px; height: 16px; color: var(--verde-oscuro); }

/* ── F3 · Índice de la casa (mismo lenguaje que Experiencias) ────────────── */
/* Rendimiento: sin desenfoque de fondo (con un blanco al 97 % no se veía, y en un equipo sin tarjeta gráfica se
   recalculaba en cada fotograma del desplazamiento). Lo que se mueve al leer va en capas propias (will-change). */
.indice-exp {
	position: sticky; top: var(--cabecera); z-index: 30; border-block: 1px solid var(--linea); overflow-x: clip;
	background: rgb(255 255 255 / 0.97);
}
.indice-exp__lista { display: flex; gap: 6px; margin-block: 0; padding-block: 10px; padding-inline-end: 40px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.indice-exp__lista::-webkit-scrollbar { display: none; }
.indice-exp a {
	position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; overflow: hidden; padding: 8px 14px; border-radius: 999px;
	color: var(--tinta-suave); font-size: var(--t-s); text-decoration: none; white-space: nowrap; transition: background-color var(--suave), color var(--suave);
}
.indice-exp a span { font-family: var(--f-titulo); font-size: 1rem; color: var(--acento, var(--verde-oscuro)); transition: color var(--suave); }
.indice-exp a:hover { background: var(--arena); color: var(--tinta); }
.indice-exp a[aria-current="true"] { background: var(--azul-noche); color: #fff; }
.indice-exp a[aria-current="true"] span { color: #cfe8a6; }
.indice-exp a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
	background: #cfe8a6; transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity var(--suave);
}
.indice-exp a[aria-current="true"]::after { opacity: 1; will-change: transform; }
.indice-exp a.is-leida { color: var(--tinta); }
.indice-exp a.is-leida:not([aria-current]) span { font-size: 0; }
.indice-exp a.is-leida:not([aria-current]) span::before {
	content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -2px;
	background: var(--verde-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d6b1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.indice-exp__ruta { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.indice-exp__ruta::before { content: ""; position: absolute; inset: 0; transform: scaleX(var(--total, 0)); transform-origin: left; background: linear-gradient(90deg, var(--verde) 0%, #5fb0b0 50%, var(--azul) 100%); will-change: transform; }
/* El carro mide lo mismo que la ruta: sus porcentajes de translate son, por tanto, del ancho de la ruta */
.indice-exp__carro { position: absolute; inset: 0; transform: translateX(clamp(12px, calc(var(--total, 0) * 100%), calc(100% - 12px))); will-change: transform; }
.indice-exp__punto {
	position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%;
	background: var(--azul); box-shadow: 0 0 0 4px rgb(16 97 137 / 0.18); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s;
}
.indice-exp.is-leyendo .indice-exp__punto { opacity: 1; }
/* El latido del punto: tres veces al entrar en cada capítulo (no sin parar). Dos nombres para poder relanzarlo. */
.animar .indice-exp__punto::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--azul); opacity: 0; }
.animar .indice-exp.pulso-a .indice-exp__punto::after { animation: ruta-late 2s ease-out 2; }
.animar .indice-exp.pulso-b .indice-exp__punto::after { animation: ruta-late-b 2s ease-out 2; }
/* Sin tarjeta gráfica, sin latido: dentro del índice fijo, que se mueve con el scroll, se repintaba entero en cada
   fotograma (medido: la ficha pasaba de 31 a 45 fotogramas por segundo sin él, CPU ×4) */
.sin-gpu.animar .indice-exp .indice-exp__punto::after { animation: none; }
@keyframes ruta-late { from { opacity: 0.6; transform: scale(0.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes ruta-late-b { from { opacity: 0.6; transform: scale(0.6); } to { opacity: 0; transform: scale(1.8); } }
@media (min-width: 960px) { .indice-exp__lista { justify-content: center; padding-inline-end: 0; } }
/* Mientras la hoja de reserva está abierta (móvil), el índice no estorba (clase de villa.js, no :has en body) */
.hoja-abierta .indice-exp { visibility: hidden; }
/* El progreso del índice (barras y punto) se escribe unas 10 veces por segundo y al pararse (villa.js), sin
   transición. Medido con la CPU ×4 y «reducir movimiento»: escribirlo en cada fotograma, ligarlo al scroll con CSS
   (view-timeline, que Chrome calculaba en el hilo principal) o suavizarlo con transiciones costaba entre 5 y 15
   fotogramas por segundo; así cuesta casi lo mismo que no tenerlo. Son pasos de ~1 % del ancho: no se notan. */

/* ── Capítulos ───────────────────────────────────────────────────────────── */
.ficha--casa .ficha__cuerpo { padding-top: 8px; }
.capitulo-casa { padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--linea); scroll-margin-top: 64px; }
.capitulo-casa:first-child { border-top: 0; padding-top: clamp(32px, 5vw, 56px); }
.capitulo-casa__cabeza { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.capitulo-casa__n { font-family: var(--f-titulo); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--acento, var(--verde-oscuro)); }
.capitulo-casa__n small { margin-left: 0.2em; font-family: var(--f-texto); font-size: max(12px, 0.24em); letter-spacing: 0.14em; color: var(--tinta-suave); vertical-align: 0.6em; }
.capitulo-casa__titulo { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; }
/* Al llegar a cada capítulo: el número aparece y el título sale de su máscara (solo transform/opacity) */
.capitulo-casa__mascara { display: inline-block; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.animar .capitulo-casa__mascara { clip-path: inset(-0.6em -1em 0 -1em); }
.capitulo-casa__mascara > span { display: inline-block; }
.animar .con-revela .capitulo-casa__cabeza:not(.is-revelada) .capitulo-casa__n { opacity: 0; transform: translateY(14px); }
.animar .con-revela .capitulo-casa__cabeza:not(.is-revelada) .capitulo-casa__mascara > span { transform: translateY(110%); }
.animar .capitulo-casa__cabeza.is-revelada .capitulo-casa__n { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1); }
.animar .capitulo-casa__cabeza.is-revelada .capitulo-casa__mascara > span { transition: transform 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) 0.12s; }

/* F4 · La casa: cita, capitular, seguir leyendo, pausa fotográfica */
.cita-casa { margin: 0 0 clamp(28px, 4vw, 44px); padding-left: clamp(18px, 2.5vw, 28px); border-left: 2px solid var(--acento, var(--verde)); }
.cita-casa__ante { margin-bottom: 10px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.cita-casa__texto { margin: 0; }
.cita-casa__texto p { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-style: italic; line-height: 1.22; letter-spacing: -0.01em; text-indent: -0.42em; }
.cita-casa__texto p::before { content: "«"; }
.cita-casa__texto p::after { content: "»"; }
:lang(en) > .cita-casa__texto p::before, .cita-casa__texto:lang(en) p::before { content: "“"; }
:lang(en) > .cita-casa__texto p::after, .cita-casa__texto:lang(en) p::after { content: "”"; }
.cita-casa__firma--idioma { font-style: italic; }
.cita-casa__firma { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: var(--t-s); color: var(--tinta-suave); }
.texto-casa { max-width: 66ch; }
.texto-casa p { font-size: var(--t-m); line-height: 1.62; color: var(--tinta-suave); }
.texto-casa p + p, .texto-casa__mas > p:first-child { margin-top: 14px; }
.texto-casa > p:first-of-type::first-letter {
	float: left; margin: 0.06em 0.1em 0 0; font-family: var(--f-titulo); font-size: 4.1em; line-height: 0.82; color: var(--acento, var(--verde-oscuro));
}
.texto-casa h3 { margin: 28px 0 8px; font-size: 1.45rem; letter-spacing: -0.01em; }
.texto-casa__mas[hidden] { display: none; }
.texto-casa__seguir { margin-top: 18px; min-height: 44px; }
.pausa-casa { position: relative; display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.pausa-casa__foto { position: relative; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: var(--tono, var(--verde-suave)); cursor: zoom-in; }
.pausa-casa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pausa-casa__foto:hover img { transform: scale(1.03); }
.pausa-casa__foto--grande { aspect-ratio: 4 / 3; }
.pausa-casa__foto--chica { aspect-ratio: 4 / 5; width: 62%; margin-left: auto; margin-top: -18%; box-shadow: 0 0 0 8px #fff; }
.pausa-casa__folio { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgb(12 30 36 / 0.45); color: #fff; font-size: var(--t-xs); letter-spacing: 0.08em; }
@media (min-width: 700px) {
	.pausa-casa { grid-template-columns: 1.25fr 0.75fr; align-items: end; }
	.pausa-casa__foto--chica { width: auto; margin: 0 0 -48px -56px; }
}
.ficha__contenido > .pausa-casa { margin-block: clamp(8px, 2vw, 24px) clamp(56px, 7vw, 88px); }
@media (min-width: 700px) {
	.pausa-casa--izq { grid-template-columns: 0.75fr 1.25fr; }
	.pausa-casa--izq .pausa-casa__foto--grande { order: 2; }
	.pausa-casa--izq .pausa-casa__foto--chica { margin: 0 -56px -48px 0; z-index: 1; }
	.pausa-casa--izq .pausa-casa__foto--grande .pausa-casa__folio { left: auto; right: 14px; }
}
@media (max-width: 699px) { .pausa-casa--izq .pausa-casa__foto--chica { margin-left: 0; margin-right: auto; } }
.pausa-casa--sangre { grid-template-columns: minmax(0, 1fr); }
.pausa-casa--sangre .pausa-casa__foto--grande { aspect-ratio: 16 / 9; }
@media (max-width: 699px) { .pausa-casa--sangre { margin-inline: calc(var(--hueco) * -1); } .pausa-casa--sangre .pausa-casa__foto { border-radius: 0; } }
/* Al llegar, cada foto se descubre de abajo arriba: una cortina del color de la página que se recoge hacia arriba
   (transform, en el compositor; con clip-path se repintaba la foto en cada fotograma). El anillo blanco de la
   foto chica no aparece hasta que empieza su cortina. */
.animar .con-revela .pausa-casa .pausa-casa__foto::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--papel); transform-origin: top; pointer-events: none; }
.animar .con-revela .pausa-casa.is-revelada .pausa-casa__foto::after { transform: scaleY(0); animation: casa-cortina 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
.animar .con-revela .pausa-casa.is-revelada .pausa-casa__foto--chica::after { animation-delay: 0.25s; }
.animar .con-revela .pausa-casa:not(.is-revelada) .pausa-casa__foto--chica { box-shadow: none; }
@keyframes casa-cortina { from { transform: scaleY(1); } }

/* F5 · Dormir: cama por cama (el trazo se dibuja: dasharray heredado por los <use>) */
.camas-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cama__trazo { fill: none; }
.cama__almohada { fill: var(--verde-claro); stroke-dasharray: none; }
.camas__resumen { margin-bottom: 22px; font-family: var(--f-titulo); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.3; }
.camas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .camas { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }
.cama-lamina { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 18px; background: var(--arena); }
.cama-lamina__dibujo { width: auto; max-width: 100%; height: 84px; margin-bottom: 10px; overflow: visible; color: var(--acento, var(--verde-oscuro)); stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.cama-lamina { position: relative; }
.cama-lamina__veces { position: absolute; top: 12px; right: 16px; font-family: var(--f-titulo); font-style: italic; font-size: 2rem; line-height: 1; color: var(--acento, var(--verde-oscuro)); }
.cama-lamina__nombre { font-family: var(--f-titulo); font-weight: 400; font-size: 1.25rem; line-height: 1.15; text-wrap: balance; }
.cama-lamina__detalle { font-size: var(--t-s); color: var(--tinta-suave); }
.camas__nota { margin-top: 14px; font-size: var(--t-xs); color: var(--tinta-suave); }
.animar .con-revela .cama-lamina__dibujo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.animar .cama-lamina.is-revelada .cama-lamina__dibujo, .animar .is-revelada .cama-lamina .cama-lamina__dibujo { stroke-dashoffset: 0; animation: cama-dibuja 1.4s cubic-bezier(0.65, 0, 0.35, 1) calc(0.2s + var(--i, 0) * 0.12s) backwards; }
@keyframes cama-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 03 Qué tiene */
.destacados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
@media (min-width: 700px) { .destacados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.destacado { display: grid; gap: 10px; padding: 18px 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-m); }
.destacado__icono { width: 30px; height: 30px; color: var(--acento, var(--verde-oscuro)); stroke-width: 1.3; }

/* F7 · Dónde está: la isla que se enciende */
.lugar { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .lugar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; } }
.lugar__isla { margin: 0; padding: 12px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 40%, #12505f 0%, var(--azul-noche) 55%, var(--azul-profundo) 100%); }
.lugar__isla svg { display: block; width: 100%; height: auto; overflow: visible; }
.lugar__zona { fill: rgb(255 255 255 / 0.06); stroke: rgb(207 232 166 / 0.55); stroke-width: 1.3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 0.9s ease; }
.lugar__zona.is-suya { fill: url(#lugar-suya); fill-opacity: 0.9; stroke: #e5f3cd; }
.lugar__circulo { fill: rgb(255 255 255 / 0.18); stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.lugar__latido { fill: none; stroke: #fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; opacity: 0; }
/* El latido solo mientras la isla está a la vista y ya dibujada (.is-en-vista, villa.js): fuera de pantalla no gasta */
.animar .lugar__latido { transform-box: fill-box; transform-origin: center; }
.animar .lugar__isla.is-revelada.is-en-vista .lugar__latido { animation: lugar-late 2.6s ease-out 1.8s 3; } /* tres latidos, no sin parar */
@keyframes lugar-late { 0% { opacity: 0.8; transform: scale(0.55); } 100% { opacity: 0; transform: scale(1.35); } }
.animar .con-revela .lugar__isla:not(.is-revelada) .lugar__zona { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
/* Mientras se dibuja, el grosor va en unidades del dibujo (~1.080 de ancho: 3,5 ≈ 1,2–2 px en pantalla; con 1,3 no se
   veía). Al acabar (.is-lista, villa.js) vuelve al trazo fino que no escala y sin el discontinuo del dibujo. */
.animar .lugar__isla.is-revelada .lugar__zona { vector-effect: none; stroke-width: 3.5; stroke-dasharray: 1; animation: lugar-dibuja 1.8s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
.animar .lugar__isla.is-revelada .lugar__zona.is-suya { animation: lugar-dibuja 1.8s cubic-bezier(0.65, 0, 0.35, 1) backwards, lugar-enciende 1s ease 1.4s backwards; }
.animar .lugar__isla.is-revelada.is-lista .lugar__zona { vector-effect: non-scaling-stroke; stroke-width: 1.3px; stroke-dasharray: none; }
@keyframes lugar-dibuja { from { stroke-dashoffset: 1; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; } }
@keyframes lugar-enciende { from { fill-opacity: 0; } to { fill-opacity: 0.9; } }
.lugar__zona-nombre { font-family: var(--f-titulo); font-style: italic; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -0.02em; }
.lugar__frase { margin-top: 10px; font-size: var(--t-l); color: var(--tinta); }
.lugar__alrededores { margin-top: 12px; font-size: var(--t-m); color: var(--tinta-suave); }
.lugar__aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: var(--t-s); color: var(--tinta-suave); }
.lugar__aviso .icono { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--verde-oscuro); }
.lugar__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
.lugar__acciones .boton { min-height: 48px; }
.lugar .mapa--ficha { grid-column: 1 / -1; height: 340px; }
.lugar .mapa--ficha[hidden] { display: none; }

/* F8 · Cuándo ir: la temporada en barras */
.temporada { display: grid; gap: 18px; }
.temporada__tarifa { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); }
.temporada__tarifa button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: var(--t-s); color: var(--tinta-suave); cursor: pointer; }
.temporada__tarifa button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.temporada__cinta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 204px; padding-top: 24px; padding-bottom: 16px; }
@media (min-width: 700px) { .temporada__cinta { gap: 8px; height: 256px; } }
.temporada__mes { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--tinta-suave); cursor: pointer; }
.temporada__mes--vacio { cursor: default; }
.temporada__barra { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.temporada__barra i {
	--c: color-mix(in oklab, var(--verde) calc((1 - var(--h)) * 100%), var(--azul));
	display: block; width: 100%; max-width: 44px; height: calc(var(--h) * 100%); min-height: 6px; border-radius: 8px 8px 3px 3px;
	background: linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c) 70%, #fff)); box-shadow: inset 0 2px 0 rgb(11 58 70 / 0.55);
	transform-origin: bottom; transition: height 0.5s cubic-bezier(0.2, 0.75, 0.2, 1), filter var(--suave);
}
.temporada.is-nr .temporada__barra i { height: calc(var(--hn) * 100%); }
.temporada__cifra { position: absolute; left: 50%; bottom: calc(var(--h) * 100% + 6px); z-index: 1; padding: 0 3px; border-radius: 4px; background: #fff; transform: translateX(-50%); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity 0.4s ease 0.8s; }
.animar .con-revela .temporada__cinta:not(.is-revelada) .temporada__cifra { opacity: 0; }
.temporada.is-nr .temporada__cifra { display: none; }
.temporada.is-nr .temporada__barra::before { content: ""; position: absolute; bottom: 0; width: 100%; max-width: 44px; height: calc(var(--h) * 100%); border: 1px dashed rgb(23 38 43 / 0.28); border-radius: 8px 8px 3px 3px; }
.temporada__mes--vacio .temporada__barra { align-items: flex-end; padding-bottom: 6px; font-size: var(--t-s); color: rgb(75 92 97 / 0.6); }
.temporada__nombre { position: relative; padding-top: 8px; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: capitalize; text-align: center; }
.temporada__nombre small { position: absolute; left: 0; right: 0; top: 100%; display: block; font-size: 0.75rem; color: var(--tinta-suave); }
.temporada__mes.is-anio::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 14px; border-left: 1px dashed var(--linea); }
.temporada__mes:hover .temporada__barra i, .temporada__mes:focus-visible .temporada__barra i { filter: brightness(1.08) saturate(1.1); }
.temporada__mes[aria-pressed="true"] .temporada__barra i { outline: 2px solid var(--tinta); outline-offset: 2px; }
.temporada__mes[aria-pressed="true"] .temporada__nombre { color: var(--tinta); font-weight: 600; }
.animar .con-revela .temporada__cinta:not(.is-revelada) .temporada__barra i { transform: scaleY(0); }
.animar .temporada__cinta.is-revelada .temporada__barra i { animation: temporada-crece 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) calc(var(--i, 0) * 60ms) backwards; }
@keyframes temporada-crece { from { transform: scaleY(0); } }
.temporada__detalle { min-height: 132px; padding: 18px 20px; border-radius: 18px; background: var(--arena); }
.temporada__ayuda { color: var(--tinta-suave); }
.temporada__mes-nombre { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.temporada__precio { margin-top: 6px; font-size: var(--t-m); }
.temporada__precio strong { font-family: var(--f-titulo); font-weight: 400; font-size: 2.2rem; letter-spacing: -0.02em; }
.temporada__extra, .temporada__libre { margin-top: 4px; font-size: var(--t-s); color: var(--tinta-suave); }
.temporada__probar { margin-top: 14px; }
.temporada__nota { font-size: var(--t-xs); color: var(--tinta-suave); }
.temporada__tabla summary { display: inline-flex; min-height: 44px; align-items: center; cursor: pointer; color: var(--verde-oscuro); text-decoration: underline; text-underline-offset: 4px; }
.temporada__tabla[open] summary { margin-bottom: 12px; }

/* F9 · Tu semana, paso a paso */
.horas { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); margin-bottom: clamp(26px, 3.5vw, 40px); }
.horas__hora { display: grid; gap: 2px; }
.horas__hora span { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.horas__hora strong { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.horas__linea { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--verde), var(--azul)); }
.semana { position: relative; display: grid; gap: 0; padding-left: 28px; }
.semana::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--verde), var(--azul)); }
.semana__parada { position: relative; display: grid; gap: 2px; padding: 12px 0; transition: opacity 0.4s ease; }
/* Al llegar: la línea del verde al azul se traza de arriba abajo y las paradas llegan una tras otra */
.semana::before { transform-origin: top; }
.animar .con-revela .semana:not(.is-revelada)::before { transform: scaleY(0); }
.animar .semana.is-revelada::before { transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.animar .con-revela .semana:not(.is-revelada) .semana__parada { opacity: 0; }
.animar .semana.is-revelada .semana__parada { animation: casa-parada 0.6s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.15s + var(--i, 0) * 0.12s) backwards; }
.semana__parada:nth-child(2) { --i: 1; } .semana__parada:nth-child(3) { --i: 2; } .semana__parada:nth-child(4) { --i: 3; }
.semana__parada:nth-child(5) { --i: 4; } .semana__parada:nth-child(6) { --i: 5; } .semana__parada:nth-child(7) { --i: 6; }
@keyframes casa-parada { from { opacity: 0; transform: translateX(-10px); } }
.semana__parada::before { content: ""; position: absolute; left: -28px; top: 17px; width: 14px; height: 14px; border: 2px solid var(--acento, var(--verde-oscuro)); border-radius: 50%; background: #fff; }
.semana__parada--llegada::before, .semana__parada--salida::before { background: var(--acento, var(--verde-oscuro)); }
.semana__que { font-size: var(--t-m); }
.semana__dato { font-size: var(--t-s); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.semana__dato:empty { display: none; }
.semana__parada.is-fuera { opacity: 0.6; }
.semana__parada.is-fuera .semana__que { text-decoration: line-through; text-decoration-thickness: 1px; }
.semana__nota { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--arena); font-size: var(--t-s); }
.semana__nota .icono { flex: none; width: 20px; height: 20px; color: var(--azul); }

/* ── F10 · Reservar: la caja como recibo ─────────────────────────────────── */
.ficha--casa .reserva { align-self: start; }
@media (min-width: 1040px) {
	.ficha--casa .reserva { position: sticky; top: calc(var(--cabecera) + 76px); margin-top: clamp(32px, 5vw, 56px); }
	.ficha--casa .reserva .huespedes--compacto .contador { padding: 3px 0; }
}
/* La caja fija no desplaza por dentro (la rueda sobre ella movía la caja y no la página: se sentía atascada).
   En pantallas bajas las promesas salen de la caja fija; solo si aun así no cabe, desplaza por dentro con
   «Reservar» siempre a la vista. En la hoja del móvil, «Reservar» también queda fijo abajo. */
@media (min-width: 1040px) {
	.ficha--casa .reserva .reserva__caja { max-height: calc(100svh - var(--cabecera) - 92px); overflow-y: auto; scrollbar-width: thin; }
	.ficha--casa .reserva .reserva__boton { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 0 0 10px #fff; }
}
/* En pantallas bajas, las promesas no van en la caja fija y la caja se compacta (las dos tarifas en una fila, menos
   aire): así cabe sin desplazarse por dentro en un portátil (medido: de 829 a menos de 690 px a 1366×860). */
@media (min-width: 1040px) and (max-height: 940px) {
	.ficha--casa .reserva .promesas--caja { display: none; }
	.ficha--casa .reserva .reserva__desde { margin-bottom: 12px; }
	.ficha--casa .reserva .reserva__form { gap: 11px; }
	.ficha--casa .reserva .reserva__tarifas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
	.ficha--casa .reserva .reserva__tarifas legend { grid-column: 1 / -1; }
	.ficha--casa .reserva .opcion-tarifa { gap: 8px; padding: 9px 10px; }
	.ficha--casa .reserva .opcion-tarifa strong { font-size: var(--t-s); }
	.ficha--casa .reserva .reserva__wa { min-height: 40px; }
	.ficha--casa .reserva .reserva__nota { margin-top: -4px; }
	/* «Adultos · 13 años o más» en una línea y controles algo más bajos */
	.ficha--casa .reserva .contador__etiqueta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
	.ficha--casa .reserva .contador__boton { width: 36px; height: 36px; }
	.ficha--casa .reserva .reserva__desde strong { font-size: 2rem; }
	.ficha--casa .reserva .reserva__boton { min-height: 52px; }
	.ficha--casa .reserva .reserva__wa { min-height: 36px; }
}
.hoja-reserva .reserva__boton { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 0 0 10px #fff; }
.ficha--casa .reserva__caja { position: relative; border: 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--linea), var(--sombra-g); }
.ficha--casa .reserva__caja::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--verde), var(--azul)); }
.ficha--casa .presupuesto { background: none; padding: 14px 0 0; border-top: 1px dashed var(--linea); border-radius: 0; }
.ficha--casa .presupuesto__lineas div { padding-block: 2px; }
.ficha--casa .presupuesto__total { padding-top: 10px; border-top: 1px dashed var(--linea); }
.ficha--casa .presupuesto__total dd { font-family: var(--f-titulo); font-size: 1.9rem; letter-spacing: -0.02em; }
.ficha--casa .presupuesto__pagos { background: var(--arena); }
.ficha--casa .reserva__caja.is-destello { animation: caja-destello 1.2s ease; }
@keyframes caja-destello { 0%, 100% { box-shadow: 0 0 0 1px var(--linea), var(--sombra-g); } 30% { box-shadow: 0 0 0 3px var(--verde), var(--sombra-g); } }
/* Móvil: la caja vive en la hoja; abajo de la página no se repite */
@media (max-width: 1039px) {
	.ficha--casa .ficha__cuerpo { grid-template-columns: minmax(0, 1fr); }
	.ficha--casa.con-hoja .reserva { display: none; }
}

/* Hoja de reserva (móvil) */
.hoja-reserva {
	inset: auto 0 0; width: 100%; max-width: 640px; max-height: 92svh; margin: 0 auto; padding: 0; border: 0; border-radius: 26px 26px 0 0;
	background: #fff; color: var(--tinta); box-shadow: 0 -20px 60px rgb(0 0 0 / 0.25); overflow: hidden auto; overscroll-behavior: contain;
}
.hoja-reserva::backdrop { background: rgb(8 20 24 / 0.55); }
.animar .hoja-reserva[open] { animation: hoja-sube 0.42s cubic-bezier(0.2, 0.75, 0.2, 1); }
@keyframes hoja-sube { from { transform: translateY(40%); opacity: 0; } }
.hoja-reserva__asa { width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--linea); }
.hoja-reserva__cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 20px; background: #fff; }
.hoja-reserva__titulo { font-family: var(--f-titulo); font-size: 1.4rem; line-height: 1.1; }
.hoja-reserva__cuerpo { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.hoja-reserva .reserva__caja { padding: 0; border: 0; box-shadow: none; }
.hoja-reserva .reserva__caja::before { display: none; }

.barra-reserva p { min-width: 0; font-size: var(--t-s); line-height: 1.25; }
.barra-reserva p b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.25rem; }

/* ── F11 · Visor: hoja de contactos y foto a pantalla completa ───────────── */
.ficha--casa .visor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0b1b20; color: #fff; overflow: hidden; }
.visor__barra { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; background: linear-gradient(180deg, rgb(11 27 32 / 0.95), rgb(11 27 32 / 0)); }
.visor__titulo { flex: 1; font-family: var(--f-titulo); font-size: 1.35rem; }
.visor__titulo span { font-family: var(--f-texto); font-size: var(--t-s); opacity: 0.7; }
.visor__boton { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; }
.visor__boton .icono { width: 22px; height: 22px; }
.visor__boton[hidden] { display: none; }
.visor__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 100%; padding: 72px 8px 24px; overflow-y: auto; list-style: none; }
@media (min-width: 760px) { .visor__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 84px clamp(16px, 4vw, 48px) 40px; } }
.visor__rejilla[hidden] { display: none; }
.visor__mini { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #12303a; cursor: zoom-in; }
.visor__mini img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s; }
.visor__mini:hover img { transform: scale(1.05); }
.visor__mini span { position: absolute; left: 8px; bottom: 6px; font-size: 0.75rem; letter-spacing: 0.08em; text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
.visor__grande { position: absolute; inset: 0; }
.visor__grande[hidden] { display: none; }
.visor__tira { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x pinch-zoom; }
.visor__tira::-webkit-scrollbar { display: none; }
.visor__foto { flex: 0 0 100%; display: grid; place-items: center; height: 100%; margin: 0; padding: 64px 0 56px; scroll-snap-align: center; }
.visor__foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (min-width: 760px) { .visor__foto { padding: 72px 88px 64px; } .visor__foto img { border-radius: 10px; } }
.visor__paso { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff; transform: translateY(-50%); cursor: pointer; }
.visor__paso .icono { width: 26px; height: 26px; }
.visor__paso--ant { left: 18px; } .visor__paso--sig { right: 18px; }
@media (min-width: 760px) and (hover: hover) { .visor__paso { display: grid; } }
.visor__cuenta { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-s); opacity: 0.85; }
.visor::backdrop { background: #0b1b20; }

/* ── F12 · El final: volver y la siguiente casa ──────────────────────────── */
.final-casa { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--linea); }
.final-casa__volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: clamp(24px, 3vw, 36px); color: var(--verde-oscuro); font-size: var(--t-m); text-decoration: none; }
.final-casa__volver .icono { width: 18px; height: 18px; transition: transform var(--suave); }
.final-casa__volver:hover .icono { transform: translateX(-4px); }
.siguiente-casa { position: relative; isolation: isolate; display: grid; overflow: hidden; min-height: 70svh; border-radius: 28px; background: var(--tono, var(--azul-noche)); color: #fff; text-decoration: none; }
@media (min-width: 900px) { .siguiente-casa { min-height: 0; aspect-ratio: 16 / 7; } }
.siguiente-casa__foto { position: absolute; inset: 0; z-index: -1; }
.siguiente-casa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.siguiente-casa:hover .siguiente-casa__foto img { transform: scale(1.04); }
.siguiente-casa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(4 18 22 / 0) 25%, rgb(4 18 22 / 0.6) 60%, rgb(4 18 22 / 0.85) 100%); }
.siguiente-casa__texto { align-self: end; display: grid; gap: 10px; padding: clamp(22px, 4vw, 48px); }
.siguiente-casa__ante { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; }
.siguiente-casa__ante .icono { width: 18px; height: 18px; transition: transform var(--suave); }
.siguiente-casa:hover .siguiente-casa__ante .icono { transform: translateX(6px); }
.siguiente-casa__nombre { font-family: var(--f-titulo); font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; }
.siguiente-casa__nombre em { display: block; font-size: max(1.15rem, 0.36em); }
.siguiente-casa__datos { font-size: var(--t-m); opacity: 0.9; }
.siguiente-casa .porque span { background: rgb(12 30 36 / 0.45); color: #fff; }
.final-casa__otras { margin: clamp(36px, 5vw, 56px) 0 20px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.siguiente-casa__nombre small { color: rgb(255 255 255 / 0.85); }
.resena__esta { margin-bottom: 8px; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-oscuro); }
.lugar__pueblo { margin-top: 6px; font-size: var(--t-s); letter-spacing: 0.04em; color: var(--tinta-suave); }
.rejilla-villas--final { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 32px 24px; }
@media (max-width: 699px) {
	.rejilla-villas--final { display: flex; gap: 16px; margin-inline: calc(var(--hueco) * -1); padding: 0 var(--hueco) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none; }
	.rejilla-villas--final > * { flex: 0 0 82%; scroll-snap-align: start; }
}
.resenas-casa .nota-demo { margin-top: 18px; }

/* ── Entradas suaves (solo con html.animar; las marca villa.js) ──────────── */
.animar .ficha--casa.con-revela .revela { opacity: 0; transform: translateY(22px); }
.animar .ficha--casa .revela.is-revelada, .animar .ficha--casa .is-revelada .revela { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }

/* ══ Listado (docs/diseno-villas.md, L1–L6) ═══════════════════════════════════ */
.islas-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* L1 · Cabecera: el titular y el sello de la isla, que se redibuja y enciende lo que filtras */
.listado .listado__cabecera { padding-block: clamp(24px, 4vw, 44px) 18px; }
.portadilla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; margin-top: 10px; }
.portadilla__ante { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.listado .listado__titulo { margin-top: 8px; font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.listado .listado__intro { margin-top: 12px; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); color: var(--tinta-suave); }
.sello { display: flex; align-items: flex-end; gap: 10px; color: var(--verde-oscuro); }
/* Móvil: el titular a todo el ancho y el sello, pequeño, arriba a la derecha junto al antetítulo */
@media (max-width: 699px) {
	.portadilla { position: relative; grid-template-columns: minmax(0, 1fr); }
	.sello { position: absolute; top: -6px; right: 0; }
	.sello .sello__isla, .sello[data-isla] .sello__isla--ibiza { height: 46px; }
	.sello .sello__isla--menorca, .sello[data-isla] .sello__isla--menorca { height: 34px; }
	.sello[data-isla="menorca"] .sello__isla--menorca { height: 40px; }
}
/* Trazo en unidades del dibujo (~1080 de ancho): unos 1,3 px en pantalla */
.sello__isla { display: block; height: clamp(64px, 9vw, 132px); overflow: visible; stroke: currentColor; stroke-width: 9px; stroke-linejoin: round; --z-resto: rgb(144 201 71 / 0.12); }
.sello__isla--ibiza { aspect-ratio: 1080 / 874; }
.sello__isla--menorca { aspect-ratio: 1080 / 749; height: clamp(46px, 6.4vw, 96px); }
.sello[data-isla="ibiza"] .sello__isla--menorca, .sello[data-isla="menorca"] .sello__isla--ibiza { display: none; }
@media (min-width: 700px) { .sello[data-isla="ibiza"] .sello__isla--ibiza, .sello[data-isla="menorca"] .sello__isla--menorca { height: clamp(84px, 11vw, 150px); } }
.sello[data-isla="menorca"] .sello__isla { --z-menorca: url(#isla-encendida); }
.sello[data-zona="santa-eulalia"] .sello__isla { --z-santa-eulalia: url(#isla-encendida); }
.sello[data-zona="san-antonio"] .sello__isla { --z-san-antonio: url(#isla-encendida); }
.sello[data-zona="san-juan"] .sello__isla { --z-san-juan: url(#isla-encendida); }
.sello[data-zona="ibiza"] .sello__isla { --z-ibiza: url(#isla-encendida); }
/* El sello se dibuja cuando listado.js ha montado la lista (si se dibujara al cargar, el navegador estaría ocupado y
   se vería casi acabado). Plan B si el JS no llega: se dibuja solo a los 1,6 s (oculto mientras espera). listado.js
   pone .con-sello (borrado, esperando) y .is-dibuja-a; con cada filtro alterna -a y -b (otro nombre de animación: la
   arranca de cero sin forzar maquetación). Sin html.animar, quieto y entero. */
.animar .sello__isla { stroke-dasharray: 1; animation: sello-dibuja 2s cubic-bezier(0.65, 0, 0.35, 1) 1.6s both; }
.animar .sello.con-sello:not(.is-dibuja-a):not(.is-dibuja-b) .sello__isla { animation: none; stroke-dashoffset: 1; }
.animar .sello.is-dibuja-a .sello__isla { stroke-dashoffset: 0; animation: sello-redibuja 1.6s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
.animar .sello.is-dibuja-b .sello__isla { stroke-dashoffset: 0; animation: sello-dibuja 1.6s cubic-bezier(0.65, 0, 0.35, 1) backwards; }
@keyframes sello-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sello-redibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* El sumario: los capítulos numerados con su recuento */
.sumario { margin: 22px calc(var(--hueco) * -1) 0; }
.sumario[hidden] { display: none; }
.sumario ol { display: flex; gap: 8px; padding: 2px var(--hueco); overflow-x: auto; scrollbar-width: none; list-style: none; }
.sumario ol::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .sumario { margin-inline: 0; } .sumario ol { flex-wrap: wrap; padding: 0; overflow: visible; } }
.sumario li[hidden] { display: none; }
.sumario a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-s); color: var(--tinta); text-decoration: none; white-space: nowrap; transition: background-color var(--suave), box-shadow var(--suave); }
.sumario a:hover { background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde); }
.sumario a span { font-family: var(--f-titulo); color: var(--verde-oscuro); }
.sumario a i { font-style: normal; font-size: var(--t-xs); color: var(--tinta-suave); }

/* L4 · Hilo del verde al azul bajo la barra de filtros: lo recorrido de la lista */
.filtros__hilo { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform: scaleX(var(--leido, 0)); transform-origin: left; background: linear-gradient(90deg, var(--verde), #5fb0b0, var(--azul)); }
/* El hilo avanza con el scroll movido por el navegador (listado.js pone los tramos --h0/--h1 y .con-linea), como el
   índice de la ficha; sin animation-timeline, --leido se escribe al pararse */
.filtros__hilo { will-change: transform; }
@supports (animation-timeline: scroll()) {
	html .filtros__hilo.con-linea { animation: indice-llena linear both; animation-timeline: scroll(root); animation-range: var(--h0, 0px) var(--h1, 1px); animation-duration: auto !important; animation-delay: 0s !important; }
}
.listado__testigo { display: block; height: 1px; margin-top: -1px; pointer-events: none; }
/* Entradas al bajar (listado.js; solo con html.animar y .con-revela): suben y aparecen, por orden de llegada */
.animar .listado.con-revela :is(.villa--revista, .cartela, .pausa, .fin-lista):not(.is-revelada) { opacity: 0; transform: translateY(24px); }
.animar .listado :is(.villa--revista, .cartela, .pausa, .fin-lista).is-revelada:not(.sin-entrada) { transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
/* La isla de cada cartela y las del final se dibujan al llegar y después se enciende su municipio */
.animar .listado.con-revela :is(.cartela__isla, .fin-lista__islas svg) { stroke-dasharray: 1; }
.animar .listado.con-revela :is(.cartela, .fin-lista):not(.is-revelada) :is(.cartela__isla, .fin-lista__islas svg) { stroke-dashoffset: 1; fill-opacity: 0; }
.animar .listado :is(.cartela, .fin-lista).is-revelada:not(.sin-entrada) :is(.cartela__isla, .fin-lista__islas svg) { animation: sello-dibuja 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s backwards, cartela-enciende 0.9s ease 1.3s backwards; }
@keyframes cartela-enciende { from { fill-opacity: 0; } }
.listado .listado__cuenta { font-variant-numeric: tabular-nums; }

/* L2 · Capítulos por zona: la cartela y la casa que abre cada capítulo */
.listado .rejilla-villas--listado { gap: 40px 24px; }
.cartela {
	position: relative; isolation: isolate; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
	overflow: hidden; padding: clamp(22px, 3.5vw, 40px) clamp(20px, 3.5vw, 44px); border-radius: 26px; color: #fff; scroll-margin-top: calc(var(--filtros) + 8px);
	background: radial-gradient(120% 140% at 85% 30%, #145a6b 0%, var(--azul-noche) 50%, var(--azul-profundo) 100%);
}
.cartela[hidden] { display: none; }
.cartela__folio { font-size: var(--t-xs); letter-spacing: 0.16em; color: #cfe8a6; font-variant-numeric: tabular-nums; }
.cartela__titulo { margin-top: 6px; font-family: var(--f-titulo); font-style: italic; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }
.cartela__frase { margin-top: 8px; font-size: var(--t-m); color: rgb(255 255 255 / 0.82); }
.cartela__ver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; color: #fff; font-size: var(--t-s); text-decoration: none; }
.cartela__ver .icono { width: 18px; height: 18px; transition: transform var(--suave); }
.cartela__ver:hover { text-decoration: underline; text-underline-offset: 4px; }
.cartela__ver:hover .icono { transform: translateX(4px); }
.cartela__isla { display: block; width: clamp(96px, 18vw, 230px); aspect-ratio: 1080 / 874; overflow: visible; stroke: rgb(207 232 166 / 0.7); stroke-width: 6px; stroke-linejoin: round; --z-resto: rgb(255 255 255 / 0.09); }
@media (max-width: 759px) { .cartela__isla { stroke-width: 12px; } }
.cartela[data-cap="menorca"] .cartela__isla { aspect-ratio: 1080 / 749; --z-menorca: url(#isla-encendida); }
.cartela[data-cap="santa-eulalia"] .cartela__isla { --z-santa-eulalia: url(#isla-encendida); }
.cartela[data-cap="san-antonio"] .cartela__isla { --z-san-antonio: url(#isla-encendida); }
.cartela[data-cap="san-juan"] .cartela__isla { --z-san-juan: url(#isla-encendida); }
.cartela[data-cap="ibiza"] .cartela__isla { --z-ibiza: url(#isla-encendida); }
@media (min-width: 760px) {
	.listado .villa.is-abre { grid-column: span 2; }
	.listado .villa.is-abre .villa__foto { aspect-ratio: 16 / 9; }
	.listado .villa.is-abre .villa__nombre { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); }
}
@media (max-width: 759px) { .listado .villa.is-abre .villa__foto { aspect-ratio: 4 / 5; } }

/* L3 · Pausas */
.pausa { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: var(--arena); }
.pausa[hidden] { display: none; }
.pausa__ante { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.pausa__frase { max-width: 30ch; font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
.pausa__frase b { font-weight: 400; color: var(--verde-oscuro); }
.pausa__temporadas { display: grid; gap: 14px; margin: 4px 0 6px; padding: 0; list-style: none; }
.pausa__temporadas li { max-width: 62ch; line-height: 1.4; color: var(--tinta-suave); }
.pausa__temporadas b { display: block; font-weight: 500; color: var(--tinta); }
@media (min-width: 900px) { .pausa__temporadas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.pausa .boton { min-height: 48px; }
.pausa--cuando { background: linear-gradient(120deg, var(--verde-claro), #e6f0f5); }
.pausa--asesor { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; background: var(--azul-noche); color: #fff; }
.pausa--asesor .pausa__frase { max-width: 36ch; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
.pausa--asesor .boton { grid-column: 1 / -1; }
@media (min-width: 760px) { .pausa--asesor { grid-template-columns: auto minmax(0, 1fr) auto; } .pausa--asesor .boton { grid-column: auto; } }
.pausa__enlace { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-titulo); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.15; color: var(--tinta); text-decoration: none; }
.pausa__enlace .icono { flex: none; width: 24px; height: 24px; color: var(--verde-oscuro); transition: transform var(--suave); }
.pausa__enlace:hover .icono { transform: translateX(6px); }

/* L6 · Final de la lista: como la última cartela (azul noche, las dos islas encendidas) y tres salidas grandes */
.fin-lista {
	position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 48px) clamp(20px, 3.5vw, 44px);
	border-radius: 26px; color: #fff; scroll-margin-top: calc(var(--filtros) + 8px);
	background: radial-gradient(120% 140% at 85% 30%, #145a6b 0%, var(--azul-noche) 50%, var(--azul-profundo) 100%);
}
.fin-lista[hidden] { display: none; }
.fin-lista__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.fin-lista__titulo { font-family: var(--f-titulo); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.fin-lista__islas { display: flex; align-items: flex-end; gap: 8px; }
.fin-lista__islas svg { display: block; height: clamp(54px, 8vw, 104px); overflow: visible; stroke: rgb(207 232 166 / 0.7); stroke-width: 9px; stroke-linejoin: round; --z-resto: url(#isla-encendida); }
.fin-lista__islas svg:first-child { aspect-ratio: 1080 / 874; }
.fin-lista__islas svg:last-child { aspect-ratio: 1080 / 749; height: clamp(40px, 6vw, 78px); }
.fin-lista__salidas { display: grid; gap: 1px; overflow: hidden; border-radius: 18px; background: rgb(255 255 255 / 0.16); }
.fin-lista__salida {
	display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; border: 0; background: rgb(8 30 38 / 0.6);
	font: inherit; font-size: var(--t-m); color: #fff; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--suave);
}
.fin-lista__salida:hover { background: rgb(8 30 38 / 0.35); }
.fin-lista__salida span { flex: 1; }
.fin-lista__salida .icono { flex: none; width: 20px; height: 20px; color: #cfe8a6; }
.fin-lista__salida::after { content: "→"; flex: none; font-size: 1.1rem; color: #cfe8a6; transition: transform var(--suave); }
.fin-lista__salida:hover::after { transform: translateX(4px); }
.fin-lista__salida:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.listado .mapa .leaflet-tile-pane { filter: saturate(0.4) brightness(1.03); }
/* «Mapa» y, debajo y en pequeño, el capítulo que se lee: así no crece hacia el botón de WhatsApp */
.boton-mapa span { display: grid; line-height: 1.1; text-align: left; white-space: nowrap; }
.boton-mapa small { font-size: 0.75rem; opacity: 0.8; }

/* ── Sin tarjeta gráfica (html.sin-gpu, main.js): las mismas entradas, más ligeras. Sin GPU, cada fundido de un bloque
   grande con foto se mezcla píxel a píxel en cada fotograma y los dibujos de trazo se repintan enteros: las tarjetas
   y pausas solo suben (sin fundido), las fotos se acercan menos rato y los trazos se dibujan más deprisa. ── */
/* Las tarjetas: solo entra animada la que abre cada capítulo (.is-abre); las demás ya están en su sitio. Medido con la
   CPU ×4 y sin GPU: las entradas de las 76 tarjetas restaban unos 13 fotogramas por segundo (29 → 42). */
.sin-gpu.animar .listado.con-revela .villa--revista:not(.is-abre):not(.is-revelada) { opacity: 1; transform: none; }
.sin-gpu.animar .listado .villa--revista:not(.is-abre).is-revelada { transition: none; }
.sin-gpu.animar .listado.con-revela :is(.villa--revista.is-abre, .pausa):not(.is-revelada) { opacity: 1; }
.sin-gpu.animar .listado :is(.villa--revista.is-abre, .pausa).is-revelada:not(.sin-entrada) { transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
/* Ficha: los bloques de texto genéricos (.revela) ya están en su sitio; se quedan las entradas con carácter (títulos de
   capítulo, camas e isla que se dibujan, barras de temporada, la semana, la cortina de las pausas) */
.sin-gpu.animar .ficha--casa.con-revela .revela { opacity: 1; transform: none; }
.sin-gpu.animar .ficha--casa .revela.is-revelada, .sin-gpu.animar .ficha--casa .is-revelada .revela { transition: none; }
.sin-gpu.animar .portada-casa__foto:first-child img, .sin-gpu.animar .portada-casa.is-lista .portada-casa__foto:first-child img { animation-duration: 3.5s; }
.sin-gpu.animar .lugar__isla.is-revelada .lugar__zona { animation-duration: 1.1s; }
.sin-gpu.animar .lugar__isla.is-revelada .lugar__zona.is-suya { animation-duration: 1.1s, 0.6s; animation-delay: 0s, 0.9s; }
.sin-gpu.animar .cama-lamina .cama-lamina__dibujo { animation-duration: 0.9s; }
.sin-gpu.animar .listado :is(.cartela, .fin-lista).is-revelada:not(.sin-entrada) :is(.cartela__isla, .fin-lista__islas svg) { animation-duration: 1s, 0.6s; animation-delay: 0.1s, 0.8s; }
.sin-gpu.animar .con-revela .pausa-casa.is-revelada .pausa-casa__foto::after { animation-duration: 0.8s; }