/* =========================================================
   Estancia Novillo · propuesta web
   Celular: @media (max-width: 639px) · Compu: @media (min-width: 960px)
   ========================================================= */

@font-face { font-family: "Zodiak"; src: url("fonts/zodiak-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("fonts/zodiak-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("fonts/zodiak-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("fonts/supreme-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("fonts/supreme-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Blanco y negro del salón, con un solo acento: el vino de la marca del catering */
  --noche: #151112;
  --noche-2: #1e1819;
  --papel: #f5f3f0;
  --papel-2: #e9e5e0;
  --tinta: #1b1617;
  --tinta-suave: #574e50;
  --claro-suave: #bfb6b3;
  --vino: #7a1f2b;
  --vino-claro: #d98c95;

  --fuente-titulos: "Zodiak", Georgia, serif;
  --fuente-texto: "Supreme", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  --margen: clamp(1rem, 4vw, 3.5rem);
  --seccion: clamp(5rem, 14vh, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-style: italic; font-weight: 400; }

.contenedor { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--margen); }

.saltar {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--vino); color: var(--papel); padding: .6rem 1rem; text-decoration: none;
}
.saltar:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--vino); outline-offset: 3px; }
[data-tema="oscuro"] :focus-visible, .cabecera :focus-visible, .menu :focus-visible, .pie-pagina :focus-visible { outline-color: var(--vino-claro); }

