/* =========================================================
   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 ---------- */
/* Recorrido y duración aumentados (2026-09-13, a pedido de Paola: "más
   notorio") — antes 24px / 0.7s ease. Se agrega un leve scale-in y una
   curva con rebote suave (cubic-bezier) para que el movimiento se sienta
   con más intención sin dejar de ser sutil. */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
  }
}

/* =========================================================
   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 (actualizado 2026-09-14, pedido de Paola: "más
   moderno"): antes 3 barras iguales de 40px (ancho completo del
   botón). Ahora son líneas más cortas y delgadas (22px, dentro del
   mismo botón de 40x40 para no perder área de toque), con la línea del
   medio más corta y pegada a un lado como acento asimétrico — look más
   liviano que el hamburguesa clásico. El morph a "X" al abrir reutiliza
   los mismos valores de transform de antes (gap/alto sin cambios), así
   que no hace falta recalcular nada ahí. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--text-white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}
.nav-toggle span:nth-child(2) {
  width: 13px;
  align-self: flex-start; /* acento asimétrico en vez de 3 barras iguales centradas */
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) 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
   ========================================================= */
@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: flex; }

  /* Padding del nav bar un poco más generoso en mobile (pedido de
     Paola 2026-09-14) — antes heredaba el mismo 28px del desktop. */
  .header-inner { padding-top: 34px; padding-bottom: 34px; }

  .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;
}
/* Variante #101010 (agregada 2026-09-14 para project-fng.html template
   v2): la sección "Information architecture & lo-fi wireframing" pasó
   de fondo #2a2a2a a #101010 en el nuevo frame de Figma (670:645) —
   mismo token --bg-testimonial ya usado en el resto del sitio. */
.project-block--dark {
  background: var(--bg-testimonial);
}

/* 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; }

/* Bordes de color + bg #1a1a1a en las tarjetas de texto de
   project-fng.html (agregado en Figma 2026-09-14, frame nodeId
   670:645, template v2): bg pasa de --project-card-bg (#202020) a
   --project-card-bg-v2 (#1a1a1a, mismo token ya usado por
   Problem/Hypothesis/Takeaways en petfood/cbd), + borde de color
   específico por tarjeta. Solo afecta estas 4 tarjetas de FNG — el
   resto de páginas de proyecto (Space, Soccer, Drapery, aún en
   template v1) no se tocan. Las 4 tarjetas también miden gap:12px
   (IA baja de 20px, Hi-fi/Accessibility bajan del 16px por defecto de
   .project-card-text) y su título pasa de 22px Medium con ícono a
   32px Regular sin ícono — Figma ya no muestra el ícono
   mingcute:cursor-3-line en estos 4 títulos. */
