/* =========================================================================
   Atelier Encanto — hoja de estilos única
   Diagramación simétrica según el boceto de Agata:
   un título centrado entre filetes y, debajo, filas que alternan foto y texto,
   separadas por ornamentos de flor de lis. Todas las fotos tienen el mismo tamaño
   y todos los textos el mismo cuerpo; solo los títulos son más grandes.
   ========================================================================= */

/* ---------- Fuentes (autohospedadas) ---------- */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */

:root {
  /* Paleta */
  --cal: #ECE5D9;        /* fondo: el beige de la portada, en todo el sitio */
  --piedra: #E2D8C8;     /* lino: fondo de las fotos mientras cargan */
  --arena: #D3C4AE;      /* filetes */
  --olivo: #6B5F50;      /* texto secundario */
  --tinta: #2A231D;      /* texto */
  --mar: #8A6429;        /* ocre dorado */
  --bronce: #A0806A;     /* flor de lis */
  --egeo: #2E4753;       /* pie */
  --oro-claro: #E3C58F;
  --icono: #D2C6B3;

  /* Familias */
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --sans: "Jost", "Futura", "Century Gothic", Arial, sans-serif;

  /* Tres cuerpos, y nada más: texto, título de fila, título de sección */
  --t-sm: 0.875rem;
  --t-texto: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);          /* 16 → 18 */
  --t-titulo: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);       /* 30 → 44 */
  --t-seccion: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);          /* 40 → 68 */

  /* Espacios */
  --esp-3: 1.5rem;
  --esp-4: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --esp-5: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --esp-6: clamp(5rem, 3.5rem + 6vw, 9rem);

  --margen: clamp(1.25rem, 5vw, 4rem);
  --ancho: 70rem;          /* ancho máximo del contenido */
  --alto-enc: 4rem;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cal);
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--arena); color: var(--tinta); }
:focus-visible { outline: 1.5px solid var(--mar); outline-offset: 3px; }

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

.saltar {
  position: absolute;
  left: var(--margen);
  top: 0;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--cal);
  font-size: var(--t-sm);
  transform: translateY(-120%);
}
.saltar:focus { transform: none; }

/* Textura de papel: un grano finísimo sobre toda la página */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("../grano.png");
  opacity: 0.045;
}

.contenedor {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin-inline: auto;
}

/* ---------- Enlaces y botones ---------- */

