/* =========================================================
   PORTAFOLIO PAOLA PARRA — style.css
   Valores de color, tipografía y espaciado extraídos
   directamente del archivo de Figma (fuente de la verdad).
   ========================================================= */

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Tokens (de Figma) ---------- */
:root {
  --bg-page:        #161616; /* fondo general */
  --bg-nav:         #1b1b1b; /* barra de navegación */
  --bg-card:        #2a2a2a; /* tarjetas de proyecto */
  --card-border:    #282828;
  --bg-testimonial: #101010;
  --bg-cta:         #2a2a2a;
  --bg-footer:      #161616;

  --text-white:     #ffffff;
  --text-grey:      #d2d2d2; /* subtítulos hero, cuerpo testimonios */
  --text-grey-dark: #828282; /* tags, ubicación hero */
  --text-name:      #dfdfdf; /* nombres en testimonios */
  --text-footer:    #aaaaaa;

  --accent-purple:      #470093; /* fondo botón primario */
  --accent-purple-border:#7900fa; /* borde botón primario */
  --btn-grey-bg:    #4b4b4b; /* botón "View project" */

  --accent-magenta: #B23FD1;
  --accent-pink:    #E0339B;
  --accent-yellow:  #F5C94B;
  --accent-orange:  #F2994A;

  --border-soft: rgba(255, 255, 255, 0.08);

  --radius-lg: 24px;
  --radius-card: 14px;
  --radius-full: 9999px;

  --container-w: 1509px; /* 1445px de contenido (igual a Figma en Home y All projects) + 32px de padding a cada lado */

  /* Figtree: fuente real usada en el diseño de Figma (Google Fonts, gratuita) */
  --font-base: "Figtree", system-ui, -apple-system, sans-serif;
}

body {
  background: var(--bg-page);
  color: var(--text-white);
  font-family: var(--font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Utilidades ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-purple);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-base);
  font-weight: 600; /* Figtree SemiBold */
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Botón secundario "View project": fondo gris oscuro, texto blanco */
.btn-grey {
  background: var(--btn-grey-bg);
  color: var(--text-white);
  padding: 8px 20px;
}
.btn-grey:hover { background: #5a5a5a; }

/* Ancho mínimo de 200px solo en escritorio, igual al frame "Secondary"
   de Figma (200x40); en mobile se deja fluido para no forzar el layout. */
@media (min-width: 861px) {
  .btn-grey {
    min-width: 200px;
    justify-content: center;
  }
}

/* Botón primario "Explore all the projects" / "Let's talk": morado */
.btn-primary {
  background: var(--accent-purple);
  border-color: var(--accent-purple-border);
  color: #fff;
  padding: 11px 33px;
  box-shadow: 0 8px 24px rgba(71, 0, 147, 0.35);
}
.btn-primary:hover { background: #5a00b3; }

.btn-primary .arrow,
.btn-grey .arrow { display: inline-flex; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg-nav);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  height: 40px;
  width: auto; /* mantiene proporción real del logo (60x78) sin depender del atributo HTML */
  display: block;
}
.logo-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  /* Visible solo para lectores de pantalla; el diseño original
     muestra solo el monograma "P" en el header. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
}
.primary-nav a {
  font-size: 16px;
  font-weight: 600; /* Figtree SemiBold, igual que en Figma */
  color: var(--text-white);
  padding: 4px 0;
  transition: color 0.2s ease;
}
.primary-nav a:hover {
  color: #E491F9;
}
.primary-nav li:not(:last-child) {
  border-right: 1px solid var(--border-soft);
  padding-right: 28px;
}

/* Ícono de menú móvil — versión "delicada": líneas finas (1.5px, puntas
   redondeadas), la barra del medio más corta (acento asimétrico moderno)
   y un morph suave a "X" al abrir. El botón conserva 40x40px de área de
   toque por accesibilidad aunque el ícono visual sea más chico (20px). */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: var(--text-white);
  border-radius: 3px;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; width: 13px; }
.nav-toggle span:nth-child(3) { top: 26px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 20px;
  width: 20px;
  transform: translateX(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) translateX(8px);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 20px;
  width: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 64px;
}

.hero-decor {
  position: absolute;
  top: -40px;
  left: -20px;
  width: 280px;
  pointer-events: none;
  z-index: 0;
}
.hero-decor img {
  width: 100%;
  height: auto; /* evita que el atributo HTML height gane sobre el ancho fijado arriba */
}

.hero-grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 56px;
}

.hero-content { max-width: 640px; position: relative; z-index: 1; }

.hero-content h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400; /* Figtree Regular, tal como en Figma */
  line-height: 1.03;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  color: var(--text-grey);
  line-height: 1.5;
  margin-bottom: 18px;
}

.hero-location {
  font-size: 14px;
  color: var(--text-grey-dark);
}

.hero-photo {
  flex-shrink: 0;
  width: 260px;
}
.hero-photo img {
  width: 100%;
  height: auto; /* evita que el atributo HTML height gane sobre aspect-ratio */
  /* La forma asimétrica ya viene recortada en el PNG exportado desde Figma
     (esquinas con transparencia), así que no se repite border-radius aquí. */
}

.hero-divider {
  /* En Figma esta línea va de borde a borde (100% del viewport), no solo
     del ancho del contenido — por eso ya no va envuelta en .container. */
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 0;
}

/* =========================================================
   FEATURED PROJECTS
   ========================================================= */
.projects {
  padding: 72px 0;
}

.section-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400; /* Figtree Regular */
  margin-bottom: 32px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
  position: relative;
  isolation: isolate; /* contiene el z-index negativo del ::before del hover, para que no se meta detrás de otras tarjetas */
  background-color: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 5px rgba(128, 128, 128, 0.08);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Fondo más oscuro al hacer hover — background-color sí se puede animar de
   forma nativa (a diferencia de background-image, que "saltaba" de golpe a
   mitad de la transición en vez de transicionar suave). */
.project-card:hover {
  background-color: #212121;
  border-color: transparent;
}

/* Borde degradado al hacer hover, con un ::before separado en vez de la
   capa de background-image: opacity SÍ se anima suave, así que el
   degradado aparece con un fundido en vez de un salto brusco.
   Degradado: #9651BC al 70% → #DAC100 al 48%. */
.project-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px; /* grosor del borde (subido de 1px a 2px a pedido de Paola, 2026-08-17) */
  background: linear-gradient(135deg, rgba(150, 81, 188, 0.7), rgba(218, 193, 0, 0.48));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.project-card:hover::before {
  opacity: 1;
}

.project-card-body h3 {
  font-size: 20px;
  font-weight: 300; /* Figtree Light */
  line-height: 1.3;
  margin-bottom: 10px;
  /* Altura reservada para 2 líneas, igual para las 3 tarjetas, así la
     imagen de abajo siempre arranca en el mismo punto sin importar
     cuántas líneas ocupe realmente cada título. Si algún título llega
     a ocupar 3 líneas, esa tarjeta crecerá un poco más que las demás. */
  min-height: calc(1.3em * 2);
}

.project-tags {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-grey-dark);
  /* Igual que el título: altura reservada para 2 líneas de tags. */
  min-height: calc(1.5em * 2);
  display: flex;
  align-items: flex-start;
}

.project-thumb {
  /* Las capturas ya traen su propio marco redondeado y sombra incluidos
     (exportadas directamente desde Figma), así que no se agrega borde extra. */
}
.project-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.project-card .btn {
  align-self: center;
}

.projects-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* =========================================================
   ALL PROJECTS (página interna all-projects.html)
   Tarjetas más grandes que las de "Featured projects" del home
   (título 22px Medium, padding 58/38, gap 22 entre bloques),
   según los tokens reales extraídos de Figma (nodo 255:157).
   ========================================================= */
.all-projects {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
}

/* La grilla y el título necesitan quedar por encima del garabato decorativo
   (mismo patrón que .hero-content en el home). */
.all-projects > .container {
  position: relative;
  z-index: 1;
}

/* Garabato decorativo exclusivo de esta página (doodle_all_projects.webp),
   asomando desde el borde izquierdo, igual que .hero-decor en el home. */
