/* ============================================================
   style.css — Portafolio Paola Novellino
   Estética: editorial, minimalista, galería privada.

   Dos familias tipográficas (planos de Paola, PAGINA_WEB_MEDIDAS.pdf):
   - Fuente script/caligráfica → SOLO el nombre "Paola Novellino".
   - Times New Roman (fuente de sistema) → todo lo demás.
   Ambas se definen como variables (--font-script / --font-serif) y se
   usan en todo el sitio; nada de nombres de fuente sueltos.
   ============================================================ */

/* ============================================================
   FUENTE SCRIPT — Lady Suettaya (auto-alojada)
   Fuente original de los planos de Paola, servida desde /fonts
   (woff2 + woff). Su uso en web queda bajo la licencia de Paola
   (confirmado por el cliente). El nombre de la familia es
   "Lady Suettaya" (con espacio).
   Sustituto libre anterior: Pinyon Script (Google Fonts). Para
   volver a él, cambiar SOLO el valor de --font-script aquí abajo
   (y reponer el <link> de Google Fonts en los HTML).
   ============================================================ */
@font-face {
  font-family: 'Lady Suettaya';
  src: url('../fonts/LadySuettaya.woff2') format('woff2'),
       url('../fonts/LadySuettaya.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --ink: #1c1c1c;
  --muted: #8f8f8f;
  --hairline: #e8e8e6;
  --placeholder: #f3f2f0;   /* gris muy claro para imágenes ausentes */
  --pink: #FEF7FA; /* único acento de color; opaco (spec de Paola) */

  /* Familias tipográficas (ver comentario de arriba) */
  --font-script: 'Lady Suettaya', 'Segoe Script', cursive;
  --font-serif: 'Times New Roman', Times, serif;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Tamaño del recuadro de imagen del home; Work usa el mismo. */
  --figure-w: min(400px, 78vw);
  --figure-ratio: 3 / 4;
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-serif);   /* Times New Roman en todo el sitio */
  font-size: 13px;                   /* texto base ~16pt del plano */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  /* Correcciones 16: TODO el texto del sitio va en el gris --muted
     (desktop y móvil). Única excepción: el wordmark "Paola
     Novellino", que conserva la tinta (reglas propias más abajo). */
  color: var(--muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.35s var(--ease);
}
a:hover { opacity: 0.45; }

::selection { background: var(--pink); }

/* Etiquetas pequeñas en mayúsculas (nav, títulos, datos) */
.label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================
   Placeholders de imagen
   Cada imagen vive dentro de una <figure class="ph">. El fondo
   gris claro se ve mientras el archivo no exista; cuando la
   imagen carga (js/site.js añade .is-loaded), aparece con un
   fundido suave. Así los archivos reales se "enchufan" solos.
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.ph.is-loaded img { opacity: 1; }

/* ============================================================
   Encabezado fijo (about / work / proyecto)
   Sin fondo sólido: el contenido pasa por debajo del texto.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;               /* siempre por encima de las imágenes */
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* WORK · nombre · ABOUT */
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 2rem;
  pointer-events: none;      /* deja pasar el scroll… */
}
.site-header a { pointer-events: auto; } /* …pero los links sí se clickean */

/* Colocación de los tres elementos del header */
.site-header .nav-left  { justify-self: start; }
.site-header .nav-right { justify-self: end; }
.site-header .wordmark  { justify-self: center; text-align: center; }

/* WORK y ABOUT en Times, ref. 18 pt del plano (algo mayor que el
   texto base). Mantienen mayúsculas y tracking de la clase .label. */
.site-header .nav-left,
.site-header .nav-right { font-size: 14px; }

/* El nombre "Paola Novellino" va en la fuente script (--font-script)
   en TODAS las páginas, con el mismo tamaño y tratamiento. Es el
   elemento más grande del plano (ref. 67,28 pt); se lleva a un tamaño
   web razonable (~40px) manteniéndolo como el mayor, sin romper la
   estética editorial. WORK y ABOUT se quedan en Times, pequeñas y en
   mayúsculas (clase .label). */
