:root {
  color-scheme: light;
  --blanco: #fff;
  --azul: #063289;
  --indigo: #252d71;
  --tinta: #1b2138;
  --texto: #464d64;
  --dorado: #a0701f;
  /* Dorado del logo oscurecido para que el texto pequeño se lea sobre blanco. */
  --dorado-texto: #85591a;
  --oro: #dea75a;
  --linea: #d6dce8;
  --suave: #e8edf8;
  --serif: "Pacifico", "Brush Script MT", cursive;
  --sans: "Alegreya Sans", system-ui, sans-serif;
  /* Itálica con serifa: hace eco de la letra manuscrita del logo. */
  --cursiva: "Cormorant Garamond", Georgia, serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
body {
  margin: 0;
  background: #fff;
  color: var(--tinta);
  /* 500: Alegreya Sans en 400 se ve delgada en pantalla. */
  font: 500 17px/1.8 var(--sans);
  /* Alegreya trae números de estilo antiguo (suben y bajan de la línea);
     en precios, fechas y teléfonos se leen mejor alineados. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.modal-abierto {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
button {
  background: none;
  border: 0;
  cursor: pointer;
}
a,
button,
input,
select,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
img {
  width: 100%;
  height: auto;
  display: block;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 5px;
}
[tabindex="-1"]:focus {
  outline: none;
}
::selection {
  color: var(--azul);
  background: var(--suave);
}
h1,
h2 {
  font: 400 36px/1.35 var(--serif);
  letter-spacing: 0;
  color: var(--indigo);
}
h1 {
  font-size: 39px;
}
h3 {
  font: 400 27px/1.3 var(--serif);
}
p {
  color: var(--texto);
}
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  min-height: 49px;
  padding: 14px 26px;
  border: 1px solid var(--azul);
  background: white;
  color: var(--azul);
  font: 600 12px/1.5 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition:
    background 0.2s,
    color 0.2s;
}
.boton:hover {
  background: var(--azul);
  color: white;
}
.boton.lleno {
  color: white;
  background: var(--azul);
}
.boton.lleno:hover {
  background: var(--indigo);
}
.boton.ancho {
  width: 100%;
}
.boton.compacto {
  padding: 12px 18px;
  min-height: 45px;
}
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  color: var(--azul);
  font-size: 15px;
  border-bottom: 1px solid var(--linea);
}
.nota {
  display: block;
  font-size: 13px;
  color: var(--texto);
  line-height: 1.7;
  margin-top: 14px;
}
.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--dorado-texto);
}
.antetitulo:before {
  content: "";
  width: 30px;
  height: 1px;
  flex-shrink: 0;
  background: var(--oro);
}
.saltar {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 16px;
  background: white;
  color: var(--azul);
  padding: 14px;
  transform: translateY(-200%);
}
.saltar:focus {
  transform: none;
}
.telefono {
  color: var(--azul);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
/* La navegación vive sobre el hero; se vuelve blanca al recorrer el sitio. */
.cabecera {
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  right: 0;
  min-height: 87px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 14px 32px;
  color: white;
  background: linear-gradient(#15202c80, transparent);
  transition:
    background 0.2s,
    color 0.2s;
}
.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.marca img {
  width: 37px;
  height: 53px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.marca b {
  font: 400 26px/1.1 var(--serif);
  letter-spacing: 0;
  display: block;
}
.marca small {
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-top: 7px;
}
.menu {
  display: flex;
  align-items: center;
  gap: 29px;
}
.menu > a:not(.boton) {
  font-size: 12px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  font-weight: 600;
  display: flex;
  align-items: center;
  min-height: 44px;
  text-transform: uppercase;
}
.menu > a:hover:not(.boton) {
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-underline-offset: 6px;
}
.cabecera-reserva {
  background: #fff;
  color: var(--indigo);
  border-color: #fff;
  font-size: 12px;
  min-height: 37px;
  padding: 8px 18px;
  letter-spacing: 0.16em;
}
.cabecera.solida {
  background: white;
  color: var(--indigo);
  box-shadow: 0 1px 0 var(--linea);
}
.cabecera.solida .marca img {
  filter: none;
}
.cabecera.solida .cabecera-reserva {
  background: var(--azul);
  color: white;
  border-color: var(--azul);
}
.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: inherit;
}
.menu-boton span {
  display: block;
  background: currentColor;
  height: 1px;
  margin: 5px 0;
  transition: transform 0.2s;
}
.menu-boton[aria-expanded="true"] span:first-child {
  transform: translateY(6px) rotate(45deg);
}
.menu-boton[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-boton[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}
/* Espacio audiovisual completo. El póster real permanece si no hay video. */
.hero {
  height: 100svh;
  min-height: 640px;
  position: relative;
  overflow: hidden;
  background: var(--indigo);
}
.hero-poster,
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-poster img {
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero video {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s;
}
.hero video.disponible {
  opacity: 1;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo más oscuro al centro para que el titular se lea sobre el video. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, #0c182466, transparent 75%),
    linear-gradient(180deg, #10212b40, #10212b20 30%, #10212b5c 68%, #10212b66);
  pointer-events: none;
}
.hero-marca {
  position: absolute;
  z-index: 1;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  max-width: 92%;
  width: 900px;
  text-shadow: 0 2px 18px #0c182466;
}
.hero-marca img {
  width: 104px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin: 0 auto;
}
.hero-marca h1 {
  margin-top: 26px;
  color: white;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.3;
  letter-spacing: 0;
}
.hero-marca p {
  text-wrap: balance;
  margin-top: 14px;
  color: #ffffffeb;
  font: italic 500 26px/1.3 var(--cursiva);
  letter-spacing: 0.01em;
}
/* Acento en itálica dentro de los títulos. */
h2 em {
  font-style: normal;
  color: var(--dorado);
}
.hero-inferior {
  position: absolute;
  z-index: 2;
  left: 32px;
  right: 32px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.hero-inferior > span {
  font-size: 12px;
  letter-spacing: 0.18em;
}
.hero-inferior button {
  color: white;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid #ffffff80;
  padding: 6px 3px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-inferior button > span {
  font-size: 18px;
}
.consulta-barra {
  position: relative;
  z-index: 3;
  margin: -162px auto 0;
  background: white;
  width: calc(100% - 200px);
  max-width: 1000px;
  padding: 23px 30px 16px;
  border: 1px solid var(--linea);
}
/* Funciona sin JavaScript: es un formulario normal que va a /reservar. */
.consulta-barra form {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr 0.6fr 1fr;
  gap: 20px;
  align-items: end;
}
.consulta-barra label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--indigo);
  min-width: 0;
}
.consulta-barra input,
.consulta-barra select {
  width: 100%;
  height: 43px;
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: 0;
  background: #fff;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto);
}
.consulta-barra .boton {
  min-height: 43px;
  padding-inline: 15px;
  font-size: 12px;
}
.consulta-barra > p a {
  color: var(--azul);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}
.consulta-barra > p {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
}
.texto-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 90px;
  padding: 95px 0;
  max-width: 1120px;
  width: calc(100% - 160px);
  margin: auto;
}
.texto-doble p:not(.antetitulo) + p {
  margin-top: 19px;
}
.texto-doble p:not(.antetitulo) {
  font-size: 17px;
  line-height: 1.8;
}
.texto-doble .boton {
  margin-top: 30px;
}
.introduccion {
  padding-top: 135px;
  padding-bottom: 110px;
}
.glamping {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 7vw, 110px);
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 110px auto 100px;
}
.glamping-interior { margin-top: 45px; }
.glamping img { aspect-ratio: 3 / 4; object-fit: cover; }
.glamping figcaption,
.termales-gente figcaption {
  margin-top: 12px;
  font: italic 500 20px/1.4 var(--cursiva);
  letter-spacing: 0;
  color: var(--texto);
}
.glamping-descripcion { margin-top: 25px; font-size: 17px; max-width: 400px; }
.glamping .boton { margin-top: 27px; gap: 20px; }
.glamping-vista { width: 74%; margin: 45px 0 0 auto; }
.glamping-vista img { aspect-ratio: 4 / 5; object-position: center 40%; }
.galeria-seccion {
  padding: 85px 0;
  border-block: 1px solid var(--linea);
}
.galeria-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  width: calc(100% - 160px);
  max-width: 1120px;
  margin: 0 auto 45px;
}
.galeria-controles {
  display: flex;
  gap: 10px;
}
.galeria-controles button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea);
  color: var(--azul);
  font-size: 22px;
}
.galeria-controles button:hover {
  border-color: var(--azul);
}
/* Al llegar a un extremo la flecha desaparece: una flecha gris parecía un error. */
.galeria-controles button:disabled {
  visibility: hidden;
}
.album-carril {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) white;
  scroll-padding-inline: max(40px, calc((100vw - 1200px) / 2));
  padding: 0 max(40px, calc((100vw - 1200px) / 2)) 20px;
}
.foto-galeria {
  display: block;
  flex: 0 0 39%;
  min-width: 270px;
  scroll-snap-align: start;
}
.foto-galeria img {
  aspect-ratio: 1.27;
  object-fit: cover;
  transition: filter 0.3s;
}
.foto-galeria:hover img {
  filter: brightness(0.9);
}
.foto-galeria > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding-top: 14px;
  color: var(--indigo);
}
.foto-galeria b {
  font: 400 24px var(--sans);
  padding-inline: 6px;
}
.galeria-ayuda {
  font-size: 14px;
  width: calc(100% - 160px);
  max-width: 1120px;
  margin: 20px auto 0;
}
.llegar .texto-doble {
  padding-bottom: 65px;
}
.acciones-mapa {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 14px;
}
.acciones-mapa .boton {
  font-size: 12px;
}
.mapa {
  max-width: 1120px;
  width: calc(100% - 160px);
  margin: auto;
}
.mapa-contenido {
  height: 410px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.mapa-contenido > img {
  height: 100%;
  object-fit: cover;
}
.mapa-contenido > button {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 3px 25px #1b213820;
}
.mapa-contenido iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.mapa > small {
  font-size: 13px;
  color: var(--texto);
  display: block;
  margin-top: 10px;
}
.preguntas {
  align-items: start;
  padding-top: 100px;
  padding-bottom: 110px;
}
.acordeon {
  border-top: 1px solid var(--linea);
}
details {
  border-bottom: 1px solid var(--linea);
}
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 20px 30px 20px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "+";
  position: absolute;
  right: 0;
  top: 15px;
  font: 400 24px var(--sans);
  color: var(--azul);
}
details[open] summary:after {
  content: "−";
}
.acordeon details > p {
  font-size: 16px;
  line-height: 1.9;
  padding: 0 26px 22px 0;
}
.pie {
  border-top: 1px solid var(--linea);
  padding: 65px 60px 0;
  background: white;
}
.pie-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr;
  gap: 55px;
  max-width: 1260px;
  margin: auto;
}
.marca-pie {
  align-self: start;
  color: var(--indigo);
}
.marca-pie img {
  filter: none;
  width: 112px;
  height: auto;
}
.pie h2 {
  font: 500 12px/1.5 var(--sans);
  letter-spacing: 0.18em;
  margin-bottom: 19px;
}
.pie-columnas > div > a {
  display: block;
  font-size: 15px;
  min-height: 36px;
  line-height: 1.8;
  padding-block: 6px;
  color: var(--texto);
}
.pie-columnas > div > a:hover {
  color: var(--azul);
}
.pie-columnas p {
  font-size: 15px;
  line-height: 1.9;
  margin: 8px 0;
}
.pie-columnas .telefono {
  font-size: 16px;
  color: var(--azul);
}
.pie-legal {
  max-width: 1260px;
  margin: 45px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 23px;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--texto);
}
.pie-legal a {
  font-size: 12px;
  letter-spacing: 0.14em;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.barra-movil {
  display: none;
}
/* Diálogos nativos: foco contenido, Escape y cierre accesible. */
dialog {
  color: var(--tinta);
  background: var(--blanco);
  border: 0;
  padding: 30px;
  max-height: calc(100dvh - 40px);
  box-shadow: 0 20px 90px #1b213833;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: rgba(20, 28, 48, 0.62);
  backdrop-filter: blur(4px);
}
.cerrar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--azul);
  border: 1px solid var(--linea);
}
.cerrar:hover {
  background: var(--suave);
}
textarea {
  resize: vertical;
  font-size: 15px;
}
.visor {
  width: min(1120px, calc(100% - 32px));
  padding: 18px;
}
.visor-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.visor-cabecera p {
  font-size: 13px;
}
.visor-imagen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 120px;
}
.visor-imagen img {
  width: auto;
  max-width: 100%;
  height: min(65dvh, 650px);
  object-fit: contain;
}
.visor-imagen > p {
  padding: 25px;
  font-size: 15px;
}
.visor-imagen a {
  text-decoration: underline;
}
.visor-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}
.visor-pie p {
  font-size: 14px;
  text-align: center;
}
.visor-pie button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--linea);
  color: var(--azul);
  font-size: 23px;
}
.visor-pie button:hover {
  background: var(--suave);
}
/* Franja de datos rápidos, bajo la introducción. */
.franja {
  list-style: none;
  display: grid;
  /* Seis datos: tres por fila en computador, dos en tablet y celular. */
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 48px;
  max-width: 1120px;
  width: calc(100% - 160px);
  margin: 0 auto 120px;
  padding: 38px 0;
  border-block: 1px solid var(--linea);
}
/* Cada dato centrado en su columna: ícono, título y texto. */
.franja li {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.franja svg {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.franja b {
  font: 400 20px/1.3 var(--serif);
  color: var(--indigo);
  letter-spacing: 0.02em;
}
.franja span {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
}
/* Termales: foto vertical grande y relato con una segunda foto debajo. */
.termales {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 0 auto 130px;
}
.termales-fuente img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.termales-relato > p:not(.antetitulo) {
  font-size: 17px;
  line-height: 1.8;
  max-width: 470px;
}
.termales-relato h2 {
  margin-bottom: 26px;
}
.termales-relato > p + p {
  margin-top: 18px;
}
.termales-relato .boton {
  margin-top: 30px;
}
.termales-gente {
  margin-top: 56px;
}
.termales-gente img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Cascada: el río de fondo, oscurecido; el texto a la izquierda y, a la
   derecha, el video vertical de la caída de agua caliente en un marco. */
.cascada {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
  min-height: clamp(640px, 56vw, 820px);
  padding: 80px max(60px, calc((100vw - 1120px) / 2));
  overflow: hidden;
  background: var(--tinta);
}
.cascada > .cascada-fondo {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.cascada:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0c1628e0, #0c1628b8 50%, #0c162899);
}
.cascada-marco {
  position: relative;
  z-index: 1;
  order: 2;
  flex: none;
  width: min(400px, 34vw);
  margin: 0;
}
.cascada-marco video {
  display: block;
  width: 100%;
  aspect-ratio: 464 / 640;
  object-fit: cover;
  border-radius: 4px;
  background: #0c1628;
  box-shadow: 0 30px 60px #0006;
}
.cascada-marco figcaption {
  margin-top: 14px;
  color: #ffffffcc;
  font: italic 500 19px/1.4 var(--cursiva);
  text-align: center;
}
.cascada-texto {
  position: relative;
  z-index: 1;
  max-width: 500px;
  padding-block: 90px;
}
.cascada-texto h2 {
  color: white;
}
.cascada-texto > p:not(.antetitulo) {
  margin-top: 24px;
  color: #ffffffe0;
  font-size: 17px;
  line-height: 1.8;
}
.cascada .antetitulo {
  color: var(--oro);
}
.boton.claro {
  margin-top: 32px;
  background: transparent;
  color: white;
  border-color: #ffffffb3;
}
.boton.claro:hover {
  background: white;
  color: var(--indigo);
}
/* Villa: texto y mosaico de tres fotos. */
.villa {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 130px auto;
}
.villa-texto h2 {
  margin-bottom: 26px;
}
.villa-texto > p:not(.antetitulo) {
  font-size: 17px;
  line-height: 1.8;
}
.villa-texto > p + p {
  margin-top: 18px;
}
.villa-texto .boton {
  margin-top: 30px;
}
.villa-mosaico {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: clamp(520px, 48vw, 680px);
}
.villa-mosaico img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.villa-alta {
  grid-row: span 2;
}
/* Planes: cuatro tarjetas comparables. */
.planes {
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 120px auto;
  padding-top: 100px;
  border-top: 1px solid var(--linea);
}
.planes-cabecera {
  margin-bottom: 50px;
}
.planes-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.plan {
  display: flex;
  flex-direction: column;
}
.plan img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.plan h3 {
  margin: 22px 0 8px;
  font-size: 25px;
  color: var(--indigo);
  letter-spacing: 0.03em;
}
.plan p {
  font-size: 16px;
  line-height: 1.65;
}
/* Aquí va «Desde $…» cuando el negocio entregue sus tarifas. */
.plan .plan-tarifa {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--dorado-texto);
}
.plan-enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  min-height: 44px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--azul);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--oro);
}
.plan-enlace:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}
.encabezado .antetitulo {
  margin-bottom: 20px;
}
/* Botón de WhatsApp fijo, solo en pantallas grandes. */
.whatsapp-flotante {
  position: fixed;
  z-index: 14;
  right: 26px;
  bottom: 26px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 24px #1b213840;
  transition: transform 0.2s;
}
.whatsapp-flotante:hover {
  transform: scale(1.06);
}
.whatsapp-flotante svg {
  width: 32px;
  height: 32px;
}
.whatsapp-flotante .globo {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linejoin: round;
}
.whatsapp-flotante .auricular {
  fill: white;
}
/* Galería del glamping VIP: seis fotos debajo del texto, a todo el ancho. */
/* La separación entre columnas del glamping es amplia; entre filas, menos. */
.glamping {
  row-gap: 40px;
}
.vip-galeria {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.vip-foto img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  transition: filter 0.3s;
}
.vip-foto:hover img {
  filter: brightness(0.9);
}
.vip-foto span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--indigo);
}
@media (max-width: 760px) {
  .vip-galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
  }
  .vip-foto span {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}