.all-projects-decor {
  position: absolute;
  top: -20px;
  left: 0;
  width: 230px;
  pointer-events: none;
  z-index: 0;
}
.all-projects-decor img {
  width: 100%;
  height: auto; /* evita que el atributo HTML height gane sobre el ancho fijado arriba */
}

.all-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.all-projects-card {
  position: relative;
  isolation: isolate; /* contiene el z-index negativo del ::before del hover, para que no se meta detrás de otras tarjetas */
  background-color: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 5px rgba(128, 128, 128, 0.08);
  padding: 58px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Fondo más oscuro al hacer hover — background-color sí se puede animar de
   forma nativa (a diferencia de background-image, que "saltaba" de golpe a
   mitad de la transición en vez de transicionar suave). */
.all-projects-card:hover {
  background-color: #212121;
  border-color: transparent;
}

/* Borde degradado al hacer hover, con un ::before separado en vez de la
   capa de background-image: opacity SÍ se anima suave, así que el
   degradado aparece con un fundido en vez de un salto brusco.
   Degradado: #9651BC al 70% → #DAC100 al 48%. */
.all-projects-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px; /* grosor del borde (subido de 1px a 2px a pedido de Paola, 2026-08-17) */
  background: linear-gradient(135deg, rgba(150, 81, 188, 0.7), rgba(218, 193, 0, 0.48));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.all-projects-card:hover::before {
  opacity: 1;
}

.all-projects-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.all-projects-card-body h3 {
  font-size: 20px;
  font-weight: 300; /* Figtree Light, igual que las mini-tarjetas del home */
  line-height: 1.3;
}

.all-projects-tags {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-grey-dark);
  text-align: left;
}

.all-projects-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  width: 100%;
  /* En vez de reservar una altura fija en el título/tags (que dejaba un
     hueco vacío en las tarjetas con títulos cortos), la tarjeta ya se
     estira a la altura de la fila vía CSS Grid, y este margin-top: auto
     empuja la imagen + botón hasta el fondo de esa tarjeta ya estirada.
     Así el espacio sobrante queda como un solo respiro limpio antes de la
     imagen, y la imagen + botón de las 3 tarjetas de cada fila quedan
     alineados igual, sin importar cuántas líneas ocupe cada título. */
  margin-top: auto;
}

.all-projects-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.all-projects-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Placeholder temporal mientras se sube la imagen real del proyecto. */
.all-projects-thumb.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  color: var(--text-grey-dark);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

/* Botón "View project" de estas tarjetas: primario (morado), ancho fijo
   200px / alto 40px en todos los tamaños, igual al frame de Figma. */
.all-projects-card .btn-primary {
  width: 200px;
  height: 40px;
  padding: 8px 33px;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials {
  position: relative;
  overflow: hidden;
  background: var(--bg-testimonial);
  padding: 88px 0;
}

.testimonials-decor {
  position: absolute;
  top: -20px;
  /* Antes estaba desplazada -50px, lo que recortaba casi el 30% del garabato
     contra el borde de .testimonials (overflow: hidden) y lo dejaba casi
     invisible. En Figma se ve completo asomando desde el borde, así que
     ahora se muestra al 100% (left: 0). */
  left: 0;
  width: 190px;
  pointer-events: none;
  z-index: 0;
}
.testimonials-decor img {
  width: 100%;
  height: auto; /* evita que el atributo HTML height gane sobre el ancho fijado arriba */
}

.testimonials-grid {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
}

.testimonials-heading {
  position: relative;
  z-index: 1;
}

.testimonials-heading h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400; /* Figtree Regular */
  line-height: 1.2;
}

.testimonials-quote {
  width: 109px;
  height: auto;
  margin-top: 24px;
}

.testimonials-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
}

.testimonial {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px 12px;
}

.testimonial-avatar {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial p {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-grey);
  line-height: 1.5;
}

.testimonial footer {
  font-size: 16px;
  font-weight: 600; /* Figtree SemiBold */
  color: var(--text-name);
  display: flex;
  flex-direction: column;
}
.testimonial footer cite {
  font-style: normal;
}
.testimonial footer span {
  font-weight: 600;
}

/* =========================================================
   CTA
   ========================================================= */
.cta {
  position: relative;
  background: var(--bg-cta);
  padding: 96px 0;
  text-align: center;
}

/* Línea blanca decorativa de Figma: 7px de alto, 100% del ancho (borde a
   borde, igual que el hero-divider), a 42px del borde superior de la sección. */
.cta-divider {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  height: 7px;
  background: var(--text-white);
}

.cta h2 {
  font-size: clamp(24px, 3.2vw, 35px);
  font-weight: 400; /* Figtree Regular */
  max-width: 700px;
  margin: 0 auto 36px;
  line-height: 1.4;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-soft);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-footer);
}
.footer-brand img {
  height: 30px;
  width: auto; /* mantiene proporción real del logo (60x78) */
  display: block;
}

.footer-links {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--text-footer);
}
.footer-links a:hover { color: var(--text-white); }

.footer-contact {
  font-size: 14px;
  color: var(--text-footer);
}
.footer-contact a:hover { color: var(--text-white); }

.footer-meta {
  text-align: right;
  font-size: 14px;
  color: var(--text-footer);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Garabatos decorativos del hero y de testimonios (.hero-decor,
   .testimonials-decor): están posicionados por fuera de .container,
   pegados al borde de la sección completa, asumiendo que sobra margen
   ahí (solo cierto cuando el viewport es más ancho que --container-w,
   1509px + colchón). Como .container tiene max-width (no width fijo),
   apenas el viewport baja de ~1570-1600px el margen lateral desaparece
   y el garabato queda pisando directamente el texto del H1 / del
   título de testimonios (detectado por Paola probando en pantallas
   de laptop tipo 1440px — confirmado con Playwright: a 1440px el
   solape mide ~228px). Se ocultan a partir de 1650px, el mismo
   patrón ya usado para `.project-outcome-decor` en las páginas de
   detalle de proyecto (ver más abajo, ese se oculta en ≤1100px
   porque ahí el bloque de texto se apila distinto).

   (Se probó reposicionar .hero-decor detrás de .hero-photo en vez de
   ocultarlo en este rango — Paola lo pidió pero no quedó bien
   implementado visualmente, se revirtió el mismo día. Si se retoma la
   idea en el futuro, no partir de cero: el intento vivía en un
   @media (max-width:1650px) and (min-width:861px) que movía
   .hero-decor a right:-20px/top:-40px/width:230px y subía
   .hero-photo a position:relative;z-index:1.) */
@media (max-width: 1650px) {
  .hero-decor,
  .testimonials-decor { display: none; }
}

@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .all-projects-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-list { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  /* Logo "P" más chico en mobile (pedido de Paola) — el contenedor .logo
     usa width:auto en la imagen, así que solo hace falta bajar la altura. */
  .logo img { height: 30px; }

  .primary-nav {
    position: fixed;
    inset: 88px 16px auto 16px;
    background: #1c1c1c;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .primary-nav li:not(:last-child) {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 16px;
    width: 100%;
  }

  .hero-grid {
    flex-direction: column-reverse;
    text-align: left;
  }
  .hero-photo { width: 200px; }

  .projects-grid { grid-template-columns: 1fr; }
  .all-projects-grid { grid-template-columns: 1fr; }

  /* Título "All projects" en mobile: más chico y centrado (pedido de
     Paola), en vez del tamaño/alineación a la izquierda que hereda de
     .section-title para el resto del sitio. */
  .all-projects .section-title {
    font-size: 32px;
    text-align: center;
  }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 30px; }
  .cta { padding: 64px 0; }
  .testimonials { padding: 64px 0; }
}


/* =========================================================
   PÁGINAS DE DETALLE DE PROYECTO (proyecto-fng.html y las que
   sigan: proyecto-petfood.html, proyecto-cannabis.html, etc.)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 192:377, 2026-08-16).
   Clases genéricas y reutilizables, no específicas de un
   proyecto en particular.
   ========================================================= */

