/* Generado por tools/fetch-fonts.mjs — no editar a mano.
   Fuentes auto-hospedadas: Bodoni Moda y Jost (SIL Open Font License 1.1). */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/bodoni-moda-italic-500.bde8aa14.woff2') format('woff2');
  unicode-range: U+0000-002C, U+002E-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/bodoni-moda-normal-500.41175c92.woff2') format('woff2');
  unicode-range: U+0000-002C, U+002E-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/jost-normal-400-500.7726a5cd.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* StyleYumy — estilos del sitio.
   Los valores (colores, tamaños, espaciados, animaciones) vienen tal cual del
   mockup `mockups/desktop/Main.dc.html`; lo único que cambia es que viven en
   clases en vez de atributos style="…", porque la CSP no permite estilos
   inline. El móvil (`mockups/mobile/Mobile.dc.html`) aporta los dos @media
   del final. */

/* ---------- tokens ---------- */

:root {
  --crema: #f3ebdd;
  --arena: #e6d8bf;
  --hueso: #faf6ee;
  --tinta: #1a1510;
  --tinta-suave: #5f5446;
  --oro: #b89141;
  --oro-oscuro: #735823;
  --oro-claro: #e4b86d;
  --oro-medio: #d4ad5f;
  --borde: #d9c9ab;
  --negro: #000000;
  --noir-texto: #b5aa98;
  --noir-borde: #3b3222;
  --noir-superficie: #2a2316;

  --serif: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --sans: Jost, Futura, 'Century Gothic', system-ui, sans-serif;

  --ancho: 1240px;
  --margen: 32px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-fuerte: cubic-bezier(0.7, 0, 0.2, 1);
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* Sin esto, cualquier `display` de una clase le gana al [hidden] del
   navegador y el menú móvil se renderiza abierto. */
[hidden] {
  display: none !important;
}

a {
  color: var(--oro-oscuro);
}

a:hover {
  color: var(--tinta);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oro-oscuro);
  outline-offset: 2px;
}

.noir a:focus-visible,
.noir button:focus-visible {
  outline-color: var(--oro-claro);
}

/* Enlace de salto, visible solo al tabular. */
.saltar {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 50;
  background: var(--oro);
  color: var(--tinta);
  padding: 12px 24px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  transition: top 0.2s ease;
}

.saltar:focus {
  top: 16px;
}

/* ---------- tipografía ---------- */

.eyebrow {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.32em;
  color: var(--tinta-suave);
}

.micro {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.pequeno {
  font-size: 14px;
  line-height: 22px;
  color: var(--tinta-suave);
}

.titulo-1,
.titulo-2,
.titulo-3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.titulo-1 {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.08;
  white-space: pre-line;
}

.titulo-2 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.14;
}

.titulo-3 {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: normal;
}

.pre-linea {
  white-space: pre-line;
}

.cuerpo-suave {
  margin: 0;
  color: var(--tinta-suave);
}

/* ---------- estructura ---------- */

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

.seccion {
  padding-top: 96px;
  padding-bottom: 64px;
}

.rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--oro);
}

.linea-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.btn-gold,
.btn-line,
.btn-cta {
  display: inline-block;
  text-decoration: none;
  border-radius: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  transition: background 0.4s ease, color 0.4s ease, translate 0.4s var(--curva);
}

.btn-gold {
  background: var(--oro);
  color: var(--tinta);
  padding: 16px 32px;
}

.btn-gold:hover {
  background: var(--oro-claro);
  color: var(--tinta);
}

.btn-line {
  border: 1px solid var(--oro);
  color: var(--oro-medio);
  padding: 16px 32px;
}

.btn-line:hover {
  background: var(--oro);
  color: var(--tinta);
}

.btn-gold:hover,
.btn-line:hover {
  translate: 0 -2px;
}

.enlace-texto {
  color: var(--oro-oscuro);
  padding: 14px 0;
  text-underline-offset: 6px;
}

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

.hdr {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--borde);
}

.hdr-barra {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: block;
  line-height: 0;
}

.logo img {
  width: 168px;
  height: auto;
  display: block;
}

.nav-escritorio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
}

.navlink {
  text-decoration: none;
  position: relative;
  color: var(--tinta);
  padding: 14px 0;
}