.enlace {
  text-decoration: none;
  background-image: linear-gradient(var(--mar), var(--mar)), linear-gradient(#D4B98A, #D4B98A);
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.15em;
  transition: background-size 0.6s var(--curva), color 0.3s;
}
.enlace:hover { background-size: 100% 1px, 100% 1px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--cal);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--curva);
}
.boton:hover { background: var(--mar); border-color: var(--mar); }
.boton--linea { background: transparent; color: var(--tinta); border-color: #C9B79C; }
.boton--linea:hover { background: transparent; border-color: var(--tinta); }
.boton--ancho { width: 100%; }
@media (hover: hover) {
  .boton:hover { transform: translateY(-2px); }
  .boton:active { transform: none; }
}

.texto-boton {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: var(--arena);
  cursor: pointer;
}

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Fotos ---------- */

.foto {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  width: 100%;
  overflow: hidden;
  background: var(--piedra);
  color: var(--icono);
  display: grid;
  place-items: center;
}
.foto picture,
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto__icono { width: clamp(1.75rem, 11%, 2.75rem); height: auto; }
.foto__icono path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.foto img { transition: transform 1.6s var(--curva); }

/* ---------- Encabezado: simétrico ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--alto-enc);
  padding: 0.75rem var(--margen);
  background: var(--cal);
  font-size: var(--t-sm);
  transition: transform 0.5s var(--curva), box-shadow 0.4s;
}
.encabezado.con-filete { box-shadow: 0 1px 0 var(--arena); }
.encabezado.oculto { transform: translateY(-100%); }
.encabezado__nav { display: flex; gap: 1.5rem; justify-self: start; }
.encabezado__marca {
  justify-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
/* En Detalles, la marca del encabezado va más grande */
.pagina-detalles .encabezado__marca { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.encabezado .idiomas { justify-self: end; }
.encabezado__nav a,
.pie__nav a { color: var(--olivo); text-decoration: none; transition: color 0.3s; }
.encabezado__nav a:hover,
.encabezado__nav a[aria-current] { color: var(--tinta); }
.encabezado__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: var(--mar); }

.idiomas { display: flex; gap: 0.3em; letter-spacing: 0.02em; }
.idiomas a { color: var(--olivo); text-decoration: none; }
.idiomas a:hover { color: var(--tinta); }
.idiomas__barra { color: var(--arena); }

@media (max-width: 40em) {
  /* En celular: la marca arriba, al centro; el menú y el idioma debajo, a los lados */
  .encabezado { grid-template-columns: 1fr 1fr; row-gap: 0.25rem; }
  .encabezado__marca { grid-column: 1 / -1; grid-row: 1; }
  .encabezado__nav { grid-row: 2; gap: 1.1rem; }
  .encabezado .idiomas { grid-row: 2; }
}

[id] { scroll-margin-top: 5rem; }

/* ---------- Portada: la marca ---------- */

.portada {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(0.5rem, 1.5vh, 1rem);
  min-height: max(30rem, calc(100svh - var(--alto-enc)));
  padding: var(--esp-5) var(--margen);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.logo-marca__lis {
  width: clamp(4.5rem, min(9.5vw, 13vh), 8.5rem);
  height: auto;
  aspect-ratio: 228 / 254;
  fill: #93735C;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.6))
    drop-shadow(0 3px 3px rgb(74 52 34 / 0.34))
    drop-shadow(0 14px 26px rgb(110 80 55 / 0.32));
}
/* Atelier Encanto en una sola línea, todo en la cursiva */
.logo-marca {
  padding-inline: 0.2em;
  font-family: var(--script);
  font-size: clamp(3.1rem, min(0.6rem + 8.4vw, 15vh), 9.5rem);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--mar);
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(74 52 34 / 0.22), 0 10px 24px rgb(110 80 55 / 0.2);
}
.logo-marca__imagen { width: min(34rem, 80vw); height: auto; }
.portada .acciones { justify-content: center; margin-top: var(--esp-3); }

@media (prefers-reduced-motion: no-preference) {
  .portada__escena > * { animation: aparecer-logo 1.6s var(--curva) both; }
  .portada__escena > :nth-child(2) { animation-delay: 0.35s; }
  .portada__escena > :nth-child(3) { animation-delay: 0.7s; }
}
@keyframes aparecer-logo {
  from { opacity: 0.01; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Título de sección: centrado entre dos filetes, como en el boceto ---------- */

.titular {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-5);
  text-align: center;
}
.titular::before,
.titular::after {
  content: "";
  width: min(34rem, 80%);
  height: 1px;
  background: var(--arena);
}
.titular::before { margin-bottom: var(--esp-3); }
.titular::after { margin-top: var(--esp-3); }
.titular__titulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-seccion);
  line-height: 1.05;
}
.titular__titulo--script { font-family: var(--script); font-style: normal; font-size: calc(var(--t-seccion) * 1.15); line-height: 1.2; color: var(--mar); padding-inline: 0.2em; }
.titular__sub {
  font-family: var(--script);
  font-size: calc(var(--t-seccion) * 0.72);
  line-height: 1.1;
  color: var(--mar);
}
.titular__texto { max-width: 34em; margin-top: var(--esp-3); color: var(--olivo); }

/* ---------- Fila: foto y texto, alternando lado ---------- */

.fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(2.5rem, 6vw, 6rem);
}
.fila--invertida .fila__media { order: 2; }
.fila__media { position: relative; }
.fila__foto {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.fila__foto .foto { aspect-ratio: 4 / 3; }
@media (hover: hover) {
  .fila__foto:hover .foto img { transform: scale(1.035); }
}
.fila__contador {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: rgb(236 229 217 / 0.92);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Marco de la foto: 4:3 si es horizontal; si es vertical, entera, con su proporción, y centrada junto al texto */
.marco { --alto-max: min(38rem, 72svh); position: relative; width: min(100%, calc(var(--alto-max) * var(--arn, 1.3333))); aspect-ratio: var(--arn, 1.3333); margin-inline: auto; }
.marco > .foto,
.carrusel .foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.marco--vertical .foto img { object-fit: contain; }

/* Carrusel de cada proyecto: se desliza con el dedo, con las flechas o con el teclado */
.carrusel__pista {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > li { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
/* cada foto entera, sobre el paspartú de lino (como en Detalles y Reservas) */
.carrusel .foto { background-color: var(--piedra) !important; }
.carrusel .foto img { object-fit: contain; }

/* Flechas: medallones de papel con doble filete de bronce, montados sobre el borde de la foto, siempre a la vista */
.carrusel__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--bronce);
  border-radius: 50%;
  background: rgb(236 229 217 / 0.94);
  box-shadow: inset 0 0 0 3px rgb(236 229 217 / 0.94), inset 0 0 0 4px rgb(160 128 106 / 0.32), 0 6px 16px -6px rgb(74 52 34 / 0.45);
  color: var(--bronce);
  cursor: pointer;
  transition: background-color 0.35s, color 0.35s, opacity 0.35s, transform 0.45s var(--curva);
}
.carrusel__nav--ant { left: 0; transform: translate(-50%, -50%); }
.carrusel__nav--sig { right: 0; transform: translate(50%, -50%); }
.carrusel__nav svg { width: 1.9rem; height: 1.9rem; overflow: visible; }
.carrusel__nav path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* el trazo corto detrás de la punta crece al pasar el cursor, como una pluma */
.carrusel__rama { stroke-dasharray: 11; stroke-dashoffset: 11; transition: stroke-dashoffset 0.5s var(--curva); }
@media (hover: hover) {
  .carrusel__nav:hover { background: var(--bronce); color: var(--cal); box-shadow: inset 0 0 0 3px var(--bronce), inset 0 0 0 4px rgb(236 229 217 / 0.55), 0 8px 18px -6px rgb(74 52 34 / 0.5); }
  .carrusel__nav:hover .carrusel__rama { stroke-dashoffset: 0; }
  .carrusel__nav--ant:hover { transform: translate(calc(-50% - 3px), -50%); }
  .carrusel__nav--sig:hover { transform: translate(calc(50% + 3px), -50%); }
}
@media (max-width: 47.99em) {
  /* en celular no hay margen para que se monten sobre el borde: van apenas adentro de la foto */
  .carrusel__nav { width: 2.75rem; height: 2.75rem; }
  .carrusel__nav--ant { left: 0.5rem; transform: translateY(-50%); }
  .carrusel__nav--sig { right: 0.5rem; transform: translateY(-50%); }
}

/* Todos los bloques de texto miden lo mismo y quedan centrados en su mitad */
.fila__texto { display: grid; gap: 1.1rem; justify-items: start; width: min(26rem, 100%); justify-self: center; }
/* Proyectos y reservas: todo el texto a la vista, en un bloque justificado que acompaña el alto de la foto */
.fila--bloque .fila__texto { width: min(34rem, 100%); gap: 0.9rem; }
.fila--bloque .fila__texto > p:not(.acciones) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.fila--bloque .fila__titulo { margin-bottom: 0.3rem; }
/* si el texto es más alto que la foto horizontal, la foto se estira hasta su altura: foto y texto, un solo bloque */
.fila--bloque { align-items: stretch; }
.fila--bloque .fila__texto { align-content: center; }
.fila--bloque .fila__media { display: grid; align-items: center; container-type: inline-size; }
.fila--bloque .marco:not(.marco--vertical),
.fila--bloque .fila__foto { aspect-ratio: auto; height: 100%; min-height: 75cqw; }
.fila--bloque .fila__foto .foto { height: 100%; aspect-ratio: auto; }
/* en Reservas la foto se ve entera dentro del bloque, sobre el mismo paspartú de lino que en Detalles */
.fila--bloque .fila__foto .foto { background-color: var(--piedra) !important; }
.fila--bloque .fila__foto .foto img { object-fit: contain; }
/* características en dos columnas parejas, para que el bloque no se alargue */
.fila--bloque .fila__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; width: 100%; }
@media (max-width: 47.99em) {
  .fila--bloque .marco:not(.marco--vertical) { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  /* en celular la foto de Reservas va con su proporción real: entera y sin franjas */
  .fila--bloque .fila__foto { height: auto; aspect-ratio: auto; min-height: 0; }
  .fila--bloque .fila__foto .foto { height: auto; aspect-ratio: var(--ar); }
}
@media (max-width: 30em) {
  .fila--bloque .fila__lista { grid-template-columns: minmax(0, 1fr); }
}
.fila__titulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-titulo);
  line-height: 1.08;
}
.fila__lista { display: grid; gap: 0.35rem; }
.fila__lista li { display: flex; align-items: baseline; gap: 0.7rem; }
.vineta {
  flex: none;
  width: 0.62em;
  height: auto;
  aspect-ratio: 228 / 254;
  fill: var(--bronce);
  transform: translateY(0.08em);
}
.fila__invitacion { font-family: var(--serif); font-style: italic; color: var(--mar); font-size: 1.15em; line-height: 1.45; }
/* Calificaciones de cada cabaña: logo y nota, en fila, separadas por filetes finos */
.fila__notas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
.nota { display: flex; align-items: center; gap: 0.5rem; padding-inline: 1rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1; }
.nota:first-child { padding-left: 0; }
.nota + .nota { border-left: 1px solid var(--arena); }
.nota img { width: auto; height: 1.1rem; }
.nota--booking img { height: 0.8rem; }
.nota--google img { height: 1.25rem; }
.fila .acciones { margin-top: 0.4rem; }

@media (max-width: 47.99em) {
  .fila { grid-template-columns: minmax(0, 1fr); row-gap: var(--esp-4); }
  .fila--invertida .fila__media { order: 0; }
  .fila__texto { width: min(34rem, 100%); }
}

/* ---------- Ornamento de flor de lis entre filas ---------- */

.separador { display: grid; justify-items: center; margin-block: var(--esp-5); }
.separador__rama {
  width: min(30rem, 86%);
  height: auto;
  aspect-ratio: 600 / 90;
  color: var(--bronce);
  fill: var(--bronce);
  overflow: visible;
}
.separador__rama--ramita { width: min(16rem, 66%); aspect-ratio: 220 / 90; }
.orn-gota,
.zz-punto { fill: currentColor; }

