/* ==========================================================================
   Recuerda Studio — hoja de estilos única
   1. Tokens (colores, tipografías, espaciados, textura)  ← lo que se edita
   2. Base
   3. Cabecera y pie
   4. Inicio: composición fotográfica
   5. Contacto: la carta
   6. Utilidades, movimiento y marcadores de desarrollo
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Ancho del logo de la cabecera (las rayas del menú y la mariposa se centran con él) */
  --logo-w: clamp(96px, 9vw, 140px);
  /* Paleta: papel marfil algo gris (medido en la web de referencia) y tinta chocolate */
  --paper: #E7E4DB;          /* fondo: marfil grisáceo, como la referencia */
  --paper-light: #FBF8F1;    /* superficies claras puntuales */
  --ink: #2F2217;            /* texto principal: marrón chocolate oscuro (≈12:1 sobre el papel) */
  --ink-soft: #6B5546;       /* texto secundario (≈6:1) */
  --line: #CFC2B2;           /* líneas decorativas */
  --line-strong: #8E7D6D;    /* línea de los campos (≈3,4:1, visible como control) */
  --error: #8A3B2E;          /* mensajes de error (≈7:1) */
  --photo-bg: #ECE5D8;       /* fondo mientras carga una foto */
  --choco: #2F2217;          /* secciones oscuras: chocolate oscuro, como el marco de la home */
  --marfil-texto: #F3ECDF;   /* texto sobre chocolate (≈11:1) */
  --marfil-suave: #CDBDA8;   /* texto secundario sobre chocolate (≈7:1) */

  /* Tipografías: máximo dos familias + logotipo */
  /* Tipografías como luciayoungphotography: Instrument Serif (títulos y nombres en mayúsculas, en lugar
     de Clarisa, de pago), Newsreader ExtraLight en cursiva (frases y cursivas finas), Inter (textos),
     Outfit (etiquetas pequeñas en mayúsculas) y Pinyon Script (el toque manuscrito) */
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-cursiva: "Newsreader", Georgia, serif;
  --font-type: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-etiqueta: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mano: "Pinyon Script", cursive;
  --font-sans: var(--font-type);

  /* Espaciados principales */
  --gutter: clamp(1rem, 4.5vw, 4rem);
  --col-gap: clamp(0.75rem, 2vw, 2rem);
  --max-width: 1440px;
  --space-section: clamp(5rem, 11vw, 11rem);
  --margen: clamp(1.25rem, 7vw, 8rem);        /* márgenes laterales de las secciones */

  /* Textura de papel: dos teselas de tamaños distintos para evitar repeticiones visibles.
     Para sustituirla por una imagen propia, cambia estas variables (o pon «none» para quitarla). */
  --texture-veil: url("../img/textura-veladura.svg");
  --texture-veil-size: 853px;
  --texture-grain: url("../img/textura-grano.svg");
  --texture-grain-size: 317px;
  --texture-fibers: url("../img/textura-fibras.svg");   /* fibras de papel natural */
  --texture-fibers-size: 977px;
  --texture-relief: url("../img/textura-relieve.svg");  /* grano de papel de acuarela */
  --texture-relief-size: 760px;
  /* Papel casi liso, como el de la referencia: moteado suave y alguna fibra, sin relieve.
     Tesela continua de 2048 px generada con propuestas/papel/papel.swift (paleta «ref», relieve 0,12),
     mostrada a 1024 px para que sea nítida en pantallas de alta densidad.
     --papel-velo la suaviza aún más (0 = tal cual). Encima, el ruido. */
  --texture-papel: url("../img/papel.jpg");
  --texture-papel-size: 1024px;
  --papel-velo: 0.08;
  --fondo-papel:
    linear-gradient(rgb(231 228 219 / var(--papel-velo)), rgb(231 228 219 / var(--papel-velo))),
    var(--texture-papel),
    var(--texture-grain);
  --fondo-papel-size: auto, var(--texture-papel-size), var(--texture-grain-size);
  --texture-papel-choco: url("../img/papel-chocolate.jpg");   /* el mismo papel, teñido chocolate */

  /* Velos de color de los pliegos del portfolio (dejan ver la textura) */
  --tono-salvia: rgb(176 188 156 / 0.24);
  --tono-niebla: rgb(168 184 194 / 0.2);
  --tono-piedra: rgb(172 170 164 / 0.2);
  --tono-arena: rgb(214 181 138 / 0.26);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* El papel cubre toda la página sin cortes, cabecera y pie incluidos.
   La textura es parte del fondo: no intercepta clics ni cubre contenido. */