.navlink:hover {
  color: var(--oro-oscuro);
}

.noir .navlink {
  color: var(--crema);
}

.noir .navlink:hover {
  color: var(--oro-medio);
}

.navlink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--curva-fuerte);
}

.navlink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.idiomas {
  display: flex;
  align-items: center;
  gap: 4px;
}

.idiomas .separador {
  width: 1px;
  height: 14px;
  background: var(--borde);
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: var(--tinta-suave);
  transition: color 0.3s ease;
}

.lang-btn:hover {
  color: var(--oro-oscuro);
}

.lang-btn[aria-current='true'] {
  border-bottom-color: var(--oro);
  color: var(--tinta);
}

/* Botón de menú y nav colapsado: solo existen por debajo de 900px. */
.nav-boton {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--oro-oscuro);
  border-radius: 2px;
  color: var(--tinta);
  cursor: pointer;
  padding: 0;
}

.nav-boton .icono-cerrar {
  display: none;
}

.nav-boton[aria-expanded='true'] .icono-abrir {
  display: none;
}

.nav-boton[aria-expanded='true'] .icono-cerrar {
  display: block;
}

.nav-movil {
  position: relative;
  z-index: 19;
  background: var(--hueso);
  border-bottom: 1px solid var(--borde);
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
}

.nav-movil .navlink {
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}

.nav-movil .navlink:last-of-type {
  border-bottom: 0;
}

.nav-movil .btn-gold {
  margin-top: 16px;
  text-align: center;
}

.nav-movil .idiomas {
  margin-top: 8px;
  justify-content: center;
}

/* ---------- hero ---------- */

.hero {
  padding-top: 64px;
  padding-bottom: 96px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}

.hero-texto {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-texto .cuerpo-suave {
  max-width: 460px;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 16px;
}

.hero-foto {
  flex: 1 1 460px;
  min-width: 0;
  position: relative;
}

.hero-arco {
  pointer-events: none;
  position: absolute;
  top: -24px;
  right: -24px;
  width: 70%;
  height: 70%;
}

.arc {
  width: 100%;
  height: 100%;
  border: 1px solid var(--oro);
  border-radius: 0 9999px 0 0;
}

/* El marco recorta; la imagen mide 120% de alto y se desplaza para el
   parallax, así que su ancho de referencia es el del marco, no el viewport. */
.marco {
  position: relative;
  overflow: hidden;
  background: var(--arena);
}

.marco-4-5 {
  aspect-ratio: 4 / 5;
}

.marco-1-1 {
  aspect-ratio: 1 / 1;
  background: var(--noir-superficie);
}

.marco > img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--borde);
  padding: 28px 0;
  background: var(--crema);
}

.marquee-track {
  display: flex;
  width: max-content;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 44px;
  color: var(--tinta);
  white-space: nowrap;
}

.marquee-grupo {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
}

.rombo {
  width: 7px;
  height: 7px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- franja de intro ---------- */

.intro {
  background: var(--arena);
}

.intro-rejilla {
  padding-top: 40px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 40px;
}

.intro-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--oro);
  padding-top: 16px;
}

.intro-item .clave {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--oro-oscuro);
}

/* ---------- servicios ---------- */

.bloque {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bloque-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.bloque-cabecera .titulos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bloque-cabecera .nota {
  margin: 0;
  max-width: 420px;
  color: var(--tinta-suave);
}

.servicios-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  background: var(--hueso);
  border: 1px solid var(--borde);
  border-radius: 2px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: translate 0.6s var(--curva), border-color 0.6s ease;
}

.card:hover {
  translate: 0 -6px;
  border-color: var(--oro);
}

.card > picture {
  display: contents;
}