/* El recorrido del agua: dos fotos y, entre ellas, un cauce que sitio.js
   dibuja según el scroll (de dorado, agua caliente, a turquesa, la piscina).
   Lleno el cauce (.lleno), corren gotas y la piscina hace ondas. */
.recorrido {
  width: calc(100% - 120px);
  max-width: 1200px;
  margin: 0 auto 130px;
}
.recorrido-cabecera {
  max-width: 640px;
  margin-bottom: 50px;
}
.recorrido-cabecera > p:not(.antetitulo) {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.75;
}
.cauce {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(110px, 15vw, 230px);
  /* Cada paso mide lo que su contenido: así el camino al turco sale justo
     debajo de la fuente y no del fondo de la fila. */
  align-items: start;
}
.paso-piscinas {
  margin-top: 170px;
}
.paso-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  transition: box-shadow 0.8s;
}
.paso-foto img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lleno-piscinas .paso-piscinas .paso-foto {
  box-shadow: 0 14px 44px rgba(47, 180, 192, 0.35);
}
.paso-numero {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--dorado-texto);
}
.paso h3 {
  margin: 6px 0;
  font-size: 25px;
  color: var(--indigo);
}
.paso p {
  font-size: 16px;
  line-height: 1.6;
}
.cauce-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.cauce-guia {
  fill: none;
  stroke: var(--linea);
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.cauce-agua {
  fill: none;
  stroke: url(#agua-gradiente-piscinas);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s linear;
}
.cauce-brillo {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3 22;
  opacity: 0;
  animation: brillo-corre 1.3s linear infinite;
  transition: opacity 0.6s;
}
.ramal.lleno .cauce-brillo {
  opacity: 0.85;
}
@keyframes brillo-corre {
  to {
    stroke-dashoffset: -25;
  }
}
.cauce-gotas {
  opacity: 0;
  transition: opacity 0.6s;
}
.ramal.lleno .cauce-gotas {
  opacity: 1;
}
.cauce-gotas circle {
  fill: #2fb4c0;
  stroke: #fff;
  stroke-width: 1.5;
}
.cauce-etiqueta {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 6px 16px;
  transform: translate(-50%, calc(-100% - 18px));
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font: italic 500 16px/1.3 var(--cursiva);
  color: var(--texto);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s 0.2s;
}
.cauce-etiqueta.visible {
  opacity: 1;
}
/* Vapor que sube sobre la foto de la fuente. */
.vapor {
  position: absolute;
  left: 20%;
  bottom: 30%;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  animation: vapor 7s ease-in-out infinite;
}
.vapor:nth-of-type(2) {
  left: 40%;
  animation-delay: 2.3s;
}
.vapor:nth-of-type(3) {
  left: 4%;
  animation-delay: 4.6s;
}
@keyframes vapor {
  0% {
    transform: translateY(20%) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-75%) scale(1.45);
    opacity: 0;
  }
}
/* Ondas en la piscina grande cuando llega el agua. */
.onda {
  position: absolute;
  left: 62%;
  top: 54%;
  width: 38%;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  pointer-events: none;
}
.lleno-piscinas .onda {
  animation: onda 2.7s ease-out infinite;
}
.lleno-piscinas .onda:nth-of-type(2) {
  animation-delay: 0.9s;
}
.lleno-piscinas .onda:nth-of-type(3) {
  animation-delay: 1.8s;
}
@keyframes onda {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
/* El turco: tarjeta que lleva al glamping VIP. */
.recorrido-turco {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 660px;
  margin-top: 80px;
  padding: 18px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.recorrido-turco:hover {
  border-color: var(--oro);
}
/* Dentro del cauce: la tarjeta va debajo de la fuente, en la columna izquierda. */
.cauce > .recorrido-turco {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
/* Camino al turco: del dorado al azul de sus baldosas. */
[data-ramal="turco"] .cauce-agua {
  stroke: url(#agua-gradiente-turco);
}
[data-ramal="turco"] .cauce-gotas circle {
  fill: #7f93d1;
}
.cauce-etiqueta[data-ramal="turco"] {
  transform: translate(22px, -50%);
  text-align: left;
}
.recorrido-turco {
  transition: border-color 0.2s, box-shadow 0.8s;
}
.lleno-turco .recorrido-turco {
  border-color: var(--oro);
  box-shadow: 0 14px 40px rgba(127, 147, 209, 0.3);
}
/* El vapor del turco solo sale cuando le llega el agua. */
.recorrido-turco .vapor {
  animation-play-state: paused;
}
.lleno-turco .recorrido-turco .vapor {
  animation-play-state: running;
}
.recorrido-turco-foto {
  position: relative;
  flex-shrink: 0;
  width: 170px;
  overflow: hidden;
  border-radius: 6px;
}
.recorrido-turco-foto img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.recorrido-turco-texto {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
}
.recorrido-turco small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--dorado-texto);
}
.recorrido-turco b {
  display: block;
  margin: 2px 0 4px;
  font: 400 24px/1.3 var(--serif);
  color: var(--indigo);
}
.recorrido-turco i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--azul);
}
@media (max-width: 1100px) {
  .recorrido {
    width: calc(100% - 80px);
  }
  .paso h3 {
    font-size: 22px;
  }
}
/* En el celular las fotos se apilan y el cauce baja en vertical a la izquierda. */
@media (max-width: 760px) {
  .recorrido {
    width: calc(100% - 48px);
    margin-bottom: 80px;
  }
  .recorrido-cabecera {
    margin-bottom: 34px;
  }
  .cauce {
    grid-template-columns: minmax(0, 1fr);
  }
  .paso-piscinas {
    margin-top: 150px;
  }
  .cauce-etiqueta {
    transform: translate(22px, -50%);
    text-align: left;
    white-space: normal;
    width: max-content;
    max-width: 62%;
  }
  .recorrido-turco {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 56px;
  }
  .recorrido-turco-foto {
    width: 100%;
  }
  .cauce > .recorrido-turco {
    grid-column: auto;
    grid-row: auto;
  }
  /* En el celular el camino al turco va por el borde: sin etiqueta. */
  .cauce-etiqueta[data-ramal="turco"] {
    display: none;
  }
}
/* Horario en la sección de las termales: reloj dorado y la nota de huéspedes. */
.horario {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 0;
  border-block: 1px solid var(--linea);
  max-width: 470px;
}
.horario svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.termales-relato .horario p {
  margin: 0;
  font: 600 19px/1.4 var(--sans);
  color: var(--indigo);
}
.termales-relato .horario b {
  font-weight: 400;
}
/* Mismo peso de selector que el texto común de la sección, para ganarle. */
.termales-relato > p.horario-nota {
  margin-top: 12px;
  font: italic 500 18px/1.45 var(--cursiva);
  color: var(--texto);
  max-width: 470px;
}
/* Pet friendly: ícono dorado con las caras de perro, gato y pavo real, y las
   recomendaciones del negocio con una marca de verificación. */
.mascotas {
  border-top: 1px solid var(--linea);
  padding-block: 100px;
}
.mascotas-icono {
  margin: 0 0 30px;
}
.mascotas-icono svg {
  display: block;
  width: 210px;
  height: auto;
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mascotas-icono figcaption {
  margin-top: 10px;
  font: italic 500 19px/1.4 var(--cursiva);
  color: var(--texto);
}
.mascotas-reglas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mascotas-reglas li {
  position: relative;
  padding: 15px 0 15px 36px;
  border-bottom: 1px solid var(--linea);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
}
.mascotas-reglas li:first-child {
  border-top: 1px solid var(--linea);
}
.mascotas-reglas li:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 23px;
  width: 13px;
  height: 7px;
  border-left: 1.5px solid var(--dorado);
  border-bottom: 1.5px solid var(--dorado);
  transform: rotate(-45deg);
}
@media (max-width: 760px) {
  .mascotas {
    padding-block: 60px;
  }
  .mascotas-icono svg {
    width: 170px;
  }
  .mascotas-reglas li {
    font-size: 16px;
  }
}
/* En pantallas grandes: el formulario tapa la esquina izquierda de la portada
   y el botón de WhatsApp ocupa la derecha, así que se les deja espacio. */
@media (min-width: 761px) {
  .solo-movil,
  .hero-inferior > span {
    display: none;
  }
  .hero-inferior {
    justify-content: flex-end;
    right: 110px;
  }
  .pie-legal {
    padding-right: 90px;
  }
}
@media (max-width: 1100px) {
  .cabecera {
    padding-inline: 24px;
  }
  .menu {
    gap: 20px;
  }
  .menu > a:not(.boton) {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .marca b {
    font-size: 23px;
  }
  .marca small {
    font-size: 7px;
  }
  .consulta-barra {
    width: calc(100% - 130px);
    padding-inline: 24px;
  }
  .consulta-barra form {
    gap: 16px;
  }
  .texto-doble {
    width: calc(100% - 120px);
    gap: 60px;
  }
  h2 {
    font-size: 33px;
  }
  .franja {
    width: calc(100% - 120px);
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }
  .termales,
  .villa,
  .planes {
    width: calc(100% - 80px);
  }
  .planes-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
  }
  .pie {
    padding-inline: 40px;
  }
  .pie-columnas {
    gap: 30px;
  }
  .galeria-titulo,
  .galeria-ayuda,
  .mapa {
    width: calc(100% - 120px);
  }
}
@media (max-width: 900px) {
  .cabecera {
    gap: 18px;
    padding-inline: 20px;
  }
  .marca img {
    width: 30px;
    height: 43px;
  }
  .marca b {
    font-size: 21px;
  }
  .menu {
    gap: 13px;
  }
  .menu > a:not(.boton) {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .cabecera-reserva {
    font-size: 11px;
    padding-inline: 13px;
    min-height: 36px;
  }
  .consulta-barra {
    width: calc(100% - 80px);
    padding-inline: 20px;
  }
  .consulta-barra form {
    gap: 12px;
  }
  .consulta-barra input,
  .consulta-barra select {
    font-size: 15px;
    padding-inline: 8px;
  }
  .consulta-barra .boton {
    font-size: 11px;
  }
  .texto-doble {
    width: calc(100% - 90px);
    gap: 45px;
    padding-block: 75px;
  }
  .introduccion {
    padding-top: 115px;
    padding-bottom: 85px;
  }
  h2 {
    font-size: 30px;
  }
  .galeria-titulo,
  .galeria-ayuda,
  .mapa {
    width: calc(100% - 90px);
  }
  .pie-columnas {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
  }
  .marca-pie {
    grid-column: 1/-1;
    margin-bottom: 15px;
  }
  .preguntas {
    padding-block: 85px;
  }
  .foto-galeria {
    flex-basis: 47%;
  }
}
@media (max-width: 760px) {
  .glamping {
    width: calc(100% - 48px);
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin: 60px auto;
  }
  .glamping-interior { margin-top: 0; }
  .glamping-descripcion { font-size: 16px; margin-top: 21px; }
  .glamping .boton { font-size: 12px; }
  .glamping-vista { width: 85%; margin-top: 38px; }
  .glamping figcaption,
  .termales-gente figcaption { font-size: 18px; }
  html {
    scroll-padding-top: 79px;
  }
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  .cabecera {
    min-height: 76px;
    padding: 12px 21px;
    flex-wrap: wrap;
    gap: 0;
  }
  .marca img {
    width: 32px;
    height: 46px;
  }
  .marca b {
    font-size: 23px;
  }
  .marca small {
    font-size: 7px;
  }
  .js .menu-boton {
    display: block;
  }
  .menu {
    display: flex;
    width: 100%;
    padding: 18px 0;
    gap: 12px 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .menu > a:not(.boton) {
    font-size: 13px;
    min-height: 44px;
  }
  .js .menu {
    display: none;
  }
  .js .menu.abierto {
    display: flex;
    margin-top: 12px;
    border-top: 1px solid var(--linea);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }
  .cabecera:has(.menu.abierto) {
    background: white;
    color: var(--indigo);
  }
  .cabecera:has(.menu.abierto) .marca img {
    filter: none;
  }
  .cabecera:has(.menu.abierto) .cabecera-reserva {
    background: var(--azul);
    color: white;
    border-color: var(--azul);
  }
  .menu .cabecera-reserva {
    font-size: 12px;
    padding: 12px 22px;
    min-height: 44px;
  }
  /* La portada llena la primera pantalla sin asomar el formulario a medias;
     la barra inferior ya ofrece «Consultar visita». */
  .hero {
    min-height: 520px;
    height: calc(100svh - 70px - env(safe-area-inset-bottom));
  }
  .hero-marca {
    top: 48%;
    width: 90%;
  }
  .hero-marca img {
    width: 78px;
    height: auto;
    margin-bottom: 0;
  }
  .hero-marca h1 {
    margin-top: 18px;
    font-size: 30px;
    letter-spacing: 0;
  }
  .hero-marca p {
    margin-top: 10px;
    font-size: 21px;
  }
  .hero-inferior {
    left: 21px;
    right: 21px;
    bottom: 18px;
  }
  .hero-inferior > span {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .hero-inferior button {
    font-size: 11px;
    gap: 8px;
  }
  .hero-poster img {
    object-position: 51% center;
  }
  .consulta-barra {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 26px 24px 20px;
    border: 0;
    border-bottom: 1px solid var(--linea);
  }
  .consulta-barra form {
    grid-template-columns: 1fr 1fr;
    gap: 17px 15px;
  }
  .consulta-barra label {
    font-size: 12px;
    gap: 7px;
  }
  .consulta-barra input,
  .consulta-barra select {
    font-size: 17px;
    height: 44px;
    padding: 8px 10px;
    line-height: 1.4;
  }
  .consulta-barra .boton {
    grid-column: 1 / -1;
    height: 48px;
    font-size: 13px;
    padding-inline: 15px;
  }
  .consulta-barra > p {
    font-size: 13px;
    margin-top: 15px;
    line-height: 1.6;
  }
  .texto-doble {
    grid-template-columns: 1fr;
    width: calc(100% - 48px);
    gap: 27px;
    padding-block: 58px;
  }
  h2 {
    font-size: 29px;
    line-height: 1.35;
    letter-spacing: 0;
  }
  .introduccion {
    padding-top: 60px;
    padding-bottom: 50px;
  }
  .texto-doble p:not(.antetitulo) {
    font-size: 16px;
    line-height: 1.8;
  }
  .texto-doble p:not(.antetitulo) + p {
    margin-top: 18px;
  }
  .texto-doble .boton {
    margin-top: 25px;
    font-size: 12px;
    min-height: 48px;
    padding: 13px 21px;
  }
  .franja {
    width: calc(100% - 48px);
    gap: 28px 20px;
    margin-bottom: 70px;
    padding: 30px 0;
  }
  .franja b {
    font-size: 18px;
  }
  .franja span {
    font-size: 15px;
  }
  .termales {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 48px);
    gap: 36px;
    margin-bottom: 80px;
  }
  .termales-fuente img {
    aspect-ratio: 4 / 5;
  }
  .termales-relato > p:not(.antetitulo),
  .villa-texto > p:not(.antetitulo),
  .cascada-texto > p:not(.antetitulo) {
    font-size: 16px;
  }
  .termales-gente {
    margin-top: 44px;
  }
  .cascada {
    align-items: end;
    min-height: 640px;
  }
  .cascada {
    padding: 0;
  }
  .cascada > .cascada-fondo {
    display: none;
  }
  /* En celular el video ocupa todo el fondo, detrás del texto. */
  .cascada-marco {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
  }
  .cascada-marco video {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .cascada-marco figcaption {
    display: none;
  }
  .cascada:after {
    z-index: 0;
  }
  .cascada:after {
    background: linear-gradient(0deg, #0c1628e0, #0c16289e 45%, #0c162820 80%);
  }
  .cascada-texto {
    margin: 0 24px;
    padding: 0 0 56px;
  }
  .villa {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 48px);
    gap: 36px;
    margin: 80px auto;
  }
  .villa-mosaico {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.5fr 1fr;
    height: 560px;
    gap: 8px;
  }
  .villa-alta {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  /* En el celular las tarjetas se deslizan de lado, como el álbum. */
  .planes {
    width: 100%;
    margin: 70px 0;
    padding-top: 60px;
  }
  .planes-cabecera {
    margin: 0 24px 30px;
  }
  .planes-lista {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    padding: 0 24px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--linea) white;
  }
  .plan {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .plan h3 {
    font-size: 23px;
  }
  .whatsapp-flotante {
    display: none;
  }
  .galeria-seccion {
    padding: 55px 0;
  }
  .galeria-titulo {
    width: calc(100% - 48px);
    gap: 15px;
    margin-bottom: 28px;
  }
  .galeria-titulo h2 {
    font-size: 27px;
  }
  .galeria-controles {
    gap: 6px;
  }
  .galeria-controles button {
    width: 40px;
    height: 44px;
    font-size: 21px;
  }
  .album-carril {
    gap: 15px;
    padding: 0 24px 16px;
    scroll-padding-inline: 24px;
  }
  .foto-galeria {
    flex: 0 0 85%;
    min-width: 0;
  }
  .foto-galeria img {
    aspect-ratio: 1.07;
  }
  .foto-galeria > span {
    font-size: 12px;
    padding-top: 12px;
    letter-spacing: 0.1em;
  }
  .galeria-ayuda {
    width: calc(100% - 48px);
    font-size: 13px;
    margin-top: 15px;
  }
  .llegar .texto-doble {
    padding-bottom: 30px;
  }
  .mapa {
    width: calc(100% - 48px);
  }
  .mapa-contenido {
    height: 320px;
  }
  .mapa-contenido > button {
    font-size: 12px;
    padding: 13px 17px;
    max-width: calc(100% - 28px);
    white-space: normal;
    bottom: 20px;
  }
  .mapa > small {
    font-size: 12px;
  }
  .acciones-mapa {
    gap: 12px;
  }
  .acciones-mapa .boton {
    font-size: 12px;
  }
  .telefono {
    font-size: 18px;
  }
  .preguntas {
    padding-block: 60px;
    gap: 28px;
  }
  summary {
    font-size: 16px;
    padding-block: 19px;
  }
  .acordeon details > p {
    font-size: 15px;
    padding-right: 20px;
  }
  .pie {
    padding: 40px 24px 0;
  }
  .pie-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 30px 25px;
  }
  .marca-pie {
    grid-column: 1/-1;
    margin-bottom: 6px;
  }
  .pie-columnas > div:last-child {
    grid-column: 1/-1;
    border-top: 1px solid var(--linea);
    padding-top: 25px;
  }
  .pie h2 {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .pie-columnas > div > a,
  .pie-columnas p {
    font-size: 15px;
  }
  .pie-columnas .telefono {
    font-size: 18px;
  }
  .pie-legal {
    margin-top: 26px;
    flex-direction: column;
    align-items: start;
    gap: 7px;
    font-size: 13px;
    padding-block: 17px;
  }
  .pie-legal a {
    font-size: 12px;
    min-height: 36px;
  }
  .barra-movil {
    display: flex;
    position: fixed;
    z-index: 14;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-top: 1px solid var(--linea);
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    box-shadow: 0 -3px 20px #1b213808;
  }
  .barra-movil > a:first-child {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .barra-movil .boton {
    font-size: 12px;
    letter-spacing: 0.1em;
    min-height: 44px;
    padding: 12px 18px;
  }
  .visor {
    padding: 12px;
  }
  .visor-imagen img {
    height: auto;
    max-height: 65dvh;
  }
  .visor-pie p {
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .hero-marca h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 26px;
  }
  .galeria-titulo h2 {
    font-size: 24px;
  }
  .galeria-controles {
    gap: 5px;
  }
  .galeria-controles button {
    width: 36px;
  }
  .barra-movil {
    padding-inline: 15px;
    gap: 10px;
  }
  .barra-movil .boton {
    font-size: 11px;
    padding-inline: 14px;
  }
  .barra-movil > a:first-child {
    font-size: 11px;
  }
}
/* Tu llegada: cuatro paradas unidas por una línea punteada, como un camino. */
.llegada {
  width: min(1120px, calc(100% - 120px));
  margin: 0 auto;
  padding-block: 110px;
}
.llegada-encabezado {
  max-width: 560px;
  margin-bottom: 56px;
}
.llegada-encabezado > p:not(.antetitulo) {
  margin-top: 20px;
}
.llegada-paradas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.llegada-paradas li {
  position: relative;
  display: flex;
  flex-direction: column;
}
.llegada-paradas li:not(:last-child):before {
  content: "";
  position: absolute;
  top: 19px;
  left: 54px;
  right: -22px;
  border-top: 2px dashed var(--oro);
}
.llegada-numero {
  order: -1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--azul);
  color: white;
  font: 600 16px/1 var(--sans);
}
.llegada-paradas img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}
.llegada-paradas h3 {
  margin: 20px 0 6px;
  color: var(--indigo);
  font: 400 24px/1.3 var(--serif);
}
.llegada-paradas p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
/* El camino se recorre: sitio.js pone .llegada-animada (si hay movimiento) y
   .en-camino a cada parada al verla. La parada aparece, luego la línea se
   dibuja hacia la siguiente con un punto de luz en la punta. En computador
   las tres entran juntas, así que se escalonan con --t. */
.llegada-paradas li {
  --t: 0s;
}
@media (min-width: 761px) {
  .llegada-paradas li:nth-child(2) {
    --t: 1s;
  }
  .llegada-paradas li:nth-child(3) {
    --t: 2s;
  }
}
.llegada-animada .llegada-paradas li > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease var(--t),
    transform 0.6s ease var(--t);
}
.llegada-animada .llegada-paradas .llegada-numero {
  transform: scale(0.3);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.llegada-animada .llegada-paradas li.en-camino > * {
  opacity: 1;
  transform: none;
}
.llegada-animada .llegada-paradas li:not(:last-child):before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s linear calc(var(--t) + 0.35s);
}
.llegada-animada .llegada-paradas li.en-camino:not(:last-child):before {
  transform: none;
}
.llegada-animada .llegada-paradas li:not(:last-child):after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 0 5px rgb(222 167 90 / 0.3);
  opacity: 0;
  pointer-events: none;
}
.llegada-animada .llegada-paradas li.en-camino:not(:last-child):after {
  animation: llegada-paso 0.7s linear calc(var(--t) + 0.35s) both;
}
@keyframes llegada-paso {
  0% {
    opacity: 0;
    left: 50px;
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: calc(100% + 16px);
  }
}
@media (max-width: 760px) {
  .llegada {
    width: calc(100% - 48px);
    padding-block: 80px;
  }
  .llegada-encabezado {
    margin-bottom: 40px;
  }
  .llegada-paradas {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .llegada-paradas li {
    padding-left: 58px;
  }
  .llegada-paradas li:not(:last-child):before {
    top: 48px;
    bottom: -32px;
    left: 19px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--oro);
  }
  .llegada-numero {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
  /* En celular el camino baja: la línea se dibuja hacia abajo. */
  .llegada-animada .llegada-paradas li:not(:last-child):before {
    transform: scaleY(0);
    transform-origin: top;
    transition-duration: 1.2s;
  }
  .llegada-animada .llegada-paradas li:not(:last-child):after {
    top: 44px;
    left: 15px;
  }
  .llegada-animada .llegada-paradas li.en-camino:not(:last-child):after {
    animation-name: llegada-paso-movil;
    animation-duration: 1.2s;
  }
  @keyframes llegada-paso-movil {
    0% {
      opacity: 0;
      top: 44px;
    }
    10%,
    85% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: calc(100% + 28px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .cabecera,
  .barra-movil,
  .whatsapp-flotante,
  dialog,
  .consulta-barra,
  .galeria-controles,
  .hero-inferior {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
  .hero {
    height: 400px;
    min-height: 0;
  }
  .hero-marca {
    top: 50%;
  }
  .texto-doble {
    padding-block: 30px;
  }
  .album-carril,
  .planes-lista {
    flex-wrap: wrap;
  }
  .foto-galeria {
    flex-basis: 40%;
  }
}