/* Tarjetas de texto de estas páginas usan un gris ligeramente distinto
   al de las tarjetas de proyecto del home/all-projects (#202020 con
   borde #2c2c2c, en vez de --bg-card #2a2a2a / --card-border #282828). */
:root {
  --project-card-bg: #202020;
  --project-card-border: #2c2c2c;
  --project-quote-bg: #003a73; /* azul institucional del FNG, tomado del frame */
}

/* ---------- Hero del proyecto ---------- */
.project-hero {
  padding-top: 64px;
  padding-bottom: 40px;
}
.project-hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400; /* Figtree Regular */
  line-height: 1.03;
  max-width: 830px; /* ancho real del H1 en Figma */
  margin-bottom: 32px;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px; /* gap real entre pills en Figma */
}
.meta-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; /* gap entre "Label:" y el grupo de valores */
  background: var(--bg-card); /* #2a2a2a, coincide con Figma */
  border-radius: 8px; /* NO es pill completo, esquinas de 8px como en Figma */
  padding: 9px 23px;
}
.meta-label {
  font-weight: 400; /* Figtree Regular, igual que en Figma (no bold) */
  color: var(--text-white);
  font-size: 14px;
}
.meta-value {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* gap entre valor/línea/valor dentro del pill */
  color: var(--text-grey);
  font-size: 14px;
}
/* Separador: línea vertical fina (igual al asset "Line" de Figma),
   no el caracter "|". */
.meta-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  display: inline-block;
}

/* ---------- Project overview ---------- */
.project-overview {
  padding: 24px 0 24px;
}
.project-overview h2 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  margin-bottom: 12px;
}
.project-overview p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
  max-width: 677px; /* ancho real del bloque en Figma */
}

/* ---------- Bloques de contenido (research, IA, hi-fi...) ---------- */
.project-block {
  padding: 56px 0;
}

/* Franja de fondo distinto para alternar secciones — detrás de los
   lo-fi wireframes, ayuda a separar visualmente esta sección de las
   vecinas. */
.project-block--alt {
  background: #2a2a2a;
}

/* Tarjeta de texto reutilizable — colores/padding verificados contra
   Figma (bg #202020, borde #2c2c2c, padding 40px). */
.project-card-text {
  background-color: var(--project-card-bg);
  border: 1px solid var(--project-card-border);
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap por defecto (hi-fi / accessibility) */
}
.project-card-text h3 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-card-text p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}
.card-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
}
.card-icon svg { width: 100%; height: 100%; }

/* Variantes de gap internas verificadas por tarjeta en Figma */
.project-card-text--research { gap: 12px; }
.project-card-text--ia { gap: 20px; }

/* Tarjeta de cita/insights — color sólido azul institucional del FNG
   (#003a73), no degradado. */
.project-quote-card {
  background: var(--project-quote-bg);
  border-radius: 8px;
  padding: 32px;
  width: 316px; /* ancho fijo real en Figma */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
/* Ícono de comillas real (asset "comment.png" de Figma, 28x23 nativo)
   — antes era el carácter tipográfico "“", se reemplazó por el
   asset real. */
.quote-icon {
  flex-shrink: 0;
  width: 26px;
  height: auto;
  display: block;
}
.project-quote-card h3 {
  font-size: 18px;
  font-weight: 500; /* Figtree Medium */
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-white);
}
.project-quotes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.project-quotes p {
  font-size: 14px;
  color: var(--text-white); /* en Figma todo el bloque de citas es blanco, no gris-azulado */
  line-height: 1.5;
  margin-bottom: 2px;
}
.project-quotes span {
  font-size: 14px;
  color: var(--text-white);
}

/* ---------- Media / capturas de pantalla ----------
   El título gris (label) NO empuja la imagen hacia abajo: en Figma el
   label "flota" arriba de la fila (p.ej. "FNG Old page" en y=587 vs. su
   imagen en y=623, mientras la tarjeta de texto vecina también arranca
   en y=622) — o sea, la imagen se alinea con el resto de la fila, y el
   label vive en el espacio por encima de esa línea. Se implementa con
   position:absolute para sacar el label del flujo. */
.project-media,
.project-media-group {
  position: relative;
}
.project-media-label {
  position: absolute;
  top: -36px;
  left: 0;
  font-size: 16px;
  color: var(--text-grey-dark);
  white-space: nowrap;
}
.project-media-row {
  display: flex;
  align-items: flex-start;
}

/* Placeholder temporal mientras Paola sube las capturas reales. Cada
   variante usa el aspect-ratio EXACTO verificado en el frame de Figma
   (no una aproximación), para que el hueco reservado ya tenga el
   tamaño correcto y no salte al reemplazar por la imagen real. */
.pd-thumb {
  border-radius: 8px;
  overflow: hidden;
}
.pd-thumb.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1f1f1f;
  border: 1px dashed var(--project-card-border);
  color: var(--text-grey-dark);
  font-size: 13px;
  line-height: 1.5;
  padding: 16px;
}
.pd-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* FNG Old page: 303 × 455 en Figma */
.pd-thumb--oldpage {
  width: 303px;
  aspect-ratio: 303 / 455;
  flex-shrink: 0;
}
/* Lo-fi wireframe 1 (más angosto): 254 × 491 en Figma */
.pd-thumb--wireframe-a {
  width: 254px;
  aspect-ratio: 254 / 491;
  flex-shrink: 0;
}
/* Lo-fi wireframe 2 (más ancho): 373 × 491 en Figma */
.pd-thumb--wireframe-b {
  width: 373px;
  aspect-ratio: 373 / 491;
  flex-shrink: 0;
}
/* New transactional portal: 677 × 435 en Figma */
.pd-thumb--portal {
  width: 100%;
  aspect-ratio: 677 / 435;
}
/* Mobile mockups: 200 × 396 en Figma */
.pd-thumb--mobile {
  width: 200px;
  aspect-ratio: 200 / 396;
  flex-shrink: 0;
}
/* New institutional web page (1) — captura completa: 677 × 839 en Figma */
.pd-thumb--institutional-1 {
  width: 100%;
  aspect-ratio: 677 / 839;
}
/* New institutional web page (2): 684 × 715 en Figma */
.pd-thumb--institutional-2 {
  width: 100%;
  aspect-ratio: 684 / 715;
}

/* ---------- Grilla de 2 columnas compartida: 677px | 92px gap | resto.
   Usada igual en Research, Information architecture e Hi-fi — es el
   mismo patrón de columnas en las 3 secciones dentro del frame real. ---------- */
.project-two-col {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 92px;
  align-items: start;
}
.project-research-grid,
.project-ia-grid,
.project-hifi-grid {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 92px;
  align-items: start;
}

/* Research & discovery: dentro de la 2ª columna, cita (316px) + imagen
   vieja (303px) con 52px de gap entre ellas. */
.project-research-right {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

/* Information architecture: dentro de la 2ª columna, wireframe angosto
   (254px) + wireframe ancho (373px) con 44px de gap. */
.project-ia-grid .project-media-row {
  gap: 44px;
}

/* Hi-fi wireframing + accessibility: columna izquierda con las 2
   tarjetas de texto + portal transaccional + mobiles; columna derecha
   con las 2 capturas grandes de la web institucional. */
.project-hifi-left {
  display: flex;
  flex-direction: column;
  gap: 42px;
}
/* El label "New transactional portal" flota con top:-36px sobre su
   contenedor (mismo patrón que el resto del sitio), así que el gap de
   42px de la tarjeta hacia el CONTENEDOR de la imagen se ve reducido a
   solo 6px en el label. Se suman esos 36px de vuelta para que el
   label quede visualmente a 42px de la tarjeta "Accessibility". */
.project-hifi-left .project-media {
  margin-top: 36px;
}
/* El gap base de la columna es 42px; hacia la fila de mobiles debe
   quedar en 48px, así que se suma la diferencia (6px) solo ahí. */
.project-hifi-left .project-mobile-row {
  margin-top: 6px;
}
.project-hifi-right {
  position: relative; /* para que su label flote arriba, igual que .project-media */
  display: flex;
  flex-direction: column;
  gap: 40px; /* gap real entre las 2 capturas institucionales en Figma */
}
.project-hifi-right > .project-media-label {
  position: absolute;
  top: -36px;
  left: 0;
}

/* Mobile mockups: 429px de ancho total (200+30+200), centrados respecto
   a la imagen del portal transaccional de arriba (misma columna). */
.project-mobile-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 429px;
  margin: 0 auto;
}