.card img {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  /* Los atributos width/height del HTML (que evitan el salto de layout) se
     aplican como altura fija y anularían el aspect-ratio: sin este
     `height: auto` la foto se estira a 600px y object-fit la recorta entera. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--arena);
  margin: -24px -24px 8px;
  transition: scale 1.2s var(--curva);
}

.card:hover img {
  scale: 1.06;
}

.card-texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.card .dep {
  font-size: 12px;
  line-height: 16px;
  color: var(--tinta-suave);
}

.card .meta {
  font-size: 14px;
  line-height: 22px;
  color: var(--tinta-suave);
  border-top: 1px solid var(--borde);
  padding-top: 16px;
}

/* ---------- banda noir ---------- */

.noir {
  background: var(--negro);
  color: var(--crema);
  position: relative;
  overflow: hidden;
}

.noir-circulo {
  position: absolute;
  right: -120px;
  top: 80px;
  width: 420px;
  height: 420px;
  border: 1px solid var(--noir-borde);
  border-radius: 9999px;
}

.noir-contenido {
  position: relative;
  padding-top: 96px;
  padding-bottom: 96px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}

.noir-foto {
  flex: 1 1 380px;
  min-width: 0;
}

.noir-texto {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.noir-texto .eyebrow {
  color: var(--noir-texto);
}

.noir-texto .titulo-2 {
  color: var(--crema);
}

.noir-texto p {
  margin: 0;
  color: var(--noir-texto);
  max-width: 480px;
}

.noir-texto .btn-line {
  align-self: flex-start;
  margin-top: 16px;
}

/* ---------- equipo ---------- */

.equipo {
  align-items: center;
  text-align: center;
}

.equipo-cabecera {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.equipo-rejilla {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 24px;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ring {
  padding: 8px;
  border: 1px solid var(--oro);
  border-radius: 9999px;
  transition: scale 0.6s var(--curva), border-color 0.6s ease;
}

.ring img {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--arena);
}

.member:hover .ring {
  scale: 1.05;
  border-color: var(--oro-oscuro);
}

/* ---------- galería ---------- */

.galeria {
  padding-top: 64px;
  padding-bottom: 128px;
  display: grid;
  gap: 40px;
  grid-template-areas: 'cabecera' 'rejilla' 'enlace';
}

.gal-cabecera { grid-area: cabecera; }
.galeria-rejilla { grid-area: rejilla; }
.gal-enlace { grid-area: enlace; justify-self: center; }

/* En escritorio el enlace sube a la derecha del título. Es un cambio de orden
   en el DOM, así que se resuelve con áreas de grid, no con `order`. */
@media (min-width: 641px) {
  .galeria {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'cabecera enlace' 'rejilla rejilla';
    align-items: end;
    column-gap: 24px;
  }
  .gal-enlace { justify-self: end; }
}

.galeria-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tile {
  display: block;
  width: 100%;
  /* Igual que en .card img: sin esto, el height="1250" del atributo manda. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--arena);
  transition: scale 0.9s var(--curva), filter 0.9s ease;
}

.tile:hover {
  scale: 0.97;
  filter: brightness(0.94);
}

/* ---------- marcas aliadas ---------- */

.socios {
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.socios-contenido {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 64px;
}

.socios-texto {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.socios-texto .cuerpo-suave {
  max-width: 360px;
}

.socios-rejilla {
  flex: 2 1 480px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* El fondo negro es del diseño: los dos logos vienen pensados para ir
   sobre oscuro, y uno de ellos ya trae el negro incrustado en el JPEG. */
.socio {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: var(--negro);
  border-radius: 2px;
}

.socio img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* ---------- reserva ---------- */

.reserva {
  background: var(--arena);
}

.reserva-contenido {
  padding-top: 96px;
  padding-bottom: 96px;
  display: grid;
  gap: 32px;
  grid-template-areas: 'texto' 'tarjeta' 'contacto';
  align-items: start;
}

/* En escritorio el contacto vuelve a la columna izquierda, bajo el texto. */
@media (min-width: 1024px) {
  .reserva-contenido {
    grid-template-columns: minmax(0, 360fr) minmax(0, 520fr);
    grid-template-areas: 'texto tarjeta' 'contacto tarjeta';
    column-gap: 64px;
    row-gap: 24px;
  }
}

.reserva-texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.reserva-texto .cuerpo-suave {
  max-width: 420px;
}

.reserva-contacto {
  grid-area: contacto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 22px;
  color: var(--tinta-suave);
}

.reserva-tarjeta {
  grid-area: tarjeta;
  position: relative;
  overflow: hidden;
  background: var(--hueso);
  border: 1px solid var(--borde);
  border-radius: 2px;
  min-height: 480px;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.reserva-tarjeta > * {
  position: relative;
}

.orbit,
.orbit-rev {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: scale 0.6s var(--curva);
}

.orbit {
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  border-top-color: var(--oro);
  border-right-color: var(--borde);
}

.orbit-rev {
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-bottom-color: var(--oro);
}

.reserva-tarjeta .nota {
  margin: 0;
  max-width: 340px;
  color: var(--tinta-suave);
  font-size: 14px;
  line-height: 22px;
}

.btn-cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--oro);
  color: var(--tinta);
  padding: 20px 40px;
}

.btn-cta:hover {
  background: var(--oro-claro);
  color: var(--tinta);
  translate: 0 -3px;
}

.btn-cta::before,
.btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--oro);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
}

.cta-arrow {
  transition: translate 0.45s var(--curva);
}

.btn-cta:hover .cta-arrow {
  translate: 6px 0;
}

.reserva-tarjeta .aviso {
  font-size: 12px;
  line-height: 16px;
  color: var(--tinta-suave);
}

/* ---------- visítanos ---------- */

.visita {
  padding-top: 96px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}

.visita-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--oro);
  padding-top: 24px;
}

.visita-col .clave {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--oro-oscuro);
}

.visita-direccion {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  white-space: pre-line;
}

.visita-horario {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
  color: var(--tinta-suave);
}

.mapcard {
  position: relative;
  display: block;
  min-height: 280px;
  background: var(--arena);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
}

.mapart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: scale 1.2s var(--curva);
}