.site-header .wordmark {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;   /* los scripts no llevan tracking (rompe el trazo) */
  text-transform: none;
  color: var(--ink);
}

/* En Proyecto, las imágenes a sangre del carrete pasan por debajo
   del encabezado: allí se funde (texto blanco + mix-blend-mode)
   para quedar legible sobre cualquier foto. Técnica vista en
   re-pull.com, adaptada en monocromo.
   En Work NO se usa blend: el recuadro va centrado con blanco
   alrededor, así que el header queda sobre fondo claro y su texto
   debe permanecer SIEMPRE negro sólido, con color y opacidad
   constantes, sin cambiar con el scroll. */
.page-project .site-header {
  mix-blend-mode: difference;
  /* Correcciones 16: margen lateral cómodo y simétrico (alineado con
     el padding de 3rem de las columnas del proyecto) para que WORK y
     ABOUT no queden pegados a los filos de la pantalla. En móvil lo
     sobreescribe la regla de 1.3rem del media query (corr. 14). */
  padding-left: 3rem;
  padding-right: 3rem;
}
.page-project .site-header a {
  color: #fff;
}
/* Correcciones 16: WORK y ABOUT del proyecto deben LEERSE en el gris
   --muted. Como el header lleva difference, el color que renderiza
   sobre fondo blanco es 255-X por canal: #707070 produce exactamente
   #8f8f8f (--muted), y sobre las fotos sigue invirtiendo (legible).
   El wordmark queda en #fff (renderiza tinta), única excepción. */
.page-project .site-header .nav-left,
.page-project .site-header .nav-right {
  color: #707070;
}
/* Work: el wordmark en tinta sólida, invariable con el scroll; los
   links WORK/ABOUT heredan el gris global (corr. 16). */
.page-work .site-header .wordmark {
  color: var(--ink);
}

/* Home (correcciones 16): el header va a la MISMA altura que en Work
   y el resto del sitio (antes bajaba con un padding propio de
   5.5rem/4rem y "saltaba" al navegar entre páginas). Ya no hay regla
   desktop propia: usa el padding base de .site-header. En móvil el
   header compartido del media query sigue aplicando igual. */

/* ============================================================
   HOME
   ============================================================ */
.home {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;    /* imagen y, debajo, su pie de foto */
  align-items: center;
  justify-content: center;   /* el conjunto centrado bajo el header */
  padding: 8rem 2rem 6rem;
  text-align: center;
}

.home-figure {
  width: var(--figure-w);
  aspect-ratio: var(--figure-ratio);
}

/* Pie de foto del Home: dos líneas centradas bajo el recuadro, en
   Times y gris --muted como el resto del sitio. Cambia con cada
   imagen (js/site.js); el fundido acompaña al crossfade. Se reserva
   el alto de dos líneas para que el layout no salte cuando un pie
   tiene una sola línea (crédito sin lugar). */