/* ---------- The final outcome ---------- */
.project-outcome {
  position: relative;
  overflow: hidden;
  background: #101010;
  padding: 96px 0;
}
/* Garabatos decorativos reales de "The final outcome" (asset "Group 31"
   en Figma, exportado por Paola como 2 imágenes independientes: una
   para cada lado, no son espejo la una de la otra). En Figma quedan
   pegados al borde izq/der de la sección y ocupan casi todo el alto
   del fondo oscuro (~88%, centrados verticalmente, dejando un margen
   simétrico arriba/abajo). Se posicionan por altura (no por ancho)
   para que cada imagen conserve su proporción real. */
.project-outcome-decor {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 88%;
  width: auto;
  pointer-events: none;
}
.project-outcome-decor--left { left: 0; }
.project-outcome-decor--right { right: 0; }

/* El bloque completo (título + texto) mide 1064px en Figma y queda
   CENTRADO dentro del contenedor de 1441px (188.5px de margen a cada
   lado) — no es un grid a lo ancho de todo el contenedor. Título con
   ancho natural (283px, una sola línea) + 73px de gap + párrafo de
   708px de ancho. */
.project-outcome-grid {
  position: relative;
  display: flex;
  align-items: center;
  gap: 73px;
  /* width:fit-content (en vez de un max-width fijo en px) para que el
     bloque siempre se ajuste exacto a su contenido real y quede
     centrado sin desbordarse, sin importar el ancho exacto que
     termine ocupando el H1 según la fuente cargada. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.project-outcome-grid h2 {
  flex-shrink: 0;
  /* Bajado un nivel de jerarquía (2026-08-17): antes 35px Regular, se veía
     demasiado grande frente al resto de títulos de sección de la página.
     Ahora coincide con el tamaño de los demás títulos de sección de las
     páginas de detalle (22px Medium, igual que "Project overview",
     "Research & discovery", etc.). */
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  line-height: 1.3;
  text-align: right; /* alineado a la derecha, igual que en Figma */
  white-space: nowrap;
}
.project-outcome-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 708px;
  flex-shrink: 0;
}
.project-outcome-text p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}

/* ---------- Responsive: páginas de detalle de proyecto ---------- */
@media (max-width: 1100px) {
  .project-research-grid,
  .project-ia-grid,
  .project-hifi-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-research-grid > .project-card-text,
  .project-ia-grid > .project-card-text,
  .project-hifi-left { width: 100%; }

  /* Los mockups mobile viven dentro de .project-hifi-left (así se
     mantiene intacta la estructura de escritorio, sin tocarla). En
     mobile se "desenvuelve" .project-hifi-left con display:contents
     para que sus hijos pasen a ser ítems directos del grid de una
     sola columna, y con `order` se manda el bloque de mockups al
     final de toda la sección (después de "New institutional web
     page") sin depender del orden real en el HTML. */
  .project-hifi-left { display: contents; }
  .project-hifi-left > .project-card-text:first-child { order: 1; margin-top: 0; }
  .project-hifi-left > .project-card-text:nth-child(2) { order: 2; margin-top: 32px; }
  /* 68px = 32px de gap visible + 36px para compensar el offset
     negativo del label "New transactional portal" (ver arriba). */
  .project-hifi-left > .project-media { order: 3; margin-top: 68px; }
  /* 68px = 32px de gap visible + 36px para compensar el offset
     negativo del label "New institutional web page". */
  .project-hifi-right { order: 4; margin-top: 68px; }
  .project-hifi-left > .project-mobile-row { order: 5; margin-top: 32px; }
  .project-outcome-grid { flex-direction: column; align-items: stretch; gap: 24px; max-width: 100%; padding: 0 32px; }
  .project-outcome-grid h2 { text-align: left; white-space: normal; }
  .project-outcome-text { width: 100%; }
  /* Los garabatos interrumpen la lectura en mobile (el bloque de texto
     se apila y queda muy cerca de los bordes) — se dejan solo para
     escritorio. */
  .project-outcome-decor { display: none; }
}

@media (max-width: 860px) {
  .project-hero { padding-top: 40px; }
  /* Gap entre "Project overview" y "Research & discovery" reducido en
     30px en mobile (56px de padding-top del bloque → 26px). Se usa el
     selector adyacente para afectar solo esta sección, sin tocar el
     ritmo vertical del resto de bloques alternados de la página. */
  .project-overview + .project-block { padding-top: 26px; }

  .project-research-right,
  .project-media-row { flex-wrap: wrap; }
  /* Se centra la tarjeta de cita + la imagen vieja al quedar en una
     sola columna (antes quedaban pegadas al borde izquierdo). Mismo
     criterio para los wireframes lo-fi. */
  .project-research-right,
  .project-media-row { justify-content: center; }
  .project-quote-card { max-width: 100%; }
  /* La imagen "FNG Old page" y los 2 wireframes lo-fi quedan todos con
     el mismo ancho (316px, el de la tarjeta de cita que precede a la
     imagen vieja), en vez del 280px genérico que tenían antes. */
  .pd-thumb--oldpage,
  .pd-thumb--wireframe-a,
  .pd-thumb--wireframe-b { width: 100%; max-width: 316px; }
  /* Mockups mobile: objetivo 416px (260px × 1.6, un 60% más grandes
     que el primer ajuste). El contenedor con padding de 16px por lado
     no deja suficiente ancho para llegar a eso, así que la fila se
     "escapa" (bleed) del padding del .container con márgenes
     negativas — igual que un full-bleed clásico — y se limita a
     416px como techo para pantallas más anchas dentro de este
     breakpoint. Los thumbs tenían flex-shrink:0 y ancho fijo (200px)
     — sin liberar eso no se pueden escalar, así que aquí se dejan
     flexibles. */
  .project-mobile-row {
    width: min(416px, 100vw);
    margin-left: calc((100vw - 32px - min(416px, 100vw)) / 2);
    margin-right: 0;
  }
  .project-mobile-row .pd-thumb--mobile { width: auto; flex: 1 1 0; }
}

@media (max-width: 860px) {
  /* Márgenes laterales consistentes de 16px en mobile, tanto en el
     home como en las páginas de detalle de proyecto (.container es
     compartido por todo el sitio). */
  .container { padding: 0 16px; }
}

@media (max-width: 480px) {
  .meta-pill { padding: 8px 16px; }
  .project-card-text,
  .project-quote-card { padding: 24px; }
}

/* =========================================================
   PÁGINA DE DETALLE — proyecto-space.html (Space Camp)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 296:45, 2026-08-16).
   Reutiliza los tokens y clases genéricas de las páginas de
   detalle (.project-hero, .project-meta, .project-card-text,
   .pd-thumb) definidas arriba; agrega solo lo específico de
   esta página (bloque de overview+award+design approach a la
   izquierda, capturas a la derecha, y la sección Results con
   2 columnas de texto).
   ========================================================= */

/* Sección que envuelve overview + award + design approach + capturas.
   Padding más ajustado que el .project-block genérico porque en Figma
   el contenido arranca a solo 44px del header (vs. los 56px estándar
   entre bloques), y no hay franja de fondo alterna en esta página. */
.project-block--tight {
  padding: 24px 0 96px;
}

/* Grilla de 2 columnas: 677px (texto) | resto (~676px, capturas) con
   92px de gap — mismo patrón que .project-two-col usado en FNG. */
.project-space-grid {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 92px;
  align-items: start;
}

.project-space-left {
  display: flex;
  flex-direction: column;
}

.project-space-overview h2 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  margin-bottom: 12px;
}
.project-space-overview p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}

/* Premio: ícono + texto centrados + botón primario centrado.
   Gap real medido en Figma: overview→award 56px, ícono→texto 8px,
   texto→botón 20px. */