.project-card-text--research,
.project-card-text--ia,
.project-card-text--hifi,
.project-card-text--accessibility {
  background-color: var(--project-card-bg-v2);
  gap: 12px;
}
.project-card-text--research { border-color: #dac100; }
.project-card-text--ia,
.project-card-text--hifi { border-color: #c0f; }
.project-card-text--accessibility { border-color: #cf10ff; }
.project-card-text--research h3,
.project-card-text--ia h3,
.project-card-text--hifi h3,
.project-card-text--accessibility h3 {
  font-size: 32px;
  font-weight: 400; /* Figtree Regular */
  display: block;
}

/* 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: 336px; /* ancho fijo real en Figma (actualizado 2026-09-14, antes 316px) */
  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;
}

/* Old company's webpage: 336 × ~505 en Figma (actualizado 2026-09-14,
   antes 303 × 455). Ratio real de image_old_web.webp (606×910 =
   0.6659) casi idéntico al de Figma — se usa directo sin recortar. */
.pd-thumb--oldpage {
  width: 336px;
  aspect-ratio: 606 / 910;
  flex-shrink: 0;
}
/* Lo-fi wireframe 1 (más angosto): 269px de ancho en Figma (actualizado
   2026-09-14, antes 254px). Ratio real de image_lofi_1.webp (508×982 =
   0.5173) casi idéntico al de Figma. */
.pd-thumb--wireframe-a {
  width: 269px;
  aspect-ratio: 508 / 982;
  flex-shrink: 0;
}
/* Lo-fi wireframe 2 (más ancho): 396px de ancho en Figma (actualizado
   2026-09-14, antes 373px). Ratio real de image_lofi_2.webp (746×982 =
   0.7597) casi idéntico al de Figma. */
.pd-thumb--wireframe-b {
  width: 396px;
  aspect-ratio: 746 / 982;
  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: 710px | 40px 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.
   Actualizado 2026-09-14 (rediseño template v2 de project-fng.html,
   frame Figma nodeId 670:645): antes 677px/92px (frame viejo 192:377),
   medido puntual contra el nuevo nodeId da texto=710px y gap≈38-41px
   entre la tarjeta y la columna de imágenes en las 3 secciones — se usa
   40px uniforme (la diferencia de 3px entre secciones es ruido de
   posicionamiento manual en Figma, no una variación real de diseño). ---------- */
.project-two-col {
  display: grid;
  grid-template-columns: 710px 1fr;
  gap: 40px;
  align-items: start;
}
.project-research-grid,
.project-ia-grid,
.project-hifi-grid {
  display: grid;
  grid-template-columns: 710px 1fr;
  gap: 40px;
  align-items: start;
}

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

/* Information architecture: dentro de la 2ª columna, wireframe angosto
   (269px) + wireframe ancho (396px) con 28px de gap (actualizado
   2026-09-14, antes 254px/373px con 44px de gap — frame viejo). */
.project-ia-grid .project-media-row {
  gap: 28px;
}

/* 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: 28px; /* gap real entre las 2 capturas institucionales en Figma (actualizado 2026-09-14, antes 40px) */
}
.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) era de la página COMPLETA de checkout,
   incluyendo la card de Order Summary a la derecha — con
   object-fit:cover esa card quedaba parcialmente visible y cortada a la
   mitad (se veía roto). Se resolvió recortando el archivo mismo (mismo
   nombre, 1920×1622 → 1210×1500, ratio 0.807): excluye por completo la
   columna de Order Summary y sí incluye el botón "Place Order" completo
   (el mismo que menciona el texto de la tarjeta "Checkout and payment
   funnel"), a costa de alejarse un poco del ratio vertical exacto de
   Figma (0.918) — mismo criterio ya usado en el recorte de
   drapery_project.webp (handoff-all-projects.md): priorizar un recorte
   limpio y con sentido sobre el ratio exacto cuando el asset real no da
   para las dos cosas a la vez. */
.pd-thumb--cbd-payment {
  width: 100%;
  aspect-ratio: 1210 / 1500;
}
/* 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; }
}

/* =========================================================
   TEMPLATE V2 DE PÁGINA DE PROYECTO — clases genéricas y
   reutilizables (NO específicas de un proyecto), introducidas
   con el rediseño de project-petfood.html (frame Figma
   "Darwins Pet", fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 580:811,
   2026-09-11). A pedido de Paola, este es el template que se irá
   aplicando después a las demás páginas de proyecto (CBD, Soccer,
   Space, FNG, Drapery) — por eso las clases no llevan sufijo
   "petfood" salvo cuando el ajuste es realmente specífico de esa
   imagen (aspect-ratio puntual, ver .pd-thumb--petfood-* abajo).

   Diferencias clave frente al template anterior:
   - Hero: ahora lleva imagen a sangre + panel oscuro con stats
     inline, en vez de solo título + meta pills.
   - Las meta pills (Tools/Rol/Contribution/Country) se movieron
     del hero a la sección "Project overview", apiladas a la derecha.
   - Se agregan 2 tarjetas nuevas "The problem" e "Hypothesis".
   - Las secciones de imagen (PDP, Subscription) usan siempre
     imagen a la izquierda + texto a la derecha (ya no alternan).
   - Nueva sección "Mobile pages design" con 4 mockups mobile.
   - "Results" (stats + espirales decorativas) se reemplaza por
     una sola tarjeta "My most important takeaways".
   ========================================================= */

:root {
  --project-card-bg-v2: #1a1a1a; /* bg de las tarjetas Problem/Hypothesis/Takeaways, distinto del --project-card-bg (#202020) del template anterior */
  --project-takeaways-w: 1196px; /* ancho de la tarjeta Takeaways, medido en Figma (actualizado 2026-09-13): x=362 (calc(8.33%+202px)), width=1196 — esta sección SÍ sigue con columna angosta/indentada, a diferencia de Overview y Problem/Hypothesis que ahora van a ancho completo (ver abajo) */
}

/* ---------- Hero v2: imagen a sangre + panel oscuro ---------- */
.project-hero-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.project-hero-v2-media {
  flex: 1 1 0%; /* llena lo que sobra: 1315/1920 = 68.49% real de Figma */
  min-width: 0;
}
.project-hero-v2-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1315 / 804; /* ratio real del frame "Hero" en Figma, imagen "Image" 643:34 (actualizado 2026-09-13, antes 1315/806) — coincide con dpet_hero.webp (3945×2412, ratio 1.6356) */
  object-fit: cover;
  display: block;
}
.project-hero-v2-panel {
  /* 608px / 1923px de ancho total del frame "Hero" en Figma = 31.62% —
     antes estaba fijo en 420px (mucho más angosto que el real, reportado
     por Paola 2026-09-12). Con % en vez de px mantiene la proporción real
     de Figma en cualquier ancho de pantalla, no solo a 1920px. */
  flex: 0 0 31.62%;
  background: linear-gradient(0deg, #300460 0%, #130d1a 60.21%); /* gradiente real de Figma actualizado 2026-09-13 (Rectangle 36, nodo 670:389): bg-gradient-to-t from-[#300460] to-[#130d1a] to-[60.21%] */
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.project-hero-v2-panel h1 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400; /* Figtree Regular */
  line-height: 1.03;
}
.project-hero-v2-panel > p {
  font-size: 17px;
  color: var(--text-grey);
  line-height: 1.5;
}
.project-hero-v2-stats h2 {
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  margin-bottom: 12px;
}
.project-hero-v2-stats p {
  font-size: 17px;
  color: var(--text-grey);
  line-height: 1.5;
}
.project-hero-v2-stats p + p { margin-top: 4px; }
.project-hero-v2-stats strong {
  font-weight: 700; /* Figtree Bold */
  color: var(--text-white);
}

/* ---------- Títulos de sección compartidos por todo el template v2 ---------- */
.project-overview-v2 h2,
.project-problem-hypothesis h2,
.project-media-text-v2 h2,
.project-mobile-v2-text h2,
.project-takeaways h2 {
  font-size: 32px; /* actualizado 2026-09-13, antes 35px (medido en Figma para todos los H2 de esta página) */
  font-weight: 400; /* Figtree Regular, igual que el H1 del hero anterior */
  line-height: 1.1;
  margin-bottom: 16px;
}
.project-overview-v2 p,
.project-media-text-v2 p,
.project-mobile-v2-text p,
.project-takeaways p {
  font-size: 17px;
  color: var(--text-grey);
  line-height: 1.5;
}
.project-overview-v2 p + p,
.project-media-text-v2 p + p,
.project-takeaways p + p { margin-top: 16px; }

/* ---------- Overview v2 (fondo #2a2a2a, tags apiladas a la derecha) ---------- */
.project-overview-v2 {
  background: var(--bg-card);
  padding: 64px 0;
}
.project-overview-v2-grid {
  /* actualizado 2026-09-13: ya no va en columna angosta centrada — Figma
     ahora muestra esta sección a ancho completo del container (texto en
     x=240, 699px de ancho; tags en x=974, 495px de ancho), igual que
     Problem/Hypothesis abajo. */
  display: grid;
  grid-template-columns: 1fr 495px;
  gap: 35px;
  align-items: start;
}
/* Modificador de .project-meta/.meta-pill (ya usadas en el hero del
   template anterior) para apilarlas en columna en vez de fila. */
.project-meta--stacked {
  flex-direction: column;
  align-items: stretch;
}
.project-meta--stacked .meta-pill {
  background: var(--project-card-bg); /* #202020, coincide con Figma */
  justify-content: flex-start;
}

/* ---------- Tarjetas "The problem" / "Hypothesis" ---------- */
.project-problem-hypothesis {
  padding: 64px 0;
}
.project-problem-hypothesis-grid {
  /* actualizado 2026-09-13: ancho completo del container (ya no columna
     angosta), 2 columnas casi iguales (710px / 702px medidos en Figma). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.project-problem-hypothesis .project-card-text {
  background: var(--project-card-bg-v2);
}
/* Bordes de color agregados en Figma 2026-09-13: "The problem" en dorado,
   "Hypothesis" en magenta. Cada card es el primer/segundo .project-card-text
   dentro del grid. */
.project-problem-hypothesis-grid .project-card-text:nth-child(1) {
  border: 1px solid #dac100;
}
.project-problem-hypothesis-grid .project-card-text:nth-child(2) {
  border: 1px solid #c0f;
}

/* ---------- Secciones imagen izquierda + texto derecha (PDP / Subscription) ---------- */
.project-media-text-v2 {
  padding: 64px 0;
}
/* Modificador genérico (reutilizable en otras páginas): fondo #2a2a2a en
   vez del fondo oscuro por defecto de la página — usado por la sección
   "Quiz-based subscription flow page" (Figma, 2026-09-17), que en el
   frame tiene su propia franja de fondo distinta al resto. */
.project-media-text-v2--shaded {
  background: var(--bg-card);
}
.project-media-text-v2-grid {
  /* actualizado 2026-09-13: Figma ahora usa imagen más angosta y más alta
     (710px) + texto más ancho (668px PDP / 663px Subscription, ~665
     promedio), gap 64px, sobre 1440px de contenido (antes 832/560, gap 48px). */
  display: grid;
  grid-template-columns: 710fr 665fr;
  gap: 64px;
  /* "stretch" (default) — a pedido de Paola: la columna de texto debe
     ocupar toda la altura de la fila (igual que la imagen), para que el
     título/contenido pueda alinearse arriba y luego "viajar" en sticky
     hasta el borde inferior de la imagen — ver .project-media-text-v2-content
     y .project-media-text-v2-sticky abajo. Con "center" (como estaba
     antes) o "start" el item se encoge a su propio contenido y sticky no
     tiene espacio dentro del cual desplazarse. */
  align-items: stretch;
}
.pd-thumb--v2 {
  border-radius: 12px; /* radius real de Figma (Bg, 12px) en vez del 8px del template anterior */
}
/* .project-media-text-v2-content: contenedor "alto" (ocupa toda la fila
   del grid, misma altura que la imagen, gracias a align-items:stretch
   arriba) — es el espacio dentro del cual el bloque de texto puede
   desplazarse en sticky. No lleva estilos propios, solo da la altura. */
/* .project-media-text-v2-sticky: el bloque real de título+texto, más
   bajo que su contenedor. Arranca alineado con el borde superior de la
   imagen (comportamiento normal de flujo) y al hacer scroll se queda
   "pegado" a `top: 112px` (offset = alto del header sticky, ~96px, + un
   respiro) hasta que el contenedor (o sea, la imagen) se termina — ahí
   el navegador lo suelta solo y sigue el scroll normal. Comportamiento
   nativo de position:sticky, sin JS. */
.project-media-text-v2-sticky {
  position: sticky;
  top: 112px;
}
@media (max-width: 860px) {
  /* En el layout apilado (1 columna) no hay imagen al lado para alinear
     ni recorrido para "viajar" — se desactiva sticky para que el texto
     fluya normal debajo de la imagen. */
  .project-media-text-v2-sticky {
    position: static;
  }
}
/* PDP: 2872×2952 real (dpet_pdp.webp, screenshot plano actualizado
   2026-09-13), ratio 0.9729 — casi idéntico al de Figma (710/730 =
   0.9726). Se usa directo sin recortar. */
.pd-thumb--petfood-pdp-v2 { aspect-ratio: 710 / 730; }
/* Subscription: 2872×3102 real (dpet_subscription.webp, contenido
   actualizado 2026-09-13), ratio 0.9259 — casi idéntico al de Figma
   (710/767.32 = 0.9253). Se usa directo sin recortar. */
.pd-thumb--petfood-subscription { aspect-ratio: 710 / 767.32; }
/* Quiz results: 1410×1524 real (dpet_quizresults.webp, agregada
   2026-09-17), ratio 0.9252 — casi idéntico al de Figma (705/762 =
   0.9252). Se usa directo sin recortar. */
.pd-thumb--petfood-quizresults { aspect-ratio: 705 / 762; }

/* ---------- Mobile pages design ---------- */
.project-mobile-v2 {
  background: var(--bg-testimonial); /* #101010, igual que en Figma */
  padding: 64px 0;
}
.project-mobile-v2-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.project-mobile-v2-circle {
  width: 320px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.project-mobile-v2-circle img { aspect-ratio: 1 / 1; object-fit: cover; }
.project-mobile-v2-row {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.project-mobile-v2-row img {
  width: 160px;
  border-radius: 12px;
  aspect-ratio: 753 / 1568; /* ratio real de los 3 mockups mobile */
  object-fit: cover;
}
.project-mobile-v2-text { max-width: 320px; }

/* ---------- "My most important takeaways" (reemplaza Results) ---------- */
.project-takeaways {
  background: var(--bg-testimonial);
  padding: 64px 0;
}
.project-takeaways .project-card-text {
  background: var(--project-card-bg-v2);
  max-width: var(--project-takeaways-w);
  margin: 0 auto;
  gap: 24px; /* actualizado 2026-09-13: gap real de Figma para esta tarjeta (gap-[24px]), antes heredaba el 16px por defecto de .project-card-text */
}

/* ---------- Responsive: template v2 ---------- */
@media (max-width: 1000px) {
  .project-hero-v2-panel { flex: 1 1 100%; padding: 40px 32px; }
  .project-hero-v2-media { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .project-overview-v2-grid,
  .project-problem-hypothesis-grid,
  .project-media-text-v2-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-mobile-v2-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .project-mobile-v2-text { max-width: 100%; }
}
@media (max-width: 480px) {
  .project-mobile-v2-row { flex-wrap: wrap; }
  .project-mobile-v2-row img { width: 120px; }
  .project-mobile-v2-circle { width: 220px; }
}

/* =========================================================
   TEMPLATE V2 aplicado a project-cbd.html (2026-09-13, sesión
   Cowork #14). Frame Figma "Pharma CBD", fileKey KbMzvalgKxR4A4iEo1yUxm,
   nodeId 656:174. Reutiliza las clases genéricas de arriba
   (.project-hero-v2, .project-overview-v2, .project-problem-hypothesis,
   .project-media-text-v2, .project-takeaways) y agrega las siguientes
   piezas específicas de esta página, no vistas en project-petfood.html:

   1) El hero de CBD compone 2 imágenes (a diferencia de Darwin's Pet,
      que usa una sola foto ya compuesta): una foto de fondo
      (cbd_hero.webp) + una captura del home page real superpuesta
      encima, simulando la pantalla de un monitor dentro de la foto
      (--cbd-screen), con posición/tamaño en % sacados de las
      coordenadas reales de Figma (nodo "Image" 659:330 dentro de
      "Bg" 670:364, 1317×808).
   2) Una pequeña etiqueta "Brand Name / Protected" (tipografía Readex
      Pro, agregada solo para este elemento) que Figma superpone 3
      veces sobre capturas reales (hero, shipping, payment) — es una
      anotación de diseño real del archivo de Figma, no un elemento
      inventado; probablemente para anonimizar el nombre real de la
      marca de este cliente regulado.
   3) La sección "Home page design" invierte el orden texto/imagen
      respecto al orden fijo (imagen-izquierda/texto-derecha) que se
      había fijado como regla general del template v2 al construir
      Darwin's Pet — en Figma, para esta página, el texto va a la
      izquierda y la imagen a la derecha. Se respetó la medida real de
      Figma en vez de forzar la regla general (ver lección repetida en
      handoff-proyecto-petfood.md: medir siempre desde
      get_design_context, nunca asumir por consistencia con otra página).
   4) La sección "Product detail page design" incluye, debajo del
      párrafo de texto, una fila de 2 mockups mobile (a diferencia de
      Darwin's Pet, donde los mockups mobile viven en su propia sección
      "Mobile pages design" con círculo + 3 teléfonos). En Figma para
      CBD no existe esa sección aparte — los 2 mockups están anidados
      dentro de la misma sección de PDP.
   5) La sección "Checkout and payment funnel" no usa `.project-media-text-v2`
      genérica (esa clase asume 1 imagen + 1 bloque de texto) — tiene
      2 imágenes (shipping + payment) y el texto va debajo de la imagen
      de shipping, no al lado. Se agregan clases propias
      `.project-checkout-v2*`.
   ========================================================= */

.project-checkout-v2 { padding: 64px 0; background: var(--bg-card); }
.project-overview-v2 h2,
.project-problem-hypothesis h2,
.project-media-text-v2 h2,
.project-mobile-v2-text h2,
.project-checkout-v2 h2,
.project-takeaways h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
}
.project-checkout-v2 p { font-size: 17px; color: var(--text-grey); line-height: 1.5; }
.project-checkout-v2 p + p { margin-top: 16px; }

/* ---------- 1) Hero: foto real única, ya compuesta ---------- */
/* Corrección 2026-09-13: cbd_hero.webp NO es una foto de escritorio vacía
   para superponerle nada — es una única foto real con la pantalla del
   monitor ya integrada en la toma (mismo patrón que dpet_hero.webp en
   project-petfood.html). Una primera versión de esta página componía por
   error cbd_home.webp encima simulando la pantalla; se quitó. Solo queda
   el ajuste fino del aspect-ratio real de esta foto. */
.project-hero-v2-media--cbd img {
  aspect-ratio: 1317 / 808; /* foto real cbd_hero.webp (5260×3232, ratio 1.6275) — casi idéntico */
}

/* ---------- 2) Etiqueta "Brand Name / Protected" (fuente Readex Pro) ----------
   Figma anota esta etiqueta en 3 lugares (hero, shipping, payment), pero
   en las capturas reales que subió Paola ya viene horneada en la imagen
   en 2 de los 3 casos (cbd_hero.webp y cbd_payment.webp) — solo
   cbd_shipping.webp la necesita agregada por CSS. */
.brand-protected-badge {
  position: absolute;
  font-family: 'Readex Pro', 'Figtree', sans-serif;
  font-size: 10px;
  line-height: 10px;
  color: #919796;
  text-transform: capitalize;
  pointer-events: none;
  white-space: nowrap;
}
.brand-protected-badge--shipping { left: 9.89%; top: 5.2%; }
.pd-thumb--v2 { position: relative; }

/* ---------- 3) "Home page design": texto izquierda + imagen derecha ---------- */
.project-media-text-v2-grid--cbd-home {
  grid-template-columns: 688fr 710fr; /* texto 688px | imagen 710px, gap real 42px (Figma) */
  gap: 42px;
}
.pd-thumb--cbd-home-v2 { aspect-ratio: 710 / 825; } /* real cbd_home.webp 2872×3332, ratio 0.8619 — casi idéntico */

/* ---------- 4) "Product detail page design": imagen izquierda + texto derecha + 2 mobiles debajo ---------- */
.project-media-text-v2-grid--cbd-pdp {
  grid-template-columns: 710fr 688fr; /* imagen 710px | texto 688px, gap real 37px (Figma) */
  gap: 37px;
}
.pd-thumb--cbd-pdp-v2 { aspect-ratio: 710 / 634.682; } /* real cbd_pdp.webp 2872×2571, ratio 1.1171 — casi idéntico */
.project-cbd-pdp-mobile-row {
  display: flex;
  gap: 22px; /* gap real medido en Figma entre los 2 mockups (670:384/385) */
  margin-top: 32px;
}
.project-cbd-pdp-mobile-row .pd-thumb {
  /* ancho fijo proporcional a los 184px reales de Figma sobre una columna
     de texto de 688px (184/688 = 26.74%) — NO flex:1 (eso los estiraba a
     la mitad del ancho de la columna, ~344px, e inflaba toda la fila a
     ~665px de alto por el aspect-ratio retrato). */
  flex: 0 0 26.74%;
  aspect-ratio: 184 / 367; /* ratio real de Figma, idéntico al de cbd_mobile1/2.webp (552×1101) */
}

/* ---------- 5) "Checkout and payment funnel" ---------- */
.project-checkout-v2-grid {
  display: grid;
  grid-template-columns: 710fr 706fr; /* shipping 710px | payment 706px, gap real 20px (Figma) */
  gap: 20px;
  align-items: start;
}
.project-checkout-v2-left-text { margin-top: 40px; } /* gap real entre imagen shipping y el título (Figma) */
.pd-thumb--cbd-shipping-v2 { aspect-ratio: 710 / 443; } /* real cbd_shipping.webp 2130×1329, ratio 1.6027 — idéntico */
.pd-thumb--cbd-payment-v2 { aspect-ratio: 706.077 / 704; } /* real cbd_payment.webp 2119×2112, ratio 1.0033 — casi idéntico */

@media (max-width: 860px) {
  .project-media-text-v2-grid--cbd-home,
  .project-media-text-v2-grid--cbd-pdp,
  .project-checkout-v2-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-cbd-pdp-mobile-row { max-width: 380px; }
}

/* =========================================================
   TEMPLATE V2 aplicado a project-fng.html (2026-09-14, sesión
   Cowork #15). Frame Figma "FNG", fileKey KbMzvalgKxR4A4iEo1yUxm,
   nodeId 670:645. A diferencia de petfood/cbd (páginas reconstruidas
   desde cero), FNG YA tenía casi toda su estructura de contenido
   correcta en el template v1 (Research & discovery / Information
   architecture / Hi-fi wireframing / Accessibility compliance, con
   .project-research-grid, .project-ia-grid, .project-hifi-grid,
   .project-quote-card, .pd-thumb--*) — el nuevo frame de Figma solo
   cambia:

   1) Hero: pasa de solo-título+meta-pills a `.project-hero-v2`
      (imagen a sangre `fng_hero.webp` + panel morado con título y
      descripción, SIN bloque de stats — a diferencia de petfood/cbd,
      este frame no tiene stats en el hero). `fng_hero.webp` es una
      foto real única ya compuesta (monitor con la pantalla integrada
      en la propia toma, mismo patrón que dpet_hero.webp/cbd_hero.webp
      — confirmado con Read directo del archivo, no solo por ratio).
   2) Overview: pasa a `.project-overview-v2` genérica (fondo #2a2a2a,
      tags Tools/Rol/Contribution/Country apiladas a la derecha) —
      contenido de tags actualizado (Tools ahora incluye Adobe
      Photoshop y Google Analytics; Rol pasa de "UX/UI Lead" a
      "Product Designer" + "Design Systems Lead").
   3) Research & discovery / IA / Hi-fi / Accessibility: se mantiene
      la estructura v1 (`.project-research-grid`, `.project-ia-grid`,
      `.project-hifi-grid`, ver arriba), pero:
      - Las tarjetas de texto ahora llevan bg #1a1a1a + borde de color
        (`.project-card-text--research` dorado #dac100,
        `.project-card-text--ia`/`--hifi` magenta #c0f,
        `.project-card-text--accessibility` rosa #cf10ff — clases y
        colores agregados arriba, junto a las demás variantes de
        `.project-card-text`).
      - La columna de texto pasó de 677px a 710px (gap a la columna de
        imágenes de 92px a 40px) en las 3 secciones — ver
        `.project-research-grid`/`.project-ia-grid`/`.project-hifi-grid`
        arriba. Las imágenes también crecieron (old page 303→336px,
        lo-fi 254/373→269/396px, quote card 316→336px) — mismo ratio
        real, solo más grandes.
      - La franja de fondo detrás de IA/lo-fi pasó de #2a2a2a
        (`.project-block--alt`) a #101010 (`.project-block--dark`,
        agregada arriba).
      - "Client and user insights" (tarjeta de cita azul) ahora tiene
        5 testimonios en vez de 3 (se agregaron 2 nuevos, sobre
        llamadas de intermediarios financieros y confusión con el
        portal transaccional) y el título se corrigió ("Bussines and
        users insights from the discovery interviews" →  "Business and
        user insights from discovery interviews").
      - La imagen "FNG Old page" se renombró a "Old company's webpage"
        en Figma — se actualizó el label visible.
   4) "The final outcome" (con los garabatos decorativos
      `final_outcome_graphic_1/2.webp`) se reemplaza por
      `.project-takeaways` genérica ("My most important takeaways",
      sin garabatos — mismo patrón que petfood/cbd), con una revisión
      menor de copy en la última oración ("non-negotiable though" →
      "non-negotiable throughout").
   5) 2 typos de Figma corregidos al pasar el copy al HTML (no son
      cambios de contenido, son errores de tipeo — "institucional" en
      vez de "institutional" en la descripción del hero y en el label
      "New institucional web page"): se usó la ortografía correcta en
      inglés, consistente con el resto del sitio (ya 100% en inglés,
      ver handoff-all-projects.md). Avisar a Paola por si en realidad
      quería ese texto tal cual.

   Las imágenes reales de `img/fng/` no cambiaron de contenido salvo
   `fng_hero.webp` (nueva, para el hero) — las otras 8 ya existían y
   se reutilizan tal cual (misma lección de CBD/petfood: siempre
   abrir/Read las imágenes reales antes de asumir cómo se componen —
   se verificó que ninguna de las 3 imágenes "compuestas" que muestra
   get_design_context, hero/institucional 1/institucional 1 del hero,
   necesitan overlay por CSS: son capturas planas únicas).
   ========================================================= */

.project-hero-v2-media--fng img {
  aspect-ratio: 1313 / 807; /* ratio real de fng_hero.webp (3939×2421, ratio 1.627) — casi idéntico */
}

/* =========================================================
   TEMPLATE V2 aplicado a project-soccer.html (2026-09-24).
   Frame Figma "Soccer Wearhouse" v2, fileKey KbMzvalgKxR4A4iEo1yUxm,
   nodeId 707:2 (reemplaza al frame v1 264:290). Reutiliza las clases
   genéricas del template (hero-v2, overview-v2, problem-hypothesis,
   media-text-v2, takeaways). Piezas propias de esta página:
   1) Hero: foto real única soccer_hero.webp (2626×1614, ratio 1.627).
   2) "Home page design": texto izquierda (705px) + imagen derecha
      (675px), gap 60px — mismo orden invertido que CBD.
   3) "Product detail page design" (fondo #2a2a2a): imagen PDP izquierda
      (704px) + columna derecha (675px) con los 2 mockups mobile
      (image_soccer_mobile.webp, ya compuesto, 476px centrado) arriba y
      el título+texto debajo (gap 82px). Gap entre columnas 61px.
   Las clases v1 .project-soccer-* / .pd-thumb--soccer-home/-mobile
   quedan como código muerto (mismo criterio que petfood/cbd).
   ========================================================= */

.project-hero-v2-media--soccer img {
  aspect-ratio: 1313 / 807; /* real soccer_hero.webp 2626×1614 (1.627) — casi idéntico */
}

/* 2) Home page design */
.project-media-text-v2--soccer-home { padding-top: 80px; }
.project-media-text-v2-grid--soccer-home {
  grid-template-columns: 705fr 675fr;
  gap: 60px;
}
.pd-thumb--soccer-home-v2 {
  aspect-ratio: 675 / 869; /* recuadro de Figma; la captura completa se recorta desde arriba */
  align-self: start;
}

/* 3) Product detail page design */
.project-media-text-v2-grid--soccer-pdp {
  grid-template-columns: 704fr 675fr;
  gap: 61px;
  align-items: start;
}
.pd-thumb--soccer-pdp-v2 {
  aspect-ratio: 704 / 696; /* real soccer_pdp.webp 1408×1392 — idéntico */
  border-radius: 0; /* en Figma esta captura no lleva radio */
}
.project-soccer-pdp-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 82px;
}
.pd-thumb--soccer-mobile-v2 {
  width: 70.5%; /* 476/675 medido en Figma */
  aspect-ratio: 1320 / 1188; /* real image_soccer_mobile.webp — casi idéntico a 476/429 */
  border-radius: 0;
}
.project-soccer-pdp-text { align-self: stretch; }

@media (max-width: 860px) {
  .project-media-text-v2-grid--soccer-home,
  .project-media-text-v2-grid--soccer-pdp { grid-template-columns: 1fr; gap: 32px; }
  .project-soccer-pdp-right { gap: 32px; }
  .pd-thumb--soccer-mobile-v2 { width: 100%; max-width: 476px; }
}
/* Overview: en este frame las tags miden 670px (la de Contribution es
   larga) — texto 688px | tags 670px, gap 43px (Figma 707:58). */
.project-overview-v2-grid--soccer { grid-template-columns: 688fr 670fr; gap: 43px; }
@media (max-width: 860px) {
  .project-overview-v2-grid--soccer { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   TEMPLATE V2 aplicado a project-rowabi.html (2026-10-10).
   Frame Figma "Rowabi", fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 707:2.
   Reutiliza las clases genéricas del template (hero-v2, overview-v2,
   problem-hypothesis, media-text-v2, takeaways). Piezas propias:
   - Las 5 imágenes de img/rowabi/ ya vienen exportadas con el mismo
     ratio de su recuadro en Figma, así que se usan sin recortar (el
     ratio sale de los atributos width/height del <img>).
   - Espaciado vertical de este frame: 80px arriba/abajo en cada sección
     (scoped a .project-page--rowabi para no tocar las demás páginas).
   - Secciones: Home (texto izq. 705 | imagen der. 676, gap 60),
     PDP (fondo #2a2a2a, imagen 704 | texto 675, gap 61),
     Navigation (igual que Home), Collection (fondo #101010,
     imagen 691 | texto 675, gap 74), Takeaways sobre el fondo de página.
   ========================================================= */

.project-hero-v2-media--rowabi img {
  aspect-ratio: 1313 / 807; /* real hero_rowabi.webp 2626×1614 (1.627) — idéntico */
}

.project-page--rowabi .project-overview-v2 { padding: 80px 0; }
.project-overview-v2-grid--rowabi { grid-template-columns: 688fr 670fr; gap: 43px; }
/* En Figma las tags arrancan alineadas con el párrafo, no con el título */
.project-overview-v2-grid--rowabi .project-meta--stacked { margin-top: 50px; }

.project-page--rowabi .project-problem-hypothesis { padding: 80px 0 0; }
.project-page--rowabi .project-media-text-v2 { padding: 80px 0; }
.project-page--rowabi .project-media-text-v2--shaded { padding-bottom: 88px; }
.project-page--rowabi .project-takeaways { background: var(--bg-page); padding: 80px 0; }

/* Modificador genérico: franja #101010 (Figma "Collection page design") */
.project-media-text-v2--darker { background: var(--bg-testimonial); }

.project-media-text-v2-grid--rowabi-textleft   { grid-template-columns: 705fr 676fr; gap: 60px; }
.project-media-text-v2-grid--rowabi-pdp        { grid-template-columns: 704fr 675fr; gap: 61px; }
.project-media-text-v2-grid--rowabi-collection { grid-template-columns: 691fr 675fr; gap: 74px; }
.pd-thumb--rowabi { align-self: start; }

@media (max-width: 860px) {
  .project-overview-v2-grid--rowabi,
  .project-media-text-v2-grid--rowabi-textleft,
  .project-media-text-v2-grid--rowabi-pdp,
  .project-media-text-v2-grid--rowabi-collection { grid-template-columns: 1fr; gap: 32px; }
  .project-overview-v2-grid--rowabi .project-meta--stacked { margin-top: 0; }
  .project-page--rowabi .project-overview-v2,
  .project-page--rowabi .project-media-text-v2,
  .project-page--rowabi .project-takeaways { padding: 56px 0; }
  .project-page--rowabi .project-problem-hypothesis { padding: 56px 0 0; }
}


/* =========================================================
   HOME v2 — "Featured Projects" con los 6 proyectos + "Load more"
   (2026-10-10). Frame Figma "Home page", fileKey KbMzvalgKxR4A4iEo1yUxm,
   nodeId 670:398. La página all-projects.html se retiró por ahora: el
   home reutiliza sus tarjetas (.all-projects-card / -grid, con el mismo
   hover) dentro de .projects, y el botón "Load more projects" revela la
   7ª tarjeta (FNG) — lógica en js/script.js.
   ========================================================= */

/* El atributo hidden no gana sobre el display:flex de la tarjeta */
.all-projects-card[hidden] { display: none; }

/* Hero: tamaños de Figma (H1 44px, 2ª línea 19px Medium, foto 304px) */
.hero-content h1 { font-size: clamp(28px, 4vw, 44px); }
.hero-subtitle { margin-bottom: 8px; }
.hero-subtitle-2 {
  font-size: 19px;
  font-weight: 500; /* Figtree Medium */
  color: var(--text-grey);
  line-height: 1.35;
  max-width: 602px;
  margin-bottom: 18px;
}
.hero-photo { width: 304px; }

/* Botón "Load more projects": 36px bajo la grilla, 48px de alto (Figma 746:1954) */
.projects .projects-cta { margin-top: 36px; }
#loadMoreProjects { height: 48px; padding: 12px 34px; cursor: pointer; }

@media (max-width: 860px) {
  .hero-subtitle-2 { font-size: 17px; }
  .hero-photo { width: 200px; }
}

/* Garabatos que sangran fuera de .container: se ocultan cuando ya no hay
   margen lateral y pisarían el texto (fix documentado en
   handoff-portafolio-home.md, bug #7 — traído desde la copia de Descargas). */
@media (max-width: 1650px) {
  .hero-decor,
  .testimonials-decor,
  .about-hero-decor { display: none; }
}

/* ---------------------------------------------------------
   Bloques traídos desde la copia de Descargas (2026-10-10) para que
   about.html y project-drapery.html funcionen en D:\portafolio-paola.
   --------------------------------------------------------- */
/* =========================================================
   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; }
}


/* =========================================================
   PÁGINA — about.html (About me)
   Medidas verificadas contra el frame real de Figma
   (fileKey KbMzvalgKxR4A4iEo1yUxm, nodeId 526:2, "About me",
   2026-08-19).
   Reutiliza la sección .testimonials tal cual (mismo contenido y
   fondo #101010 que en el home) y agrega solo lo específico de
   esta página: el hero con bio + garabato, y la fila de software.
   ========================================================= */

/* Hero de la página: mismo fondo oscuro que .testimonials (#101010,
   nodo "Bg" de Figma, 1920×496) — a diferencia de .hero (home), que
   usa el fondo general de la página. */
.about-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-testimonial);
  padding: 64px 0 96px;
}

/* Garabato decorativo ("about_me_graphic.png"): ya viene exportado
   desde Figma como el recorte final con la máscara ya aplicada (el
   archivo real mide 1158×986px, exactamente 2× de 579×493 — el
   tamaño real del área visible dentro de la máscara en Figma), así
   que no hace falta reproducir la máscara/clip original en CSS, solo
   mostrar el PNG ya recortado a su tamaño real (579px, @2x vía el
   propio archivo). Va pegado al borde derecho de la SECCIÓN completa
   (no de .container) y al borde superior, igual que en Figma —
   mismo criterio que .hero-decor/.testimonials-decor, y se oculta
   en el mismo breakpoint (≤1650px, ver sección RESPONSIVE) por la
   misma razón: sin margen lateral de sobra, pisa el texto. */
.about-hero-decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 579px;
  height: auto; /* evita que el atributo HTML width/height distorsione la imagen */
  pointer-events: none;
  z-index: 0;
}

.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 710px; /* ancho real del párrafo en Figma */
}
.about-hero-content h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400; /* Figtree Regular */
  line-height: 1.03;
  margin-bottom: 24px;
}
.about-hero-content p {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-grey);
  line-height: 1.5;
}

/* ---------- Software I use ---------- */
.about-software {
  padding: 72px 0;
}

.software-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.software-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 32px;
  border: 1px solid #242424; /* color real de Figma, no coincide con --card-border (#282828) */
  border-radius: 9px;
  font-size: 22px;
  font-weight: 500; /* Figtree Medium */
  color: var(--text-white);
  white-space: nowrap;
}
.software-pill img {
  flex-shrink: 0;
}