.home-caption {
  width: var(--figure-w);
  max-width: 100%;
  margin-top: 0.95rem;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  min-height: calc(1.6em * 2);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.home-caption.is-visible { opacity: 1; }
.home-caption .cap-line { display: block; }

/* Home slideshow: cuando hay varias imágenes personales, se
   suceden con un fundido y un leve deslizamiento lateral (las
   fotos "pasan"), un guiño discreto al home de opus-ark.fi.
   La opacidad la controla la clase .is-current por imagen, no la
   regla genérica de .ph. */
.home-figure img {
  transform: translateX(14px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.home-figure.is-loaded img { opacity: 0; }
.home-figure img.is-current { opacity: 1; transform: translateX(0); }

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}

.about-inner {
  max-width: 340px;
  text-align: center;   /* bloque equilibrado y centrado */
}

.about-bio {
  font-size: 13px;   /* Times, ref. 16 pt */
  line-height: 1.9;
  color: var(--muted);   /* corr. 16: gris del sitio */
  /* Justificada (corr. 15, decisión de Paola: "justificar todo";
     antes iba centrada con el resto del bloque del About — los
     contactos de abajo, de una línea, siguen centrados). */
  text-align: justify;
  hyphens: auto;
}

.about-contact {
  margin-top: 3.5rem;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--muted);
}
.about-contact a { color: var(--muted); } /* corr. 16: gris del sitio */

/* "X" discreta arriba a la derecha: cierra el About y vuelve al home.
   En el mismo gris de la navegación, pequeña y silenciosa. */
.about-close {
  position: fixed;
  top: 1.4rem;
  right: 2rem;
  z-index: 10;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}

/* ============================================================
   WORK — scroll horizontal (SOLO desktop)
   El contenedor (.work-track) es el elemento que scrollea y lleva
   el scroll-snap; js/work.js traduce la rueda vertical en
   paginación horizontal. En móvil (<768px) todo esto se anula:
   lista vertical con el scroll normal de la página (ver la media
   query de abajo).
   ============================================================ */
.page-work { overflow: hidden; } /* sin scroll vertical del body (desktop) */

.work-track {
  display: flex;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;           /* Firefox: sin barra visible */
}
.work-track::-webkit-scrollbar { display: none; }

.work-panel {
  position: relative;
  flex: 0 0 100vw;               /* cada proyecto = una unidad de scroll */
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;      /* un gesto rápido no salta varios proyectos */
  /* El recuadro va centrado en medio de la pantalla, con amplio
     espacio en blanco alrededor (NO a sangre). */
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-panel:hover { opacity: 1; } /* anula el fade genérico de <a> */

/* Recuadro de imagen: mismo tamaño y proporción que el bloque del home. */
.work-panel .ph {
  position: relative;
  width: var(--figure-w);
  aspect-ratio: var(--figure-ratio);
}

/* Overlay rosado con la información del proyecto.
   Cubre exactamente el recuadro de la imagen (centrado, mismo
   tamaño y proporción), no toda la pantalla. El conjunto
   nombre → tipo → tagline va centrado (vertical y horizontal)
   dentro del recuadro y con aire entre los tres bloques
   (PDFs correcciones 07). */
.work-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--figure-w);
  aspect-ratio: var(--figure-ratio);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;               /* separación clara entre los bloques */
  padding: 2rem;
  text-align: center;
  background: var(--pink);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

/* Tamaños según los PDFs 07 (nombre 14pt · tipo 10pt · tagline 7,6pt),
   llevados a escala web manteniendo las proporciones: 20 / 14 / 11 px. */
/* El nombre se muestra tal cual está en `title` (data.js): NU es el
   único todo en mayúsculas porque así está escrito; el resto va en
   title case. Sin text-transform. */
.work-overlay .project-title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* Subtítulo opcional bajo el nombre (p. ej. "two is multitude"). */
.work-overlay .project-subtitle,
.project-info .project-subtitle {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);       /* corr. 16: gris del sitio */
}
.work-overlay .project-subtitle { margin-top: -1rem; } /* pegado al nombre */
.project-info .project-subtitle { margin-top: 0.2rem; }

/* Nombre del proyecto con barras: "|  Nombre  |". Se añade por CSS
   para no meter las barras en el campo `title` de data.js (que se usa
   también en el enlace "Next —"). Se aplica igual en el overlay de
   Work y en el título de la página de proyecto, como en el PDF de
   diseño de Paola. */
.work-overlay .project-title::before,
.work-overlay .project-title::after,
.project-info h1::before,
.project-info h1::after {
  content: "|";
  font-weight: 400;
}
.work-overlay .project-title::before,
.project-info h1::before { margin-right: 0.65em; }
.work-overlay .project-title::after,
.project-info h1::after { margin-left: 0.65em; }