/* ---------- Tipografía ---------- */
.titulo {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Las máscaras de SplitText recortan: un poco de aire para el "¿", las letras que bajan y la inclinación de las cursivas. */
.palabra-t-mask, .letra-t-mask { padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
/* El vino solo se usa en cursiva sobre fondo claro; sobre fondo oscuro se aclara a rosado, así que ahí la cursiva va en blanco. */
.titulo em { color: var(--vino); }
[data-tema="oscuro"] .titulo em { color: inherit; }

/* ---------- Botones ----------
   Rectangulares, igual que las fotos (un solo sistema de esquinas).
   Al pasar el cursor, el relleno sube como cortina y el texto rueda. */
.boton {
  --relleno: var(--papel);
  --texto-hover: var(--noche);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .8rem 1.7rem;
  border-radius: 0; border: 1px solid transparent;
  font-family: var(--fuente-texto); font-weight: 500; font-size: .95rem; line-height: 1.1; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), transform .15s ease;
}
.boton::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--relleno);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--ease-in-out);
}
.boton:focus-visible { color: var(--texto-hover); }
.boton:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) {
  .boton:hover { color: var(--texto-hover); }
  .boton:hover::before { transform: scaleY(1); }
}
.boton:active { transform: scale(.98); }
.boton .rodar { line-height: 1.35; }
.boton--vino, .boton--cabecera { border-width: 0; padding: calc(.8rem + 1px) calc(1.7rem + 1px); }
.boton--vino { background: var(--vino); color: var(--papel); }
.boton--vidrio {
  color: var(--papel); border-color: rgba(245, 243, 240, .6);
  background: rgba(21, 17, 18, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.boton--vidrio:focus-visible { border-color: var(--papel); }
@media (hover: hover) { .boton--vidrio:hover { border-color: var(--papel); } .boton--linea:hover { border-color: var(--papel); } }
.boton--linea { color: var(--papel); border-color: rgba(245, 243, 240, .45); }
.boton--linea:focus-visible { border-color: var(--papel); }

/* ---------- Entrada: el sello del logo ---------- */
/* La cortina tiene un hueco redondo (--hueco) que crece desde el centro: el sello se vuelve una ventana. */
.cortina {
  --hueco: 0px;
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; pointer-events: none;
  background: var(--noche); color: var(--papel);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hueco), #000 calc(var(--hueco) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--hueco), #000 calc(var(--hueco) + 1px));
  animation: cortina-fuera 0s 4s forwards; /* respaldo si el JS no corre */
}
.sello { width: min(64vw, 300px); height: auto; overflow: visible; }
.sello__aro { fill: none; stroke: currentColor; stroke-width: 1.1; }
.sello__nombre { font-family: var(--fuente-titulos); font-size: 15px; letter-spacing: .3em; fill: currentColor; }
.sello__letra { font-family: var(--fuente-titulos); font-weight: 700; font-size: 66px; fill: currentColor; }
@keyframes cortina-fuera { to { visibility: hidden; opacity: 0; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem var(--margen);
  color: var(--papel);
  transition: color .4s ease, background-color .4s ease, transform .5s var(--ease-out), -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.cabecera--solida { background: rgba(21, 17, 18, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cabecera--clara { color: var(--tinta); }
.cabecera--clara.cabecera--solida { background: rgba(245, 243, 240, .86); }
.cabecera--oculta { transform: translateY(-110%); }

.marca { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.marca__nombre { font-family: var(--fuente-titulos); font-size: 1.05rem; letter-spacing: .26em; text-transform: uppercase; }
.marca__lugar { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; margin-top: .4rem; opacity: .8; }

.nav { display: flex; gap: 2rem; }
.nav__link { text-decoration: none; font-size: .95rem; }

.cabecera .boton--cabecera { --relleno: var(--papel); background: var(--vino); color: var(--papel); min-height: 2.6rem; padding: calc(.55rem + 1px) calc(1.2rem + 1px); font-size: .88rem; }
.cabecera--clara .boton--cabecera { --relleno: var(--noche); --texto-hover: var(--papel); }

/* texto que rueda al pasar el cursor */
.rodar { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; }
.rodar__in { display: inline-block; transition: transform .55s var(--ease-out); }
.rodar__in::after { content: attr(data-texto); position: absolute; left: 0; top: 100%; }
a:focus-visible .rodar__in { transform: translateY(-100%); }
@media (hover: hover) { a:hover .rodar__in, button[data-rodar]:hover .rodar__in { transform: translateY(-100%); } }
button[data-rodar]:focus-visible .rodar__in { transform: translateY(-100%); }

.menu-boton {
  display: none; align-items: center; gap: .7rem;
  background: none; border: 0; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; padding: .5rem 0;
}
.menu-boton__lineas { position: relative; width: 22px; height: 10px; }
.menu-boton__lineas span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-in-out), top .45s var(--ease-in-out); }
.menu-boton__lineas span:first-child { top: 0; }
.menu-boton__lineas span:last-child { top: 8px; }
.menu-boton[aria-expanded="true"] .menu-boton__lineas span:first-child { top: 4px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__lineas span:last-child { top: 4px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--noche); color: var(--papel);
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: 6rem var(--margen) 3rem;
}
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; gap: .4rem; }
.menu__link { font-family: var(--fuente-titulos); font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1.15; text-decoration: none; }
.menu .boton { align-self: flex-start; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end;
  background: var(--noche); color: var(--papel);
}
.hero__fondo { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 60%; }
.hero__fondo picture, .visita__recorte picture { display: block; width: 100%; height: 100%; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(21, 17, 18, .85) 0%, rgba(21, 17, 18, .4) 42%, rgba(21, 17, 18, 0) 66%),
    linear-gradient(to bottom, rgba(21, 17, 18, .5) 0%, rgba(21, 17, 18, 0) 22%);
}
.hero__contenido { position: relative; padding: 0 var(--margen) clamp(2.5rem, 9vh, 6rem); max-width: 1440px; width: 100%; margin: 0 auto; }
.hero__titulo {
  font-family: var(--fuente-titulos); font-weight: 400;
  font-size: clamp(3.3rem, 9.5vw, 9rem); line-height: .94; letter-spacing: -0.03em;
}
.hero__texto { margin-top: 1.4rem; max-width: 30rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: #e9e4e1; }
.hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- Marcos de imagen ---------- */
.marco { position: relative; overflow: hidden; }
.marco img { width: 100%; height: 100%; object-fit: cover; }
[data-parallax="img"] { transform: scale(1.18); will-change: transform; }
.pie { margin-top: .9rem; font-size: .9rem; color: var(--tinta-suave); }

/* ---------- Manifiesto ---------- */
.manifiesto { padding: var(--seccion) 0; }
.manifiesto__grid { display: grid; gap: 3rem; }
.manifiesto__texto {
  font-family: var(--fuente-titulos); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.15; letter-spacing: -0.01em;
}
.manifiesto__texto .palabra { transition: none; }
.manifiesto__foto--alta .marco { aspect-ratio: 4 / 5; }
.manifiesto__foto--ancha .marco { aspect-ratio: 3 / 2; }

/* ---------- Un evento ---------- */
.dia { background: var(--noche); color: var(--papel); }
.dia__pin { position: relative; }
.dia__pista { display: flex; flex-direction: column; gap: 3.5rem; padding: var(--seccion) var(--margen); }
.dia__intro { max-width: 30rem; }
.dia__lead { margin-top: 1.4rem; color: var(--claro-suave); font-size: 1.15rem; }
.momento__foto { aspect-ratio: 3 / 2; }
.momento--alto .momento__foto { aspect-ratio: 3 / 4; }
.momento--cuadro .momento__foto { aspect-ratio: 1 / 1; }
.momento__titulo { margin-top: 1.1rem; font-family: var(--fuente-titulos); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.momento__texto { margin-top: .35rem; color: var(--claro-suave); }
.dia__barra { display: none; }

/* ---------- Catering (componente de pantalla completa) ---------- */
.espacios { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--noche); color: var(--papel); }
.espacios__fondos, .espacio { position: absolute; inset: 0; }
.espacios__fondos { z-index: 0; }
.espacios::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(21, 17, 18, .78) 0%, rgba(21, 17, 18, .3) 34%, rgba(21, 17, 18, 0) 50%);
}
.espacio { visibility: hidden; }
.espacio.is-activo { visibility: visible; z-index: 1; }
.espacio picture { display: block; width: 100%; height: 100%; }
.espacio img { width: 100%; height: 100%; object-fit: cover; }
#panel-afuera img { object-position: 50% 20%; }
.espacio__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(21, 17, 18, .88) 0%, rgba(21, 17, 18, .25) 45%, rgba(21, 17, 18, 0) 60%),
    linear-gradient(to bottom, rgba(21, 17, 18, .6) 0%, rgba(21, 17, 18, 0) 35%);
}
.espacio__info { position: absolute; left: var(--margen); bottom: clamp(6.5rem, 14vh, 8.5rem); max-width: 34rem; padding-right: var(--margen); }
.espacio__nombre { font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; }
.espacio__texto { margin-top: 1rem; font-size: 1.1rem; color: #e9e4e1; max-width: 26rem; }

.espacios__cabeza { position: absolute; z-index: 3; top: clamp(5.5rem, 13vh, 8rem); left: var(--margen); right: var(--margen); max-width: 30rem; }
.espacios__lead { margin-top: 1rem; color: #e9e4e1; text-shadow: 0 1px 14px rgba(21, 17, 18, .6); }
.espacios__accion { margin-top: 1.4rem; }

.espacios__lista { display: none; }
.espacios__tab {
  position: relative; display: block; width: 100%;
  background: none; border: 0; padding: .35rem 0 .35rem 2.6rem; cursor: pointer;
  font-family: var(--fuente-titulos); font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.15; text-align: left;
  color: rgba(245, 243, 240, .72); text-shadow: 0 1px 14px rgba(21, 17, 18, .45); transition: color .4s ease;
}
.espacios__tab::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.8rem; height: 1px; background: var(--vino-claro);
  transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-in-out);
}
@media (hover: hover) { .espacios__tab:hover { color: rgba(245, 243, 240, .9); } }
.espacios__tab[aria-selected="true"] { color: var(--papel); }
.espacios__tab[aria-selected="true"]::before { transform: scaleX(1); }