/* ---------- Responsive: about.html ---------- */
@media (max-width: 860px) {
  .about-hero { padding: 48px 0 64px; }
  .software-pill {
    height: auto;
    padding: 12px 20px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .about-hero-content h1 { font-size: 30px; }
  .about-software { padding: 48px 0; }
  .software-list { gap: 12px; }
}

/* Hero v2: el bloque de texto (título, descripción y stats) va alineado
   ARRIBA del panel, no centrado — en Figma el título arranca ~100px bajo
   el borde superior del hero en todas las páginas (Darwin's Pet 580:811,
   Rowabi 707:2). Solo en desktop; en ≤1000px el panel se apila bajo la
   imagen con su propio padding (40px 32px). Ajuste 2026-10-10. */
@media (min-width: 1001px) {
  .project-hero-v2-panel {
    justify-content: flex-start;
    padding-top: 100px;
  }
}

/* Foto de perfil del home: la foto nueva (2026-10-10, 1728×1904) ya no trae
   la forma asimétrica recortada en el archivo, así que se aplica con CSS —
   mismos radios del frame "Image" de Figma (670:505, 304px de ancho):
   sup-izq 45, sup-der 98, inf-der 37, inf-izq 45. */
.hero-photo img {
  border-radius: 45px 98px 37px 45px;
}
@media (max-width: 860px) {
  /* foto a 200px en mobile: radios escalados en la misma proporción */
  .hero-photo img { border-radius: 30px 64px 24px 30px; }
}