.work-overlay .project-type {
  font-size: 14px;           /* prop. 10pt frente al nombre de 14pt */
  color: var(--muted);       /* corr. 16: gris del sitio */
  /* El tipo va en title case tal cual está en data.js ("Skincare
     Retail Store"): se anula el uppercase de la clase .label, que
     sigue vigente para nav, datos técnicos y "Next —". */
  text-transform: none;
}

/* Tagline del overlay en Times itálica (ref. 16 pt).
   VERIFICAR CON PAOLA: ¿tagline en script o en Times itálica? El plano
   lo etiqueta "Ladysuettaya, 16pt", pero en la maqueta se ve en serif
   tipo Times; probablemente un error de la maqueta. */
.work-overlay .project-blurb {
  max-width: 300px;
  font-size: 11px;           /* prop. 7,6pt frente al nombre de 14pt */
  font-style: italic;
  line-height: 1.8;
  /* Justificado (corr. 15, decisión de Paola: "justificar todo",
     incluidos los bloques antes centrados). La CAJA sigue centrada
     en el overlay; el texto dentro va en bloque. */
  text-align: justify;
  hyphens: auto;
}

/* El texto del overlay entra con un leve desplazamiento hacia
   arriba y un pequeño escalonado (nombre → tipo → descripción),
   como las fichas de yingxindu.com pero más contenido. */
.work-overlay > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.work-overlay > *:nth-child(2) { transition-delay: 0.05s; }
.work-overlay > *:nth-child(3) { transition-delay: 0.1s; }
.work-overlay > *:nth-child(4) { transition-delay: 0.15s; } /* con subtítulo */

/* El overlay se muestra SOLO al pasar el cursor por ENCIMA del
   recuadro (el overlay ocupa exactamente esa caja, aunque esté a
   opacity:0 sigue recibiendo el hover). Sobre el blanco de alrededor
   no se activa: se ve solo la imagen. En táctil, el primer tap
   (.is-revealed); con teclado, al enfocar (:focus-within). */
.work-overlay:hover,
.work-panel.is-revealed .work-overlay,
.work-panel:focus-within .work-overlay { opacity: 1; }
.work-overlay:hover > *,
.work-panel.is-revealed .work-overlay > *,
.work-panel:focus-within .work-overlay > * { opacity: 1; transform: translateY(0); }