.project-award {
  margin-top: 56px;
  text-align: center;
}
.project-award-icon {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin: 0 auto 8px;
}
.project-award-text {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium, igual que en Figma */
  color: var(--text-grey);
  line-height: 1.3;
  margin: 0 auto 20px;
}
.project-award .btn-primary {
  margin: 0 auto;
}

/* Tarjeta "Design approach": mismo estilo que .project-card-text, con
   gap interno de 12px (verificado en Figma) en vez del 16px por defecto.
   Gap real card→button (arriba) 69px. */
.project-card-text--space {
  gap: 12px;
  margin-top: 69px;
}
/* El ícono de esta tarjeta es un emoji nativo (ver comentario en el
   HTML), así que no hereda el tamaño de .card-icon (pensado para SVG). */
.card-icon--emoji {
  width: auto;
  height: auto;
  font-size: 20px;
}

/* Captura "How it works": gap real card→imagen 59px. */
.project-media--space-how {
  margin-top: 59px;
}
.pd-thumb--space-how {
  width: 100%;
  aspect-ratio: 677 / 740;
}

/* Columna derecha: hero de la landing + mockup mobile. */
.pd-thumb--space-hero {
  width: 100%;
  aspect-ratio: 675 / 942;
}

/* Mockup mobile: 453px de ancho real en Figma, centrado dentro de la
   columna derecha (no pegado al borde izquierdo). Gap real hero→mobile
   70px. */
.project-space-mobile {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}
.pd-thumb--space-mobile {
  width: 100%;
  max-width: 453px;
  aspect-ratio: 453 / 422;
}

/* ---------- Results ---------- */
.project-results {
  position: relative;
  overflow: hidden;
  background: var(--bg-testimonial); /* #101010, igual que en Figma */
  padding: 96px 0;
}

/* Los garabatos decorativos de esta sección ya NO usan imágenes propias
   (2026-08-17): las 2 que había, recortadas de un screenshot, tenían un
   corte duro en el borde inferior que quedaba expuesto en cuanto se
   centraban verticalmente. Se reemplazaron por los mismos 2 gráficos
   "final outcome" reutilizados en project-fng.html y project-petfood.html
   (`img/final_outcome_graphic_1.webp` / `_2.webp`, exportaciones limpias
   sin corte), con la clase genérica ya existente `.project-outcome-decor`
   (definida más abajo junto a "The final outcome" de FNG: centrado
   verticalmente, 88% de alto, pegado a cada borde). Ver el HTML de esta
   sección — ya no usa `.project-results-decor`, esa clase quedó sin uso
   en el sitio (se deja documentado por si algún día se vuelve a necesitar
   un garabato propio para esta página).
   `.project-results-inner` sigue existiendo solo para envolver el grid
   de texto (no tiene ya ningún rol en el posicionamiento de garabatos). */
.project-results-inner {
  position: relative;
}

.project-results-grid {
  position: relative;
  z-index: 1;
  /* Paola pidió (2026-08-17) apilar los 2 bloques en una sola columna
     — "Results during one month of testing" primero (ya es el orden
     real en el HTML), "How I helped achieve these results" debajo,
     ambos del mismo ancho — en vez de 2 columnas lado a lado. Se centra
     como bloque en la página con max-width + margin:0 auto, y el texto
     de cada bloque se mantiene alineado a la izquierda (comportamiento
     por defecto). Mismo principio que .project-outcome-grid en
     project-fng.html y el override .project-results--petfood de abajo,
     que ya apila igual para Pet Food. */
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 640px;
  margin: 0 auto;
}

.project-results-col h2 {
  /* Bajado un nivel de jerarquía (2026-08-17): antes clamp(24px,3.2vw,35px)
     Regular, se veía demasiado grande — mismo ajuste que .project-outcome-grid
     h2 en project-fng.html. Ahora coincide con el tamaño de los demás
     títulos de sección de las páginas de detalle (22px Medium). Esta clase
     es compartida por project-space.html y project-petfood.html, así que
     el cambio aplica a las dos de una vez. */
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  line-height: 1.3;
  margin-bottom: 16px;
}
.project-results-col p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}

/* ---------- Responsive: proyecto-space.html ---------- */
@media (max-width: 1100px) {
  .project-space-grid { grid-template-columns: 1fr; gap: 48px; }
  .project-space-right { display: flex; flex-direction: column; align-items: center; }
  /* Los garabatos de Results ahora son .project-outcome-decor (ver arriba),
     que ya se ocultan en ≤1100px con su propia regla genérica más abajo
     (junto a "The final outcome" de FNG) — no hace falta repetirla aquí. */
}

@media (max-width: 860px) {
  .project-block--tight { padding: 16px 0 64px; }
  .project-results { padding: 64px 0; }
}

/* =========================================================
   PÁGINA DE DETALLE — project-petfood.html (Darwin's Pet)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 77:2, 2026-08-17).
   Reutiliza las clases genéricas de las páginas de detalle
   (.project-hero, .project-meta, .project-card-text, .pd-thumb,
   .project-media, .project-results / .project-results-grid, ya
   definidas para FNG y Space Camp arriba) y agrega solo lo
   específico de esta página.
   ========================================================= */

/* ---------- Overview + PDP image + PDP approach card ---------- */
/* Grid de 2 columnas: 644px (texto) | resto (imagen), con el gap real
   medido en Figma (image_left_abs 1003 - overview_right_abs 884 = 119px). */
.project-petfood-grid1 {
  display: grid;
  grid-template-columns: 644px 1fr;
  gap: 119px;
  align-items: start;
}
.project-petfood-left {
  display: flex;
  flex-direction: column;
}
.project-petfood-overview h2 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  margin-bottom: 12px;
}
.project-petfood-overview p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}
/* Tarjeta "Product detail page design": mismo estilo que .project-card-text
   (bg #202020), gap interno de 12px. Gap real overview→card ~150px
   (aproximado: la altura del párrafo de overview depende de la fuente
   cargada, no es un valor fijo confiable al 100% — verificado visualmente
   contra el screenshot de Figma). */
.project-card-text--petfood-pdp {
  gap: 12px;
  margin-top: 150px;
}
/* Imagen "Product detail page": 677 × 698.931 en Figma. El screenshot real
   que subió Paola (img/darwins/image_darwins_1.webp, 1920×1976) tiene casi
   exactamente ese mismo ratio (0.9717 vs. 0.9686 de Figma) — se usa
   directamente sin recortar, la diferencia es de ~2px, imperceptible. */
.pd-thumb--petfood-pdp {
  width: 100%;
  aspect-ratio: 677 / 698.931;
}

/* ---------- Subscription comparison: franja gris + card + capturas ---------- */
/* Franja de fondo #2a2a2a: en Figma mide 428px de alto y arranca en el
   mismo punto que la fila de contenido, pero el contenido (card + captura
   de escritorio de 804px) es más alto que la franja, así que esta se
   queda "corta" y el contenido sigue sobre el fondo oscuro normal más
   abajo — igual que se ve en el screenshot de referencia. Se implementa
   como capa decorativa detrás del contenido (mismo patrón `::before` +
   z-index negativo que el hover de las tarjetas de proyecto, documentado
   en handoff-all-projects.md), no como fondo de toda la sección. */
.project-petfood-comparison {
  position: relative;
  isolation: isolate;
  padding: 97px 0 96px; /* 97px = gap real franja→card/imagen (image_top 1287 - band_top 1190) */
}
.project-petfood-comparison::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 428px;
  background: #2a2a2a;
  z-index: -1;
}
/* Grid de 2 columnas: 677px (card + mobile debajo) | resto (captura de
   escritorio, más alta, alineada arriba). Gap real medido en Figma:
   image_left_abs 1000 - card_right_abs 917 = 83px. */
.project-petfood-grid2 {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 83px;
  align-items: start;
}
.project-petfood-comparison-left {
  display: flex;
  flex-direction: column;
}
/* Tarjeta "Comparison page design": bg #1a1a1a (distinto del resto de
   tarjetas de esta página, #202020 — así está en el frame real de
   Figma, no es un error). */
