/* Home (inicio): la estructura de la maqueta de referencia (propuestas/home-referencia) con la
   identidad de Recuerda. Se carga solo en la home, después de site.css y home.css; añade lo nuevo
   (clases con prefijo mq-) y, al final, las tipografías de la home. */

.page-home {
  --mq-linea: rgb(47 34 23 / 0.42);
  /* Alto de la cabecera de siempre (relleno + logo + línea), para centrar la portada debajo */
  --mq-cab-h: calc(clamp(1.1rem, 2.2vw, 1.8rem) * 2 + var(--logo-w) * 388 / 760 + 1px);
}

/* Cabecera de siempre (mariposa, logo y las tres rayas del menú), aquí en su sitio y no fija */
body.page-home > .cabecera { position: relative; z-index: 2; }

/* Botón con borde fino; relleno en chocolate sobre la foto; en crema sobre el chocolate ---------- */
.mq-boton {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 0.85rem 1.7rem;
  font: 0.72rem var(--font-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--choco);
  border: 1px solid currentColor;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.mq-boton:hover { background: var(--choco); color: var(--marfil-texto); border-color: var(--choco); }
.mq-boton--lleno { background: var(--choco); color: var(--marfil-texto); border-color: var(--choco); }
.mq-boton--lleno:hover { background: var(--marfil-texto); color: var(--choco); border-color: var(--marfil-texto); }
.mq-boton--claro { color: var(--marfil-texto); }
.mq-boton--claro:hover { background: var(--marfil-texto); color: var(--choco); border-color: var(--marfil-texto); }
/* Botón ovalado, como en la referencia: un óvalo de línea fina con el texto en cursiva, en minúsculas */
.mq-boton--ovalo {
  display: inline-grid;
  place-items: center;
  width: clamp(8.4rem, 7rem + 2vw, 9.6rem);
  height: clamp(3.5rem, 3rem + 0.8vw, 4rem);
  padding: 0 !important;
  border-radius: 50%;
  font: italic 300 clamp(0.98rem, 0.9rem + 0.25vw, 1.12rem)/1 var(--font-cursiva);
  letter-spacing: 0.01em;
  text-transform: none;
  font-variation-settings: "opsz" 24;
}
/* Sobre la foto de Contadme: solo la línea crema, sin relleno */
.mq-boton--ovalo.mq-boton--lleno { background: transparent; border-color: var(--marfil-texto); color: var(--marfil-texto); }
.mq-boton--ovalo.mq-boton--lleno:hover { background: var(--marfil-texto); color: var(--choco); }

/* 1. Escena fija. Al principio, el marco (como la portada de siempre); al bajar se desvanece y
   queda solo el claim, quieto en el centro, y las fotos suben por encima de él con el scroll,
   como en la referencia (algunas lo tapan al pasar). inicio.js pone --p-portada y --p-claim. --- */
.mq-escena { position: relative; }
.mq-escena__fijo { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; }
/* El marco se centra en lo que queda de pantalla bajo la cabecera */
.mq-escena__portada {
  position: absolute;
  inset: 0 0 var(--mq-cab-h) 0;
  display: grid;
  place-items: center;
  opacity: var(--p-portada, 1);
  transform: translateY(calc((1 - var(--p-portada, 1)) * -24px)) scale(calc(1 - (1 - var(--p-portada, 1)) * 0.05));
  will-change: opacity, transform;
}
/* En ordenador, el marco, las dos palabras y «pieces of poetry», algo más arriba (como la referencia) */
@media (min-width: 1100px) { .mq-escena__portada .portada__escena { translate: 0 -6.5vh; } }
.mq-escena__claim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0 var(--margen);
  text-align: center;
  opacity: var(--p-claim, 0);
  transform: translate3d(0, calc((1 - var(--p-claim, 0)) * 14px), 0);
  will-change: opacity, transform;          /* capa propia: el texto no tiembla al bajar */
  backface-visibility: hidden;
}
.mq-escena__titulo {
  margin: 0;
  font-family: var(--font-cursiva);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 0.8rem + 1.3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
  color: var(--choco);
}
.mq-escena__titulo .claim__line { display: inline; }
/* En ordenador y tablet, el claim algo más grande (en móvil se queda como estaba) */
@media (min-width: 700px) {
  .mq-escena__titulo { font-size: clamp(1.7rem, 0.9rem + 1.75vw, 2.9rem); }
}
/* Las fotos van en la página (no en la capa fija): suben con el scroll normal y pasan por encima.
   Colocadas como una revista minimalista (moodboard): tamaños distintos, mucho aire, ninguna
   encima de otra, alguna sale por el borde y cada una con su número pequeño debajo.
   Todo se mide en vw, así la composición escala igual en cualquier ancho. Empiezan a entrar
   en cuanto aparece el claim y siguen hasta el final de la sección. */
