/* Café La Neblina · v3
   Dirección: fotos a tamaños desiguales (Taste, semilla 1191540851) con el nombre enorme bajo una foto a sangre.
   Para otro cliente: cambiar :root (colores y fuente). */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations");
}

:root {
  /* Color: gris neblina, tinta negra, un solo acento petróleo para la acción */
  --fondo: #d8dbd9;
  --superficie: #c9cdcb;
  --tinta: #0a0a0a;
  --suave: #4f4b46;
  --acento: #256f82;
  --acento-hondo: #1a5263;
  --sobre-acento: #ffffff;
  --noche: #121110;
  --sobre-noche: #e4e4e1;
  --sobre-noche-suave: #b4b4b0;
  --acento-noche: #8cc6d4;

  /* Tipografía: una sola familia, cinco tamaños */
  --letra: "Newsreader", "Iowan Old Style", Georgia, serif;
  --t-peq: 0.9375rem;                                   /* 15px */
  --t-cuerpo: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); /* 18–21px */
  --t-entrada: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); /* 22–30px */
  --t-titulo: clamp(2.6rem, 1.4rem + 4.2vw, 5.25rem);   /* 42–84px */
  --t-gigante: clamp(7rem, 20.6vw, 21rem);

  /* Rejilla */
  --margen: clamp(20px, 5vw, 72px);
  --hueco: clamp(12px, 1.6vw, 24px);
  --entre-secciones: 200px;

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: var(--t-cuerpo);
  font-optical-sizing: auto;
  line-height: 1.5;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; background: var(--superficie); }
h1, h2, h3, p, ul, dl, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--tinta); color: var(--fondo); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.saltar { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--tinta); color: var(--fondo); padding: 12px 16px; }
.saltar:focus { left: 16px; top: 16px; }

/* ---------- Aviso de demo ---------- */
.aviso-demo {
  background: var(--tinta);
  color: var(--sobre-noche);
  font-size: var(--t-peq);
  padding: 8px var(--margen);
  text-align: center;
}
.aviso-demo a { color: var(--acento-noche); text-underline-offset: 3px; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px var(--margen);
}
.marca {
  font-size: var(--t-cuerpo);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav { flex: 1; }
.nav-enlaces { display: flex; gap: 28px; font-size: var(--t-peq); }
.nav-enlaces a, .nav-movil a { text-decoration: none; padding: 6px 0; }
.nav-enlaces a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-movil { display: none; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-block;
  white-space: nowrap;
  background: var(--acento);
  color: var(--sobre-acento);
  font: 600 var(--t-peq)/1.2 var(--letra);
  padding: 14px 22px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease-out, transform 160ms var(--salida);
}
.boton:hover { background: var(--acento-hondo); }
.boton:active { transform: scale(0.97); }
.boton-nav { padding: 11px 18px; }

.enlace {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-underline-offset 200ms var(--salida), color 160ms ease-out;
}
.enlace:hover { text-underline-offset: 8px; color: var(--acento); }

/* ---------- Títulos ---------- */
.titulo-grande, .titulo-medio {
  font-size: var(--t-titulo);
  font-weight: 330;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.entrada { font-size: var(--t-entrada); line-height: 1.3; letter-spacing: -0.01em; }

.seccion { padding: var(--entre-secciones) var(--margen) 0; }

/* ---------- Portada ---------- */
.portada-foto {
  position: relative;
  height: clamp(280px, 40svh, 520px);
  overflow: hidden;
  background: #2b2622;
}
.portada-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portada-img + .portada-img { clip-path: inset(0 0 0 100%); }

.portada-banda { padding: 28px var(--margen) 28px; }
.portada-fila {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.portada-frase { max-width: 34ch; font-size: var(--t-cuerpo); line-height: 1.4; }
.portada-accion { display: flex; align-items: center; gap: 20px; }
.estado-corto { font-size: var(--t-peq); color: var(--suave); text-align: right; max-width: 34ch; }
.abierto .estado-corto { color: var(--tinta); }

.nombre-gigante {
  font-size: var(--t-gigante);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.82;
  white-space: nowrap;
  margin: 0 0 0 -0.04em;
}
.nombre-gigante span { display: inline-block; }

/* ---------- Lo más pedido: una foto levantada y cuatro a su lado ---------- */
.pedidos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
}
.pedidos-lado {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
}

.nota { font-size: var(--t-peq); color: var(--suave); max-width: 28ch; }
.pedidos-lado .nota:first-of-type { margin-top: auto; }

.mosaico-pedidos {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  column-gap: var(--hueco);
  row-gap: 28px;
  align-items: end;
}
.cuadro-alto { grid-column: 1 / 5; grid-row: 1 / span 2; }
.cuadro:nth-child(2) { grid-column: 5 / 7; grid-row: 1; align-self: start; }
.cuadro:nth-child(3) { grid-column: 7 / 10; grid-row: 1; align-self: start; width: 78%; }
.cuadro:nth-child(4) { grid-column: 5 / 8; grid-row: 2; }
.cuadro:nth-child(5) { grid-column: 8 / 10; grid-row: 2; }
.cuadro { margin: 0; }
.cuadro img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 400ms var(--salida);
}
.cuadro-alto img { aspect-ratio: 4 / 5; }
.cuadro:hover img { transform: translateY(-6px); }
.cuadro figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  font-size: var(--t-peq);
}
.cuadro-alto figcaption { font-size: var(--t-cuerpo); }
.precio { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; }