.project-card-text--petfood-comparison {
  background-color: #1a1a1a;
  gap: 12px;
}
/* Captura de escritorio "Subscription comparison page": 680 × 804 en
   Figma. Todavía no la subió Paola — placeholder con el ratio exacto
   reservado (ver .pd-thumb.is-placeholder, clase ya existente en el
   sitio para este estado transicional). */
.pd-thumb--petfood-comparison-desktop {
  width: 100%;
  aspect-ratio: 680 / 804;
}
/* Captura mobile: 453 × 412 en Figma, centrada bajo la columna de la
   tarjeta (no bajo toda la página). A diferencia del resto de labels de
   esta página (que flotan -36px ARRIBA de la imagen), este va
   ABAJO/centrado como caption — así está en Figma (label a top:2099,
   imagen termina en top:2084, la diferencia es +15px, o sea debajo). */
.project-petfood-mobile-wrap {
  width: 100%;
  max-width: 453px;
  margin: 40px auto 0;
  text-align: center;
}
.project-petfood-mobile-caption {
  margin-top: 12px;
  font-size: 16px;
  color: var(--text-grey-dark);
}
.pd-thumb--petfood-comparison-mobile {
  width: 100%;
  aspect-ratio: 453 / 412;
}

/* ---------- Results: reutiliza .project-results / .project-results-grid /
   .project-results-col (definidas arriba para Space Camp, son genéricas)
   y solo agrega las 2 estadísticas grandes de la columna izquierda. ---------- */
.project-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 24px;
}
.project-stat-label {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  color: var(--text-grey);
  line-height: 1.3;
  margin-bottom: 8px;
}
.project-stat-number {
  font-size: 40px;
  font-weight: 700; /* Figtree Bold */
  color: var(--text-white);
}

/* Petfood: Paola pidió que "Results during one month of testing" y "How I
   helped achieve these results" queden apiladas en vez del grid de 2
   columnas genérico (.project-results-grid, compartido con
   project-space.html) — ahí el contenido de las 2 columnas es parejo y
   se ve bien, pero acá el bloque derecho es bastante más largo que el
   izquierdo (que además ahora también tiene las 2 estadísticas grandes),
   así que el layout de 2 columnas se veía desbalanceado. Este override
   solo afecta a esta página.
   El bloque en sí queda centrado en la página (max-width + margin:0 auto),
   pero el texto adentro va alineado a la izquierda (align-items:stretch,
   la opción por defecto, para que cada columna ocupe todo el ancho de
   640px en vez de encogerse a su contenido) — Paola pidió esto último
   explícitamente después de ver la primera versión centrada por completo,
   que quedaba difícil de leer en los párrafos largos. */