/* El claim se queda quieto hasta el final: cuando la última foto llega abajo, el About me sube por
   encima y lo tapa (la sección es 100vh más larga y el About se monta sobre ese tramo) */
.mq-escena { --capa-top: 122vh; --capa-h: 173vw; height: calc(var(--capa-top) + var(--capa-h) + 100vh); margin-bottom: -100vh; }
.mq-escena__fotos { position: absolute; left: 0; right: 0; top: var(--capa-top); height: var(--capa-h); z-index: 2; pointer-events: none; }
.mq-escena__foto {
  --k: 1;                                   /* escala del reparto (tablet: algo mayor) */
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * var(--k) * 1vw);
  width: calc(var(--w) * var(--k) * 1vw);
  margin: 0;
}
.mq-escena__foto img { display: block; width: 100%; height: auto; background: var(--photo-bg); }
/* Filo fino marrón en la foto (en móvil lo lleva el marco de la figura, ver abajo) */
@media (min-width: 700px) {
  .mq-escena__foto > img:first-child { border: 1px solid var(--choco); }
}
/* Segunda foto: solo en móvil (ver abajo) */
.mq-escena__foto .mq-escena__b { display: none; }
.mq-escena__foto figcaption { margin-top: 0.45rem; font: 0.62rem/1 var(--font-type); letter-spacing: 0.08em; color: var(--ink-soft); }
/* x (% del ancho), y (vw desde el inicio de la capa) y ancho (vw). La 7 es la apaisada. */
.mq-escena__foto.c1  { --x: 9;  --y: 0;   --w: 14; }
.mq-escena__foto.c2  { --x: 60; --y: 6;   --w: 12; }
.mq-escena__foto.c3  { --x: 83; --y: 27;  --w: 17; }
.mq-escena__foto.c4  { --x: 37; --y: 33;  --w: 17; }
.mq-escena__foto.c5  { --x: 0;  --y: 49;  --w: 13; }
.mq-escena__foto.c6  { --x: 62; --y: 67;  --w: 13; }
.mq-escena__foto.c7  { --x: 16; --y: 80;  --w: 24; }
.mq-escena__foto.c8  { --x: 47; --y: 98;  --w: 12; }
.mq-escena__foto.c9  { --x: 78; --y: 103; --w: 15; }
.mq-escena__foto.c10 { --x: 6;  --y: 118; --w: 15; }
.mq-escena__foto.c11 { --x: 22.5; --y: 148; --w: 12; }
.mq-escena__foto.c12 { --x: 71; --y: 141; --w: 14; }
/* Tablet: el mismo reparto, algo más grande */
@media (min-width: 700px) and (max-width: 1099px) {
  .mq-escena { --capa-h: 216vw; }
  .mq-escena__foto { --k: 1.25; }
  .mq-escena__foto.c7 { --x: 11; }
}

/* 2. About me: una pared con cuadros (composición de referencia: cuadros/originales/00-composicion.png),
   en chocolate sobre la textura. El saludo y «baby Inma» van a mano; el texto, abajo a la izquierda.
   Todo se coloca sobre un lienzo que escala con su ancho: --x en % del ancho, --y y --w en
   centésimas del ancho (cqw), así la composición se mantiene igual en cualquier tamaño. */