/* ---------- El rito: diagonal ---------- */
.rito {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
}
.rito-titulo { grid-column: 7 / 13; grid-row: 1; align-self: start; }
.rito-paso { display: contents; }
.rito-uno img { grid-column: 1 / 6; grid-row: 1 / span 3; aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.rito-uno p { grid-column: 7 / 12; grid-row: 2; margin-top: 40px; }
.rito-dos img { grid-column: 6 / 9; grid-row: 4; aspect-ratio: 1; width: 100%; object-fit: cover; margin-top: -12vw; }
.rito-dos p { grid-column: 9 / 13; grid-row: 4; align-self: start; margin-top: -12vw; }
.rito-tres img { grid-column: 8 / 13; grid-row: 5; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; margin-top: 120px; }
.rito-tres p { grid-column: 3 / 7; grid-row: 5; align-self: start; margin-top: 120px; }
.rito p { max-width: 36ch; font-size: var(--t-cuerpo); }
.rito strong { font-weight: 600; }

/* ---------- La carta ---------- */
.carta-titulo span { display: block; }
.carta-titulo span:first-child { padding-left: 3vw; }
.carta-cuerpo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  margin-top: 96px;
}
.carta-foto { grid-column: 1 / 5; align-self: start; position: sticky; top: 32px; }
.carta-tabla { grid-column: 6 / 13; display: flex; flex-direction: column; gap: 56px; }
.carta-grupo h3 { font-size: var(--t-peq); font-weight: 500; color: var(--suave); margin-bottom: 14px; }
.carta-grupo li {
  display: grid;
  grid-template-columns: 1fr 1.15fr 5.5em;
  gap: 4px 20px;
  align-items: baseline;
  padding: 11px 0;
}
.item { font-weight: 500; }
.detalle { color: var(--suave); font-size: var(--t-peq); font-style: italic; }
.carta-grupo .precio { text-align: right; }
.carta-pie { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.carta-pie p { font-size: var(--t-peq); color: var(--suave); }

/* ---------- La casa ---------- */
.casa-cabeza { max-width: 44rem; display: grid; gap: 24px; }
.casa-mosaico {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  margin-top: 72px;
  align-items: start;
}
.casa-foto { grid-column: 1 / 9; position: relative; }
.casa-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.casa-nota {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  padding: 20px;
  background: var(--fondo);
  font-size: var(--t-peq);
  line-height: 1.45;
}
.casa-lado { grid-column: 9 / 13; display: grid; gap: 32px; }
.casa-tile {
  background: var(--noche);
  color: var(--sobre-noche);
  padding: 28px;
  aspect-ratio: 4 / 3.6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.tile-cifra { font-size: var(--t-titulo); font-weight: 300; letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: lining-nums; }
.casa-tile p:last-child { font-size: var(--t-peq); color: var(--sobre-noche); max-width: 30ch; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; font-size: var(--t-peq); }
.datos dt { color: var(--suave); }
.datos dd { margin: 2px 0 0; font-weight: 500; }

/* ---------- Visítanos ---------- */
.visita {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  align-items: start;
}
.visita-texto { grid-column: 1 / 7; display: grid; gap: 32px; }
.vivo { display: grid; gap: 8px; }
.vivo-estado { font-size: var(--t-entrada); line-height: 1.2; font-weight: 450; }
.abierto .vivo-estado { color: var(--acento-hondo); }
.vivo-tanda { max-width: 40ch; }
.horario { border-collapse: collapse; width: 100%; max-width: 34rem; font-size: var(--t-cuerpo); }
.horario caption { text-align: left; font-size: var(--t-peq); color: var(--suave); padding-bottom: 8px; }
.horario th { text-align: left; font-weight: 400; padding: 10px 16px 10px 0; }
.horario td { text-align: right; padding: 10px 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.horario tr:nth-child(odd) { background: var(--superficie); }
.horario tr:nth-child(odd) th { padding-left: 12px; }
.horario tr:nth-child(odd) td { padding-right: 12px; }
.horario tr th { padding-left: 12px; }
.horario tr td { padding-right: 12px; }
.direccion { font-size: var(--t-cuerpo); }
.visita-enlaces { display: flex; gap: 28px; flex-wrap: wrap; }
.visita-foto { grid-column: 8 / 13; margin-top: 140px; }
.visita-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Preguntas ---------- */
.preguntas-lista {
  margin: 80px 0 0 calc((100% + var(--hueco)) / 3);
  display: grid;
  gap: 12px;
}
.preguntas-lista details { padding: 16px 24px; margin: 0 -24px; transition: background-color 200ms ease-out; }
.preguntas-lista details[open] { background: var(--superficie); }
.preguntas-lista summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: var(--t-entrada);
  line-height: 1.25;
}
.preguntas-lista summary::-webkit-details-marker { display: none; }
.preguntas-lista summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 260ms var(--salida);
}
.preguntas-lista details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.preguntas-lista details p { max-width: 48ch; padding: 14px 0 6px; }

/* ---------- Contacto ---------- */
.contacto {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  padding-bottom: var(--entre-secciones);
  align-items: start;
}
.contacto-intro { grid-column: 1 / 6; display: grid; gap: 40px; }
.caminos { display: grid; gap: 32px; }
.camino { display: grid; gap: 8px; justify-items: start; }
.camino h3 { font-size: var(--t-entrada); font-weight: 450; letter-spacing: -0.01em; }
.contacto-foto { width: 168px; height: 168px; object-fit: cover; }

.formulario {
  grid-column: 7 / 13;
  background: var(--superficie);
  padding: clamp(24px, 3vw, 44px);
  display: grid;
  gap: 20px;
}
.campo { display: grid; gap: 6px; }
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { font-size: var(--t-peq); font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid #8a847b;
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color 160ms ease-out;
}
input:hover, textarea:hover { border-color: var(--tinta); }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
textarea { resize: vertical; min-height: 140px; }
::placeholder { color: var(--suave); opacity: 1; }
.ayuda { font-size: var(--t-peq); color: var(--suave); margin-top: -8px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; line-height: 1.45; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--acento); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo trampa oculto, no es una línea */

/* ---------- Pie ---------- */
.pie {
  background: var(--noche);
  color: var(--sobre-noche);
  padding: 56px var(--margen) 40px;
  overflow: hidden;
}
.pie-nombre span { display: inline-block; }
.pie-nombre {
  font-size: var(--t-gigante);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.82;
  white-space: nowrap;
  margin-left: -0.04em;
}
.pie-fila {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  margin-top: 72px;
}
.pie-lugares { grid-column: 1 / 6; display: grid; gap: 6px; font-size: var(--t-entrada); line-height: 1.25; }
.pie-lugares a { color: var(--acento-noche); text-decoration: none; transition: color 160ms ease-out; }
.pie-lugares a:hover { color: var(--sobre-noche); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pie-cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: var(--t-peq); }
.pie-cols ul { display: grid; gap: 8px; align-content: start; }
.pie-cols a { text-decoration: none; }
.pie-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie-cols p { color: var(--sobre-noche-suave); }
.pie-legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 96px;
  font-size: var(--t-peq);
  color: var(--sobre-noche-suave);
}
.pie-legal a { color: var(--sobre-noche); }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tinta);
  color: var(--fondo);
  font-size: var(--t-peq);
  font-weight: 500;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 180ms ease-out, transform 160ms var(--salida);
}
.whatsapp svg { width: 20px; height: 20px; }
.whatsapp:hover { background: var(--acento-hondo); }
.whatsapp:active { transform: scale(0.96); }
/* Con JS, el botón flotante aparece cuando ya pasaste la portada (sin JS siempre está). */
.wa-espera .whatsapp { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 300ms var(--salida), transform 300ms var(--salida), background-color 180ms ease-out; }
.wa-espera.wa-ver .whatsapp { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .wa-espera .whatsapp { transform: none; } }