.project-results--petfood .project-results-grid {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 40px;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Responsive: project-petfood.html ---------- */
@media (max-width: 1100px) {
  .project-petfood-grid1,
  .project-petfood-grid2 { grid-template-columns: 1fr; gap: 40px; }
  .project-card-text--petfood-pdp { margin-top: 32px; }
  .project-petfood-mobile-wrap { margin-top: 32px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 860px) {
  .project-petfood-comparison { padding-top: 40px; }
  .project-stats-row { gap: 32px; }
}

/* =========================================================
   PÁGINA DE DETALLE — project-soccer.html (Soccer Warehouse)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 264:290, 2026-08-17).
   Reutiliza las clases genéricas de las páginas de detalle
   (.project-hero, .project-meta, .project-card-text, .pd-thumb,
   .project-media, .project-results / .project-results-grid /
   .project-results-col / .project-stats-row, ya definidas arriba
   para FNG, Space Camp y Pet Food) y agrega solo lo específico
   de esta página.
   ========================================================= */

/* ---------- Overview + card + mobile mockups | home page image ---------- */
/* Grid de 2 columnas: 677px (texto) | resto (imagen), con el gap real
   medido en Figma (image_left_abs 1005 - left_col_right_abs 917 = 88px). */
.project-soccer-grid1 {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 88px;
  align-items: start;
}
.project-soccer-left {
  display: flex;
  flex-direction: column;
}
.project-soccer-overview h2 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  margin-bottom: 12px;
}
.project-soccer-overview p {
  font-size: 16px;
  color: var(--text-grey);
  line-height: 1.5;
}
/* Tarjeta "Home page & product page design": gap real overview→card
   medido en Figma (card_top_abs 526 - overview_bottom_abs 485 = 41px). */
.project-card-text--soccer {
  margin-top: 41px;
}
/* Mockups mobile (ya vienen compositados en un solo archivo, igual que
   img/darwins/image_darwins_mobile.webp en Pet Food): 440 × 396 en
   Figma. El screenshot real que subió Paola (img/soccer/image_soccer_mobile.webp,
   1320×1188) tiene EXACTAMENTE ese mismo ratio (1.1111) — se usa
   directo sin recortar. Centrado bajo la columna izquierda (no pegado
   al borde), con el caption debajo como en Pet Food (a diferencia del
   resto de labels de esta página, que flotan -36px ARRIBA de la
   imagen). Gap real card→mockups: 37px (mockups_top_abs 865 -
   card_bottom_abs 828). Gap real mockups→caption: 16px (caption_top_abs
   1277 - mockups_bottom_abs 1261). */
.project-soccer-mobile-wrap {
  width: 100%;
  max-width: 440px;
  margin: 37px auto 0;
  text-align: center;
}
.pd-thumb--soccer-mobile {
  width: 100%;
  aspect-ratio: 440 / 396;
}
.project-soccer-mobile-caption {
  margin-top: 16px;
  font-size: 16px;
  color: var(--text-grey-dark);
}
/* "Home page" image: 675 × 870 en Figma. El screenshot real que subió
   Paola (img/soccer/image_soccer_1.webp, 3400×6408) es una captura de
   página completa (nav + hero + quick-shop + shop by category +
   testimonials + shop by brand), mucho más alta que el recorte que
   pide Figma — se deja que el mismo patrón ya establecido en el sitio
   (aspect-ratio + overflow:hidden en .pd-thumb) recorte automáticamente
   el sobrante por abajo, mostrando solo la parte superior (hero +
   quick-shop + shop by category + inicio de testimonials), igual
   principio que el resto de imágenes de esta página que exceden el
   alto reservado. */
.pd-thumb--soccer-home {
  width: 100%;
  aspect-ratio: 675 / 870;
}

/* ---------- Responsive: project-soccer.html ---------- */
@media (max-width: 1100px) {
  .project-soccer-grid1 { grid-template-columns: 1fr; gap: 40px; }

  /* Paola pidió (2026-08-17) que en la versión apilada de mobile la
     captura de escritorio ("Home page") aparezca ANTES que los mockups
     mobile — por defecto el orden seguía el HTML (overview → card →
     mockups mobile → imagen de escritorio, porque los mockups viven
     dentro de la columna de texto en el layout de escritorio). Se
     "desenvuelve" .project-soccer-left con display:contents (mismo
     patrón ya usado en .project-hifi-left de project-fng.html) para que
     sus hijos pasen a ser ítems directos del grid de una sola columna,
     y con `order` se intercala la imagen de escritorio entre la
     tarjeta y los mockups mobile. */
  .project-soccer-left { display: contents; }
  /* Ojo: con display:contents el selector de hijo directo debe apuntar
     a .project-soccer-left (su padre real en el DOM), NO a
     .project-soccer-grid1 — el elemento con display:contents desaparece
     de la caja visual pero sigue siendo el padre real en el árbol DOM,
     que es lo que los selectores CSS evalúan. */
  .project-soccer-left > .project-soccer-overview { order: 1; }
  .project-soccer-left > .project-card-text--soccer { order: 2; margin-top: 32px; }
  /* 68px = 32px de gap visible + 36px para compensar el offset negativo
     del label "Home page" (.project-media-label, position:absolute con
     top:-36px) — mismo cálculo ya usado en project-fng.html para el
     mismo caso. */
  .project-soccer-grid1 > .project-media { order: 3; margin-top: 68px; }
  .project-soccer-left > .project-soccer-mobile-wrap { order: 4; margin-top: 32px; }
}

/* =========================================================
   PÁGINA DE DETALLE — project-cbd.html (Pharma CBD)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 135:219, nombre interno
   "Pharma CBD", 2026-08-17).
   Reutiliza las clases genéricas de las páginas de detalle
   (.project-hero, .project-meta, .project-overview, .project-card-text,
   .pd-thumb, .project-media, .project-media-label, .project-results /
   .project-results-grid / .project-results-col / .project-stats-row,
   ya definidas arriba para FNG, Space Camp, Pet Food y Soccer) y agrega
   solo lo específico de esta página.
   ========================================================= */

/* ---------- Overview + old home page | new home page + approach card ---------- */
/* Grid de 2 columnas, ambas de 677px (gap real medido en Figma:
   right_col_left_abs 1001 - left_col_right_abs 917 = 84px). */
.project-cbd-grid1 {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 84px;
  align-items: start;
}
.project-cbd-left,
.project-cbd-right {
  display: flex;
  flex-direction: column;
}
/* "Old home page": imagen indentada dentro de la columna izquierda (no a
   todo el ancho) — en Figma arranca 122px a la derecha del borde de la
   columna (image_left_abs 362 - col_left_abs 240 = 122px). Gap visible
   real hacia el bloque de overview: 82px (label_top_abs 690 -
   overview_bottom_abs 608 = 82px); como el label flota -36px sobre su
   imagen (mismo patrón .project-media-label ya usado en el resto del
   sitio), el margin-top real del wrapper es 82+36=118px. */
.project-cbd-oldpage {
  position: relative;
  width: 466px;
  max-width: 100%;
  margin: 118px 0 0 122px;
}
.pd-thumb--cbd-oldpage {
  width: 100%;
  aspect-ratio: 466 / 790;
}
/* "New home page": imagen a todo el ancho de la columna derecha (677 ×
   955 en Figma). */
.pd-thumb--cbd-home {
  width: 100%;
  aspect-ratio: 677 / 955;
}
/* Tarjeta "Home page design": gap real imagen→tarjeta = 46px
   (card_top_abs 1477 - image_bottom_abs 1431 = 46px). */
.project-card-text--cbd-home {
  margin-top: 46px;
}

/* ---------- Product detail page: imagen + tarjeta arriba (fondo oscuro
   normal), mockups mobile + tarjeta abajo (franja gris #2a2a2a) ---------- */
/* Grid de 2 columnas: 702px (imagen/mockups) | resto (tarjetas), gap
   real medido en Figma (card_left_abs 1001 - image_right_abs 942 =
   59px). Se reutiliza en ambas filas (imagen arriba, mockups abajo),
   cada una en su propia sub-sección para que solo la fila de abajo
   quede sobre la franja gris. */
.project-cbd-pdp-grid {
  display: grid;
  grid-template-columns: 702px 1fr;
  gap: 59px;
}
.project-cbd-pdp-block { padding: 56px 0 0; }
.project-cbd-pdp-block .project-cbd-pdp-grid { align-items: start; }
.pd-thumb--cbd-pdp {
  width: 100%;
  aspect-ratio: 702 / 464;
}
/* Franja de fondo #2a2a2a real de Figma, detrás de los mockups mobile +
   la 2ª tarjeta ("Product detail page mobile version"). A diferencia de
   .project-block--alt (usada en FNG para todo un bloque de wireframes),
   acá es su propia sub-sección para no afectar la fila de arriba (que
   sigue sobre el fondo oscuro normal de la página) — mismo criterio de
   fondo parcial ya visto en .project-petfood-comparison. */
.project-cbd-pdp-stripe {
  background: #2a2a2a;
  padding: 56px 0;
  margin-top: 56px;
}
.project-cbd-pdp-stripe .project-cbd-pdp-grid { align-items: center; }
/* Mockups mobile (2 teléfonos + caption debajo, mismo patrón ya usado en
   Pet Food/Soccer): 414 × 396 en Figma (198+18+198 de ancho), centrados
   en la columna. El archivo real que subió Paola (img/cbd/image_cbd_mobile.webp,
   1242×1188) es exactamente 3× ese tamaño — mismo ratio, sin recorte. */
.project-cbd-mobile-wrap {
  width: 100%;
  max-width: 414px;
  margin: 0 auto;
  text-align: center;
}
.pd-thumb--cbd-mobile {
  width: 100%;
  aspect-ratio: 414 / 396;
}
.project-cbd-mobile-caption {
  margin-top: 16px;
  font-size: 16px;
  color: var(--text-grey-dark);
}
/* Tarjeta "Product detail page mobile version": bg #1a1a1a (distinto del
   resto de tarjetas de esta página, #202020 — así está en el frame real
   de Figma, mismo criterio ya documentado en project-petfood.html). */
.project-card-text--cbd-pdp-mobile {
  background-color: #1a1a1a;
}

/* ---------- Checkout and payment funnel ---------- */
/* Grid de 2 columnas: 679px (shipping + tarjeta) | resto (payment, más
   alta), gap real medido en Figma (payment_left_abs 1002 -
   shipping_right_abs 920 = 82px). */
.project-cbd-checkout {
  padding: 56px 0;
}
.project-cbd-checkout-grid {
  display: grid;
  grid-template-columns: 679px 1fr;
  gap: 82px;
  align-items: start;
}
.project-cbd-checkout-left {
  display: flex;
  flex-direction: column;
}
/* Shipping: 679 × 394 en Figma. Real (img/cbd/image_cbd_3.webp, 1920×1103)
   con ratio casi idéntico (1.741 vs 1.723) — se usa directo sin recorte
   especial, el patrón genérico de .pd-thumb img (width:100%;height:auto)
   ya alcanza. */
.pd-thumb--cbd-shipping {
  width: 100%;
  aspect-ratio: 679 / 394;
}
/* Payment: 680 × 741 en Figma (vertical). La captura real que subió Paola
   (img/cbd/image_cbd_4.webp, 1920×1622) es de la página COMPLETA de
   checkout, incluyendo la card de Order Summary a la derecha — con
   ratio horizontal (1.184) bien distinto del vertical que pide Figma
   (0.918).
   Se probaron 2 recortes (primero object-fit:cover, después recortar el
   archivo mismo) que excluían la columna de Order Summary para acercarse
   al ratio de Figma — Paola los rechazó: esa columna tiene los trust
   badges (Third-Party Lab Tested, 500+ Retail Partners, Farm to Finish
   Products) que el texto de la tarjeta menciona explícitamente ("Trust
   badges emerge here..."), así que no se puede recortar sin perder
   contenido que el copy describe.
   Solución final: se muestra la imagen COMPLETA, sin recortar ninguna
   columna — se usa el ratio real de la imagen (1920/1622) en vez del de
   Figma, mismo patrón genérico que el resto del sitio
   (width:100%;height:auto). El resultado queda más corto/ancho que la
   reserva original de Figma, pero no pierde nada de contenido. */
.pd-thumb--cbd-payment {
  width: 100%;
  aspect-ratio: 1920 / 1622;
}
/* Tarjeta "Checkout and payment funnel": gap real imagen→tarjeta = 63px
   (card_top_abs 3557 - shipping_bottom_abs 3494 = 63px). */
.project-card-text--cbd-checkout {
  margin-top: 63px;
}

/* ---------- Responsive: project-cbd.html ---------- */
@media (max-width: 1100px) {
  .project-cbd-grid1,
  .project-cbd-pdp-grid,
  .project-cbd-checkout-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-cbd-oldpage { margin: 32px auto 0; }
  .project-card-text--cbd-home,
  .project-card-text--cbd-checkout { margin-top: 32px; }
  .project-cbd-pdp-stripe { margin-top: 32px; }
  .project-cbd-mobile-wrap { margin-top: 32px; }
}

/* =========================================================
   PÁGINA DE DETALLE — project-drapery.html (Drapery Connection)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 357:71, nombre interno
   "Drapery Connection", 2026-08-18).
   Reutiliza las clases genéricas de las páginas de detalle
   (.project-hero, .project-meta, .project-overview, .project-card-text,
   .pd-thumb, .project-results / .project-results-grid / .project-results-col
   / .project-stats-row, ya definidas arriba para FNG, Space Camp, Pet Food,
   Soccer y CBD) y agrega solo lo específico de esta página.
   ========================================================= */

/* Grid de 2 columnas: 677px (texto) | resto (captura completa de la home),
   gap real medido en Figma (home1_left_abs 1012 - left_col_right_abs 917 =
   95px). */
.project-drapery-grid1 {
  display: grid;
  grid-template-columns: 677px 1fr;
  gap: 95px;
  align-items: start;
}
.project-drapery-left {
  display: flex;
  flex-direction: column;
}
/* .project-overview trae un padding-top genérico de 24px (ver definición
   compartida más arriba) pensado para páginas donde el overview va debajo
   del hero a todo el ancho. En esta página el overview es el primer
   elemento de la columna izquierda del grid (align-items:start), al lado
   de la captura completa "Home 1" — ese padding-top extra corría el título
   "Project overview" 24px por debajo del borde superior de la imagen.
   Se quita acá para que ambos arranquen exactamente en el mismo margen
   superior (pedido explícito de Paola). El padding-bottom (24px) se deja
   igual, no afecta la alineación superior. */
.project-drapery-left > .project-overview {
  padding-top: 0;
}
/* Envoltorio de toda la sección. El gap real hero→overview en Figma es de
   solo 29px (más ajustado que el resto de páginas de detalle) — se usa el
   mismo padding-top "tight" ya establecido en el sitio (24px, ver
   .project-block--tight en la sección de Space Camp) por consistencia
   visual con el resto de páginas, en vez de replicar ese valor exacto.
   El padding-bottom (131px) sí reproduce el valor real de Figma: es el
   espacio que queda entre el final de la columna más alta (el screenshot
   "Home 1", que termina en el mismo punto que la tarjeta "Contact us page
   design") y el inicio de la sección Results (content_bottom_abs 1679 -
   results_top_abs 1810 = 131px). Sin este padding, Results quedaba pegado
   directamente al contenido — Paola lo reportó y pidió separarlos más. */
.project-drapery-main {
  position: relative;
  isolation: isolate;
  padding: 24px 0 131px;
}
/* Franja de fondo #2a2a2a real de Figma (nodo "Bg", 360:206, 1920×536).
   En Figma arranca en medio de la imagen "Contact page" (que la tapa por
   completo, al tener su propio fondo) y termina exactamente donde empieza
   la sección Results — por eso se ancla al fondo de esta sección
   (bottom:0) en vez de calcular un offset superior exacto. Solo queda
   visible en el hueco entre la imagen "Contact page" y la tarjeta
   "Contact us page design", y en los márgenes vacíos alrededor del
   contenido — mismo criterio de franja parcial que
   .project-petfood-comparison::before. */
.project-drapery-main::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 536px;
  background: var(--bg-card); /* #2a2a2a, coincide con el valor real de Figma */
  z-index: -1;
}
/* Tarjeta "Home page design": gap real overview→card medido en Figma era
   68px (card_top_abs 512 - overview_bottom_abs 444). Se redujo a 40px
   (Ronda 7, Paola pidió compactar todo el bloque desde esta tarjeta hacia
   abajo para que la nueva tarjeta "Dev handoff with Claude Code" al final
   no quedara tan aislada bajo la imagen "Home 1") — ya no se sigue el
   valor exacto de Figma en esta página, se prioriza el ritmo vertical más
   compacto pedido por Paola. */