.mq-inma {
  position: relative;
  z-index: 3;                       /* tapa el claim fijo al subir */
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(2.5rem, 4vw, 4rem);
  color: var(--marfil-texto);
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(22 13 10 / 0.35) 100%),
    #2F2217 url("../img/pared.jpg") 0 0 / 512px 512px;   /* pared de yeso mate (propuestas/home-referencia/pared.swift) */
}
.mq-muro {
  --alto: 86;
  position: relative;
  container-type: inline-size;
  width: min(100% - 2 * var(--gutter, 24px), 1180px);
  margin: 0 auto;
}
.mq-muro__hueco { height: calc(var(--alto) * 1cqw); }
.mq-muro__pieza { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1cqw); margin: 0; }
.mq-cuadro { --s: 0.88; width: calc(var(--w) * 1cqw); scale: var(--s); }   /* --s: algo más pequeños, cada uno sobre su centro */
/* Sombras de cuadro colgado (la luz viene de arriba): una pegada al marco y otra más suave y caída.
   drop-shadow sigue la silueta del PNG, así los óvalos dan sombra ovalada. */
.mq-cuadro img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 1px 1.5px rgb(10 5 3 / 0.45)) drop-shadow(0.25cqw 0.9cqw 1.1cqw rgb(10 5 3 / 0.42));
}
/* El cuadro entero es un botón: abre su cartela. Es también lo que se balancea al colgarse, desde
   un clavo imaginario en el centro de arriba. */
.mq-cuadro__boton {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 0;
}
.mq-cuadro__boton:focus-visible { outline: 1px dashed var(--marfil-texto); outline-offset: 6px; }

/* Al llegar, los cuadros se van colgando: bajan un poco, inclinados, y se asientan con un balanceo
   que se apaga. maqueta.js pone --giro y --retraso a cada uno y la clase is-colgado cuando toca
   (cada uno al llegar a él, despacio: 1,7 s cada cuadro, 190 ms entre uno y otro). */