/* ---------- Páginas secundarias ---------- */
.pagina { padding: 96px var(--margen) var(--entre-secciones); }
.pagina-rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  align-items: start;
}
.pagina-texto { grid-column: 1 / 7; display: grid; gap: 28px; justify-items: start; }
.pagina-foto { grid-column: 8 / 13; }
.pagina-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.acciones { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.legal-cabeza { display: grid; gap: 24px; max-width: 56rem; }
.legal-cuerpo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--hueco);
  margin-top: 96px;
}
.legal-indice { grid-column: 1 / 4; font-size: var(--t-peq); position: sticky; top: 24px; align-self: start; display: grid; gap: 8px; }
.legal-indice a { text-decoration: none; color: var(--suave); }
.legal-indice a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.legal-texto { grid-column: 5 / 12; display: grid; gap: 14px; }
.legal-texto h2 { font-size: var(--t-entrada); font-weight: 450; letter-spacing: -0.01em; margin-top: 36px; }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto p { max-width: 62ch; }
.fecha { font-size: var(--t-peq); color: var(--suave); }

/* ---------- Tableta ---------- */
@media (max-width: 1100px) {
  .rito { display: block; }
  .rito-paso { display: block; margin-top: 64px; }
  .rito-paso img, .rito-paso p { margin: 0; }
  .rito-paso p { margin-top: 20px; }
  .rito-uno img, .rito-uno p { width: 72%; }
  .rito-dos { display: flex; flex-direction: row-reverse; gap: var(--hueco); align-items: flex-start; }
  .rito-dos img { width: 52%; }
  .rito-dos p { flex: 1; margin-top: 0; }
  .rito-tres img, .rito-tres p { width: 72%; margin-left: 14%; }
}