.espacios__control {
  position: absolute; z-index: 3; left: var(--margen); right: var(--margen); bottom: clamp(1.8rem, 5vh, 3rem);
  display: flex; align-items: center; gap: 1rem;
}
.espacios__num { font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.espacios__barra { position: relative; flex: 1; height: 1px; background: rgba(245, 243, 240, .3); overflow: hidden; }
.espacios__barra span { position: absolute; inset: 0; background: var(--vino-claro); transform: scaleX(.25); transform-origin: left center; }
.espacios__flecha {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0 -.85rem;
  background: none; border: 0; color: rgba(245, 243, 240, .8); cursor: pointer;
  transition: color .3s ease;
}
.espacios__flecha svg { width: .95rem; height: .95rem; transition: transform .4s var(--ease-out); }
@media (hover: hover) {
  .espacios__flecha:hover { color: var(--vino-claro); }
  [data-espacios-prev]:hover svg { transform: translateX(-4px); }
  [data-espacios-next]:hover svg { transform: translateX(4px); }
}
.espacios__flecha:active { color: var(--vino-claro); }

/* ---------- Espacios (tres bloques asimétricos) ---------- */
.lugares { padding: var(--seccion) 0; }
.lugares__cabeza { margin-bottom: 3.5rem; }
.lugares__lead { margin-top: 1.2rem; max-width: 26rem; color: var(--tinta-suave); font-size: 1.15rem; }
.lugares__grid { display: grid; gap: 3.5rem; }
.lugar__foto { aspect-ratio: 4 / 3; }
.lugar--salon .lugar__foto { aspect-ratio: 4 / 5; }
.lugar--jardin .lugar__foto { aspect-ratio: 1 / 1; }
.lugar__nombre { margin-top: 1.2rem; font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.05; }
.lugar__texto { margin-top: .5rem; color: var(--tinta-suave); max-width: 24rem; }

/* ---------- Celebraciones ---------- */
.eventos { background: var(--noche-2); color: var(--papel); padding: var(--seccion) 0; }
.eventos__titulo { margin-bottom: 3.5rem; }
.eventos__respuesta { display: none; }
.eventos__lista { display: grid; gap: 4.5rem; }
.evento { display: grid; gap: 1.6rem; }
.evento__nombre { font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; }
.evento__texto p { margin-top: .9rem; color: var(--claro-suave); max-width: 30rem; }
.evento__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; margin-top: 1.6rem; }