html {
  background-color: var(--paper);
  background-image: var(--fondo-papel);
  background-size: var(--fondo-papel-size);
}
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font-type);          /* textos en Inter; títulos y cursivas llevan la suya */
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body > :where(:not(.skip-link, .menu, .menu-boton)) { position: relative; z-index: 1; }

/* Marcas de doblez: dos pliegues apenas perceptibles, como el de un pliego guardado doblado.
   Un hendido fino con su luz y su sombra que se desvanece hacia los extremos. Van por debajo
   del contenido (las fotos quedan encima, como pegadas después). */
body::before,
body::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* Pliegue horizontal, a media página */
body::before {
  left: 0;
  right: 0;
  top: 57%;
  height: 90px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgb(110 84 58 / 0.022) 38%,
    rgb(110 84 58 / 0.06) 49.2%,
    rgb(255 253 246 / 0.6) 50%,
    rgb(255 253 246 / 0.14) 52%,
    transparent 68%);
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 22%, #000 74%, transparent 97%);
  mask-image: linear-gradient(to right, transparent 2%, #000 22%, #000 74%, transparent 97%);
}
/* Pliegue vertical, solo en la parte alta y en pantallas anchas */
body::after {
  top: 0;
  left: calc(64% - 45px);
  width: 90px;
  height: min(60%, 1900px);
  background: linear-gradient(to right,
    transparent 0%,
    rgb(110 84 58 / 0.02) 38%,
    rgb(110 84 58 / 0.05) 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 10%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 55%, transparent 100%);
}
@media (max-width: 699px) { body::after { display: none; } }

main { flex: 1 0 auto; overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
}

h1, h2, h3, p { margin: 0; }

/* 3. Piezas comunes, cabecera, menú y pie ----------------------------------- */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--paper-light);
  font-family: var(--font-type);
  font-size: 0.9375rem;
}
.skip-link:focus { top: 1rem; }

/* Secciones claras y oscuras: el ritmo de la web */
.claro { --suave: var(--ink-soft); background: var(--paper) var(--texture-papel); background-size: var(--texture-papel-size); color: var(--ink); }
.oscuro { --suave: var(--marfil-suave); background: var(--choco) var(--texture-papel-choco); background-size: var(--texture-papel-size); color: var(--marfil-texto); }
.oscuro :focus-visible { outline-color: var(--marfil-texto); }