/* ---------- Cierre: invitación centrada ---------- */

.cierre {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  text-align: center;
}
.cierre__titulo { font-family: var(--serif); font-style: italic; font-size: var(--t-titulo); line-height: 1.08; }
.cierre__texto { max-width: 34em; color: var(--olivo); }
.cierre .acciones { justify-content: center; }
.cierre__contacto { color: var(--olivo); text-decoration: none; text-wrap: balance; }
.cierre__contacto:hover { color: var(--tinta); }
.cierre__contacto:hover .enlace { background-size: 100% 1px, 100% 1px; }
.logo-whatsapp { display: inline-block; width: 2rem; height: 2rem; margin-right: 0.6rem; vertical-align: middle; }

/* ---------- Perfil de anfitriona: Airbnb, Booking y Google Local Guides, en columnas parejas ---------- */

.perfil {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--esp-4) var(--esp-3);
  border-block: 1px solid var(--arena);
  text-align: center;
}
.perfil__plataformas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); width: 100%; }
.perfil__plataforma { display: grid; align-content: start; justify-items: center; gap: 1.25rem; padding: 0.5rem var(--esp-3); }
.perfil__plataforma + .perfil__plataforma { border-left: 1px solid var(--arena); }
.perfil__logo { display: grid; place-items: center; height: 1.75rem; }
.perfil__logo img { width: auto; height: 1.25rem; }
.perfil__logo img[src*="booking"] { height: 1rem; }
.perfil__logo img[src*="google"] { height: 1.6rem; }
.perfil__titulo { font-family: var(--script); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.15; color: var(--mar); }
.perfil__cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.75rem; width: 100%; }
.perfil__cifras dt { font-size: var(--t-sm); color: var(--olivo); }
.perfil__cifras dd { margin-top: 0.2rem; font-family: var(--serif); font-size: 2rem; line-height: 1; }
@media (max-width: 47.99em) {
  .perfil__plataforma + .perfil__plataforma { border-left: 0; border-top: 1px solid var(--arena); padding-top: var(--esp-3); margin-top: var(--esp-3); }
}

/* ---------- Pie: centrado ---------- */

.pie {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding: var(--esp-5) var(--margen) calc(var(--esp-4) + env(safe-area-inset-bottom));
  background: var(--egeo);
  color: var(--cal);
  text-align: center;
  font-size: var(--t-sm);
}
.pie__lis { width: 2.25rem; height: auto; aspect-ratio: 228 / 254; fill: #C9B29A; }
.pie__marca { font-family: var(--serif); font-style: italic; font-size: var(--t-titulo); line-height: 1.05; }
.pie__marca a { text-decoration: none; }
.pie__lema { margin-top: -0.75rem; font-family: var(--script); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.3; color: var(--oro-claro); }
.pie__nav { display: flex; gap: 1.5rem; }
.pie__nav a,
.pie .idiomas a { color: #CFC6B8; }
.pie__nav a:hover,
.pie .idiomas a:hover { color: var(--cal); }
.pie .idiomas__barra { color: #6F8691; }
.pie .enlace { background-image: linear-gradient(var(--oro-claro), var(--oro-claro)), linear-gradient(rgb(227 197 143 / 0.45), rgb(227 197 143 / 0.45)); }
.pie .enlace:hover { color: var(--oro-claro); }
.pie :focus-visible { outline-color: var(--oro-claro); }
.pie__firma { font-size: 0.8125rem; color: #B9B3A8; }

/* =========================================================================
   Panel de reserva y visor de fotos
   ========================================================================= */

.panel {
  width: 100%;
  max-width: none;
  max-height: 92svh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--arena);
  background: var(--cal);
  color: var(--tinta);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.45s var(--curva), transform 0.45s var(--curva);
}
.panel::backdrop { background: rgb(42 35 29 / 0.24); opacity: 0; transition: opacity 0.45s var(--curva); }
.panel.abierto { opacity: 1; transform: none; }
.panel.abierto::backdrop { opacity: 1; }
@media (min-width: 48em) {
  .panel {
    width: min(27rem, 100%);
    height: 100%;
    max-height: none;
    margin: 0 0 0 auto;
    border-top: 0;
    border-left: 1px solid var(--arena);
    transform: translateX(1.5rem);
  }
}

.reserva { display: grid; gap: 1.5rem; padding: 1.5rem var(--margen) calc(1.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 48em) { .reserva { padding: 2.5rem; } }
.reserva__cabecera { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.5rem; }
.reserva__rotulo { font-size: var(--t-sm); color: var(--olivo); }
.reserva__nombre { font-family: var(--serif); font-style: italic; font-size: 2.25rem; line-height: 1.05; }
.reserva__fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: var(--t-sm); color: var(--olivo); }
.campo input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--arena);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: 400 1rem/1.3 var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
.campo input:focus { border-bottom-color: var(--tinta); }
.campo input:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--mar); border-bottom-color: var(--mar); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--tinta); box-shadow: 0 1px 0 0 var(--tinta); }
.campo__error { font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.35; }