/* Enlace "Ver paquete": texto con flecha, para no competir con WhatsApp */
.enlace-paquete {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0;
  background: none; border: 0; color: var(--papel); cursor: pointer;
  font-family: var(--fuente-texto); font-weight: 500; font-size: .95rem; letter-spacing: .02em;
}
.enlace-paquete::after { content: "→"; color: var(--vino-claro); transition: transform .45s var(--ease-out); }
@media (hover: hover) { .enlace-paquete:hover::after { transform: translateX(5px); } }
.enlace-paquete:focus-visible::after { transform: translateX(5px); }

/* ---------- Panel de paquete (dialog) ---------- */
.paquete {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: hidden;
}
.paquete::backdrop { background: transparent; }
.paquete__fondo { position: absolute; inset: 0; background: rgba(21, 17, 18, .62); }
.paquete__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 44vw);
  background: var(--papel); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -24px 0 60px rgba(21, 17, 18, .35);
}
.paquete__cerrar {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  background: var(--papel); border: 0; color: var(--noche); cursor: pointer;
}
.paquete__cerrar svg { width: 1.15rem; height: 1.15rem; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .paquete__cerrar:hover svg { transform: rotate(90deg); } }
.paquete__foto { aspect-ratio: 4 / 3; overflow: hidden; }
@media (min-width: 640px) { .paquete__foto { aspect-ratio: 16 / 10; } }
.paquete__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.paquete__cuerpo { padding: 2rem clamp(1.4rem, 3vw, 2.6rem) 2.5rem; }
.paquete__titulo { font-family: var(--fuente-titulos); font-weight: 400; font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -0.02em; }
.paquete__intro { margin-top: .9rem; color: var(--tinta-suave); }
.paquete__datos { margin: 2rem 0 0; border-top: 1px solid rgba(27, 22, 23, .16); }
.paquete__datos div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid rgba(27, 22, 23, .16); }
.paquete__datos dt { font-weight: 500; }
.paquete__datos dd { margin: 0; color: var(--tinta-suave); font-style: italic; text-align: right; }
.paquete__boton { margin-top: 2rem; --relleno: var(--noche); --texto-hover: var(--papel); }
.evento--boda .evento__foto { aspect-ratio: 4 / 5; }
.evento--sociales .evento__foto { aspect-ratio: 9 / 14; max-width: 360px; }
.evento--empresa .evento__foto { aspect-ratio: 4 / 3; }