.mapcard:hover .mapart {
  scale: 1.05;
}

.mapcard:hover .cta-arrow {
  translate: 6px 0;
}

.map-pulse {
  transform-box: fill-box;
  transform-origin: center;
}

.mapcard-pie {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--hueso);
  border: 1px solid var(--borde);
  border-radius: 2px;
  padding: 12px 16px;
}

.mapcard-pie .nombre {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mapcard-pie .abrir {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--oro-oscuro);
}

.mapcard-pie .texto {
  display: flex;
  flex-direction: column;
}

/* ---------- pie ---------- */

.pie {
  background: var(--negro);
  color: var(--noir-texto);
}

.pie-contenido {
  padding-top: 64px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.pie-logo {
  width: 220px;
  height: auto;
  display: block;
}

.pie-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
}

.pie-legal {
  width: 100%;
  border-top: 1px solid var(--noir-borde);
  padding-top: 24px;
  font-size: 14px;
  line-height: 22px;
}

/* ---------- páginas legales ---------- */

.legal {
  display: block;
  max-width: 760px;
  padding-top: 72px;
  padding-bottom: 96px;
}

.legal .titulo-1 {
  font-size: clamp(32px, 4vw, 48px);
  white-space: normal;
}

.legal-fecha {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--oro-oscuro);
}

.legal-intro {
  margin-top: 24px;
}

.legal-seccion {
  margin-top: 40px;
  border-top: 1px solid var(--borde);
  padding-top: 24px;
}

.legal-titulo {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--oro-oscuro);
}

.legal-seccion p + p {
  margin-top: 16px;
}

.legal-lista {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--tinta-suave);
}

.legal-lista li + li {
  margin-top: 12px;
}

.legal-lista strong {
  color: var(--tinta);
  font-weight: 500;
}

.legal-volver {
  display: inline-block;
  margin-top: 48px;
}

/* ---------- preguntas frecuentes ---------- */

.faq {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-cabecera {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-lista {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--borde);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--borde);
}

.faq-pregunta {
  cursor: pointer;
  list-style: none;
  padding: 24px 40px 24px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--tinta);
}

/* Safari necesita este pseudoelemento para quitar el triángulo por defecto. */
.faq-pregunta::-webkit-details-marker {
  display: none;
}

.faq-pregunta:hover {
  color: var(--oro-oscuro);
}

/* El signo + gira a × al abrir. Dos trazos en vez de un glifo: así no depende
   de que la fuente tenga el carácter, que es justo lo que falla en Bodoni. */
.faq-pregunta::after,
.faq-pregunta::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--oro);
  transition: transform 0.4s var(--curva);
}

.faq-pregunta::before {
  transform: rotate(90deg);
}

.faq-item[open] .faq-pregunta::before {
  transform: rotate(0deg);
}