.contador { display: flex; align-items: center; border-bottom: 1px solid var(--arena); }
.contador:focus-within { border-bottom-color: var(--tinta); }
.contador button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.contador svg { width: 1rem; height: 1rem; }
.contador svg path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.campo .contador input { flex: 1; border: 0; text-align: center; font-family: var(--serif); font-size: 1.5rem; -moz-appearance: textfield; }
.contador input:focus-visible { box-shadow: none; }
.contador input::-webkit-inner-spin-button,
.contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.reserva .boton--ancho { margin-top: 0.75rem; min-height: 3.25rem; }

/* Visor: claro, como copias sobre una mesa */
.visor {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cal);
  color: var(--tinta);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--curva);
}
.visor.abierto { opacity: 1; }
.visor::backdrop { background: var(--cal); }
.visor__barra {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.75rem var(--margen);
  font-size: var(--t-sm);
}
.visor__titulo { font-family: var(--serif); font-style: italic; font-size: 1.25rem; justify-self: center; }
.visor__contador { color: var(--olivo); font-variant-numeric: tabular-nums; }
.visor__barra .texto-boton { justify-self: end; }
.visor__pista {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.visor__pista::-webkit-scrollbar { display: none; }
.visor__pista:focus { outline: none; }
.visor__pista > li {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: 3.75rem var(--margen) 2.5rem;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.visor__pista .foto { width: min(100%, calc((100dvh - 6.25rem) * var(--arn, 1.5))); aspect-ratio: var(--arn, 1.5); background: transparent; }
.visor__pista .foto img { object-fit: contain; }
.visor__nav {
  display: none;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 3.5rem;
  height: 7rem;
  padding: 1rem;
  border: 0;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.visor__nav:hover { opacity: 1; }
.visor__nav svg { width: 100%; height: 100%; }
.visor__nav path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.visor__nav--ant { left: 0.5rem; }
.visor__nav--sig { right: 0.5rem; }
@media (hover: hover) and (min-width: 48em) {
  .visor__nav { display: block; }
  .visor__pista > li { padding-inline: 5rem; }
}

/* =========================================================================
   Movimiento: suave y al servicio del contenido (se apaga con prefers-reduced-motion)
   ========================================================================= */

.portada__escena { display: grid; justify-items: center; gap: clamp(0.5rem, 1.5vh, 1rem); }

/* Línea fina en el pie de la portada: una gota de color que baja e invita a seguir */
.portada__seguir {
  position: absolute;
  left: 50%;
  bottom: calc(var(--alto-cenefa, 0px) + clamp(1.2rem, 3vh, 2.2rem));
  width: 1px;
  height: clamp(2.75rem, 8vh, 4.5rem);
  translate: -50% 0;
  overflow: hidden;
  background: rgb(138 100 41 / 0.18);
}
.portada__seguir::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--mar));
  transform: translateY(-100%);
}

.progreso { display: none; }