/* ---------- Galería ---------- */
.galeria { padding: var(--seccion) 0 calc(var(--seccion) * .7); overflow: hidden; }
.galeria__titulo { margin-bottom: 3.5rem; }
.galeria__columnas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.galeria__col { display: contents; }
.galeria__creditos { margin-top: 2.5rem; font-size: .85rem; color: var(--tinta-suave); }

/* ---------- Visita ---------- */
.visita { position: relative; min-height: 100svh; display: grid; place-items: center; background: var(--noche); color: var(--papel); overflow: hidden; }
.visita__recorte { position: absolute; inset: 0; will-change: clip-path; }
.visita__recorte img { width: 100%; height: 100%; object-fit: cover; }
.visita__velo { position: absolute; inset: 0; background: rgba(21, 17, 18, .6); pointer-events: none; }
.visita__contenido { position: relative; text-align: center; padding: 6rem var(--margen); max-width: 46rem; }
.visita__titulo { font-size: clamp(3rem, 8vw, 7rem); }
.visita__texto { margin: 1.4rem auto 0; max-width: 28rem; font-size: 1.15rem; color: #e9e4e1; }
.visita__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.visita__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; margin-top: 2.2rem; font-size: 1rem; }
.visita__datos a { text-decoration: none; border-bottom: 1px solid rgba(245, 243, 240, .4); }
@media (hover: hover) { .visita__datos a:hover { border-color: var(--vino-claro); } }
.visita__datos span { color: #dcd5d2; font-size: .85rem; margin-left: .3rem; }
.visita__lugar { margin-top: 1.2rem; font-size: .9rem; letter-spacing: .04em; color: #dcd5d2; }

/* ---------- Pie ---------- */
.pie-pagina { background: var(--noche); color: var(--papel); padding: 3rem var(--margen) 2rem; }
.pie-pagina__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1440px; margin: 0 auto; }
.pie-pagina__redes { display: flex; gap: 1.8rem; }
.pie-pagina__redes a { text-decoration: none; }
.pie-pagina__fila--legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(245, 243, 240, .14); font-size: .85rem; color: var(--claro-suave); }
.pie-pagina__zenit { color: rgba(255, 255, 255, .46); font-size: 12px; letter-spacing: .06em; }
.marca--pie { margin-right: 0; }
.marca--pie .marca__nombre { font-size: 1.4rem; }

/* ---------- Solo celular ---------- */
@media (max-width: 639px) {
  .cabecera { padding: .9rem var(--margen); gap: .9rem; }
  .nav { display: none; }
  .cabecera .boton--cabecera { min-height: 2.4rem; padding: .45rem .85rem; font-size: .82rem; letter-spacing: .01em; }
  .menu-boton { display: inline-flex; padding: .6rem 0 .6rem .3rem; }
  .menu-boton__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .marca__nombre { font-size: .82rem; letter-spacing: .18em; }
  .marca__lugar { font-size: .55rem; }
  .hero__contenido { padding-bottom: 6.5rem; }
  .hero__botones .boton { flex: 1 1 auto; }
  .espacios__cabeza { top: 5.2rem; }
  .espacios__accion .boton { min-height: 2.75rem; padding: .6rem 1.2rem; }
  .dia__pista { gap: 3rem; }
  .lugar--jardin .lugar__foto { aspect-ratio: 4 / 3; }
  .evento--sociales .evento__foto { max-width: 62%; }
  .galeria__col:last-child figure:last-child { grid-column: 1 / -1; }
  .paquete__panel { width: 100%; box-shadow: none; }
  .visita__botones .boton { flex: 1 1 100%; }
  .visita__datos { flex-direction: column; align-items: center; }
  .pie-pagina__fila { flex-direction: column; align-items: flex-start; }
}