@keyframes mq-colgar {
  0%   { opacity: 0; transform: translateY(-50px) rotate(var(--giro)); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  30%  { opacity: 1; }
  58%  { transform: translateY(0) rotate(calc(var(--giro) * -0.42)); animation-timing-function: ease-in-out; }
  78%  { transform: translateY(0) rotate(calc(var(--giro) * 0.16)); animation-timing-function: ease-in-out; }
  91%  { transform: translateY(0) rotate(calc(var(--giro) * -0.05)); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}
.mq-muro.is-preparado .mq-cuadro__boton { opacity: 0; }
.mq-muro.is-preparado .mq-cuadro.is-colgado .mq-cuadro__boton { animation: mq-colgar 2300ms var(--retraso, 0ms) both; }
@media (prefers-reduced-motion: reduce) {
  .mq-muro.is-preparado .mq-cuadro__boton { opacity: 1; animation: none !important; }
}

/* El texto aparece entero, con un fundido que sube un poco, cuando llega a la pantalla (inicio.js).
   Sin JS o con reducción de movimiento se ve desde el principio. */
.mq-muro__texto.is-por-aparecer { opacity: 0; translate: 0 18px; filter: blur(2px); transition: opacity 1.3s ease, translate 1.3s ease, filter 1.3s ease; }
.mq-muro__texto.is-por-aparecer.is-aparecido { opacity: 1; translate: 0 0; filter: none; }

/* Los cuadros se pueden coger y girar (inicio.js): mano de agarrar y, cogido, se levanta un poco */
.mq-cuadro__boton { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { .mq-cuadro__boton { cursor: grab; } }
.mq-cuadro.is-agarrado { z-index: 5; }
.mq-cuadro.is-agarrado .mq-cuadro__boton { cursor: grabbing; scale: 1.04; transition: scale 0.2s ease; }
.mq-cuadro.is-agarrado img { filter: drop-shadow(0 2px 3px rgb(10 5 3 / 0.45)) drop-shadow(0.6cqw 2cqw 2.2cqw rgb(10 5 3 / 0.5)); }

.mq-cuadro--cuadros { --x: 5.7;  --y: 10.3; --w: 22.3; }
.mq-cuadro--bebe    { --x: 33.7; --y: 3.4;  --w: 16; }
.mq-cuadro--manos   { --x: 55.1; --y: 7.6;  --w: 20.5; }
.mq-cuadro--olivos  { --x: 4.6;  --y: 33.4; --w: 19.7; }
.mq-cuadro--camara  { --x: 30.5; --y: 28.3; --w: 15.6; }
.mq-cuadro--montana { --x: 52.5; --y: 27.9; --w: 17.6; }
.mq-cuadro--pajaros { --x: 75.3; --y: 32.8; --w: 15.8; }
.mq-cuadro--balcon  { --x: 53.4; --y: 59.7; --w: 15.1; }
.mq-cuadro--hiedra  { --x: 74.6; --y: 57.4; --w: 20.7; }

/* Lo escrito a mano */
.mq-muro__hola { font-family: var(--font-nota); font-weight: 400; color: var(--marfil-texto); line-height: 1.12; letter-spacing: 0.01em; white-space: nowrap; }
.mq-muro__hola { --x: 77.6; --y: 23; font-size: 3.7cqw; transform: rotate(-7deg); transform-origin: 0 0; }
/* El saludo se escribe a mano al llegar (inicio.js): cada letra aparece con un trazo corto */
.mq-muro__hola.is-por-escribir .mq-hola-letra { opacity: 0; transition: opacity 0.25s ease; }
.mq-muro__hola.is-por-escribir .mq-hola-letra.is-escrita { opacity: 1; }

/* El texto, abajo a la izquierda, separado del borde y alineado con los cuadros de ese lado */
.mq-muro__texto {
  --x: 5.6; --y: 59.2;
  width: 43cqw;
  font: 400 clamp(0.98rem, 1.3cqw, 1.08rem)/1.8 var(--font-type);   /* la misma letra que el texto de Sobre mí */
  text-align: justify; hyphens: manual; -webkit-hyphens: manual;   /* en ordenador, sin partir palabras con guion */
  color: var(--marfil-texto);
}
.mq-muro__texto p { margin: 0; }
.mq-muro__texto p + p { margin-top: 1.05em; }
/* «Conoce la mía», con el mismo botón ovalado que los demás */
.mq-muro__texto .mq-boton--ovalo { margin-top: 2rem; }
@media (min-width: 1100px) {
  .mq-muro__texto .mq-boton--ovalo { width: 11.2rem; height: 4.5rem; font-size: 1.22rem; }
}

/* Ordenador: los cuadros algo más juntos (cada uno acercado al centro de la pared), el saludo
   y «baby Inma» más pequeños, el texto más grande y más marrón al terminar la sección */
@media (min-width: 1100px) {
  .mq-inma { padding-bottom: clamp(6rem, 9vw, 9.5rem); }
  .mq-muro { translate: 3% 0; }        /* toda la pared, un poco a la derecha: más centrada y equilibrada */
  .mq-cuadro--cuadros { --x: 9.7;  --y: 9.2;  }
  .mq-cuadro--bebe    { --x: 34.7; --y: 2.9;  }
  .mq-cuadro--manos   { --x: 53.3; --y: 6.9;  }
  .mq-cuadro--olivos  { --x: 8.9;  --y: 29.5; }
  .mq-cuadro--camara  { --x: 31.9; --y: 24.9; }
  .mq-cuadro--montana { --x: 51.1; --y: 24.2; }
  .mq-cuadro--pajaros { --x: 71.3; --y: 28.9; }
  .mq-cuadro--balcon  { --x: 52.1; --y: 52.3; }
  .mq-cuadro--hiedra  { --x: 70.4; --y: 50.7; }
  .mq-muro__hola { --x: 74.5; --y: 21.5; font-size: 3cqw; }
  .mq-muro__texto { --x: 6; --y: 53.3; width: 37cqw; font-size: 1.2rem; }   /* el texto, más grande, a la izquierda y con aire hasta los cuadros */
  .mq-muro__texto .mq-boton--ovalo { margin-top: 3.6rem; }   /* «Conoce la mía», más abajo */
}

/* Tablet: la misma pared; el texto necesita algo más de alto */
@media (min-width: 700px) and (max-width: 1099px) {
  .mq-muro { --alto: 91; }
  .mq-muro__texto { width: 45cqw; }
}
@media (min-width: 700px) and (max-width: 849px) {
  .mq-muro { --alto: 103; }
}

/* Móvil: la distribución de la referencia móvil, con seis cuadros en dos columnas (las manos, los
   pájaros y el balcón no salen), el saludo arriba, el texto justificado y el botón centrado. */
@media (max-width: 699px) {
  .mq-inma { padding: 4.6rem 0 3.4rem; }
  .mq-muro { --alto: 146; width: 100%; }
  .mq-cuadro { --s: 1; }
  .mq-cuadro--manos, .mq-cuadro--pajaros, .mq-cuadro--balcon { display: none; }
  /* Algo más pequeños y con más aire entre ellos */
  .mq-cuadro--bebe    { --x: 13;  --y: 22;  --w: 23; }
  .mq-cuadro--olivos  { --x: 52;  --y: 18;  --w: 30; }
  .mq-cuadro--cuadros { --x: 9;   --y: 63;  --w: 32; }
  .mq-cuadro--camara  { --x: 56;  --y: 57;  --w: 25; }
  .mq-cuadro--montana { --x: 13;  --y: 101; --w: 25; }
  .mq-cuadro--hiedra  { --x: 52;  --y: 106; --w: 32; }
  .mq-muro__hola { --x: 21; --y: 3; font-size: 7cqw; }
  .mq-muro__texto { position: static; width: auto; margin: 0 8vw; font-size: 1.02rem; line-height: 1.75; text-align: justify; hyphens: manual; -webkit-hyphens: manual; }   /* sin guiones al partir palabras */
  .mq-muro__texto .mq-boton--ovalo { display: grid; margin: 2.6rem auto 0; }
}

/* Por encima de la escena (home.css pone z-index 1 a todas las secciones) */
.home > .mq-inma { z-index: 3; }

/* 3. La tira de Love, como estaba (home.css) ---------------------------------------------- */
.mq-inma + .tira { padding-top: clamp(6rem, 11vw, 10rem); }   /* más fondo crema por arriba */
/* Sin el botón «ver love»: debajo de la frase, menos espacio */
.page-home .tira { padding-bottom: clamp(5rem, 9vw, 8.5rem); }   /* y por abajo */
.page-home .tira__pie { justify-content: center; align-items: center; padding: clamp(1.4rem, 2.6vw, 2.2rem) var(--margen) 0; }   /* «Love Stories», centrado justo debajo de las fotos */
.page-home .tira__mano { transform: none; text-align: center; }
.page-home .tira__mano a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; }
.page-home .tira__mano a:hover, .page-home .tira__mano a:focus-visible { opacity: 0.7; }
/* La tira la mueve site.js: pasa sola y se puede arrastrar (con el dedo o el ratón), con inercia al
   soltar. Al tocar una foto (o pasar el cursor) sale la galería con una flecha que lleva a ella. */
.page-home .tira__fila { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.page-home .tira__fila.is-manual .tira__pista { animation: none; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .page-home .tira__fila.is-manual { cursor: grab; } }
.page-home .tira__fila.is-arrastrando { cursor: grabbing; }
.page-home .tira__foto img { -webkit-user-drag: none; }
.page-home .tira__ir {
  display: block; width: 3.4rem; margin-top: 0.5rem; padding: 0.3rem;
  color: #F7F1E8; opacity: 0; translate: 0 8px;
  transition: opacity 0.6s ease 0.25s, translate 0.8s cubic-bezier(.2,.7,.2,1) 0.25s;
}
.page-home .tira__flecha { display: block; width: 100%; height: auto; overflow: visible; }
.page-home .tira__flecha path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.page-home .tira__foto.is-on .tira__ir { opacity: 1; translate: 0 0; pointer-events: auto; }
.page-home .tira__ir:hover .tira__flecha, .page-home .tira__ir:focus-visible .tira__flecha { translate: 4px 0; transition: translate 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .page-home .tira__foto:hover .tira__ir { opacity: 1; translate: 0 0; pointer-events: auto; }
}

/* 4. Contadme vuestra historia: la sección es una ventana y la foto se queda quieta detrás, así
   al bajar o subir se va viendo otra parte de ella (como «Let's tell your story») ----------- */
.mq-historia {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 50vh, 460px);   /* franja fina, igual que en Love stories */
  color: var(--marfil-texto);
  text-align: center;
  clip-path: inset(0);              /* recorta la foto fija a la sección (funciona también en iPad) */
}
.mq-historia__ventana { position: absolute; inset: 0; }
.mq-historia__fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center 40%;
}
.mq-historia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(47 34 23 / 0.36), rgb(47 34 23 / 0.56)); }
.mq-historia__texto { position: relative; z-index: 1; padding: 3rem var(--margen); }
.mq-historia__titulo { margin: 0; font-size: clamp(2.2rem, 1rem + 3.4vw, 4.8rem); }

/* 5. Instagram: fotos más grandes, en una fila de borde a borde que se desliza --------------- */
.page-home .pie__insta { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.page-home .pie__tira {
  display: flex;
  gap: 6px;
  padding: 6px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 1px solid var(--mq-linea);
  cursor: grab;
}
.page-home .pie__tira::-webkit-scrollbar { display: none; }
.page-home .pie__tira.is-arrastrando { cursor: grabbing; }
.page-home .pie__insta-foto { flex: none; width: clamp(150px, 19vw, 300px); }
.page-home .pie__tira img { aspect-ratio: 0.98; -webkit-user-drag: none; }

/* Móvil --------------------------------------------------------------------------------------- */
@media (max-width: 699px) {
  /* Portada en móvil: el marco y sus letras algo más grandes, con más aire arriba y abajo */
  .mq-escena .marco { width: min(calc(46svh * 1022 / 1395), 62vw); }
  .mq-escena .portada__arriba { bottom: calc(100% + 1.8rem); font-size: 0.92rem; }
  .mq-escena .portada__mano { top: calc(100% + 0.75em); font-size: 1.95rem; }
  /* Móvil: como las fotos de alrededor del marco en la home de siempre. Medianas, pegadas a los
     bordes (alguna se sale), alternando izquierda y derecha; dos bajan por el centro y pasan por
     encima del claim. Cada una pasa a otra foto con un fundido cuando llega a media pantalla. */
  .mq-escena { --capa-top: 112vh; --capa-h: 350vw; }
  .mq-escena__foto { --k: 1; }
  .mq-escena__foto figcaption { display: none; }
  /* Filo fino marrón, como en la referencia; algunas recortadas en cuadrado y una apaisada */
  .mq-escena__foto { border: 1px solid var(--choco); }
  .mq-escena__foto > img:first-child { box-shadow: none; }
  .mq-escena__foto.c3 > img:first-child, .mq-escena__foto.c5 > img:first-child, .mq-escena__foto.c9 > img:first-child { aspect-ratio: 1; object-fit: cover; }
  .mq-escena__foto.c8 > img:first-child { aspect-ratio: 4 / 3; object-fit: cover; }
  .mq-escena__foto .mq-escena__b {
    display: block;
    position: absolute;
    inset: 0;
    height: 100% !important;
    object-fit: cover;
    opacity: var(--cambio, 0);
    transition: opacity 0.3s ease-out;
    box-shadow: none !important;
  }
  .mq-escena__foto.c1, .mq-escena__foto.c7, .mq-escena__foto.c12 { display: none; }
  .mq-escena__foto.c2  { --x: -6; --y: 0;   --w: 30; }
  .mq-escena__foto.c3  { --x: 76; --y: 32;  --w: 23; }
  .mq-escena__foto.c4  { --x: 36; --y: 72;  --w: 27; }
  .mq-escena__foto.c5  { --x: -4; --y: 134; --w: 27; }
  .mq-escena__foto.c6  { --x: 74; --y: 145; --w: 30; }
  .mq-escena__foto.c8  { --x: 33; --y: 192; --w: 25; }
  .mq-escena__foto.c9  { --x: 2;  --y: 228; --w: 24; }
  .mq-escena__foto.c10 { --x: 75; --y: 266; --w: 25; }
  .mq-escena__foto.c11 { --x: 10; --y: 300; --w: 20; }



  .page-home .pie__insta-foto { width: 46vw; }

  /* Contadme vuestra historia: franja más baja, el título más pequeño y el botón con borde crema */
  .mq-historia { min-height: 34vh; min-height: 34svh; }
  .mq-historia__texto { padding: 2.5rem 1.25rem; }
  .mq-historia__titulo { font-size: 2.2rem; }   /* más pequeño en móvil */
  .mq-historia .mq-boton--lleno { margin-top: 1.4rem; background: transparent; border-color: var(--marfil-texto); color: var(--marfil-texto); }
}

/* 6. Tipografías de la home: las de toda la web (como paralanovia.com, ver site.css).
     · Instrument Serif: títulos en mayúsculas, el claim y las cursivas (botones, pie).
     · Courier Prime: textos y etiquetas.
     · Pinyon Script (en lugar de Quentin, de pago): la letra manuscrita. */

.page-home {
  /* Las mismas familias que el resto de la web (site.css) */
  /* El saludo del About, con la manuscrita de la web */
  --font-nota: var(--font-mano);
}

/* Títulos en mayúsculas, algo espaciados */
.page-home .titular {
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.02;
}

/* Claim */
.page-home .mq-escena__titulo { font-weight: 400; letter-spacing: 0; line-height: 1.15; }

/* Etiquetas pequeñas en mayúsculas, espaciadas */
.page-home .etiqueta { letter-spacing: 0.2em; }

/* Textos del pie (la cuenta de Instagram, © y Privacidad): cursiva de Instrument Serif, sin mayúsculas
   ni espaciado, como los botones ovalados */
.page-home .pie__insta-cuenta,
.page-home .pie__base {
  font-family: var(--font-cursiva);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none; font-weight: 300;
}
.page-home .pie__insta-cuenta { font-size: clamp(1rem, 0.94rem + 0.2vw, 1.12rem); }
.page-home .pie__base { font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem); }
/* En ordenador, la línea de abajo igual que en móvil: el monograma y, debajo, © y Privacidad, centrados */
.page-home .pie__base { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.7rem; padding-block: 2.6rem 3rem; }
.page-home .pie__monograma { order: -1; margin-bottom: 0.6rem; }
.page-home .pie__base p { margin: 0; }
.page-home .pie__enlaces { justify-content: center; }
.page-home .pie__enlaces a { padding-block: 0.3rem; }

/* Palabras de los lados del marco */
.page-home .portada__lado,
.page-home .portada__arriba { font-family: var(--font-cursiva); font-style: italic; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }   /* «Romantic photography», más intensa */

/* Botones ovalados: cursiva de Instrument Serif en minúsculas */
.page-home .mq-boton--ovalo { font-family: var(--font-cursiva); font-style: italic; letter-spacing: 0.03em;  font-weight: 300; }

/* La manuscrita: Pinyon Script dibuja más grande que la anterior, se compensa */
.page-home .portada__mano { font-size: clamp(1.7rem, 0.8rem + 1.8vw, 2.7rem); }
.page-home .tira__mano { font-size: clamp(2rem, 0.9rem + 2.2vw, 3.3rem); line-height: 1.2; }
@media (max-width: 699px) {
  .page-home .portada__mano { font-size: 1.55rem; }
  .page-home .tira__mano { font-size: 2.1rem; }
}