/* ==========================================================================
   Recuerda Studio — Home
   Ritmo de secciones claras (marfil) y oscuras (chocolate), fotos de tamaños distintos y
   superpuestas, titulares grandes y detalles manuscritos. Solo se carga en la home.
   Las piezas comunes (.claro, .oscuro, .etiqueta, .titular, .mano, .enlace, cabecera, menú
   y pie) están en site.css.
   ========================================================================== */

.home { overflow-x: clip; }
/* Algunas fotos con un velo claro, como copias algo descoloridas */
.velada { position: relative; }
.velada::after { content: ""; position: absolute; inset: 0; background: rgb(231 228 219 / 0.24); pointer-events: none; }
.portada .claim .claim__line { display: inline; }

/* 1. Portada fija -------------------------------------------------------------
   Como en la referencia: la primera pantalla tiene el marco de encaje en el centro, con fotos
   que van pasando dentro. Esa capa se queda fija; al hacer scroll suben por encima las fotos
   pequeñas (2) y después la presentación (3), que la tapa. La cabecera forma parte de esa capa. */
body.page-home > .cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 0; }
.home { position: relative; }
.home > section, .alrededor { position: relative; z-index: 1; }
.portada { height: 100vh; height: 100svh; pointer-events: none; }
.portada__fija {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding-top: 0;                     /* el marco, centrado en la pantalla */
}
.portada__escena { position: relative; }
.marco {
  position: relative;
  margin: 0;
  /* Marco ovalado de encaje en alta resolución (marco-encaje-2-hd.png, 1022 × 1395), en el marrón del logo */
  width: min(calc(51vh * 1022 / 1395), 55vw);
  width: min(calc(51svh * 1022 / 1395), 55vw);
  aspect-ratio: 1022 / 1395;
}
.marco__foto { position: absolute; left: 19.1%; right: 19.3%; top: 16.4%; bottom: 18.5%; overflow: hidden; border-radius: 50%; isolation: isolate; }
.marco__foto .marco__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.marco__foto .marco__img.is-on { opacity: 1; }
.marco__encaje { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(51 36 28 / 0.12)); }
/* Una palabra a cada lado del marco, a máquina y en marrón */
.portada__lado {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--font-type);          /* a máquina, como en móvil */
  font-size: clamp(1rem, 0.5rem + 1vw, 1.6rem);
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ink);
}
/* Se desvanecen al empezar a bajar (site.js fija --lados entre 1 y 0) */
.portada__lado { opacity: var(--lados, 1); transition: opacity 0.35s linear; }
.portada__lado--izq { right: calc(100% + clamp(3rem, 9vw, 10rem)); }
.portada__lado--der { left: calc(100% + clamp(3rem, 9vw, 10rem)); }
.portada__arriba { display: none; }
/* Pausa de las fotos: solo aparece al llegar con el teclado */
.portada__pausa {
  position: absolute;
  left: 50%;
  bottom: -3.2rem;
  transform: translateX(-50%);
  padding: 0.45rem 0.8rem;
  font: 0.8rem var(--font-type);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid currentColor;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
}
.portada__pausa:focus-visible { opacity: 1; }
.portada__pausa[hidden] { display: none; }
/* Frase manuscrita bajo el marco, centrada y algo inclinada (igual en móvil) */
.portada__mano {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(100% + 1.1em);           /* cuelga justo bajo la punta del marco, crezca lo que crezca */
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 2.4vw, 3.6rem);
  color: var(--ink);
  transform: translateX(-50%) rotate(-9deg);
  white-space: nowrap;
}

/* 2. Fotos pequeñas que suben alrededor del marco ---------------------------------------
   Capa transparente, más alta que la pantalla: al hacer scroll las fotos pasan por los lados
   (y alguna por encima del logo) mientras el marco sigue quieto. */
.alrededor { height: 190vh; pointer-events: none; }
.sube { position: absolute; left: calc(var(--x) * 1vw); top: var(--y); width: calc(var(--w) * 1vw); margin: 0; }
.sube img { width: 100%; height: auto; box-shadow: 0 1px 2px rgb(51 36 28 / 0.12); }
/* La segunda foto, encima de la primera: aparece con un fundido lento según avanza el scroll (site.js) */
.sube .sube__b {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: var(--cambio, 0);
  transition: opacity 0.3s ease-out;
  box-shadow: none;
}
.s1  { --x: 21; --y: 1%;  --w: 8.5; }
.s2  { --x: 69; --y: 0%;  --w: 7.5; }
.s3  { --x: 7;  --y: 11%; --w: 9.5; }
.s4  { --x: 85; --y: 15%; --w: 9;   }
.s5  { --x: 16; --y: 29%; --w: 8;   }
.s6  { --x: 73; --y: 33%; --w: 10;  }
.s7  { --x: 4;  --y: 46%; --w: 8.5; }
.s8  { --x: 89; --y: 50%; --w: 7.5; }
.s9  { --x: 22; --y: 59%; --w: 9;   }
.s10 { --x: 70; --y: 66%; --w: 8.5; }
.s11 { --x: 9;  --y: 77%; --w: 10;  }
.s12 { --x: 81; --y: 84%; --w: 9;   }

/* 3. Presentación (oscuro): tapa la portada. Claim y frase; se corta con una foto a caballo
   entre el marrón y el papel de la sección de Inma */
.home { --corte-w: clamp(200px, 24vw, 340px); }
/* flow-root: el margen negativo de la foto no se escapa de la sección, así la foto sobresale
   por encima de la siguiente en vez de arrastrar el marrón con ella */
.home > .presentacion { z-index: 2; display: flow-root; padding: clamp(5rem, 9vw, 8rem) var(--margen) 0; text-align: center; }
.presentacion .claim {
  margin: 0;
  font-family: var(--font-cursiva);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 0.8rem + 1.25vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 48;
}
.presentacion .claim .claim__line { display: inline; }
.presentacion__texto { max-width: 32rem; margin: 1.6rem auto 0; font-size: 1.02rem; line-height: 1.65; color: var(--suave); }
.presentacion__corte {
  position: relative;
  z-index: 2;
  width: var(--corte-w);
  margin: clamp(3.5rem, 6vw, 5rem) auto calc(var(--corte-w) * -0.625);
}
.presentacion__corte img,
.presentacion__corte .pendiente { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.presentacion__corte .pendiente { display: grid; background-color: var(--choco); }
.presentacion__corte:empty { display: none; }
.presentacion:has(.presentacion__corte:empty) { padding-bottom: clamp(5rem, 9vw, 8rem); }

/* 4. Inma (claro, #about): lámina de papel doblado con el retrato enmarcado, la frase manuscrita
   encima, el monograma en un óvalo y el texto en mayúsculas espaciadas */
.inma {
  position: relative;
  padding: calc(var(--corte-w) * 0.625 + clamp(5.5rem, 10vw, 9rem)) var(--margen) clamp(5rem, 9vw, 8rem);
  text-align: center;
  scroll-margin-top: 0;
}
.presentacion:has(.presentacion__corte:empty) + .inma { padding-top: clamp(5rem, 9vw, 8rem); }
/* Pliegues del papel, como en la lámina de referencia: uno vertical y otro horizontal, apenas visibles */
.inma::before,
.inma::after { content: ""; position: absolute; pointer-events: none; }
.inma::before {
  top: 0; bottom: 0; left: calc(50% - 45px); width: 90px;
  background: linear-gradient(to right, transparent 0%, rgb(110 84 58 / 0.02) 38%, rgb(110 84 58 / 0.055) 49.2%,
    rgb(255 253 246 / 0.55) 50%, rgb(255 253 246 / 0.12) 52%, transparent 68%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.inma::after {
  left: 0; right: 0; top: calc(var(--corte-w) * 0.625 + clamp(5.5rem, 10vw, 9rem) + var(--lamina-w) * 0.62 - 45px); height: 90px;
  background: linear-gradient(to bottom, transparent 0%, rgb(110 84 58 / 0.02) 38%, rgb(110 84 58 / 0.055) 49.2%,
    rgb(255 253 246 / 0.55) 50%, rgb(255 253 246 / 0.12) 52%, transparent 68%);
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 20%, #000 80%, transparent 98%);
  mask-image: linear-gradient(to right, transparent 2%, #000 20%, #000 80%, transparent 98%);
}
.inma > * { position: relative; z-index: 1; }
.inma { --lamina-w: clamp(240px, 27vw, 380px); }
.inma__lamina { position: relative; width: var(--lamina-w); margin: 0 auto; }
/* El retrato, como una copia en papel con su margen claro */
.inma__foto {
  margin: 0;
  padding: clamp(8px, 0.9vw, 13px);
  background: #E2D8C9;
  box-shadow: 0 1px 2px rgb(47 34 23 / 0.12), 0 12px 30px -12px rgb(47 34 23 / 0.25);
  transform: translateX(-4%);
}
.inma__foto img,
.inma__foto .pendiente { display: block; width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; }
.inma__foto .pendiente { display: grid; }
.inma__mano {
  position: absolute;
  z-index: 2;
  left: -40%;
  top: -0.9rem;
  width: 120%;
  margin: 0;
  text-align: left;
  font-size: clamp(2.2rem, 1rem + 2.4vw, 3.6rem);
  line-height: 0.95;
  transform: rotate(-11deg);
  transform-origin: left center;
  text-shadow: 0 0 14px rgb(231 228 219 / 0.85);
  pointer-events: none;
}
.inma__mano span { display: block; }
.inma__mano span + span { padding-left: 1.4em; }
/* El monograma dentro de un óvalo de línea fina, montado sobre el borde de abajo del retrato */
.inma__sello {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: clamp(70px, 6.6vw, 96px);
  aspect-ratio: 0.72;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper) var(--texture-papel);
  background-size: var(--texture-papel-size);
  transform: translate(-50%, 52%);
}
.inma__sello::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 50%;
}
.inma__sello img { width: 46%; height: auto; }
.inma__titulo {
  margin: clamp(5rem, 8vw, 6.5rem) 0 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 0.9rem + 1.9vw, 2.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.inma__parrafos {
  max-width: 36rem;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) auto 0;
  font-family: var(--font-serif);
  font-size: clamp(0.84rem, 0.76rem + 0.25vw, 0.98rem);
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: justify;
  text-align-last: center;
  hyphens: none;
}
.inma__parrafos p { margin: 0; }
.inma__parrafos p + p { margin-top: 1em; }
.inma .enlace { margin-top: 2.4rem; }
/* Sin retrato: solo el monograma, encima del título */
.inma--sin-retrato .inma__foto,
.inma--sin-retrato .inma__mano { display: none; }
.inma--sin-retrato .inma__lamina { height: 0; }
.inma--sin-retrato .inma__sello { bottom: auto; top: 0; transform: translate(-50%, -50%); }
.inma--sin-retrato::after { display: none; }

/* 5. Tira de Love (claro): las fotos pasan despacio hacia la izquierda, sin corte; al pasar por
   encima de una se para y aparece la galería a la que pertenece --------------------------- */
.tira { position: relative; padding: clamp(4rem, 7vw, 6rem) 0 clamp(3.5rem, 6vw, 5rem); }
.inma + .tira { padding-top: clamp(1rem, 2vw, 2rem); }
.tira__fila { height: 22vw; overflow: hidden; }
.tira__pista {
  display: flex;
  width: max-content;
  height: 100%;
  animation: tira-pasa var(--tira-duracion, 120s) linear infinite;
}
/* Cada foto lleva su separación a la derecha: así la mitad de la pista es justo una serie */
.tira__foto { position: relative; flex: none; height: 100%; margin: 0 6px 0 0; overflow: hidden; }
.tira__foto img { display: block; height: 100%; width: auto; max-width: none; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 0.6s ease; }
.tira__galeria {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem;
  color: #F7F1E8;
  text-align: center;
  background: rgb(34 24 16 / 0.36);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.tira__nombres {
  font-size: clamp(2rem, 1rem + 2vw, 3.4rem);
  line-height: 0.95;
  transform: translateY(14px);
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.tira__anio {
  font: 0.78rem var(--font-type);
  letter-spacing: 0.3em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.15s, transform 0.8s cubic-bezier(.2,.7,.2,1) 0.15s;
}
.tira__foto.is-on img { transform: scale(1.04); filter: blur(1.5px); }
.tira__foto.is-on .tira__galeria { opacity: 1; }
.tira__foto.is-on .tira__nombres,
.tira__foto.is-on .tira__anio { opacity: 1; transform: none; }
.tira__fila.is-parada .tira__pista { animation-play-state: paused; }
@media (hover: hover) {
  .tira__fila:hover .tira__pista { animation-play-state: paused; }
  .tira__foto:hover img { transform: scale(1.04); filter: blur(1.5px); }
  .tira__foto:hover .tira__galeria { opacity: 1; }
  .tira__foto:hover .tira__nombres,
  .tira__foto:hover .tira__anio { opacity: 1; transform: none; }
}
@keyframes tira-pasa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tira__fila { overflow-x: auto; scrollbar-width: none; }
  .tira__pista { animation: none; }
  .tira__foto[aria-hidden="true"] { display: none; }
  .tira__foto img, .tira__galeria, .tira__nombres, .tira__anio { transition: none; }
}
/* La frase va debajo de las fotos, sin pisarlas; el enlace, a la derecha */
.tira__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--margen) 0 calc(var(--margen) + 2vw);
}
.tira__mano { margin: 0; font-size: clamp(2.4rem, 1rem + 3vw, 4.4rem); transform: rotate(-4deg); transform-origin: left bottom; }
.tira__pie .enlace { flex: none; }

/* 6. Contadme vuestra historia (oscuro) ---------------------------------------------------- */
.contacto-home { position: relative; padding: clamp(5rem, 8vw, 7rem) var(--margen) clamp(4.5rem, 7vw, 6rem); text-align: center; }
.contacto-home__titulo { position: relative; z-index: 2; font-size: clamp(2.7rem, 0.6rem + 6vw, 8rem); }
.contacto-home__foto { position: relative; z-index: 1; width: min(19vw, 300px); margin: -3.4vw auto 0; }
.contacto-home .enlace { margin-top: 2.6rem; }


/* Huecos pendientes (solo con marcadores de desarrollo) */
.pendiente--retrato { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5.6; text-align: center; }

@media (max-width: 699px) {

  .marco { width: min(calc(37svh * 1022 / 1395), 46vw); }
  .portada__fija { padding-top: 5rem; }
  /* En móvil, las palabras van en vertical a los lados del marco */
  /* En móvil las palabras de los lados van encima del marco, una debajo de otra, a máquina */
  .portada__lado { display: none; }
  .portada__arriba {
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1.1rem);
    margin: 0;
    transform: translateX(-50%);
    font: 0.78rem/1.25 var(--font-type);
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
    color: var(--ink);
    opacity: var(--lados, 1);
    transition: opacity 0.35s linear;
  }
  .portada__arriba span { display: block; }
  .portada__mano { top: calc(100% + 0.4em); font-size: 1.55rem; }
  .alrededor { height: 165vh; }
  /* Collage minimalista: siete fotos de tamaños parecidos pero no iguales, separaciones
     irregulares y alguna se sale del borde; ninguna se monta sobre otra ni llega al encaje */
  .s3, .s4, .s6, .s7, .s9 { display: none; }
  .s1  { --x: -6; --y: 0%;  --w: 30; }
  .s2  { --x: 76; --y: 9%;  --w: 23; }
  .s5  { --x: -4; --y: 31%; --w: 27; }
  .s8  { --x: 74; --y: 40%; --w: 30; }
  .s11 { --x: 2;  --y: 63%; --w: 24; }
  .s12 { --x: 75; --y: 74%; --w: 25; }
  .s10 { --x: -3; --y: 85%; --w: 27; }
  .home { --corte-w: 56vw; }
  .presentacion .claim { font-size: 1.32rem; }

  .inma { --lamina-w: 62vw; }
  .inma__mano { left: -26%; top: -0.8rem; font-size: 2.2rem; }
  .inma__sello { width: 66px; }
  .inma__titulo { margin-top: 4.2rem; font-size: 1.75rem; }
  /* En móvil, centrado: justificado deja huecos grandes entre palabras en líneas tan cortas */
  .inma__parrafos { font-size: 0.8rem; letter-spacing: 0.05em; line-height: 1.75; text-align: center; }

  .tira__fila { height: 58vw; }
  .tira__pie { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.4rem 1.25rem 0 1.5rem; }
  .tira__mano { font-size: 2.7rem; }

  .contacto-home__titulo { font-size: 2.8rem; }
  .contacto-home__foto { width: 58vw; margin-top: -1.4rem; }

}

/* En la home las secciones tienen su propio fondo: las marcas de doblez solo asomarían en la cabecera */
body.page-home::before,
body.page-home::after { display: none; }

/* Entrada: mesa con velas, mariposa y monograma ---------------------------------------
   El fondo es el mismo papel de la página, así que al desvanecerse la entrada la home
   aparece debajo sin cambio de color. */
.intro { display: none; }
html.con-intro { overflow: hidden; }
html.con-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--paper);
  background-image: var(--fondo-papel);
  background-size: var(--fondo-papel-size);
  color: var(--ink);
}
/* Mientras dura, las rayas del menú y la mariposa de la esquina esperan */
html.con-intro .menu-boton,
html.con-intro .mariposa-boton { visibility: hidden; }
.intro__mesa,
.intro__monograma { grid-area: 1 / 1; }
.intro__mesa {
  position: relative;
  width: min(560px, 74vw, calc((100svh - 220px) * 620 / 478));
  aspect-ratio: 620 / 478;
  opacity: 0;
}
.intro__mesa img,
.intro__mesa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__mesa img { -webkit-user-drag: none; user-select: none; }
.intro__mesa svg { overflow: visible; }
/* Llamas: dibujadas a mano, fotograma a fotograma */
.intro__llama-forma { fill: #D58748; filter: url(#intro-pincel); }
.intro__halo { animation: intro-halo 2.8s ease-in-out infinite; }
.intro__llama--b .intro__halo { animation-duration: 3.4s; animation-delay: -1s; }
@keyframes intro-halo {
  0%, 100% { opacity: 0.7; }
  45% { opacity: 1; }
  70% { opacity: 0.8; }
}
/* La mariposa: el mismo trazo de tinta que la ilustración, alas del color del papel */
.intro__mariposa { opacity: 0; }
.intro__mariposa path { fill: none; stroke: var(--choco); stroke-width: var(--trazo, 5.5); stroke-linecap: round; stroke-linejoin: round; }
.intro__mariposa .intro__mariposa-ala,
.intro__mariposa .intro__mariposa-cuerpo { fill: var(--paper); }
.intro__mariposa-trazo { filter: url(#intro-tinta); }
.intro__mariposa-b { display: none; }
.intro__mariposa.is-abierta .intro__mariposa-a { display: none; }
.intro__mariposa.is-abierta .intro__mariposa-b { display: inline; }
/* El monograma, pequeño y centrado */
.intro__monograma { width: clamp(84px, 8vw, 110px); opacity: 0; }   /* el óvalo; el monograma dentro, como siempre */
.intro__saltar {
  position: fixed;
  left: 50%;                                   /* abajo, en el centro */
  translate: -50% 0;
  bottom: clamp(1rem, 3vw, 2rem);
  padding: 0.3rem 0;
  font: 0.78rem/1 var(--font-type);
  letter-spacing: 0.05em;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  opacity: 0.75;
  cursor: pointer;
}
.intro__saltar:hover,
.intro__saltar:focus-visible { opacity: 1; }
@media (max-width: 699px) {
  .intro__mesa { width: min(88vw, calc((100svh - 200px) * 620 / 478)); }
}

/* La mariposa de arriba a la izquierda está en site.css (también sale en Sobre mí) */