/* ---------- Tablet (entre celular y compu) ---------- */
@media (min-width: 640px) and (max-width: 959px) {
  .nav { display: none; }
  .menu-boton { display: inline-flex; }
  .cabecera { gap: 1.2rem; }
  .lugares__grid { grid-template-columns: 1fr 1fr; }
  .lugar--salon { grid-row: span 2; }
  .galeria__columnas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Solo compu ---------- */
@media (min-width: 960px) {
  .manifiesto__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 0; align-items: start; }
  .manifiesto__texto { grid-column: 1 / 9; grid-row: 1; }
  .manifiesto__foto--alta { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 8rem; }
  .manifiesto__foto--ancha { grid-column: 2 / 8; grid-row: 2; margin-top: 5rem; }

  .dia__pin { height: 100vh; overflow: hidden; }
  .dia__pista { flex-direction: row; align-items: center; gap: 6vw; height: 100%; width: max-content; padding: 0 8vw 0 var(--margen); }
  .dia__intro { width: 30vw; flex-shrink: 0; }
  .momento { flex-shrink: 0; }
  .momento__foto { height: 56vh; width: auto; }
  .momento:nth-of-type(even) { align-self: flex-start; margin-top: 12vh; }
  .momento:nth-of-type(odd) { align-self: flex-end; margin-bottom: 10vh; }
  .dia__barra { display: block; position: absolute; left: var(--margen); right: var(--margen); bottom: 4vh; height: 1px; background: rgba(245, 243, 240, .18); }
  .dia__barra span { display: block; height: 100%; width: 100%; background: var(--vino-claro); transform: scaleX(0); transform-origin: left center; }

  .espacios::after { background: linear-gradient(to bottom, rgba(21, 17, 18, .78) 0%, rgba(21, 17, 18, .3) 34%, rgba(21, 17, 18, 0) 50%), linear-gradient(to left, rgba(21, 17, 18, .82) 0%, rgba(21, 17, 18, .5) 30%, rgba(21, 17, 18, 0) 55%); }
  .espacios__lista { display: block; position: absolute; z-index: 3; right: var(--margen); top: 50%; transform: translateY(-50%); width: min(26rem, 34vw); }
  .espacios__control { left: auto; width: min(26rem, 34vw); }
  .espacio__info { bottom: clamp(3rem, 9vh, 5.5rem); }

  /* Espacios: arriba el salón alto y el jardín bajado; abajo la terraza ancha, corrida al centro */
  .lugares__cabeza { margin-bottom: 5rem; }
  .lugares__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 0; align-items: start; }
  .lugar--salon { grid-column: 1 / 6; grid-row: 1; }
  .lugar--jardin { grid-column: 7 / 12; grid-row: 1; margin-top: 7rem; }
  .lugar--terraza { grid-column: 4 / 12; grid-row: 2; margin-top: 6rem; }

  .eventos__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5rem; }
  .eventos__fijo { position: sticky; top: 24vh; }
  .eventos__titulo { margin-bottom: 0; }
  .eventos__lista { gap: 10rem; padding-top: 2rem; }
  .evento--boda { grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: end; }
  .evento--sociales { grid-template-columns: 5fr 6fr; gap: 2.5rem; align-items: end; }
  .evento--sociales .evento__foto { max-width: none; }
  /* Solo cuando el JS guía la sección: la respuesta aparece y los eventos que no están en foco se apagan. */
  .eventos.is-guiado .eventos__respuesta {
    display: flex; align-items: center; gap: 1.2rem; margin-top: 2.4rem;
    font-family: var(--fuente-titulos); font-style: italic; font-size: clamp(1.7rem, 2.5vw, 2.4rem); color: var(--papel);
  }
  .eventos__raya { width: 2.6rem; height: 1px; background: var(--vino-claro); flex-shrink: 0; }
  .eventos__ventana { display: inline-block; overflow: hidden; line-height: 1.35; }
  .eventos__ventana span { display: inline-block; }
  .eventos.is-guiado .evento { opacity: .38; transition: opacity .7s ease; }
  .eventos.is-guiado .evento.is-activo { opacity: 1; }

  .galeria__columnas { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
  .galeria__col { display: flex; flex-direction: column; gap: 1.4rem; }
  .galeria__col:nth-child(2) { margin-top: 8rem; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
  [data-parallax="img"] { transform: none; }
  .boton, .boton::before, .rodar__in, .cabecera { transition: none; }
  .eventos__respuesta { display: none !important; }
  .boton:active { transform: none; }
}