.faq-respuesta {
  margin: 0;
  padding: 0 40px 24px 0;
  color: var(--tinta-suave);
  max-width: 68ch;
}

/* ---------- 404 ---------- */

.error {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding-top: 96px;
  padding-bottom: 96px;
}

/* ---------- animaciones (copiadas del mockup) ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes unveil {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes arcIn {
  from { opacity: 0; transform: translate(-24px, 24px); }
  to { opacity: 1; transform: none; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pxSlow {
  from { translate: 0 48px; }
  to { translate: 0 -48px; }
}

@keyframes pxFast {
  from { translate: 0 140px; }
  to { translate: 0 -140px; }
}

/* El marco muestra una ventana de 1.0 sobre una imagen de 1.2 de alto: el
   margen real es ±8.33%. El artboard de escritorio pedía ±9% y dejaba ver un
   hilo de fondo en los extremos; el móvil ya usaba ±8%. Se unifica en ±8%. */
@keyframes pxImg {
  from { translate: 0 -8%; }
  to { translate: 0 8%; }
}

@keyframes ping {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.18, 1.7); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.arc,
.orbit,
.orbit-rev,
[aria-hidden='true'] {
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  .motion .sv {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .motion .sv-unveil {
    animation: unveil linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .motion .rule {
    transform-origin: left;
    animation: draw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .motion .px-slow {
    animation: pxSlow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .motion .px-fast {
    animation: pxFast linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .motion .px-img {
    animation: pxImg linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

.motion .hdr {
  animation: fadeDown 0.9s var(--curva) both;
}

.motion .rise {
  animation: rise 1.1s var(--curva) both;
}

.motion .d1 { animation-delay: 0.15s; }
.motion .d2 { animation-delay: 0.3s; }
.motion .d3 { animation-delay: 0.45s; }
.motion .d4 { animation-delay: 0.6s; }

.motion .hero .rule {
  transform-origin: center;
  animation: draw 1.2s var(--curva-fuerte) 0.2s both;
}

.motion .unveil {
  animation: unveil 1.5s var(--curva-fuerte) 0.3s both;
}

.motion .arc {
  animation: arcIn 1.6s var(--curva) 1s both;
}

.motion .marquee-track {
  animation: marquee 40s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.motion .map-pulse {
  animation: ping 2.6s var(--curva) infinite;
}

.motion .btn-cta::before {
  animation: ping 2.6s var(--curva) infinite;
}

.motion .btn-cta::after {
  animation: ping 2.6s var(--curva) 1.3s infinite;
}

.motion .orbit {
  animation: spin 24s linear infinite;
}

.motion .orbit-rev {
  animation: spin 18s linear infinite reverse;
}

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

/* ---------- ≤1024px: la navegación pasa a hamburguesa ----------
   Medido sobre los valores del propio artboard: el header en español necesita
   ~983px (logo 168 + los cuatro enlaces + el grupo EN/ES + "RESERVAR CITA" +
   los gaps de 32 + 64 de padding). El inglés cabe en ~901. Se corta en 1024,
   que además es el límite de iPad en horizontal. */

@media (max-width: 1023.98px) {
  .nav-escritorio {
    display: none;
  }

  .nav-boton {
    display: flex;
  }

  .hdr-barra {
    flex-wrap: nowrap;
  }

  .hero,
  .noir-contenido,
  .reserva-contenido {
    gap: 40px;
  }

  .reserva-tarjeta {
    min-height: 420px;
    padding: 48px 24px;
  }

  /* Amplitudes de parallax del artboard móvil: más suaves en pantallas
     estrechas, donde el recorrido vertical es mucho mayor. */
  @keyframes pxSlow {
    from { translate: 0 24px; }
    to { translate: 0 -24px; }
  }

  @keyframes pxFast {
    from { translate: 0 64px; }
    to { translate: 0 -64px; }
  }
}

@media (min-width: 1024px) {
  .nav-movil {
    display: none;
  }
}

/* ---------- ≤640px: valores del artboard móvil ---------- */

@media (max-width: 640px) {
  :root {
    --margen: 24px;
  }

  .seccion {
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .hero {
    padding-top: 40px;
    padding-bottom: 72px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hero-texto,
  .hero-foto {
    flex: none;
  }

  .hero-foto {
    margin-top: 16px;
    /* El ancho explícito es necesario, no cosmético: el marco interior saca su
       altura de `aspect-ratio`, y si su ancho depende del `stretch` del flex
       el navegador lo trata como indefinido, no resuelve la altura y el
       contenedor colapsa a 0 dejando la foto encima del marquee. */
    width: 100%;
  }

  .hero-arco {
    top: -16px;
    right: -12px;
    width: 70%;
    height: 60%;
  }

  .titulo-1 {
    font-size: 40px;
    line-height: 44px;
  }

  .titulo-2 {
    font-size: 32px;
    line-height: 38px;
  }

  .titulo-3 {
    font-size: 24px;
    line-height: 30px;
  }

  .eyebrow {
    font-size: 12px;
    line-height: 20px;
  }

  .linea-eyebrow {
    gap: 12px;
  }

  .rule {
    width: 28px;
  }

  .hero-acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
  }

  .hero-acciones .btn-gold,
  .hero-acciones .enlace-texto {
    text-align: center;
  }

  .marquee {
    padding: 20px 0;
  }

  .marquee-track {
    font-size: 26px;
    line-height: 32px;
  }

  .marquee-grupo {
    gap: 32px;
    padding-right: 32px;
  }

  .rombo {
    width: 6px;
    height: 6px;
  }

  .servicios-rejilla,
  .equipo-rejilla,
  .visita {
    grid-template-columns: 1fr;
  }

  /* El artboard móvil acorta el enlace a "VER MÁS EN INSTAGRAM". */
  .gal-usuario {
    display: none;
  }

  /* El artboard móvil usa dos columnas apretadas en la galería. */
  .galeria-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* La tarjeta de servicio pasa a fila horizontal con miniatura vertical. */
  .servicios-rejilla {
    gap: 12px;
  }

  .card {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    padding: 12px;
  }

  .card > picture {
    display: block;
    flex: 0 0 88px;
  }

  .card img {
    width: 88px;
    height: 110px;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    margin: 0;
    display: block;
  }

  .card-texto {
    gap: 4px;
    justify-content: center;
  }

  .card .titulo-3 {
    font-size: 22px;
    line-height: 28px;
  }

  .card .cuerpo-suave {
    font-size: 14px;
    line-height: 20px;
  }

  .card .meta {
    border-top: 0;
    padding-top: 0;
    color: var(--oro-oscuro);
  }

  /* El equipo se alinea a la izquierda y los retratos bajan a 150px. */
  .equipo {
    align-items: stretch;
    text-align: left;
  }

  .equipo-cabecera {
    align-items: flex-start;
  }

  .ring {
    padding: 6px;
  }

  .ring img {
    width: 150px;
    height: 150px;
  }

  .motion .marquee-track {
    animation-duration: 30s;
  }

  .bloque {
    gap: 32px;
  }

  .noir-contenido,
  .reserva-contenido {
    padding-top: 72px;
    padding-bottom: 72px;
    gap: 32px;
  }

  .noir-contenido {
    flex-direction: column;
  }

  .noir-foto,
  .noir-texto {
    flex: none;
    width: 100%;
  }

  .noir-circulo {
    width: 280px;
    height: 280px;
    right: -100px;
  }

  .galeria {
    padding-top: 48px;
    padding-bottom: 80px;
  }

  .socios {
    border-bottom: 0;
  }

  .socios-contenido {
    padding-top: 48px;
    padding-bottom: 48px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .socios-texto,
  .socios-rejilla {
    flex: none;
  }

  .socios-rejilla {
    gap: 12px;
  }

  .socio {
    height: 96px;
    padding: 0 16px;
  }

  .socio img {
    max-width: 140px;
  }

  .visita {
    padding-top: 72px;
    padding-bottom: 72px;
    gap: 32px;
  }

  .visita-direccion {
    font-size: 24px;
    line-height: 30px;
  }

  .faq {
    gap: 24px;
  }

  .faq-pregunta {
    font-size: 19px;
    line-height: 26px;
    padding: 20px 32px 20px 0;
  }

  .faq-respuesta {
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 24px;
  }

  .orbit {
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
  }

  .orbit-rev {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
  }

  .pie-logo {
    width: 180px;
  }

  .pie-contenido {
    gap: 32px;
  }
}