/* contador discreto 01 / 04 */
.work-counter {
  position: fixed;
  bottom: 1.6rem;
  left: 2rem;
  z-index: 10;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ============================================================
   PROYECTO — info a la izquierda, carrete vertical a la derecha
   SCROLL UNIFICADO (correcciones 11) + INFO STICKY (correcciones
   12): .project es el ÚNICO contenedor que scrollea en desktop; la
   columna de info queda FIJA (sticky) mientras el carrete de
   imágenes se desliza, y el recorrido total lo define el carrete.
   Los puntos de snap son las imágenes (nietas del contenedor: el
   snap admite descendientes, no solo hijos).
   ============================================================ */
.project {
  display: grid;
  grid-template-columns: minmax(300px, 38%) 1fr;
  align-items: start;            /* cada columna con su altura real */
  height: 100dvh;
  overflow-y: auto;              /* único scroll: ambas columnas a la vez */
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.project::-webkit-scrollbar { display: none; }

/* Columna de info FIJA (correcciones 12, ref. re-pull.com/drop-001):
   sticky dentro del scroll unificado. Su contenedor de sticky es su
   ÁREA de grid, cuya altura es la de la fila completa — es decir, la
   del carrete (la columna más alta) — así que la info queda pegada
   arriba durante TODO el recorrido de las imágenes, y el scroll de
   la página termina exactamente donde termina el carrete. */
.project-info {
  position: sticky;
  top: 0;
  height: 100dvh;            /* su propia "ventana" fija */
  display: flex;
  flex-direction: column;
  overflow-y: auto;          /* red de seguridad si el texto excede el alto */
  scrollbar-width: none;
  padding: 7rem 3rem 4rem;
  max-width: 460px;
}
.project-info::-webkit-scrollbar { display: none; }

/* Centrado vertical "seguro" del bloque de texto: con contenido
   corto los margin auto lo centran; si excede el alto colapsan a 0
   y el texto se lee desde arriba con scroll propio (un centrado con
   justify-content dejaría el inicio inalcanzable al desbordar). */
.project-info > :first-child { margin-top: auto; }
.project-info > :last-child { margin-bottom: auto; }

.project-info h1 {
  font-size: 20px;           /* Times, ref. 25 pt (igual que el overlay) */
  font-weight: 400;
  letter-spacing: 0.1em;
  /* Sin text-transform: el nombre sale tal cual está en data.js
     (solo NU va todo en mayúsculas). */
}

.project-info .project-type {
  margin-top: 0.4rem;
  font-size: 13px;           /* Times, ref. 16 pt */
  color: var(--muted);
  text-transform: none;      /* title case tal cual data.js (como en Work) */
}

.project-info .project-tagline {
  margin-top: 1.6rem;
  font-size: 13px;           /* Times itálica, ref. 16 pt */
  font-style: italic;
  line-height: 1.7;
  color: var(--muted);       /* corr. 16: gris del sitio */
  text-align: justify;       /* correcciones 15 */
  hyphens: auto;
}

.project-info .project-description {
  margin-top: 2.2rem;
  font-size: 13px;           /* Times, ref. 16 pt */
  line-height: 1.9;
  /* Justificación real en todo texto multilínea (correcciones 15).
     hyphens evita huecos exagerados en la columna estrecha (el
     contenido va en inglés, lang="en" en el <html>). */
  text-align: justify;
  hyphens: auto;
}
.project-info .project-description p + p { margin-top: 1.1rem; }

.project-meta {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  row-gap: 0.35rem;
  font-size: 13px;           /* Times, ref. 16 pt */
}
.project-meta dt { color: var(--muted); font-size: 13px; }
.project-meta dd {
  margin: 0;
  /* valores largos (p. ej. el Location de NU) justificados (corr. 15) */
  text-align: justify;
  hyphens: auto;
}

.project-next {
  /* block: la columna de info ya no es flex y en móvil el enlace
     vive al final del flujo de imágenes/párrafos */
  display: block;
  margin-top: 3.5rem;
  color: var(--muted);
}

/* Carrete vertical: cada imagen ocupa ~76vh y deja ver los
   bordes de la anterior y la siguiente (continuidad visual).
   Las imágenes pasan por debajo del encabezado fijo.
   Ya NO tiene scroll propio: fluye dentro del scroll unificado de
   .project. El snap sigue siendo MANDATORY (en .project): al
   detener el scroll la imagen queda siempre completa y centrada.
   La alineación la hace SOLO el CSS — el JS no re-scrollea
   (lección de correcciones 07/08). */
.project-carousel {
  padding: 12vh 3rem;
}

.project-carousel .ph {
  height: 76vh;
  margin-bottom: 4vh;
  scroll-snap-align: center;       /* centrada, con bordes vecinos visibles */
  scroll-snap-stop: always;        /* un gesto rápido no salta varias fotos */
}
.project-carousel .ph:last-child { margin-bottom: 0; }

/* (correcciones 12) Con la info sticky ya no existe el caso "columna
   de texto más larga que el carrete": el recorrido siempre lo define
   el carrete y el texto desborda, si acaso, dentro de su propia caja
   fija. La regla info-is-longest y su JS de medición se eliminaron. */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- Header móvil (correcciones 09 + 10) ----------
     - WORK y ABOUT alineados con los BORDES del recuadro de imagen:
       el padding lateral es exactamente el blanco que deja el
       recuadro centrado de --figure-w, en todas las páginas (el
       header es compartido).
     - Padding superior amplio: el bloque completo baja y respira,
       separado del borde de la pantalla (correcciones 10).
     - "Paola Novellino" a ~30px (ref. 24,3pt de los PDFs móviles),
       centrado; PUEDE partirse en dos líneas ("Paola / Novellino"),
       es intencional. line-height algo mayor para que los trazos de
       la script no se toquen al partirse. */
  .site-header,
  .page-home .site-header {
    padding: 3.6rem calc((100% - var(--figure-w)) / 2) 1.2rem;
  }
  .site-header .wordmark {
    font-size: 30px;
    line-height: 1.15;
  }
  /* WORK/ABOUT discretos, ref. 10pt de los PDFs móviles → 10px
     (mismo cuerpo que la clase .label base). */
  .site-header .nav-left,
  .site-header .nav-right { font-size: 10px; }

  /* Bordes del texto EXACTOS sobre los bordes del recuadro de
     imagen (correcciones 13): el letter-spacing de .label (0.22em)
     también se añade tras la ÚLTIMA letra, así que la caja de
     "ABOUT" arrastra ese aire fantasma a su derecha y el texto
     quedaba metido hacia adentro. Se compensa con margen negativo
     equivalente; "WORK" ya arranca pegado al borde izquierdo (el
     tracking va después de cada letra, no antes), con lo que ambos
     quedan simétricos respecto a los bordes del recuadro. */
  .site-header .nav-right { margin-right: -0.22em; }

  /* Proyecto móvil (correcciones 14): aquí las imágenes van a
     sangre y NO existe el recuadro centrado de --figure-w, así que
     la alineación al recuadro (corr. 09/13) dejaba WORK y ABOUT en
     una posición que no cuadra con nada. En esta página van
     simétricos respecto a los bordes de la PANTALLA, con el margen
     discreto estándar del sitio. Las demás páginas mantienen la
     alineación al recuadro. */
  .page-project .site-header {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }

  .about-close { top: 1.1rem; right: 1.3rem; }

  .home { padding: 14vh 1.3rem 10vh; }

  /* ---------- Proyecto móvil (PDF PW_NU_version_telefono) ----------
     Una sola columna con el scroll normal de la página, en este
     orden (js/project.js renderiza así en <768px): nombre → tipo →
     tagline → datos técnicos → imagen → párrafo → imagen → párrafo…
     → Next. El scroll unificado y el snap son SOLO de desktop. */
  .project {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .project-info {
    /* sin sticky en móvil: bloque normal dentro de la columna única
       (los margin auto del centrado desktop computan a 0 en block) */
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    /* 10rem: despeje del header fijo móvil (más alto desde corr. 10) */
    padding: 10rem 1.3rem 0;
    max-width: none;
  }
  .project-carousel {
    /* arranca justo tras los datos técnicos */
    padding: 2rem 1.3rem 5rem;
  }
  /* Imágenes COMPLETAS en móvil (correcciones 17): nada de caja 4/5
     con cover que recortaba los laterales del render. La imagen va
     en flujo normal, ancho completo y alto automático: se ve entera,
     con su relación de aspecto (decisión de Paola: imagen completa
     antes que llenar el ancho). El desktop no cambia (allí .ph img
     sigue absoluto con cover dentro del carrete con snap). */
  .project-carousel .ph {
    height: auto;
    aspect-ratio: auto;            /* el alto lo pone la propia imagen */
    margin-bottom: 1.3rem;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .project-carousel .ph img {
    position: static;
    width: 100%;
    height: auto;                  /* relación de aspecto intacta */
  }
  /* Los placeholders grises (proyectos aún sin fotos) son <figure>
     vacíos: conservan el bloque 4/5 para no colapsar. */
  .project-carousel .ph:empty { aspect-ratio: 4 / 5; }

  /* Tipo en itálica como en el PDF (ref. 10pt → 13px, ya heredado). */
  .page-project .project-info .project-type { font-style: italic; }

  /* Datos técnicos ref. 7,6pt → 10px. */
  .page-project .project-meta,
  .page-project .project-meta dt { font-size: 10px; }
  .page-project .project-meta { margin-top: 1.6rem; }

  /* Párrafos del texto conceptual intercalados entre las imágenes:
     justificados (PDF) y en el gris de textos secundarios. */
  .project-carousel .project-paragraph {
    margin: 0.4rem 0 2.2rem;
    font-size: 13px;
    line-height: 1.9;
    text-align: justify;
    hyphens: auto;             /* consistente con el resto (corr. 15) */
    color: var(--muted);
  }

  /* ==========================================================
     WORK móvil (PDFs versión teléfono):
     - SIN overlay rosado: la foto siempre visible y la info
       (nombre, tipo, tagline) debajo, en texto plano.
     - Scroll VERTICAL normal de la página (nada de horizontal).
     - Un solo tap navega (js/work.js desactiva el "primer tap
       revela" por debajo de 768px).
     ========================================================== */
  .page-work { overflow: auto; }   /* el body vuelve a scrollear */

  .work-track {
    display: block;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
    /* despeje del header fijo, que ahora es más alto (padding
       superior amplio + nombre que puede ir en dos líneas) */
    padding: 10rem 0 4rem;
  }

  .work-panel {
    flex: none;
    width: 100%;
    height: auto;
    flex-direction: column;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    margin-bottom: 4rem;
  }
  .work-panel:last-child { margin-bottom: 0; }

  /* La "overlay" deja de ser overlay: bloque estático bajo la
     imagen, alineado con el borde izquierdo del recuadro. */
  .work-overlay {
    position: static;
    transform: none;
    width: var(--figure-w);
    aspect-ratio: auto;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 1.1rem 0 0;
    text-align: left;
    background: transparent;
    opacity: 1;
  }
  .work-overlay > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .work-overlay .project-subtitle { margin-top: -0.35rem; }

  /* Tamaños PDFs móviles (nombre 14pt · tipo 10pt · tagline 7,6pt),
     a escala web ×1.29: 18 / 13 / 10 px. */
  .work-overlay .project-title { font-size: 18px; }
  .work-overlay .project-type  { font-size: 13px; }
  .work-overlay .project-blurb { font-size: 10px; max-width: none; }

  /* El contador 01/06 pierde sentido sin paginación horizontal. */
  .work-counter { display: none; }

  /* ==========================================================
     Textos en gris en móvil (Work y Proyecto): se usa el gris de
     textos secundarios que YA usa el sitio (--muted, #8f8f8f) en
     vez de introducir un tono nuevo. EXCEPCIÓN: "Paola Novellino"
     (wordmark) mantiene su color de tinta actual.
     ========================================================== */
  /* Solo COLOR: los tamaños del header móvil (nombre y WORK/ABOUT)
     se definen arriba para todas las páginas. */
  .page-work .site-header .nav-left,
  .page-work .site-header .nav-right,
  .page-project .site-header .nav-left,
  .page-project .site-header .nav-right {
    color: var(--muted);
  }

  .page-work .site-header .wordmark,
  .page-project .site-header .wordmark {
    color: var(--ink);             /* NO cambia a gris */
  }

  /* En Proyecto móvil se retira el blend del header (estaba pensado
     para fundir texto blanco sobre las fotos a sangre del desktop)
     para poder mostrar los links en el gris exacto del sitio. */
  .page-project .site-header { mix-blend-mode: normal; }

  .page-project .project-info h1,
  .page-project .project-info .project-subtitle,
  .page-project .project-info .project-type,
  .page-project .project-info .project-tagline,
  .page-project .project-info .project-description,
  .page-project .project-meta dt,
  .page-project .project-meta dd,
  .page-project .project-next {
    color: var(--muted);
  }
  .page-project .project-info h1 { font-size: 18px; }        /* ref. 14pt */
  .page-project .project-info .project-tagline { font-size: 10px; } /* ref. 7,6pt */
}

/* ============================================================
   Accesibilidad: sin animaciones si el usuario lo pide
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}