/* Curvas de la casa: una suave para aparecer, otra de telón para abrir fotos */
:root {
  --curva-telon: cubic-bezier(0.77, 0, 0.18, 1);
  --curva-hoja: cubic-bezier(0.65, 0, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .portada__seguir::after { animation: seguir 2.8s var(--curva-telon) 1.8s infinite; }

  /* ---- Paso de página, como en una revista ---- */
  @view-transition { navigation: auto; }
  .encabezado { view-transition-name: encabezado; }
  ::view-transition-group(encabezado) { z-index: 3; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.5s; animation-timing-function: var(--curva); }

  /*
   * Como en una revista: la hoja se toma por la esquina de abajo a la derecha y se despega;
   * el pliegue cruza la página en diagonal, la hoja se arquea apenas hacia el lomo
   * y la siguiente aparece debajo, saliendo de la sombra que le hacía la hoja de arriba.
   */
  :root:active-view-transition-type(adelante, atras)::view-transition-image-pair(root) { perspective: 2200px; }
  :root:active-view-transition-type(adelante, atras)::view-transition-old(root),
  :root:active-view-transition-type(adelante, atras)::view-transition-new(root) {
    transform-origin: left center;
    mix-blend-mode: normal;
    animation-duration: 1.3s;
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.32, 1);
    animation-fill-mode: both;
  }
  /* adelante: la hoja actual se despega y se va; la siguiente espera debajo */
  :root:active-view-transition-type(adelante)::view-transition-old(root) { z-index: 2; animation-name: hoja-se-despega; }
  :root:active-view-transition-type(adelante)::view-transition-new(root) { z-index: 1; animation-name: hoja-debajo; }
  /* atrás: la hoja anterior vuelve, el mismo gesto al revés, y se apoya encima */
  :root:active-view-transition-type(atras)::view-transition-new(root) { z-index: 2; animation-name: hoja-se-despega; animation-direction: reverse; }
  :root:active-view-transition-type(atras)::view-transition-old(root) { z-index: 1; animation-name: hoja-debajo; animation-direction: reverse; }
  /* el dorso de la hoja doblada (lo dibuja assets/js/hoja.js): papel con su sombra sobre la página de abajo */
  ::view-transition-group(dorso-hoja) { z-index: 5; animation: none; filter: drop-shadow(-10px 8px 14px rgb(60 42 26 / 0.32)) drop-shadow(-2px 2px 3px rgb(60 42 26 / 0.25)); }
  ::view-transition-new(dorso-hoja) { animation: none; clip-path: polygon(0 0, 0 0, 0 0); }
  ::view-transition-old(dorso-hoja) { display: none; }

  /* ---- Al hacer scroll ---- */

  /* Títulos: los filetes se abren desde el centro y el texto sube desde un leve desenfoque */
  .js .titular.revelar { opacity: 1; transform: none; }
  .js .titular.revelar::before,
  .js .titular.revelar::after { transform: scaleX(0); transition: transform 1.4s var(--curva-telon) 0.1s; }
  .js .titular.revelar > * {
    opacity: 0;
    translate: 0 22px;
    filter: blur(6px);
    transition: opacity 1.1s var(--curva), translate 1.3s var(--curva), filter 1.1s var(--curva);
  }
  .js .titular.revelar > :nth-child(1) { transition-delay: 0.25s; }
  .js .titular.revelar > :nth-child(2) { transition-delay: 0.4s; }
  .js .titular.revelar > :nth-child(3) { transition-delay: 0.55s; }
  .js .titular.revelar > :nth-child(4) { transition-delay: 0.7s; }
  .js .titular.revelar.visible::before,
  .js .titular.revelar.visible::after { transform: none; }
  .js .titular.revelar.visible > * { opacity: 1; translate: 0 0; filter: none; }

  /* Fotos: visibles desde el primer instante; solo llegan apenas desenfocadas y se aclaran enseguida */
  .js .fila.revelar .fila__media img,
  .js .detalle.revelar .foto img { filter: blur(8px); transition: filter 0.7s var(--curva), transform 1.6s var(--curva); }
  .js .fila.revelar.visible .fila__media img,
  .js .detalle.revelar.visible .foto img { filter: none; }
  .js .detalle.revelar { opacity: 1; transform: none; filter: none; }

  /* Filas: el texto llega renglón por renglón */
  .js .fila.revelar { opacity: 1; transform: none; }
  .js .fila.revelar .fila__texto > * {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 1s var(--curva), translate 1.2s var(--curva);
  }
  .js .fila.revelar .fila__texto > :nth-child(1) { transition-delay: 0.45s; }
  .js .fila.revelar .fila__texto > :nth-child(2) { transition-delay: 0.56s; }
  .js .fila.revelar .fila__texto > :nth-child(3) { transition-delay: 0.67s; }
  .js .fila.revelar .fila__texto > :nth-child(4) { transition-delay: 0.78s; }
  .js .fila.revelar .fila__texto > :nth-child(5) { transition-delay: 0.89s; }
  .js .fila.revelar .fila__texto > :nth-child(n+6) { transition-delay: 1s; }
  .js .fila.revelar.visible .fila__texto > * { opacity: 1; translate: 0 0; }

  /* El resto (cierre, perfil): fundido con un leve ascenso */
  .js .revelar { opacity: 0; transform: translateY(22px); filter: blur(4px); transition: opacity 1.1s var(--curva), transform 1.3s var(--curva), filter 1.1s var(--curva); transition-delay: var(--retraso, 0s); }
  .js .revelar.visible { opacity: 1; transform: none; filter: none; }
  .js .titular.revelar, .js .fila.revelar { filter: none; }

  /* Los ornamentos brotan del centro hacia afuera */
  .js .dibujo .zz-h,
  .js .dibujo .zz-punto {
    opacity: 0;
    transform: scale(0.55);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.7s var(--curva), transform 0.9s var(--curva);
    transition-delay: calc(0.15s + var(--i, 0) * 70ms);
  }
  .js .dibujo.visible .zz-h,
  .js .dibujo.visible .zz-punto { opacity: 1; transform: none; }

  /* ---- Ligado al scroll (navegadores que lo permiten; el resto ve la página quieta) ---- */
  @supports (animation-timeline: scroll()) {
    /* hilo de lectura arriba, en ocre */
    .progreso {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      z-index: 40;
      height: 2px;
      background: var(--mar);
      transform-origin: 0 50%;
      pointer-events: none;
      view-transition-name: progreso;
      animation: progreso linear both;
      animation-timeline: scroll(root);
    }
    /* la portada se aleja: la marca baja más lento que la página y se desvanece */
    /* solo movimiento y transparencia: la placa de video lo resuelve sin volver a dibujar */
    .portada__escena { will-change: transform, opacity; }
    .portada__escena { animation: escena-sale linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .portada__seguir { animation: desvanecer linear both; animation-timeline: scroll(root); animation-range: 0 20vh; }
    /* fotos de las filas: deriva lenta dentro del marco */
    .fila__media .marco:not(.marco--vertical):not(.carrusel) .foto picture { animation: deriva linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes seguir {
  0% { transform: translateY(-100%); }
  65%, 100% { transform: translateY(100%); }
}
/* El pliegue: cinco puntos que recortan la hoja; la esquina de abajo a la derecha se levanta primero
   y la línea del doblez barre la página en diagonal hasta el lomo */
@keyframes hoja-se-despega {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
    transform: none;
    filter: none;
  }
  12% {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 93% 100%, 0 100%);
    filter: brightness(1.04);
  }
  40% {
    clip-path: polygon(0 0, 100% 0, 100% 34%, 58% 100%, 0 100%);
    filter: brightness(1.02);
  }
  68% {
    clip-path: polygon(0 0, 74% 0, 74% 0, 22% 100%, 0 100%);
    filter: brightness(0.94);
  }
  100% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%);
    filter: brightness(0.86);
  }
}
/* (el recorte de arriba es el respaldo: con JavaScript, assets/js/hoja.js dibuja el pliegue exacto y el dorso) */