@media (max-width: 900px) {
  :root { --entre-secciones: 140px; }
  .pedidos-lado { grid-column: 1 / -1; }
  .pedidos-lado .nota:first-of-type { margin-top: 8px; }
  .mosaico-pedidos { grid-column: 1 / -1; margin-top: 40px; }
  .carta-foto { grid-column: 1 / 5; }
  .carta-tabla { grid-column: 5 / 13; }
  .casa-foto { grid-column: 1 / -1; }
  .casa-lado { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .visita-texto { grid-column: 1 / 8; }
  .visita-foto { grid-column: 8 / 13; margin-top: 96px; }
  .preguntas-lista { margin-left: 0; }
  .portada-fila { flex-direction: column; align-items: flex-start; gap: 20px; }
  .portada-accion { flex-direction: row-reverse; justify-content: flex-end; }
  .estado-corto { text-align: left; }
  .contacto-intro, .formulario { grid-column: 1 / -1; }
  .formulario { margin-top: 48px; }
  .pie-lugares, .pie-cols { grid-column: 1 / -1; }
  .pie-cols { margin-top: 48px; }
  .pagina-texto { grid-column: 1 / 8; }
  .pagina-foto { grid-column: 9 / 13; }
  .legal-indice { display: none; }
  .legal-texto { grid-column: 1 / -1; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 640px) {
  :root { --entre-secciones: 112px; --t-gigante: 27vw; }
  .cabecera { gap: 16px; padding-block: 14px; flex-wrap: nowrap; }
  .nav { flex: 0 0 auto; order: 3; }
  .nav-enlaces { display: none; }
  .nav-movil { display: block; position: relative; }
  .nav-movil summary { list-style: none; cursor: pointer; font-size: var(--t-peq); font-weight: 500; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; }
  .nav-movil summary::-webkit-details-marker { display: none; }
  .nav-movil ul {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 25;
    background: var(--tinta);
    color: var(--fondo);
    padding: 12px 20px;
    display: grid;
    gap: 4px;
    min-width: 180px;
    font-size: var(--t-cuerpo);
  }
  .boton-nav { margin-left: auto; padding: 10px 14px; }
  .cabecera .marca { flex: 1; }
  .boton-nav { display: none; }

  .portada-foto { height: 40svh; }
  .portada-banda { padding-top: 20px; }
  .portada-fila { flex-direction: column; align-items: flex-start; gap: 20px; }
  .portada-accion { flex-direction: row-reverse; justify-content: flex-end; width: 100%; }
  .estado-corto { text-align: left; }
  .nombre-gigante { white-space: normal; line-height: 0.84; }
  .nombre-gigante span, .pie-nombre span { display: block; }
  .pie-nombre { white-space: normal; }

  .mosaico-pedidos { grid-template-columns: 1fr 1fr; row-gap: 24px; column-gap: 12px; align-items: start; }
  .mosaico-pedidos .cuadro { grid-column: auto; grid-row: auto; width: auto; align-self: start; }
  .mosaico-pedidos .cuadro-alto { grid-column: 1 / -1; }
  .cuadro figcaption { flex-direction: column; gap: 0; }
  .cuadro-alto figcaption { flex-direction: row; }

  .rito-paso { margin-top: 48px; }
  .rito-uno img, .rito-uno p { width: 100%; }
  .rito-dos { display: block; }
  .rito-dos img, .rito-dos p { width: 62%; margin-left: auto; }
  .rito-dos p { margin-top: 16px; }
  .rito-tres img, .rito-tres p { width: 78%; margin-left: 0; }

  .carta-titulo span:first-child { padding-left: 0; }
  .carta-cuerpo { display: flex; flex-direction: column-reverse; margin-top: 48px; gap: 56px; }
  .carta-foto { width: 64%; margin-left: auto; }
  .carta-grupo li { grid-template-columns: 1fr auto; }
  .carta-grupo .detalle { grid-column: 1; grid-row: 2; }
  .carta-grupo .precio { grid-column: 2; grid-row: 1; }

  .casa-foto img { aspect-ratio: 4 / 3; }
  .casa-nota { position: static; width: auto; padding: 16px 0 0; background: none; }
  .casa-lado { grid-template-columns: 1fr; }
  .casa-tile { aspect-ratio: auto; min-height: 220px; }

  .visita { display: flex; flex-direction: column; }
  .visita-foto { width: 72%; margin: 48px 0 0 auto; }

  .preguntas-lista { margin-top: 48px; }
  .preguntas-lista details { margin: 0 calc(-1 * var(--margen)); padding: 14px var(--margen); }
  .preguntas-lista summary { font-size: var(--t-cuerpo); }

  .contacto-foto { width: 120px; height: 120px; }
  .campo-par { grid-template-columns: 1fr; }

  .pie-cols { grid-template-columns: 1fr 1fr; }
  .pie-cols p { grid-column: 1 / -1; }
  .pie-legal { margin-top: 64px; }

  .pagina { padding-top: 56px; }
  .pagina-texto, .pagina-foto { grid-column: 1 / -1; }
  .pagina-foto { width: 72%; margin: 48px 0 0 auto; }

  .whatsapp { right: 12px; bottom: 12px; }
}

/* ---------- Movimiento (solo si el visitante no pidió reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Fundido lento de la portada: la luz del día sobre la misma barra */
  .portada-img:nth-child(2) { animation: fundido-dos 24s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .portada-img:nth-child(3) { animation: fundido-tres 24s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .pausado .portada-img { animation-play-state: paused; }
  .portada-foto { animation: acercar 1.8s var(--salida) both; }
  .portada-foto .portada-img:first-child { animation: respirar 24s ease-in-out infinite alternate; }

  .nombre-gigante span { animation: subir 900ms var(--salida) both; }
  .nombre-gigante span + span { animation-delay: 90ms; }
  .portada-fila { animation: aparecer 700ms var(--salida) 250ms both; }

  /* Aparición al hacer scroll: solo cuando movimiento.js confirmó que puede mostrarlo */
  .mov [data-aparecer] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 560ms var(--salida), transform 560ms var(--salida);
    transition-delay: var(--retraso, 0ms);
  }
  .mov [data-aparecer].visto { opacity: 1; transform: none; }
  /* Lo que ya tiene su propio movimiento al pasar el mouse no hereda el retraso */
  .mov .cuadro.visto img { transition-delay: 0ms; }
}

/* Cada foto entra como la luz por la ventana: de derecha a izquierda, lenta */
@keyframes fundido-dos {
  0%, 25% { clip-path: inset(0 0 0 100%); }
  33%, 66% { clip-path: inset(0 0 0 0); }
  66.1%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes fundido-tres {
  0%, 58.3% { clip-path: inset(0 0 0 100%); }
  66%, 91.7% { clip-path: inset(0 0 0 0); }
  99.9% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes acercar { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes respirar { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes subir { from { opacity: 0; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }