/* Love stories (/love/): como camila.soulkynd.com/portfolio, con los colores y las letras de Recuerda.
   1. Portada chocolate: «LOVE STORIES» y, debajo, la frase a mano; fotos sueltas con un filo crema
      (en ordenador, todas enteras dentro del marrón; en móvil, como la referencia, algunas asoman por los lados).
   2. Las galerías sobre crema: foto con filo fino y, debajo, su número y su nombre.
   3. «Contadme vuestra historia» sobre la foto de las velas, que se queda quieta detrás mientras
      la sección sube o baja (como en la home). */

/* Sin las marcas de doblez del papel (asomaban junto al logo) */
body.page-love::before,
body.page-love::after { display: none; }

/* --- 1. Portada ------------------------------------------------------------------------------------ */
.lp-portada {
  position: relative;
  overflow: hidden;
  min-height: max(520px, 46vw);        /* crece con el ancho, así las fotos (en %) siempre caben dentro */
  padding: clamp(5rem, 8vw, 7.5rem) 5.2vw 0;
  background: var(--choco) var(--texture-papel-choco);
  background-size: var(--texture-papel-size);
  color: var(--marfil-texto);
}
.lp-portada__texto { position: relative; z-index: 2; }
.lp-titulo {
  margin: 0;
  font: 400 clamp(2.6rem, 1.6rem + 2.4vw, 3.9rem) / 1 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lp-sub {
  margin: 0.9rem 0 0 clamp(2rem, 7vw, 7rem);
  font: 400 clamp(1.3rem, 1rem + 0.8vw, 1.8rem) / 1.2 var(--font-mano);
}
.lp-portada__fotos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-foto { position: absolute; margin: 0; border: 1px solid rgb(243 236 223 / 0.55); }
.lp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Como en la referencia: unas enteras y otras apagadas (la pequeña de arriba, la pequeña de abajo y la de la derecha) */
.lp-foto--b { opacity: 0.6; }
.lp-foto--d { opacity: 0.8; }
.lp-foto--e { opacity: 0.4; }
.lp-foto--b, .lp-foto--d, .lp-foto--e { border: 0; }   /* las apagadas, sin filo */
.lp-foto--a { left: 5.2%; top: 47%; width: 15.5%; aspect-ratio: 0.82; }   /* la del velo: algo más abajo */
.lp-foto--b { left: 48.3%; top: 15%; width: 9.2%; aspect-ratio: 0.82; }
.lp-foto--c { left: 55.8%; top: 28%; width: 12.7%; aspect-ratio: 0.84; }
.lp-foto--d { left: 39.8%; top: 58%; width: 7.7%; aspect-ratio: 0.78; }
.lp-foto--e { right: 3.5%; top: 47%; width: 15.5%; aspect-ratio: 0.84; }

/* --- 2. Galerías ----------------------------------------------------------------------------------- */
.lp-historias {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) 5vw clamp(5rem, 8vw, 7rem);
  background: var(--fondo-papel);
  background-size: var(--fondo-papel-size);
  color: var(--ink);
}
.lp-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, clamp(170px, 22vw, 350px)));   /* las tres en una fila, con aire */
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 3.2rem);
  margin: 0; padding: 0; list-style: none;
}
.lp-historia img { display: block; width: 100%; aspect-ratio: 0.75; object-fit: cover; border: 1px solid rgb(47 34 23 / 0.85); }   /* marco fino */
.lp-historia__enlace { display: block; color: inherit; text-decoration: none; }
.lp-historia__enlace img { transition: opacity 0.4s ease; }
.lp-historia__enlace:hover img, .lp-historia__enlace:focus-visible img { opacity: 0.85; }
/* Debajo de la foto: la etiqueta pequeña, una rayita y el nombre en grande, en dos líneas */
.lp-historia__pie { display: block; margin-top: clamp(1.1rem, 1.8vw, 1.6rem); }
.lp-historia__etiqueta {
  display: block;
  font: 600 0.62rem / 1.2 var(--font-etiqueta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lp-historia__raya { display: block; width: 1.9rem; height: 1px; margin: 0.65rem 0 clamp(1.1rem, 1.8vw, 1.6rem); background: currentColor; }
.lp-historia__nombre {
  display: block;
  font: 400 clamp(1.7rem, 0.6rem + 2.3vw, 3rem) / 0.92 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* --- 3. Contadme vuestra historia: la sección es una ventana y la foto se queda quieta detrás ------- */
.lp-contadme {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(300px, 50vh, 460px);   /* franja fina */
  padding: 3rem 1.5rem;
  color: var(--marfil-texto);
  background: var(--choco);
  text-align: center;
  clip-path: inset(0);                 /* recorta la foto fija a la sección (también en iPad) */
}
.lp-contadme__fondo { position: absolute; inset: 0; }
.lp-contadme__foto {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0.86;                                             /* deja ver el chocolate de debajo */
  filter: saturate(0.82) sepia(0.1) brightness(0.9);      /* menos color: velas en marrón oscuro, como la web */
}
.lp-contadme::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(47 34 23 / 0.34), rgb(47 34 23 / 0.52)); }
.lp-contadme__texto { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.8rem; }
/* Como «Contadme vuestra historia» de la home: Instrument Serif en mayúsculas y el botón ovalado en cursiva */
.lp-contadme__titulo {
  margin: 0;
  font: 400 clamp(2.2rem, 1rem + 3.4vw, 4.8rem) / 1.02 var(--font-serif);   /* la misma letra que en la home */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 72;
}
.lp-boton {
  display: inline-grid;
  place-items: center;
  width: clamp(8.4rem, 7rem + 2vw, 9.6rem);
  height: clamp(3.5rem, 3rem + 0.8vw, 4rem);
  border: 1px solid var(--marfil-texto);
  border-radius: 50%;
  font: italic 300 clamp(0.98rem, 0.9rem + 0.25vw, 1.12rem) / 1 var(--font-cursiva);
  letter-spacing: 0.03em;
  color: var(--marfil-texto);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.lp-boton:hover, .lp-boton:focus-visible { background: var(--marfil-texto); color: var(--choco); }

/* --- Móvil: como la referencia en el teléfono ------------------------------------------------------ */
@media (max-width: 699px) {
  /* Medidas en vw (proporciones del pantallazo de la referencia) */
  .lp-portada { min-height: 174vw; padding: 10vw 7.8vw 0; }
  .lp-portada__texto { text-align: center; }
  .lp-titulo { font-size: 13vw; }                     /* centrado y algo más grande */
  .lp-sub { margin: 2.6vw 0 0; font-size: 7.4vw; }      /* «cada recuerdo, para siempre», justo debajo */
  .lp-foto--a { left: 0; top: 90vw; width: 38vw; aspect-ratio: 0.777; border-left: 0; }   /* la del velo, en blanco y negro: algo más pequeña */
  .lp-foto--b { left: 10.6vw; top: 39vw; width: 24.4vw; aspect-ratio: 0.75; }   /* debajo de la frase, sin pisarla */
  .lp-foto--c { left: 73.5vw; top: 52vw; width: 30vw; aspect-ratio: 0.76; }
  .lp-foto--d { left: 60.5vw; top: 87vw; width: 22.3vw; aspect-ratio: 0.82; }
  .lp-foto--e { left: 73.5vw; right: auto; top: 133vw; width: 30vw; aspect-ratio: 0.75; }

  .lp-historias { padding: 6rem 0 4rem; }
  .lp-lista { grid-template-columns: minmax(0, 44vw); gap: 2rem; }      /* portadas algo más pequeñas: menos scroll */
  .lp-historia__pie { margin-top: 0.9rem; }
  .lp-historia__raya { margin: 0.5rem 0 0.8rem; }
  .lp-historia__nombre { font-size: 1.8rem; }

  .lp-contadme { min-height: 34vh; min-height: 34svh; padding: 2.5rem 1.25rem; }
  .lp-contadme__texto { gap: 1.4rem; }
  .lp-contadme__titulo { font-size: 2.2rem; }
}