/* El dorso de la hoja: solo existe mientras dura el paso de página */
.dorso-hoja {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  view-transition-name: dorso-hoja;
  /* papel curvado: brillo sobre el doblez y sombra que crece hacia la punta (lo mueve assets/js/hoja.js) */
  background: linear-gradient(var(--hoja-ang, 240deg),
    #FFFDF8 var(--hoja-s, 0px),
    #F3ECE1 calc(var(--hoja-s, 0px) + var(--hoja-w, 100px) * 0.28),
    #E6DBCB calc(var(--hoja-s, 0px) + var(--hoja-w, 100px) * 0.7),
    #CFC0A9 calc(var(--hoja-s, 0px) + var(--hoja-w, 100px)));
}
/* la página de abajo: en la sombra de la hoja que se levanta, se aclara a medida que queda al descubierto */
@keyframes hoja-debajo {
  0% { filter: brightness(0.72) sepia(0.12); transform: scale(0.985); }
  55% { filter: brightness(0.88) sepia(0.06); }
  100% { filter: none; transform: none; }
}
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes escena-sale { to { transform: translateY(16vh); opacity: 0; } }
@keyframes desvanecer { to { opacity: 0; } }
@keyframes deriva {
  from { transform: translateY(-4%) scale(1.09); }
  to { transform: translateY(4%) scale(1.09); }
}

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

/* Un subtítulo o texto vacío no deja hueco */
.titular__sub:empty,
.titular__texto:empty,
.cierre__texto:empty,
.fila__invitacion:empty { display: none; }

/* Proyecto abierto: descripción larga junto a las fotos */
.visor__texto {
  position: absolute;
  z-index: 1;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 1rem;
  background: var(--cal);
}
.visor__texto[hidden] { display: none; }
.visor__nombre { font-family: var(--serif); font-style: italic; font-size: var(--t-titulo); line-height: 1.08; }
.visor__invitacion { font-family: var(--serif); font-style: italic; color: var(--mar); font-size: 1.15em; line-height: 1.45; }
.visor--con-texto .visor__titulo { visibility: hidden; }
@media (min-width: 48em) {
  .visor__texto { inset: 0 auto 0 0; width: min(28rem, 36vw); padding: 6rem 2.5rem 3rem var(--margen); border-right: 1px solid var(--arena); align-content: center; }
  .visor--con-texto .visor__pista { margin-left: min(28rem, 36vw); }
  .visor--con-texto .visor__nav--ant { left: calc(min(28rem, 36vw) + 0.5rem); }
}
@media (max-width: 47.99em) {
  .visor__texto { inset: auto 0 0; height: 40dvh; padding: 1.5rem var(--margen) calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--arena); }
  .visor--con-texto .visor__pista { height: 60dvh; }
  .visor--con-texto .visor__pista > li { padding-bottom: 1rem; }
  .visor--con-texto .visor__pista .foto { width: min(100%, calc((60dvh - 5rem) * var(--arn, 1.5))); }
}