.project-card-text--drapery-home {
  margin-top: 40px;
}
/* Línea divisoria real de Figma (nodo "Divider", 360:221): gap original
   45px, reducido a 32px (Ronda 7, mismo criterio de compactación de
   arriba — 32px es el valor "tight" ya usado en el resto del sitio para
   espaciados compactos, ver versión mobile de otras páginas). */
.project-drapery-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 32px 0 0;
}
/* Imagen "Contact page": 677 × 428 en Figma (ratio 1.582). El screenshot
   real que subió Paola (img/drapery/image_drapery_2.webp, 1921×1222,
   ratio 1.572) es casi idéntico — se usa directo sin recortar. Gap
   original 44px, reducido a 32px (Ronda 7, ver arriba). */
.project-drapery-contact {
  margin-top: 32px;
}
.pd-thumb--drapery-contact {
  width: 100%;
  aspect-ratio: 677 / 428;
}
/* Tarjeta "Contact us page design": gap original 40px, reducido a 32px
   (Ronda 7, ver arriba). */
.project-card-text--drapery-contact {
  margin-top: 32px;
}
/* Tarjeta "Dev handoff with Claude Code": nuevo bloque agregado al final de
   la columna izquierda (no existe en el frame original de Figma). Gap de
   32px, mismo valor "tight" del resto de la columna tras la compactación
   de la Ronda 7, para que quede integrada al ritmo vertical del bloque en
   vez de sentirse como un elemento suelto. */
.project-card-text--drapery-devhandoff {
  margin-top: 32px;
}
/* "Home 1": captura completa de la home page de Drapery Connection, 677 ×
   1324 en Figma (ratio 0.511). El screenshot real que subió Paola
   (img/drapery/image_drapery_1.webp, 1912×4181, ratio 0.457) es
   proporcionalmente más alto que ese target. Se probó recortar el sobrante
   por abajo (mismo patrón usado en otras páginas del sitio para capturas
   de página completa), pero Paola pidió mostrar la imagen tal cual está en
   la carpeta, sin recortar nada — mismo criterio ya aplicado en
   `.pd-thumb--cbd-payment` (project-cbd.html) para un caso similar. Se usa
   el ratio REAL de la imagen (1912/4181) en vez del de Figma, así el
   contenedor crece a la altura completa de la imagen y no hay overflow
   que recortar. El resultado queda más alto que la reserva original de
   Figma (677×1324), pero se ve la página completa sin perder contenido. */
.pd-thumb--drapery-home1 {
  width: 100%;
  aspect-ratio: 1912 / 4181;
}

/* ---------- Responsive: project-drapery.html ---------- */
@media (max-width: 1100px) {
  .project-drapery-grid1 { grid-template-columns: 1fr; gap: 40px; }
  /* La franja decorativa parcial se calculó para el layout de 2 columnas
     de escritorio — al apilarse en 1 columna el contenido cambia de alto
     por completo, así que se oculta (mismo criterio que .project-outcome-decor
     en mobile: es decorativo, no aporta información). */
  .project-drapery-main::before { display: none; }
  /* El padding-bottom de 131px (real de Figma, ver arriba) es demasiado en
     pantallas chicas — se reduce a 40px, mismo criterio de reducción de
     espaciado en mobile ya usado en el resto del sitio (ver
     .project-block--tight en su versión mobile). */
  .project-drapery-main { padding-bottom: 40px; }

  /* Paola pidió (2026-08-19) que en mobile la captura completa de la home
     page ("Home 1") aparezca justo después de la tarjeta "Home page
     design", en vez de al final de la página — por defecto cae ahí porque
     en escritorio es la columna derecha, así que en el HTML fluye después
     de toda la columna izquierda. Se "desenvuelve" .project-drapery-left
     con display:contents (mismo patrón ya usado en .project-soccer-left /
     .project-hifi-left) para que sus hijos pasen a ser ítems directos del
     grid de una sola columna, y con `order` se intercala la imagen entre
     la tarjeta "Home page design" y el resto de la sección de contacto.
     Al pasar a ser ítems directos del grid, el espaciado entre TODOS
     queda controlado por el `gap: 40px` del grid (arriba) en vez de los
     margin-top específicos de escritorio — se resetean a 0 acá para no
     duplicar el espacio. */
  .project-drapery-left { display: contents; }
  .project-drapery-left > .project-overview { order: 1; }
  .project-drapery-left > .project-card-text--drapery-home { order: 2; margin-top: 0; }
  .project-drapery-grid1 > .pd-thumb--drapery-home1 { order: 3; }
  .project-drapery-left > .project-drapery-divider { order: 4; margin-top: 0; }
  .project-drapery-left > .project-drapery-contact { order: 5; margin-top: 0; }
  .project-drapery-left > .project-card-text--drapery-contact { order: 6; margin-top: 0; }
  .project-drapery-left > .project-card-text--drapery-devhandoff { order: 7; margin-top: 0; }
}