.etiqueta {
  font-family: var(--font-etiqueta);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.titular {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.98;
  font-variation-settings: "opsz" 72;
}
.mano { font-family: var(--font-mano); font-weight: 400; line-height: 0.9; }
.enlace {
  display: inline-block;
  padding: 0.7rem 0 0.85rem;
  min-width: 11rem;
  font-family: var(--font-etiqueta);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: letter-spacing 0.4s var(--ease);
}
.enlace:hover { letter-spacing: 0.2em; }
.foto { margin: 0; }
.foto img { width: 100%; }
/* Pendiente: solo aparece con marcadores_desarrollo = true */
.pendiente {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  font: 0.75rem/1.45 var(--font-type);
  color: #9A4B2C;
  background: rgb(255 236 214 / 0.55);
  border: 1px dashed #B4552D;
}
.oscuro .pendiente { color: #F0C9A8; background: rgb(255 236 214 / 0.06); border-color: #C77A55; }

/* Cabecera: el logo en el centro y el menú (dos rayas) a la derecha */
.cabecera {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgb(47 34 23 / 0.55);
}
.cabecera__logo { grid-column: 2; display: block; }
.cabecera__logo img {
  width: var(--logo-w);
  /* Trazo algo más grueso: el logo es una imagen, así que se engorda con sombras finas de su mismo color */
  filter: drop-shadow(0.22px 0 0 #452E1F) drop-shadow(-0.22px 0 0 #452E1F) drop-shadow(0 0.18px 0 #452E1F);
}
/* En ordenador, el logo más presente */
@media (min-width: 700px) { :root { --logo-w: clamp(120px, min(11vw, 19vh), 210px); } }
.menu-boton {
  /* Fijo arriba a la derecha (centrado con el logo) y con un círculo de papel: se ve sobre cualquier sección */
  position: fixed;
  z-index: 45;
  top: calc(clamp(1.1rem, 2.2vw, 1.8rem) + var(--logo-w) * 194 / 760 - 1.5rem);
  right: clamp(0.75rem, 3.5vw, 3rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--ink);
  background: rgb(231 228 219 / 0.88);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.menu-boton span { display: block; width: 32px; height: 1px; margin-top: -7px; background: currentColor; box-shadow: 0 7px 0 currentColor; }

/* Menú: un panel chocolate que entra por la derecha, con las esquinas de la izquierda redondeadas.
   Arriba «Navigate»; las secciones, numeradas en romano y a mano, escalonadas; dos fotos apagadas
   y, abajo, Instagram. Se cierra con ×, Esc, tocando fuera o al elegir una sección (site.js). */
.menu { position: fixed; inset: 0; z-index: 50; }
.menu[hidden] { display: none; }
.menu__fondo { position: absolute; inset: 0; background: rgb(20 12 8 / 0.38); animation: menu-fondo 0.4s ease both; }
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(32rem, calc(100% - 10px));
  display: flex; flex-direction: column; justify-content: center;
  padding: 5.5rem clamp(1.6rem, 6vw, 3.2rem) 3rem;
  overflow-y: auto;
  border: 1px solid rgb(10 6 4 / 0.7); border-right: 0;
  border-radius: 28px 0 0 28px;
  box-shadow: -18px 0 50px rgb(10 6 4 / 0.35);
  animation: menu-entra 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes menu-entra { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes menu-fondo { from { opacity: 0; } to { opacity: 1; } }
.menu.is-cerrando .menu__panel { animation: menu-sale 0.32s ease-in both; }
.menu.is-cerrando .menu__fondo { animation: menu-fondo 0.32s ease reverse both; }
@keyframes menu-sale { from { translate: 0 0; } to { translate: 100% 0; } }

.menu__cerrar {
  position: absolute; z-index: 3; top: 1.4rem; right: 1.4rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  padding: 0; color: inherit; background: none; border: 0; cursor: pointer;
}
.menu__cerrar svg { width: 22px; height: 22px; }
.menu__cerrar path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.menu__cerrar:hover svg, .menu__cerrar:focus-visible svg { rotate: 90deg; transition: rotate 0.3s ease; }

.menu__nav { position: relative; z-index: 2; }
.menu__titulo {
  margin: 0 0 clamp(2rem, 6vh, 3.4rem);
  text-align: center;
  font: 500 0.95rem/1 var(--font-etiqueta);
  letter-spacing: 0.24em; text-transform: uppercase;
}
.menu__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(1rem, 3.2vh, 1.9rem); }
.menu__lista a { display: inline-flex; align-items: flex-start; gap: 0.6rem; color: inherit; text-decoration: none; transition: opacity 0.25s ease; }
.menu__lista a:hover, .menu__lista a:focus-visible { opacity: 0.72; }
.menu__lista a[aria-current="page"] .menu__nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.menu__num { padding-top: 0.55em; font: 400 0.95rem/1 var(--font-type); letter-spacing: 0.12em; }
.menu__nombre { font: 400 clamp(2.5rem, 2rem + 1.6vw, 3.1rem)/1.1 var(--font-mano); }
/* Escalonadas, como en la referencia */
.menu__lista li:nth-child(1) { padding-left: 4%; }
.menu__lista li:nth-child(2) { padding-left: 26%; }
.menu__lista li:nth-child(3) { padding-left: 12%; }
.menu__lista li:nth-child(4) { padding-left: 34%; }
/* Al abrir, las secciones entran una tras otra */
.menu__lista li { animation: menu-linea 0.6s ease both; }
.menu__lista li:nth-child(1) { animation-delay: 0.18s; }
.menu__lista li:nth-child(2) { animation-delay: 0.26s; }
.menu__lista li:nth-child(3) { animation-delay: 0.34s; }
.menu__lista li:nth-child(4) { animation-delay: 0.42s; }
@keyframes menu-linea { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }

/* Iconos juntos, debajo de la primera foto y centrados con ella (.menu__foto--a: top 15 %, right 9 %,
   ancho 26 %, 4:3 → alto 19,5cqw; cqw = ancho del panel) */
.menu__panel { container-type: inline-size; }
.menu__redes {
  position: absolute; z-index: 2;
  top: calc(15% + 19.5cqw + 1rem); left: 55%; right: -1%;
  display: flex; justify-content: center; gap: 0.2rem; margin: 0;
  pointer-events: none;                     /* solo los iconos reciben el toque */
}
.menu__redes a { pointer-events: auto; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; color: inherit; transition: opacity 0.25s ease; }
.menu__redes a:hover, .menu__redes a:focus-visible { opacity: 0.72; }
.menu__redes svg { width: 2.3rem; height: 2.3rem; overflow: visible; }
.menu__redes svg * { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.menu__redes svg .lleno { fill: currentColor; stroke: none; }

/* Dos fotos pequeñas y apagadas, detrás del texto */
.menu__foto { position: absolute; z-index: 1; display: block; object-fit: cover; opacity: 0.32; filter: grayscale(0.25) sepia(0.15); pointer-events: none; }
.menu__foto--a { top: 15%; right: 9%; width: 26%; aspect-ratio: 4 / 3; }
.menu__foto--b { bottom: 19%; left: 9%; width: 18%; aspect-ratio: 1; }

@media (prefers-reduced-motion: reduce) {
  .menu__panel, .menu__fondo, .menu__lista li, .menu.is-cerrando .menu__panel, .menu.is-cerrando .menu__fondo { animation: none; }
}
html.menu-abierto { overflow: hidden; }

/* Pie: tira de fotos, línea fina y monograma RS en el centro */
.pie { background: var(--paper) var(--texture-papel); background-size: var(--texture-papel-size); }
/* Fotos de Instagram: cada una lleva a Instagram */
.pie__insta { padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 3.5vw, 3.5rem); text-align: center; }
.pie__insta-cuenta {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding-block: 0.4rem;
  font: 0.8rem var(--font-type);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.pie__insta-cuenta:hover { text-decoration: underline; text-underline-offset: 0.3em; }
/* Instagram y, debajo, WhatsApp */
.pie__cuentas { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.2rem; }
.pie__cuentas .pie__insta-cuenta { margin-bottom: 0; }
.pie__insta > .pendiente { display: block; margin: 0 auto 1.2rem; max-width: 40rem; padding: 0.5rem 0.8rem; font-size: 0.75rem; }
.pie__tira { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.pie__insta-foto { display: block; overflow: hidden; }
.pie__tira img { display: block; aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.6s ease, opacity 0.3s ease; }
a.pie__insta-foto:hover img { transform: scale(1.04); opacity: 0.9; }
a.pie__insta-foto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pie__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 2rem var(--margen) 2.5rem;
  border-top: 1px solid rgb(47 34 23 / 0.55);
  font-family: var(--font-etiqueta);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
/* El monograma dentro de un óvalo de doble línea fina, relleno de crema claro */
.monograma-marco {
  display: grid;
  place-items: center;
  aspect-ratio: 0.7;
  border: 1px solid rgb(47 34 23 / 0.8);
  outline: 1px solid rgb(47 34 23 / 0.8);
  outline-offset: 3px;
  border-radius: 50%;
  background: #F4EFE4;
}
.monograma-marco img { display: block; width: 56%; height: auto; }   /* el óvalo, ceñido al monograma */
.pie__monograma { width: 62px; margin: 4px; text-decoration: none; }   /* lleva a la home */
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pie__enlaces:empty { display: none; }
.pie__enlaces a { display: inline-block; padding-block: 0.6rem; text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.pie__recolocar { display: block; margin: -1.5rem auto 2rem; padding: 0.6rem; font: 0.8rem var(--font-type); color: var(--ink-soft); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.pie__recolocar[hidden] { display: none; }
@media (max-width: 699px) {
  .pie__tira { grid-template-columns: repeat(3, 1fr); }
  .pie__base { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pie__monograma { order: -1; }
  .pie__enlaces { justify-content: center; }
}

/* 4. Inicio: composición fotográfica --------------------------------------- */
/* Rejilla estable: 6 columnas en móvil, 8 en tablet, 12 en escritorio.
   Cada pieza se coloca por columnas; nada usa posiciones absolutas. */
.composition {
  --cols: 6;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.photo { margin: 0; min-width: 0; }
.photo img {
  width: 100%;
  background-color: var(--photo-bg);
}
/* Numeración de archivo, encima de cada foto: [01] */
.photo__index {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-type);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Marco de cada foto: guarda el pie que aparece al pasar el ratón */
.photo__frame { position: relative; }
.photo img { transition: filter 0.7s var(--ease), transform 0.9s var(--ease); }

/* Copia impresa sobre el papel: bordes rectos y acabado mate muy delicado. Conserva el color,
   la piel y el detalle: sin sepia, sin grano fuerte, sin marcos ni sombras flotantes. */
.photo {
  --copia: contrast(0.98) saturate(0.98);
}
.photo__imagen {
  position: relative;
  display: block;
  overflow: hidden;
}
.photo__imagen img { filter: var(--copia); }
/* Una veladura mínima y algo de grano del papel: la copia no brilla como una pantalla */
.photo__imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: rgb(255 250 240 / 0.035);
  background-image: var(--texture-grain);
  background-size: var(--texture-grain-size);
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* Pie: nombres y año sobre la foto difuminada, con un velo de papel */
.photo__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  text-align: center;
  color: var(--ink);
  background: rgb(243 240 232 / 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.photo__names {
  font-family: var(--font-cursiva);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
  line-height: 1.15;
  text-wrap: balance;
  transform: translateY(6px);
  transition: transform 0.8s var(--ease); font-weight: 300;
}
.photo__year {
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
/* Al pasar el ratón (o al llegar con el teclado a una foto con enlace) */
@media (hover: hover) {
  .has-caption .photo__frame:hover img { filter: var(--copia) blur(8px); transform: scale(1.08); }
  .has-caption .photo__frame:hover .photo__caption { opacity: 1; }
  .has-caption .photo__frame:hover .photo__names { transform: none; }
}
.has-caption .photo__frame:focus-within img { filter: var(--copia) blur(8px); transform: scale(1.08); }
.has-caption .photo__frame:focus-within .photo__caption { opacity: 1; }
.has-caption .photo__frame:focus-within .photo__names { transform: none; }
/* Solo mientras se revisa: avisa de que el pie es un texto de prueba */
.photo__caption--ejemplo::after {
  content: "texto de prueba";
  position: absolute;
  bottom: 0.45rem;
  font-family: var(--font-type);
  font-size: 0.625rem;
  color: #7A3524;
}

@media (prefers-reduced-motion: reduce) {
  .photo img, .photo__names { transition: none; }
  .has-caption .photo__frame:hover img,
  .has-caption .photo__frame:focus-within img { transform: none; }
}

/* Arrastrar fotos con el ratón (ver site.js). Al cogerla, la copia se levanta un poco. */
@media (pointer: fine) {
  .photo:not(.photo--missing) .photo__frame { cursor: grab; }
}
.photo.is-dragging { position: relative; }
.photo.is-dragging .photo__frame {
  cursor: grabbing;
  animation-play-state: paused;
}
.photo.is-dragging .photo__imagen { box-shadow: 0 10px 22px -10px rgb(40 26 14 / 0.35); }
.photo.has-caption.is-dragging .photo__frame img { filter: var(--copia); transform: scale(1.02); }
.photo.has-caption.is-dragging .photo__caption { opacity: 0; }
.photo.is-moved, .photo.is-dragging { position: relative; }
.photo.is-returning { transition: translate 0.8s var(--ease); }
.is-dragging-photo,
.is-dragging-photo * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .photo.is-returning { transition: none; }
}

/* Claim */
.claim-block {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: clamp(1.75rem, 8vw, 3rem) clamp(2.75rem, 11vw, 4rem);
}
.claim {
  font-weight: 400;
  font-size: clamp(1.6rem, 1.05rem + 1.5vw, 2.35rem);
  line-height: 1.17;
  letter-spacing: -0.005em;
  margin-bottom: 1.4rem;
}
.claim em { font-style: italic; }

.text-link {
  display: inline-block;
  padding-block: 0.6rem;
  font-family: var(--font-type);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.4em;
  transition: text-decoration-color 0.3s var(--ease), text-underline-offset 0.3s var(--ease);
}
.text-link:hover {
  text-decoration-color: var(--ink);
  text-underline-offset: 0.5em;
}
.text-link--large { font-size: 1.0625rem; }

.closing {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-section) var(--gutter) 0;
  text-align: center;
}
.closing__text {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.3;
  margin-bottom: 0.9rem;
}

@media (min-width: 768px) { .composition { --cols: 8; } }
@media (min-width: 1024px) { .composition { --cols: 12; } }

/* 4b. Portfolio en pliegos ------------------------------------------------- */
/* Cada pliego es una «página» con hasta 8 fotos de tamaños distintos alrededor de un
   título. Las posiciones s1-s8 se colocan en la rejilla; nunca se solapan. */
.portfolio { margin-top: var(--space-section); }
.pliego { padding-block: clamp(3.5rem, 8vw, 7.5rem); }

.pliego--salvia { background-color: var(--tono-salvia); }
.pliego--niebla { background-color: var(--tono-niebla); }
.pliego--piedra { background-color: var(--tono-piedra); }
.pliego--arena { background-color: var(--tono-arena); }

.spread {
  row-gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: start;
}
.spread__head {
  grid-column: 1 / -1;
  text-align: center;
  padding-bottom: 0.5rem;
}
.spread__label {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.spread__title {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* Móvil (6 columnas): parejas desiguales, como una maqueta estrecha */
.spread .s1 { grid-column: 1 / span 4; }
.spread .s2 { grid-column: 5 / span 2; align-self: end; }
.spread .s3 { grid-column: 2 / span 4; }
.spread .s4 { grid-column: 1 / span 3; }
.spread .s4.is-h { grid-column: 1 / -1; }
.spread .s5 { grid-column: 4 / span 3; align-self: end; }
.spread .s6 { grid-column: 1 / span 3; }
.spread .s7 { grid-column: 3 / span 4; }
.spread .s7.is-h { grid-column: 1 / -1; }
.spread .s8 { grid-column: 4 / span 3; }

/* Tablet (8 columnas) */
@media (min-width: 768px) {
  .spread .s1 { grid-column: 1 / span 4; }
  .spread .s2 { grid-column: 6 / span 3; align-self: end; }
  .spread .s3 { grid-column: 2 / span 3; }
  .spread .s4 { grid-column: 6 / span 3; align-self: end; }
  .spread .s4.is-h { grid-column: 1 / -1; }
  .spread .s5 { grid-column: 2 / span 3; align-self: start; }
  .spread .s6 { grid-column: 6 / span 2; align-self: end; }
  .spread .s7 { grid-column: 1 / span 5; }
  .spread .s7.is-h { grid-column: 1 / -1; }
  .spread .s8 { grid-column: 6 / span 3; align-self: end; }
}

/* Escritorio (12 columnas): tres bandas, el título en el centro de la segunda */
@media (min-width: 1024px) {
  .spread { row-gap: clamp(3rem, 5vw, 5.5rem); }
  .spread__head { grid-row: 2; grid-column: 5 / span 4; align-self: center; padding: 0; }

  .spread--a .s1 { grid-column: 2 / span 3; grid-row: 1; align-self: end; }
  .spread--a .s2 { grid-column: 6 / span 2; grid-row: 1; align-self: start; }
  .spread--a .s3 { grid-column: 9 / span 3; grid-row: 1; align-self: start; margin-top: clamp(3rem, 6vw, 6rem); }
  .spread--a .s4,
  .spread--a .s4.is-h { grid-column: 1 / span 3; grid-row: 2; align-self: center; }
  .spread--a .s5 { grid-column: 10 / span 2; grid-row: 2; align-self: end; }
  .spread--a .s6 { grid-column: 2 / span 2; grid-row: 3; align-self: start; margin-top: clamp(2rem, 4vw, 4rem); }
  .spread--a .s7,
  .spread--a .s7.is-h { grid-column: 5 / span 5; grid-row: 3; align-self: start; }
  .spread--a .s7.is-v { grid-column: 5 / span 4; }
  .spread--a .s8 { grid-column: 11 / span 2; grid-row: 3; align-self: end; }

  .spread--b .s1 { grid-column: 3 / span 2; grid-row: 1; align-self: start; margin-top: clamp(2rem, 4vw, 4rem); }
  .spread--b .s2 { grid-column: 6 / span 3; grid-row: 1; align-self: end; }
  .spread--b .s3 { grid-column: 11 / span 2; grid-row: 1; align-self: start; }
  .spread--b .s4,
  .spread--b .s4.is-h { grid-column: 2 / span 2; grid-row: 2; align-self: end; }
  .spread--b .s5 { grid-column: 10 / span 3; grid-row: 2; align-self: center; }
  .spread--b .s6 { grid-column: 1 / span 2; grid-row: 3; align-self: end; }
  .spread--b .s7,
  .spread--b .s7.is-h { grid-column: 4 / span 5; grid-row: 3; align-self: start; }
  .spread--b .s7.is-v { grid-column: 4 / span 4; }
  .spread--b .s8 { grid-column: 10 / span 3; grid-row: 3; align-self: start; margin-top: clamp(3rem, 6vw, 6rem); }
}

/* 5. Páginas legales ------------------------------------------------------- */
/* (La carta de contacto tiene su propia hoja de estilos: carta.css) */
.legal { width: 100%; padding: clamp(2rem, 6vw, 5rem) var(--gutter) 0; }
.legal__hoja { max-width: 42rem; margin-inline: auto; }
.legal__titulo {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.6rem;
}
.legal__fecha { font-family: var(--font-type); font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 2.5rem; }
.legal h2 { font-weight: 500; font-size: 1.15rem; margin: 2.2rem 0 0.6rem; }
.legal p, .legal li { font-size: 1.03rem; line-height: 1.65; }
.legal p + p { margin-top: 0.9em; }
.legal code { font-size: 0.9em; }
.legal ul { padding-left: 1.2rem; margin: 0.6rem 0 0; }
.legal li + li { margin-top: 0.5rem; }
.legal a { text-underline-offset: 0.2em; }
mark.pendiente {
  background: rgb(255 236 214 / 0.8);
  color: #7A3524;
  font-family: var(--font-type);
  font-size: 0.85em;
  padding: 0 0.25em;
  outline: 1px dashed #B4552D;
}

/* 6. Utilidades, movimiento y marcadores ----------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Aparición suave solo si site.js está activo y no se pide movimiento reducido.
   Sin JS o con movimiento reducido, todo es visible desde el principio. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
  }
  .reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Marcadores de desarrollo: se generan solo con "marcadores_desarrollo": true */
.dev-marker {
  font-family: var(--font-type);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #7A3524;
  background: rgb(255 236 214 / 0.7);
  outline: 1px dashed #B4552D;
}
.dev-marker--inline { display: inline-block; max-width: 100%; padding: 0 0.35em; margin-top: 0.25em; }
.dev-marker--block { margin-top: 1.5rem; padding: 0.6rem 0.8rem; }
.dev-marker code { font: inherit; font-weight: 700; }
.photo--missing { background: none; outline: none; }
.photo__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 2 / 3);
  padding: 1rem;
  text-align: center;
  border: 1px dashed #B4552D;
  background: rgb(255 236 214 / 0.45);
}

/* Mariposa arriba a la izquierda (como las rayas del menú, a la derecha), en la home y Sobre mí -----
   Al pulsarla echa a volar por toda la pantalla y vuelve a posarse en su sitio (site.js). */
.mariposa-boton {
  position: fixed;
  z-index: 45;
  top: calc(clamp(1.1rem, 2.2vw, 1.8rem) + var(--logo-w) * 194 / 760 - 1.5rem);
  left: clamp(0.75rem, 3.5vw, 3rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--ink);
  background: rgb(231 228 219 / 0.88);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.mariposa-boton:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.mariposa-boton .mariposa-dibujo { width: 20px; height: auto; transition: transform 0.4s cubic-bezier(.3,.7,.3,1), opacity 0.3s ease; }
.mariposa-boton:hover .mariposa-dibujo { transform: rotate(-8deg) translateY(-1px); }
.mariposa-boton.is-volando { cursor: default; }
.mariposa-boton.is-volando .mariposa-dibujo { opacity: 0; }
.mariposa-dibujo { overflow: visible; }
.mariposa-dibujo path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mariposa-dibujo .mariposa-dibujo__ala, .mariposa-dibujo .mariposa-dibujo__cuerpo { fill: var(--paper); }
.mariposa-dibujo__b { display: none; }
.mariposa-dibujo.is-abierta .mariposa-dibujo__a { display: none; }
.mariposa-dibujo.is-abierta .mariposa-dibujo__b { display: inline; }
/* La que vuela: por encima de todo, sin interceptar clics */
.mariposa-vuelo {
  position: fixed;
  z-index: 46;
  left: 0;
  top: 0;
  width: clamp(54px, 5.5vw, 78px);
  height: auto;
  color: var(--ink);
  pointer-events: none;
  will-change: transform;
}
.mariposa-vuelo path { stroke-width: 1.1px; }
@media (max-width: 699px) {
  .mariposa-boton .mariposa-dibujo { width: 15px; }
  .mariposa-vuelo { width: 38px; }
}

/* Móvil, Sobre mí y Love stories: el pie de Instagram como el de la home, una fila de fotos de borde
   a borde que se desliza con el dedo (site.js la centra y deja arrastrarla con ratón) */
@media (max-width: 699px) {
  :is(.page-sobre, .page-love) .pie__insta { padding: 2.5rem 0; }
  :is(.page-sobre, .page-love) .pie__tira {
    display: flex;
    gap: 6px;
    padding: 6px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-block: 1px solid rgb(47 34 23 / 0.42);
    cursor: grab;
  }
  :is(.page-sobre, .page-love) .pie__tira::-webkit-scrollbar { display: none; }
  :is(.page-sobre, .page-love) .pie__tira.is-arrastrando { cursor: grabbing; }
  :is(.page-sobre, .page-love) .pie__insta-foto { flex: none; width: 46vw; }
  :is(.page-sobre, .page-love) .pie__tira img { aspect-ratio: 0.98; -webkit-user-drag: none; }
  :is(.page-sobre, .page-love) .pie__insta-cuenta,
  :is(.page-sobre, .page-love) .pie__base { font-family: var(--font-cursiva); font-style: italic; letter-spacing: 0.02em; text-transform: none;  font-weight: 300; }
  :is(.page-sobre, .page-love) .pie__insta-cuenta { font-size: 1rem; }
  :is(.page-sobre, .page-love) .pie__base { font-size: 0.92rem; gap: 0.7rem; padding-block: 2.6rem 3rem; }
  :is(.page-sobre, .page-love) .pie__monograma { margin-bottom: 0.6rem; }
  :is(.page-sobre, .page-love) .pie__base p { margin: 0; }
}

/* Contacto y galerías: el final de la página como el de la home (en ordenador y en móvil): Instagram
   en una fila de fotos de borde a borde que se desliza, y debajo el monograma, © y Privacidad, centrados,
   en la cursiva fina (site.js centra la fila y deja arrastrarla con ratón) */
:is(.page-contact, .page-galeria, .page-legal) .pie__insta { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
:is(.page-contact, .page-galeria, .page-legal) .pie__tira {
  display: flex;
  gap: 6px;
  padding: 6px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 1px solid rgb(47 34 23 / 0.42);
  cursor: grab;
}
:is(.page-contact, .page-galeria, .page-legal) .pie__tira::-webkit-scrollbar { display: none; }
:is(.page-contact, .page-galeria, .page-legal) .pie__tira.is-arrastrando { cursor: grabbing; }
:is(.page-contact, .page-galeria, .page-legal) .pie__insta-foto { flex: none; width: clamp(150px, 19vw, 300px); }
:is(.page-contact, .page-galeria, .page-legal) .pie__tira img { aspect-ratio: 0.98; -webkit-user-drag: none; }
:is(.page-contact, .page-galeria, .page-legal) .pie__insta-cuenta,
:is(.page-contact, .page-galeria, .page-legal) .pie__base { font-family: var(--font-cursiva); font-style: italic; font-weight: 300; letter-spacing: 0.02em; text-transform: none; }
:is(.page-contact, .page-galeria, .page-legal) .pie__insta-cuenta { font-size: clamp(1rem, 0.94rem + 0.2vw, 1.12rem); }
:is(.page-contact, .page-galeria, .page-legal) .pie__base { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.7rem;
  padding-block: 2.6rem 3rem; font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem); }
:is(.page-contact, .page-galeria, .page-legal) .pie__monograma { order: -1; margin-bottom: 0.6rem; }
:is(.page-contact, .page-galeria, .page-legal) .pie__base p { margin: 0; }
:is(.page-contact, .page-galeria, .page-legal) .pie__enlaces { justify-content: center; }
:is(.page-contact, .page-galeria, .page-legal) .pie__enlaces a { padding-block: 0.3rem; }
@media (max-width: 699px) {
  :is(.page-contact, .page-galeria, .page-legal) .pie__insta-foto { width: 46vw; }
}