/* Detalles: grilla pareja de fotos cuadradas, cada una con su frase debajo */
.detalles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.detalle__figura { display: grid; gap: 0.75rem; margin: 0; text-align: center; }
/* el marco cuadrado se mantiene y la foto se ve entera adentro, sobre un paspartú de lino */
.detalle .foto { background-color: var(--piedra) !important; }
.detalle .foto img { object-fit: contain; }
.detalle__nombre { padding-inline: 0.25rem; font-family: var(--serif); font-style: italic; font-size: 1.08em; line-height: 1.35; color: var(--olivo); text-wrap: balance; }
@media (max-width: 47.99em) { .detalles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detalles + .separador { margin-top: var(--esp-6); }

/* Atención personal */
.titular__nota { margin-top: 0.75rem; font-family: var(--serif); font-style: italic; font-size: 1.15em; color: var(--mar); }
.reserva__nota { text-align: center; font-family: var(--serif); font-style: italic; color: var(--olivo); }

/* Pie: azulejo de flor de lis en lugar del ícono */
.pie__azulejo img { width: 4.5rem; height: 4.5rem; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }


/* =========================================================================
   Portada: luz de sol que entra por una persiana y zócalo de azulejos
   ========================================================================= */
.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: calc(var(--esp-5) + var(--alto-cenefa));
  --alto-cenefa: clamp(2.75rem, 4vw, 3.75rem);
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgb(255 250 240 / 0.55), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgb(110 80 55 / 0.14)),
    var(--cal) url("../damasco.svg") center / 96px;
}
/* sombra de las tablillas, en diagonal, que se desliza muy despacio */
.portada::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -20%;
  background: repeating-linear-gradient(180deg,
    rgb(84 58 36 / 0.16) 0 1.6rem,
    rgb(84 58 36 / 0.03) 2.1rem,
    rgb(84 58 36 / 0.03) 2.4rem,
    rgb(84 58 36 / 0.16) 2.9rem);
  filter: blur(6px);
  transform: rotate(-24deg) skewX(-16deg);
  -webkit-mask-image: radial-gradient(ellipse 38% 46% at 34% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 38% 46% at 34% 40%, #000 30%, transparent 75%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .portada::before { animation: persiana 38s ease-in-out infinite alternate; will-change: translate; }
}
@keyframes persiana {
  from { translate: -3% -2%; }
  to   { translate: 4% 3%; }
}
/* zócalo: una hilera de azulejos de piedra con la flor de lis, sobre un filete de bronce */
.portada::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--alto-cenefa);
  background: url("../azulejo-lis-288.webp") center / auto 100% repeat-x;
  border-top: 1px solid rgb(160 128 106 / 0.6);
  box-shadow: 0 -0.4rem 0 -0.25rem var(--cal), 0 -0.4rem 0 -0.15rem rgb(160 128 106 / 0.45), 0 -8px 18px -6px rgb(74 52 34 / 0.35);
  pointer-events: none;
}

/* Página de una cabaña sola: un enlace para volver a Reservas y el bloque de la cabaña con todas sus fotos */
.volver { margin: var(--esp-4) 0 var(--esp-4); font-size: var(--t-sm); color: var(--olivo); }
.volver .enlace { text-decoration: none; }
.fila--cabana { margin-bottom: var(--esp-3); }
a.fila__foto { cursor: pointer; }

/* Filas con foto vertical (Diseño): la foto con su ancho justo y el texto al lado, juntos en un bloque centrado */
@media (min-width: 48em) {
  .fila--vertical { grid-template-columns: auto minmax(0, 32rem); justify-content: center; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .fila--vertical.fila--invertida { grid-template-columns: minmax(0, 32rem) auto; }
  .fila--vertical .marco { --alto-max: min(32rem, 72svh); width: calc(var(--alto-max) * var(--arn)); }
  .fila--vertical .fila__texto { width: 100%; }
  /* sin contención de tamaño: la columna de la foto toma el ancho justo de la foto */
  .fila--vertical .fila__media { container-type: normal; }
  .fila--vertical .fila__texto p { font-size: 1.06em; line-height: 1.75; }
}

/* Detalles: cada foto se abre en grande al tocarla */
.detalle__boton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (hover: hover) {
  .detalle__boton .foto img { transition: transform 1.2s var(--curva); }
  .detalle__boton:hover .foto img { transform: scale(1.03); }
}

/* Visor: la foto entera con su frase debajo, y zoom al tocarla */
.visor__figura { display: grid; justify-items: center; gap: 0.9rem; margin: 0; width: 100%; }
.visor__figura .foto { width: min(100%, calc((100dvh - 10rem) * var(--arn, 1.5))); }
.visor__leyenda { max-width: 36rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--olivo); text-wrap: balance; }
.visor__pista .foto img { cursor: zoom-in; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform 0.45s var(--curva); }
.visor__pista .foto--ampliada img { transform: scale(2.2); cursor: zoom-out; transition: transform 0.45s var(--curva), transform-origin 0.12s linear; }
/* con una foto acercada, el dedo recorre la foto en lugar de pasar a la siguiente */
.visor--ampliado .visor__pista { overflow: hidden; touch-action: none; }