/* ==========================================================================
   TASS — projects.css
   Estilos específicos de la página Proyectos (proyectos.html).
   No modifica layout.css, components.css ni home-about.css.
   ========================================================================== */

.page-projects .section__header h2 {
  margin-bottom: var(--space-sm);
}

/* ---------- Hero editorial (corrección Paso 1) ----------
   El video deja de ser fondo full-bleed: ahora es un elemento visual
   contenido en la columna derecha, mismo patrón de 2 columnas que
   .about-hero__grid (Acerca de) y .servicios-layout (Servicios), con
   clases propias para no tocar esas reglas. Proporción 44/56 (dentro
   de 42-46% / 54-58% pedido) dentro del mismo .container/max-width del
   sitio. gap: var(--space-xl), el mismo token que ya usan esas otras
   dos páginas para su composición de 2 columnas — no un valor nuevo.
   Padding: 80px arriba/abajo — suficiente espacio bajo el header (pedido
   explícitamente) sin sumarse a una altura total excesiva: con el video
   en ~520-620px (más abajo), la sección completa queda en ~680-780px,
   dentro de los 650-760px pedidos (el extremo superior de ese cálculo
   ocurre solo en viewports muy anchos, >1600px). Sin min-height:100vh. */
/* Ronda "acercar al hero, -60px": se pidió reducir 60px adicionales el
   tramo hero→frase editorial sin usar márgenes negativos y sin tocar
   el hero. El único otro valor disponible (padding-top de
   .project-story-track, más abajo) ya estaba casi en 0 (2px desktop/
   1px móvil-tablet, tras rondas previas) — no alcanzaba ni de lejos
   los 60px pedidos. Bloqueo confirmado con el usuario, que autorizó
   explícitamente tocar este padding-bottom (único punto con margen
   real) como excepción puntual a "no tocar el hero" para este tramo
   específico — título, subtítulo, estadísticas, video, layout,
   posiciones internas y animaciones del hero no cambian en nada, solo
   se reduce su aire posterior. Proporción tablet/móvil (1/3 del ajuste
   de escritorio) igual a la ya usada en este mismo tramo por
   .project-story-track (ver más abajo: -50px→-18px, -18px→-6px,
   -30px→-10px, todas ~1/3). padding-top no se toca (80px de aire antes
   del hero, ajeno a este tramo).
   Ronda "subir todo desde la frase editorial, 40-60px": en tablet/
   móvil no existe el mecanismo de centrado por flex de
   .project-story-sticky (solo activo en desktop+JS, ver más abajo) --
   inspeccionado de nuevo, el único espacio positivo real que queda
   aquí es este mismo padding-bottom (el padding-top de
   .project-story-track sigue en 1px, sin margen). Se reduce
   proporcionalmente (1/3 del ajuste de escritorio, mismo criterio ya
   usado en este tramo): -16px, 60px → 44px. */
.page-projects .projects-hero {
  padding-top: 5rem;
  padding-bottom: 2.75rem;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-projects .projects-hero {
    /* 80px → 20px (-60px, punto de partida pedido). Sumado al
       padding-top de .project-story-track (sin tocar, 2px en este
       ancho): ~22px de separación real hero→frase editorial.
       Ronda "eliminar los 20px restantes": confirmado que este
       padding-bottom seguía siendo el único valor responsable de la
       separación restante (el padding-top de .project-story-track, sin
       tocar, ya estaba en 2px desde la ronda anterior) — se lleva a 0,
       el mínimo posible sin cruzar a márgenes negativos. .projects-hero__grid
       (align-items:center) gobierna la posición interna de título/
       subtítulo/estadísticas/video de forma independiente a este
       padding, así que no se ven afectados. Separación real resultante:
       solo los 2px de .project-story-track. Fondo --color-linen
       continuo en ambos lados: sin franja blanca. Tablet/móvil (<901px,
       regla base más arriba) sin cambios: 60px, fuera de alcance de
       esta ronda. */
    padding-bottom: 0;
  }
}

.page-projects .projects-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .page-projects .projects-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.page-projects .projects-header {
  max-width: 100%;
  text-align: left;
  /* Nudge sutil hacia abajo dentro de la columna (align-items:center
     ya la centra respecto al video) — evita un centrado matemático
     perfecto, tal como se pidió, sin cálculos de posicionamiento
     complejos. Se conserva tal cual en tablet/móvil: el ajuste hacia
     arriba de la ronda "microajustes" (ver @media abajo) es solo para
     desktop, tal como se pidió explícitamente. */
  margin-top: 1.25rem;
}

/* Ronda "microajustes": se invierte el nudge (+20px → -20px, un
   desplazamiento de 40px hacia arriba respecto a la posición anterior,
   dentro de 30-50px pedido) — solo en desktop. align-items:center en
   .projects-hero__grid sigue sin tocarse, así que el video y el alto
   del hero no se ven afectados: este margin-top solo mueve el bloque
   de texto dentro de su propia columna. */
@media (min-width: 901px) {
  .page-projects .projects-header {
    /* Refinamiento visual: -20px→-44px (-24px adicionales, dentro de
       20-30px pedido) — sube el conjunto completo (título+subtítulo+
       barra de estadísticas, siguen en flujo normal) para que el
       bloque izquierdo dialogue mejor con el inicio del video, que no
       se toca. Solo desktop, sin position:absolute ni transforms. */
    margin-top: -2.75rem;
  }
}

/* Título: ya no vive sobre video (sin texto blanco, sin text-shadow).
   Mismo tratamiento de tamaño/peso/color que los encabezados grandes
   de Acerca de/Insumos/Servicios — jerarquía comparable, pedida
   explícitamente. 36-46px móvil; 64-74px desktop (ver @media abajo).
   Peso (600) y line-height (1.05, más compacto que el 1.08 heredado
   del h1 global, "line-height compacto" pedido) explícitos. Color:
   --color-espresso, el café oscuro TASS de siempre.
   Ronda "ajuste tipográfico tras el cambio de texto": el texto pasó de
   "Proyectos" (9 caracteres) a "Te acompañamos en cada etapa" (29
   caracteres) — a 64-74px dentro de la columna del 44% del hero
   (~465px reales a 1440px, grid de 2 columnas, sin tocar) el texto
   desbordaba en saltos de línea desordenados. Se añade max-width en
   ch (escala con el propio font-size, así que funciona igual en todos
   los breakpoints sin valores por separado): 17ch alcanza para "Te
   acompañamos" (14 caracteres) pero no para sumarle "en", forzando el
   corte limpio pedido "Te acompañamos / en cada etapa" — en anchos más
   angostos que 17ch (móvil chico) simplemente se ajusta al ancho real
   disponible, sin overflow. No es un ancho artificial que reemplace el
   layout: la columna/contenedor/alineación no cambian, este max-width
   vive dentro de esa misma columna. */
.page-projects .projects-header__title {
  font-size: clamp(2.25rem, 1.85rem + 1.6vw, 2.875rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
  max-width: 17ch;
}

@media (min-width: 901px) {
  .page-projects .projects-header__title {
    /* 66-74px → 44-54px (dentro de "no quede demasiado pequeño, sigue
       siendo claramente el título principal" pedido): con el texto
       largo actual, 66-74px no cabía de forma ordenada en la columna
       de 465px incluso con el max-width de arriba forzando el corte —
       44-54px sí deja "Te acompañamos" con aire real a los lados. */
    font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.375rem);
    /* 1.05 → 1.0 (dentro de 0.95-1.05 pedido) — más compacto para la
       composición de 2 líneas resultante. */
    line-height: 1.0;
  }
}

/* Subtítulo: tono secundario (graphite), sin cursiva, ancho 460px→
   520px (dentro de 480-560px pedido), 17-20px (ver @media abajo),
   line-height 1.55 (dentro de 1.5-1.6 pedido). Más espacio respecto al
   título (1.125rem→1.5rem, "bastante espacio" pedido). Sin
   text-shadow: ya no hace falta sobre fondo crema plano.
   Ronda "microajustes": max-width 520px→460px (dentro de 430-500px
   pedido) — composición más compacta, 2-3 líneas limpias. Tamaño,
   color, peso y line-height: sin cambio. */
.page-projects .projects-header__intro {
  max-width: 460px;
  margin: 1.5rem 0 0;
  color: var(--color-graphite);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
}

@media (min-width: 901px) {
  .page-projects .projects-header__intro {
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  }
}

.page-projects .projects-header__intro.reveal-up {
  transition-delay: var(--stagger-step);
}

/* Video: contenido dentro de un marco propio en la columna derecha —
   ya no full-bleed, ya no 100vw. Altura 320-430px móvil (ver @media
   abajo) → 490-590px desktop (clamp fluido dentro de esos rangos, en
   vez de un valor fijo, para que se adapte con naturalidad entre
   breakpoints; ver ronda "liberar 30px sin overlap" en el @media de
   abajo para el porqué de estos valores exactos). Ancho: 100% de su
   columna (nunca pegado al borde
   derecho del viewport — el propio max-width del .container y el gap
   con la columna de texto ya garantizan el aire pedido a la derecha y
   entre texto y video). Esquinas discretamente redondeadas
   (--radius-md, mismo radio que Acerca de/Servicios) + una sombra
   cálida muy sutil (idéntica a la que ya usan esas fotos, no una
   nueva) — sin marco grueso, sin overlay oscuro, sin viñeta: el color
   y movimiento del video quedan completamente visibles. */
.page-projects .projects-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -26px rgba(70, 49, 31, 0.4);
  height: clamp(320px, 55vw, 430px);
}

@media (min-width: 901px) {
  .page-projects .projects-hero__media {
    /* Ronda "liberar 30px sin overlap": el padding-bottom del hero ya
       está en 0 y no queda margen negativo seguro para .project-story-track
       sin tapar el video (fondo crema opaco superpuesto sobre los
       píxeles reales del video, rechazado explícitamente) — la única
       vía limpia que queda es reducir ligeramente esta altura, que es
       la que determina el alto real de toda la fila del hero (la
       columna de texto es más corta y queda centrada dentro de esta
       altura, sin definirla). -30px en los 3 extremos del clamp,
       incluido el componente fluido (40vw → calc(40vw - 30px); solo
       bajar los topes 520/620px sin tocar el 40vw no habría cambiado
       nada a 1440px, donde 40vw ya calculaba 576px dentro de rango):
       520px → 490px, 620px → 590px. A 1440px: 40vw - 30px = 546px
       (antes 576px), reducción real de 30px. Ancho, columna, posición
       horizontal, object-fit/object-position, border-radius, box-shadow,
       reproducción y controles del video no cambian — solo su alto.
       Con esta altura, el video sigue siendo la columna más alta del
       grid (align-items:center, sin tocar), así que el hero completo
       se achica esos mismos 30px y todo lo que sigue (frase editorial,
       Nuestras áreas de integración, CTAs, contenido posterior, footer)
       sube por flujo normal, sin margin-top negativo adicional aquí.
       Móvil/tablet (<901px, regla base arriba) sin cambios: fuera de
       alcance de esta ronda, tal como se pidió. */
    height: clamp(490px, calc(40vw - 30px), 590px);
  }
}

.page-projects .projects-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .page-projects .projects-hero__video {
    display: none;
  }
}

/* Sin línea divisoria entre el hero y "Un proyecto, una solución a la
   medida" (la transición debe ser solo espacio negativo, mismo fondo
   crema continuo). Selector actualizado a .project-story-track (antes
   .projects-editorial): la sección cambió de nombre al convertirse en
   scrollytelling, pero sigue siendo hermana .section directa del hero. */
.page-projects .projects-hero + .project-story-track::before {
  display: none;
}

/* ---------- Barra estadística (dentro de la columna izquierda del hero) ----------
   Corrección de ubicación: ya no es una .section independiente debajo
   de todo el hero — ahora vive dentro de .projects-hero__content,
   debajo del subtítulo, aprovechando el espacio vacío que dejaba esa
   columna junto al video. Ancho: 100% de la columna (ancho de bloque
   por defecto, sin max-width propio — ya no vive dentro de .container
   directamente, sino dentro de la columna del 44% del grid del hero).
   Separación respecto al subtítulo: margin-top: 4.5rem (72px, dentro
   de 60-80px pedido) — no se toca .projects-header__intro. Nota:
   .projects-header (heredado de .section__header, components.css) ya
   traía margin-bottom: 2.75rem (44px) sin efecto visible antes (era
   el único hijo de .projects-hero__content); al ser ahora hermano de
   bloque normal de esta barra, ambos márgenes colapsan al mayor de
   los dos (72px), no se suman — por eso no hace falta anular ese
   margin-bottom existente para evitar duplicar el hueco.
   Escala: números 34px→42px, etiquetas 12px, altura visual ~110-140px
   — sin cambio en esta ronda (número/texto/tamaños/altura/ancho ya
   aprobados, ver más abajo). 3 columnas en una sola fila en todos los
   anchos, sin cambio.
   Ronda de refinamiento (menos "card", más editorial):
   · Fondo: 90/10 → 95/5 (linen/sand) — contraste reducido ~5% sobre el
     crema principal (dentro de 5-8% pedido), misma familia de tonos,
     sin token nuevo.
   · Radio: var(--radius-md) (8px) → var(--radius-sm) (4px) — ya existe
     en base.css, reutilizado en vez de inventar un valor a medio
     camino; dentro de 4-6px pedido.
   · Padding/gap horizontal: se sube ligeramente (columna 20px→24px,
     padding-left de las columnas 2/3 16px→20px, padding horizontal de
     la barra 24px→28px) para que "360°" respire más del divisor y del
     borde derecho — todo horizontal, el padding vertical (24px, el que
     define la altura) no se toca, así que la altura general no cambia. */
.page-projects .projects-stats__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.5rem;
  /* Refinamiento visual: 72px→48px (-24px, dentro de 20-30px pedido)
     para que título+subtítulo+estadísticas se lean como una sola
     composición. Estructura interna (3 columnas, divisores, ancho,
     radio, proporciones) sin cambios. */
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-sm);
  /* Refinamiento visual: más presencia — 95/5 → 89/11 (linen/sand,
     ambos ya existentes en la paleta), diferencia ~6% más marcada
     (dentro de 5-8% pedido) frente al crema general. Cálido, sin
     gris frío, sin café oscuro, sin degradados ni colores nuevos. */
  background-color: color-mix(in srgb, var(--color-linen) 89%, var(--color-sand) 11%);
}

.page-projects .projects-stats__item {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}

/* Hairlines entre columnas — 14% → 12% de opacidad (~14% de reducción
   relativa, dentro de 10-20% pedido): "estructuran, no decoran". Se
   mantienen verticales en todos los anchos. */
.page-projects .projects-stats__item:not(:first-child) {
  padding-left: 1.25rem;
  border-left: 1px solid color-mix(in srgb, var(--color-espresso) 12%, transparent);
}

.page-projects .projects-stats__number {
  margin: 0 0 0.375rem;
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-projects .projects-stats__number {
    /* 42px, dentro de 34-42px pedido. */
    font-size: 2.625rem;
  }
}

.page-projects .projects-stats__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-graphite);
}

/* Entrada en dos capas — mismo sistema .reveal-up + IntersectionObserver
   de siempre (main.js), sin observers nuevos: la barra (.projects-
   stats__bar) y sus 3 datos (.projects-stats__item) llevan ambos la
   clase .reveal-up y son observados por la MISMA instancia ya usada en
   toda la página (threshold 0.15, ya dentro de 0.15-0.25 pedido — no
   hizo falta tocar main.js). La secuencia "superficie, luego datos" se
   logra enteramente con transition-delay en CSS, no con un segundo
   trigger de scroll:
   1) Capa 1 — la barra completa: translateY(18px) (el valor pedido
      exacto) y 900ms de duración (dentro de 800-1000ms pedido), sin
      delay (arranca de inmediato al entrar en viewport).
   2) Capa 2 — los 3 datos: empiezan 150ms después de que arranca la
      barra (no hace falta esperar a que termine), y entre ellos un
      stagger de 100ms (dentro de 90-130ms pedido) — 150 / 250 / 350ms.
      Se sobreescriben aquí, por :nth-child, los delays genéricos que
      pone [data-reveal-group] en base.css (0/90/180ms), con mayor
      especificidad. Distancia (12px) y duración (750ms, bajada
      ligeramente de 800ms para quedar cómodamente dentro de 650-800ms
      pedido) también se ajustan. */
.page-projects .projects-stats__bar.reveal-up {
  transform: translateY(18px);
  transition: opacity 900ms var(--ease-elegant), transform 900ms var(--ease-elegant);
}

.page-projects .projects-stats__item.reveal-up {
  transform: translateY(12px);
  transition: opacity 750ms var(--ease-elegant), transform 750ms var(--ease-elegant);
}

.page-projects .projects-stats__item:nth-child(1).reveal-up {
  transition-delay: 150ms;
}

.page-projects .projects-stats__item:nth-child(2).reveal-up {
  transition-delay: 250ms;
}

.page-projects .projects-stats__item:nth-child(3).reveal-up {
  transition-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-projects .projects-stats__bar.reveal-up,
  .page-projects .projects-stats__item.reveal-up {
    transform: none;
    transition: none;
  }
}

/* ---------- "Un proyecto, una solución a la medida" ----------
   Ronda "eliminar el pin, altura natural": esta sección tuvo durante
   varias rondas un mecanismo de scrollytelling con pin (position:sticky
   + height:240vh en .project-story-track/.project-story-sticky,
   ≥901px+JS, ver historial en git) que interpolaba opacity/transform de
   cada línea según el progreso de scroll. Visto en zoom out, esos 240vh
   (~2160px reales en el documento) se leían como una "slide" casi vacía
   — el problema no era el spacing, era la altura estructural reservada
   para el progreso de scroll. Se retira por completo ese mecanismo
   (height/position:sticky/min-height y el bloque JS correspondiente en
   main.js, ver "PROYECTOS: SCROLLYTELLING EDITORIAL" retirado) — la
   sección pasa a tener altura real de contenido (height:auto), igual
   que ya funcionaba en <901px o sin JS. La animación de entrada no se
   pierde: se reactiva el mismo .reveal-up con stagger entre líneas que
   ya existía como fallback (.projects-editorial__line.reveal-up /
   --second.reveal-up, más abajo) — deja de estar atada al progreso
   continuo de scroll, pasa a dispararse una vez al entrar en viewport
   (mismo mecanismo ya usado en todo el sitio), respetando
   prefers-reduced-motion igual que antes.
   .project-story-sticky ya no tiene ningún position/behavior especial
   (nombre de clase sin cambio para no tocar HTML/JS de otras partes).
   Spacing: con el hero ya en 0px de padding-bottom en desktop (rondas
   previas) y .project-story-track en flujo normal, el único aire
   hero→frase ahora es este padding-top — se fija en un valor modesto
   (24px desktop) para una transición conectada pero no pegada. El
   límite hacia "Nuestras áreas de integración" sigue siendo, como
   siempre, un único valor: el padding-top de .projects-integration
   (más abajo, ahora ajustado a ~80px para la "pausa editorial breve"
   pedida, ya que antes ese tramo lo resolvía en gran parte el
   padding-bottom del sticky, ahora eliminado). */
/* Ronda "más respiración, +30px por zona": único valor tocado para el
   tramo hero->frase editorial. Desktop 24px -> 54px (+30px, punto de
   partida pedido). Movil/tablet +15px (1px -> 16px), proporcionalmente
   menor para no generar un hueco excesivo en pantallas angostas.
   Ronda "mejorar el ritmo vertical general, +30px adicionales":
   desktop 54px -> 84px (+30px). Movil/tablet +15px (16px -> 31px).
   Sigue siendo padding-top (altura natural, sin sticky/track/vh
   artificiales reintroducidos). */
.page-projects .project-story-track {
  position: relative;
  padding-top: 1.9375rem;
  padding-bottom: 0;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-projects .project-story-track {
    padding-top: 5.25rem;
  }
}

.page-projects .project-story-sticky {
  padding: 0;
}

/* Ronda "eliminar subtítulo + subir áreas": este margin-bottom era la
   separación título → texto secundario (subtítulo, ya eliminado del
   HTML) — sin ese elemento, este aire ya no tiene función y se retira
   por completo (0, en todos los anchos). El único valor responsable
   del hueco hacia "Nuestras áreas de integración" pasa a ser el
   padding-top de .projects-integration (ver más abajo). Tamaño/
   line-height/ancho/color/animación/texto del título: sin cambio. */
.page-projects .projects-editorial__title {
  margin: 0;
  max-width: 760px;
}

/* Ronda "corregir clipping de la última línea": 1.1 era demasiado
   ajustado para un peso 600 a tamaños grandes (hasta 76px en desktop,
   ver @media abajo) — la caja de línea quedaba más corta que el glifo
   real, recortando visualmente la parte inferior del texto envuelto
   ("medida."). No se encontró overflow:hidden/height/min-height en
   .project-story-track, .project-story-sticky ni en este título (ver
   revisión completa) — el problema era puramente de line-height.
   1.1 → 1.18: aporta el aire técnico mínimo (unos px por línea) sin
   crecer la sección de forma perceptible, sin tocar font-size, saltos
   de línea (line-height no afecta el wrap), posición ni color. */
.page-projects .projects-editorial__line {
  display: block;
  font-weight: 500;
  color: var(--color-espresso);
  letter-spacing: -0.015em;
  line-height: 1.18;
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
}

/* Ronda de jerarquía: "ganar presencia, no dominar" — escala subida a
   64-76px desktop (antes 52-64px) y peso 500→600 ("peso actual o
   apenas más firme", se elige la opción con más firmeza ya que el
   objetivo explícito es más presencia). Color/line-height compacto/
   alineación izquierda/dos líneas/animación: sin cambio. Solo
   desktop — el tamaño móvil no se toca. */
@media (min-width: 901px) {
  .page-projects .projects-editorial__line {
    font-weight: 600;
    /* 64-76px, dentro de lo pedido. */
    font-size: clamp(4rem, 3.5rem + 1.6vw, 4.75rem);
  }
}

/* Entrada — Paso 2: se reutiliza EXACTAMENTE el mismo mecanismo/timing
   ya aprobado en la frase editorial de Acerca de TASS
   (.about-statement__line.reveal-up, home-about.css), pedido
   explícitamente en vez de inventar valores nuevos: 40px, 1150ms base /
   1400ms desktop, 220ms/280ms de desfase entre líneas. Bajo prefers-
   reduced-motion, la regla global de base.css deja el bloque estático
   desde el inicio; el reset explícito de abajo es necesario solo porque
   esta regla, al ser más específica, ganaría el transform si no
   (mismo patrón que en home-about.css). */
.page-projects .projects-editorial__line.reveal-up {
  transform: translateY(40px);
  transition: opacity 1150ms var(--ease-elegant), transform 1150ms var(--ease-elegant);
}

/* Ronda "corregir el corte real de 'medida.'": bug de especificidad,
   no overflow/altura. La regla de arriba (.page-projects
   .projects-editorial__line.reveal-up, 3 clases = especificidad 0,3,0)
   le gana SIEMPRE a .reveal-up.is-visible (base.css, solo 2 clases =
   0,2,0) para la propiedad transform, sin importar que .is-visible ya
   esté presente en el elemento — el mismo patrón exacto existe (sin
   corregir) en .about-statement__line de Acerca de TASS, home-about.css,
   pero ahí nunca se notó porque siempre hubo suficiente aire hacia la
   siguiente sección para absorber el desplazamiento sin overlap visual.
   Resultado real: transform nunca volvía a translate(0,0) — el texto
   quedaba opaco pero pintado 40px por debajo de su posición real de
   layout, de forma permanente. Con el spacing ya muy ajustado hacia
   "Nuestras áreas de integración" (ronda "eliminar el pin"), esos 40px
   de más hacían que "medida." se pintara dentro de la franja donde esa
   sección siguiente ya pinta su propio fondo --color-linen (posterior
   en el orden del documento, por lo tanto encima) — cubriendo la parte
   inferior del texto: eso es lo que se veía como "recortado", no un
   overflow real. Se agrega aquí el reset explícito, con especificidad
   0,4,0 (4 clases) para ganarle de forma garantizada a la regla de
   arriba: transform vuelve a 0 en el estado final, sin más cambios de
   spacing, z-index ni fondo. */
.page-projects .projects-editorial__line.reveal-up.is-visible {
  transform: translate(0, 0);
}

.page-projects .projects-editorial__line--second.reveal-up {
  transition-delay: 220ms;
}

@media (min-width: 901px) {
  .page-projects .projects-editorial__line.reveal-up {
    transition-duration: 1400ms;
  }

  .page-projects .projects-editorial__line--second.reveal-up {
    transition-delay: 280ms;
  }
}

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

/* Ronda "eliminar el pin, altura natural": se retira la regla que
   anulaba esta transition en desktop+JS (antes main.js controlaba
   opacity/transform vía inline style según el progreso de scroll,
   atado al pin ya eliminado). Sin esa anulación, las líneas usan el
   mismo .reveal-up de arriba en todos los anchos — mismo mecanismo que
   ya funcionaba en <901px/sin JS/reduced-motion, ahora también en
   desktop: entra una vez al hacer scroll hasta el viewport, con el
   mismo stagger (220ms/280ms) entre líneas. */

/* ---------- "Nuestras áreas de integración": fondo tras reubicarse ----------
   Ya no vive dentro de .projects-hero, así que ya no necesita quedar
   transparente sobre el video — usa el mismo --color-linen que el
   resto del sitio (antes heredaba --color-off-white de .section--alt,
   base.css) para continuidad. Se anula también el background-image de
   .section--alt (ver esa regla más abajo en este archivo: dibuja un
   degradado a --color-paper/blanco en los bordes superior e inferior,
   pensado para cuando esta sección todavía estaba delante del video
   con fondo transparente forzado — sin eso, crearía una franja blanca
   sobre el crema, el mismo problema ya resuelto en Servicios). El
   color/sombra que antes tenía su h2 mientras vivía sobre el video
   (#F4EDE0 + text-shadow) ya no aplica (esa regla estaba escopada a
   ".projects-hero .section__header h2", que no matchea aquí) — el h2
   cae de forma natural al --color-espresso por defecto del sitio,
   correcto para fondo claro; contenido interno del bloque (títulos,
   descripciones, tarjetas): sin tocar, se rediseñará en el Paso 2.
   Selector con tipo (section.projects-integration, no solo la clase):
   .section--alt (más abajo en este archivo) tiene la misma
   especificidad que un selector de dos clases, y al aparecer después
   en el código ganaría por orden — igual que un problema ya detectado
   y corregido en Servicios. Añadir el selector de tipo "section" suma
   un punto de especificidad y garantiza que esta regla gane sin
   depender del orden de aparición. */
/* padding-top explícito (antes heredaba 84px/112px del .section base
   de base.css) — controla, junto con el padding-bottom en 0 de
   .project-story-track (ver arriba), el hueco hacia esta sección.
   Única propiedad que se toca para este límite — no se acumula con
   .project-story-track.
   Ronda de jerarquía: "pausa amplia" pedida una vez que el bloque
   editorial ya es completamente visible — 96px móvil (+24px sobre los
   72px anteriores) y 160px desktop (+88px), dentro de 140-190px
   pedido. Como esta separación vive en .projects-integration (fuera
   del sticky/track), se siente después de que el reveal ya terminó,
   no como un hueco a mitad del scrollytelling — tal como se pidió.
   Ronda "ritmo vertical (hero → editorial → áreas)": se pide ahora una
   "pausa media" (~125px desktop, 80-100px móvil), más corta que la de
   arriba porque editorial y áreas están conceptualmente relacionados —
   96px → 90px móvil/tablet (dentro de 80-100px pedido), 160px → 125px
   desktop (el punto de partida pedido). Único valor tocado para este
   límite, sin acumular con .project-story-track (padding-bottom sigue
   en 0, sin tocar).
   Ronda "eliminar subtítulo + subir áreas": al quitar el párrafo
   descriptivo bajo "Un proyecto, una solución a la medida.", el título
   y "Nuestras áreas de integración" deben leerse como una sola
   narrativa consecutiva — pausa corta/media, no editorial amplia.
   125px → 80px desktop (punto de partida pedido, dentro de 70-90px);
   90px → 60px móvil/tablet (dentro de 55-70px pedido). El margin-bottom
   que tenía el título (era la separación título→subtítulo, ver
   .projects-editorial__title más abajo) se lleva a 0 — ese aire ya no
   tiene función sin el subtítulo; este padding-top pasa a ser el único
   valor responsable de todo el hueco hacia esta sección. */
/* Ronda "continuidad editorial->areas, criterio visual": se pidio
   inspeccionar la composicion y elegir el valor (no un numero fijo) que
   haga sentir "Nuestras areas de integracion" como continuacion
   inmediata de la frase editorial, no como capitulo nuevo -- dentro de
   48-64px de reduccion sugeridos. Se confirma que este padding-top
   sigue siendo la unica propiedad responsable de este limite (sin
   acumular con .project-story-track, padding-bottom en 0, sin tocar).
   Se elige -56px en desktop (80px -> 24px, punto medio del rango
   sugerido): suficiente para leerse como "pausa editorial breve" (aire
   real, un salto de linea claro) sin llegar a 0, que se habria sentido
   pegado por accidente en vez de una transicion deliberada. Movil/
   tablet: -38px, proporcionalmente algo mas conservador que el -56px
   de escritorio (60px -> 22px) para no comprimir de mas en pantallas
   angostas. Unico valor tocado; sube el wrapper .projects-integration
   completo (titulo, areas, imagenes, textos, CTAs, hairlines,
   contenido posterior) como una sola unidad por flujo normal --
   spacing interno (titulo->primera area, entre areas, tamanos,
   columnas, animaciones) sin cambios.
   Ronda "una misma secuencia visual": se pidio de nuevo mas cercania --
   ya no "pausa editorial breve" sino "misma secuencia", sin llegar a
   encimarse. Se sigue confirmando que este padding-top es la unica
   propiedad responsable del limite (sin acumular con
   .project-story-track, sin tocar). Desktop 24px -> 12px (la mitad):
   suficiente espacio negativo para que se lea como un salto de parrafo
   dentro de la misma narrativa, no como el cierre de un capitulo, sin
   llegar a 0 (que se leeria como texto pegado por accidente). Movil/
   tablet: 22px -> 10px, mismo criterio proporcional. Unico valor
   tocado; sube el wrapper .projects-integration completo como una sola
   unidad por flujo normal -- textos, tamanos, columnas, imagenes,
   video, header, footer y spacing interno de las areas sin cambios.
   Ronda "eliminar el pin, altura natural": esos 12px de desktop se
   calibraron cuando el bloque de la frase editorial todavia usaba el
   truco de padding-bottom asimetrico del sticky (retirado, ver
   .project-story-track/.project-story-sticky arriba) para desplazar el
   texto hacia arriba dentro de una caja casi del alto del viewport --
   gran parte del "acercamiento" real vivia ahi, no aqui. Al pasar la
   frase a flujo normal (altura de contenido real, sin ese desplazamiento
   artificial), este valor por si solo ya no refleja una pausa de 70-100px
   pedida ahora -- se sube a 5rem/80px (punto medio del rango). Movil/
   tablet no tenian el mecanismo de pin (solo existia en >=901px+JS): su
   relacion frase->areas ya era de flujo natural desde antes, asi que
   10px se deja sin cambio -- no formaba parte del problema de "slide".
   Ronda "mas respiracion, +30px por zona": desktop 80px -> 110px
   (+30px, punto de partida pedido) -- conserva la sensacion de
   continuidad (no vuelve a los 12rem+ de las rondas de "pausa amplia"
   antiguas), solo un poco mas de aire. Movil/tablet +15px (10px ->
   25px), proporcionalmente menor.
   Ronda "mejorar el ritmo vertical general, +30px adicionales":
   desktop 110px -> 140px (+30px) -- sigue siendo "pausa clara pero
   conectada" (bien por debajo de los 12rem+/196px de las rondas de
   "pausa amplia" antiguas), solo mas aire. Movil/tablet +15px
   (25px -> 40px). */
.page-projects section.projects-integration {
  padding-top: 2.5rem;
  background-color: var(--color-linen);
  background-image: none;
}

@media (min-width: 901px) {
  .page-projects section.projects-integration {
    padding-top: 8.75rem;
  }
}

/* Ronda "jerarquía editorial → sección (solo móvil)": +14px (40px →
   54px) — la frase editorial ("Un proyecto, una solución a la medida")
   y "Nuestras áreas de integración" se sentían demasiado pegadas. Este
   sigue siendo el único valor responsable del tramo frase→título (ver
   comentario de .project-story-track más arriba); .project-story-track
   conserva su padding-bottom:0 sin cambios. Solo <701px; tablet y
   desktop conservan 40px/140px respectivamente.
   Ronda "+5% adicional": 54px → 57px (+~5.6%, más cercano posible a
   +5% en un múltiplo de rem legible). Único valor tocado; el tramo
   título→"Invernaderos y estructuras" (margin-bottom de
   .projects-integration__header, más abajo) no se toca.
   Ronda "+5% adicional (2)": 57px → 60px (+5.3%). Mismo único valor
   tocado, mismo criterio.
   Ronda "+5% adicional (3)": 60px → 63px (+5%). Mismo único valor
   tocado, mismo criterio. */
@media (max-width: 700px) {
  .page-projects section.projects-integration {
    padding-top: 3.9375rem;
  }
}

/* Ronda "refinamiento móvil": espacio final tras la última área
   ("Tratamiento y manejo del agua") — hereda padding-bottom de
   .section/--space-xl (84px a ≤700px vía base.css). -19% (84px →
   68px) para una pausa final algo más corta antes del CTA, ya que en
   móvil esta pausa se sumaba a la de .projects-areas (arriba) y se
   sentía larga. --space-xl no se toca (variable global); este
   override es específico de esta sección y solo <701px — tablet
   (701-900px) y desktop conservan 112px, sin cambios. */
@media (max-width: 700px) {
  .page-projects section.projects-integration {
    padding-bottom: 4.25rem;
  }
}

/* ---------- "Nuestras áreas de integración": encabezado ----------
   Alineado a la izquierda (antes centrado, .text-center) y de menor
   jerarquía que la declaración editorial de arriba (52-64px). Ronda de
   refinamiento: gana un poco más de presencia — 36-44px desktop
   (antes 38-46px), sigue sin competir con la declaración editorial.
   .section__header (components.css) sigue aportando max-width/margin
   como base; aquí se sobreescribe alineación y se retira el centrado
   horizontal (margin:0 auto → 0). */
.page-projects .projects-integration__header {
  max-width: 640px;
  margin: 0 0 3.5rem;
  text-align: left;
}

/* Ronda "acercar título → primera área (solo móvil)": -32% (56px →
   38px, dentro de 30-35% pedido) — único valor tocado. El espacio
   SUPERIOR del título ("Un proyecto, una solución a la medida" →
   "Nuestras áreas de integración") vive en el padding-top de
   section.projects-integration, sin tocar aquí. El padding-top del
   primer .projects-areas__item (hairline → "Invernaderos y
   estructuras", ya refinado en la ronda anterior) tampoco se toca —
   así "Nuestras áreas de integración" queda más conectada con el
   hairline/primera área usando solo su propio margin-bottom, por
   flujo normal (sin transform/position/márgenes negativos). Tamaño,
   peso, color y alineación del título sin cambio. Solo <701px; tablet
   y desktop conservan 56px.
   Ronda "más continuidad hacia la primera tarjeta": -10px adicionales
   (38px → 28px) — mismo criterio, único valor tocado, para que
   "Nuestras áreas de integración" se lea más consecutiva con el
   hairline/"Invernaderos y estructuras". */
@media (max-width: 700px) {
  .page-projects .projects-integration__header {
    margin-bottom: 1.75rem;
  }
}

.page-projects h2.projects-integration__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-projects h2.projects-integration__title {
    /* Rediseno "indice tecnico editorial": se pidio ~34-40px para que
       funcione como encabezado de capitulo. El clamp ya vigente
       calculaba ~39px a 1440px (dentro del rango pedido) -- se ajusta
       solo el tope superior (44px -> 40px, en pantallas muy anchas)
       para que nunca rebase el rango pedido; el resto de la
       composicion (hairlines, spacing, jerarquia de las areas) es lo
       que aporta la "mas presencia" real pedida. Tipografia, color,
       peso y alineacion sin cambio. */
    font-size: clamp(2.25rem, 2rem + 0.45vw, 2.5rem);
  }
}

/* ---------- "Nuestras áreas de integración": 5 áreas (rediseño técnico) ----------
   Cada área deja de ser una descripción comercial breve y pasa a
   funcionar como una pequeña ficha técnica editorial abierta: número +
   título + introducción técnica + "QUÉ EVALUAMOS" + variables +
   "TECNOLOGÍA QUE INTEGRAMOS" + logos (contenedor preparado, vacío por
   ahora — no existen todavía logos de marca configurados para estas 5
   áreas en el proyecto; ver comentario en .projects-areas__logos más
   abajo) + enlace editorial "Explorar configuraciones →". Sigue sin
   caja, borde, sombra ni fondo propio — separación únicamente por
   espacio, jerarquía y tipografía.
   Rediseno "indice tecnico editorial": .projects-areas pasa a ser solo
   el wrapper que apila verticalmente 2 hijos -- .projects-areas__grid
   (las primeras 4 areas, 2 columnas + hairline vertical) y el articulo
   --closing (5a area, fila de cierre de ancho completo). El row-gap
   entre esos 2 hijos define el aire antes del cierre; mismo valor que
   el row-gap interno del grid para mantener un ritmo vertical
   consistente en toda la seccion.
   Ronda "microajustes finales": -30px solo en desktop (12.25rem/196px
   -> 10.375rem/166px) para acercar la fila final ("Tratamiento y
   manejo del agua") a las 4 areas superiores -- unico valor tocado,
   el row-gap INTERNO del grid 2x2 (.projects-areas__grid, mas abajo,
   entre fila 1 y fila 2) no cambia, conservando exactamente la
   estructura/spacing 2x2 aprobados. Movil/tablet sin cambio: ahi las
   5 areas ya se leen como una sola lista continua con el mismo
   row-gap que el grid interno -- tocar solo este valor ahi rompería
   esa uniformidad. */
.page-projects .projects-areas {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4.75rem;
}

@media (min-width: 901px) {
  .page-projects .projects-areas {
    row-gap: 10.375rem;
  }
}

/* Ronda "refinamiento móvil, prioridad": -24% (76px → 58px, dentro de
   20-25% pedido) — el espacio después de "Explorar configuraciones →"
   y antes del inicio del siguiente bloque (área 4 → área 5, "Tratamiento
   y manejo del agua") era el más aislante de toda la sección. Mismo
   valor que .projects-areas__grid, justo abajo, para conservar el
   ritmo consistente ya documentado ahí. Solo <701px (el breakpoint
   móvil real del proyecto); tablet (701-900px) y desktop conservan
   76px/166px respectivamente, sin cambios — el video no se ve afectado
   por este ajuste. */
@media (max-width: 700px) {
  .page-projects .projects-areas {
    row-gap: 3.625rem;
  }
}

/* Grid de 2 columnas para las primeras 4 areas. Huecos ronda "indice
   tecnico editorial": column-gap +80px (112px -> 192px, dentro de
   70-90px de aumento pedido) para que la composicion respire mas y
   deje sitio a la hairline vertical central; row-gap +76px (120px ->
   196px, dentro de 65-85px pedido) entre la fila 1 (Invernaderos/
   Riego) y la fila 2 (Control climatico/Calefaccion). En movil/tablet
   sigue siendo 1 columna (mismo row-gap que el wrapper exterior, para
   que las 4 areas se lean como una sola lista continua junto con la
   5a). position:relative ancla la hairline vertical (::before, solo
   desktop, ver abajo) a la altura real de este grid (las 2 filas),
   sin invadir la fila de cierre. */
.page-projects .projects-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4.75rem;
}

/* Ronda "refinamiento móvil, prioridad": mismo -24% que .projects-areas
   (arriba) — área 1→2, 2→3 y 3→4 usan este mismo row-gap mientras la
   retícula sigue siendo 1 columna (<901px). Solo <701px; el grid 2×2
   de escritorio (row-gap 166px, hairline vertical) no se toca. */
@media (max-width: 700px) {
  .page-projects .projects-areas__grid {
    row-gap: 3.625rem;
  }
}

@media (min-width: 901px) {
  .page-projects .projects-areas__grid {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12rem;
    row-gap: 12.25rem;
  }

  /* Hairline vertical entre columnas: 1px, tono calido/discreto (mismo
     color-mix ya usado en las hairlines de estadisticas de Home,
     home-about.css), centrada exactamente en el punto medio del grid
     -- que coincide con el punto medio del column-gap en un grid de 2
     columnas simetricas. Solo desktop (2 columnas): en movil/tablet no
     tiene sentido y no se renderiza. */
  .page-projects .projects-areas__grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: color-mix(in srgb, var(--color-espresso) 12%, transparent);
  }
}

/* Título de cada área — ronda de refinamiento: se pidió aumentarlo a
   "aproximadamente 22-26px en desktop, deben ser claramente el
   elemento principal después del número". El tamaño desktop ya
   vigente (clamp 26-30px) computa, en la práctica, ~28-30px en el
   rango 901-1440px (0.4vw sobre 1.5rem base) — es decir, YA estaba
   por encima del rango 22-26px pedido, no por debajo. Interpretando
   la intención explícita ("aumentarlos", "deben ganar presencia")
   como el requisito que prevalece sobre el número exacto (que habría
   implicado reducirlo), se sube un peldaño más arriba de donde ya
   estaba — clamp 28-34px — en vez de bajarlo a 22-26px, para lograr
   un incremento real y perceptible. Se documenta aquí por si el
   número 22-26px sí era la intención literal y hay que corregir a la
   baja. Peso (600) y color (espresso) sin cambio, tal como se pidió
   "mantener tipografía actual / peso medium". */
/* Rediseno "indice tecnico editorial": +10% (dentro de 8-12% pedido)
   en los 3 rangos -- mismo peso/color/tipografia, solo tamano.
   Ronda "compactar internamente, +presencia QUE EVALUAMOS": -25%
   (1.25rem/20px -> 0.9375rem/15px, dentro de 20-30% pedido) en el
   margin titulo->descripcion. */
.page-projects .projects-areas__title {
  margin: 0 0 0.9375rem;
  font-size: clamp(1.65rem, 1.54rem + 0.55vw, 1.7875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-projects .projects-areas__title {
    font-size: clamp(1.925rem, 1.76rem + 0.55vw, 2.3375rem);
  }
}

@media (max-width: 700px) {
  .page-projects .projects-areas__title {
    font-size: clamp(1.44375rem, 1.375rem + 0.33vw, 1.65rem);
    /* Ronda "refinamiento móvil": -20% (15px → 12px) título→descripción,
       parte de compactar ~15-20% el ritmo interno de cada área. */
    margin-bottom: 0.75rem;
  }
}

/* Hairline superior + aire generoso hacia el titulo (ronda "indice
   tecnico editorial"): cada bloque de area (incluida la fila de
   cierre, que ya ocupa el ancho completo del contenedor) gana una
   linea horizontal fina encima -- mismo tono calido/discreto que la
   hairline vertical de arriba, no una nueva. Esto es lo que convierte
   cada bloque en una "ficha editorial/tecnica" sin caja/sombra/fondo:
   la estructura viene solo de tipografia + hairlines + espacio.
   padding-top separa la linea del titulo (mas en desktop, "bastante
   aire" pedido). El hover sutil de mas abajo (:has() sobre el enlace)
   sube apenas el contraste de esta misma linea. */
.page-projects .projects-areas__item {
  border-top: 1px solid color-mix(in srgb, var(--color-espresso) 14%, transparent);
  padding-top: 1.75rem;
  transition: border-top-color 0.6s var(--ease-elegant);
}

@media (min-width: 901px) {
  .page-projects .projects-areas__item {
    padding-top: 2.5rem;
  }
}

/* Ronda "refinamiento móvil": -14% (28px → 24px) hairline→título —
   más conservador que el resto de espacios internos a propósito: es
   el "inicio" de cada ficha, conserva algo más de aire para no perder
   la sensación de arranque limpio. Grosor/color/ancho del hairline sin
   cambio. Solo <701px. */
@media (max-width: 700px) {
  .page-projects .projects-areas__item {
    padding-top: 1.5rem;
  }
}

.page-projects .projects-areas__item:has(.projects-areas__link:hover) {
  border-top-color: color-mix(in srgb, var(--color-espresso) 22%, transparent);
}

/* Descripción — 16px (tope del rango 14-16px pedido, un aumento real
   frente a los 15px anteriores) y line-height 1.65 (ya dentro de
   1.55-1.65, sin cambio). max-width fijo de 480px eliminado: ahora
   ocupa el ancho real de su columna del grid (que ya está acotada por
   --container-max de base.css, 1200px — el max-width general del
   sitio, reutilizado, no uno nuevo). A 1440px con 2 columnas y el
   column-gap actual (--space-xl, 112px) cada columna mide ~544px, que
   a 16px arroja ~60-65 caracteres por línea — dentro de 55-70 pedido,
   mejor uso del ancho disponible sin perder legibilidad. */
/* Ronda "microajustes finales": +5-8% de presencia, priorizando
   contraste sobre tamaño (pedido explícito). Color: color-mix con
   --color-ink al 15% (mismo recurso ya usado en otros textos
   secundarios del sitio, sin introducir un tono nuevo) para un paso
   real de contraste sobre --color-linen. Tamaño: +3% (1rem -> 1.03rem,
   incremento mínimo, dentro del rango combinado pedido). line-height/
   margin/ancho de columna sin cambio. */
/* Ronda "compactar internamente, +presencia QUE EVALUAMOS": -25%
   (2rem/32px -> 1.5rem/24px, dentro de 20-30% pedido) en el margin
   descripcion->QUE EVALUAMOS. Tamaño/line-height/color/ancho sin
   cambio (ronda anterior). */
.page-projects .projects-areas__text {
  margin: 0 0 1.5rem;
  font-size: 1.03rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-graphite) 85%, var(--color-ink) 15%);
}

/* Ronda "refinamiento móvil": -17% (24px → 20px) descripción→QUÉ
   EVALUAMOS. Tamaño/line-height/color/ancho sin cambio, solo <701px. */
@media (max-width: 700px) {
  .page-projects .projects-areas__text {
    margin-bottom: 1.25rem;
  }
}

/* Etiquetas "QUÉ EVALUAMOS" / "TECNOLOGÍA QUE INTEGRAMOS": mismo
   lenguaje visual que los demás "kickers" editoriales del sitio
   (color-mix sand/espresso reutilizado, no un tono nuevo), en
   mayúsculas vía CSS (el HTML conserva el texto en oraciones
   normales, sin forzar mayúsculas en el contenido). */
/* Ronda "indice tecnico editorial": tracking ligeramente mayor
   (0.09em -> 0.1em) y un poco mas de contraste (70/30 -> 62/38 sand/
   espresso) para que se lea como microetiqueta editorial con mas
   intencion -- sigue sin badge/pill/fondo, solo tipografia.
   Ronda "mas presencia a QUE EVALUAMOS": +13% de tamano (0.6875rem/
   11px -> 0.775rem/12.4px, dentro de 10-15% pedido), peso 500->600
   ("peso ligeramente mayor" pedido) y color mucho mas cercano al cafe
   principal (62/38 sand/espresso -> 35/65, "no gris demasiado claro"
   pedido) -- claramente visible, pero sigue por debajo del titulo
   (15-16px/600) en tamano y del texto de descripcion en protagonismo
   (sigue siendo microetiqueta uppercase, no un subtitulo). Tracking
   sin cambio (0.1em, ya "moderado"). margin-bottom: -8px (0.75rem/
   12px -> 0.25rem/4px, dentro de 6-10px pedido) para acercar la lista
   tecnica. */
.page-projects .projects-areas__label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-sand) 35%, var(--color-espresso) 65%);
}

/* Ronda "compactar internamente + acercar el CTA": -25% (2rem/32px ->
   1.5rem/24px, dentro de 20-30% pedido) en el margin hacia el bloque
   siguiente -- con "Tecnologia que integramos"/logos ocultos (sin
   logos reales aun, ver mas abajo), este margin-bottom es hoy el
   espacio real hacia "Explorar configuraciones ->": el mismo -8px
   cumple tambien el pedido de acercar el CTA (dentro de 6-10px
   pedido), sin tocar el margin-top:auto/padding-top propios del
   enlace. Tamaño/line-height/color sin cambio. */
.page-projects .projects-areas__variables {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-graphite);
}

/* Ronda "refinamiento móvil": -25% (24px → 18px) línea técnica→CTA
   (con "Tecnología que integramos"/logos ocultos, este margin-bottom
   sigue siendo el espacio real hacia "Explorar configuraciones →",
   junto con el padding-top propio del enlace, ver
   .projects-areas__link más abajo). Tamaño/line-height/color sin
   cambio, solo <701px. */
@media (max-width: 700px) {
  .page-projects .projects-areas__variables {
    margin-bottom: 1.125rem;
  }
}

/* Ronda "compactar internamente": -25% (1rem/16px -> 0.75rem/12px),
   mismo criterio que el resto de espacios internos -- sin efecto
   visible hoy (oculto vía :has(+ :empty), sin logos reales aún), pero
   consistente para cuando se agreguen. */
.page-projects .projects-areas__tech-label {
  margin-bottom: 0.75rem;
}

/* Contenedor de logos de tecnología/marca: preparado para recibir 1-4
   <img> por área (altura uniforme, ancho automático, object-fit:
   contain, sin tarjetas/fondos/bordes) — ver la regla .projects-areas__
   logos img más abajo. No existen todavía logos de marca configurados
   para ninguna de estas 5 áreas en el proyecto (ver assets/img/). */
.page-projects .projects-areas__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin: 0 0 2rem;
}

.page-projects .projects-areas__logos img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Ronda de refinamiento: mientras un área no tenga al menos un logo
   real, ni la etiqueta "TECNOLOGÍA QUE INTEGRAMOS" ni su contenedor
   deben mostrarse ni reservar espacio — pedido explícitamente. Sin
   JavaScript: el contenedor de logos está vacío en el HTML (sin
   espacios/saltos de línea dentro, así :empty lo detecta) y :has()
   permite ocultar también la etiqueta que lo precede cuando su
   hermano siguiente está vacío. En cuanto se agregue un <img> real
   dentro de .projects-areas__logos en una área, ambas reglas dejan de
   aplicar automáticamente ahí — no hace falta tocar CSS ni HTML de
   las demás áreas. (:has() y :empty: soporte en navegadores modernos,
   mismo nivel que color-mix(), ya usado en este mismo archivo.) */
.page-projects .projects-areas__logos:empty {
  display: none;
  margin: 0;
}

.page-projects .projects-areas__tech-label:has(+ .projects-areas__logos:empty) {
  display: none;
}

/* Enlace editorial "Explorar configuraciones →": navegación discreta,
   no CTA comercial — sin fondo, sin botón sólido, sin borde. Se
   implementa como <span> (no <a>) porque todavía no existe una URL
   real de destino para ninguna de las 5 áreas (ver comentario junto a
   cada bloque en proyectos.html) — así queda "preparado" sin poder
   romper la navegación con un href falso; cuando exista la página de
   configuraciones de cada área basta con cambiar el <span> por <a
   href="...">. hover sutil: solo un leve corrimiento de la flecha,
   sin subrayado ni cambio de color agresivo. */
/* Ronda "indice tecnico editorial": +1px de tamano (14px->15px), peso
   500->600 y letter-spacing sutil para mas presencia -- sigue siendo
   texto plano, sin boton/fondo/borde. padding-top anade aire extra
   respecto al contenido anterior (independiente del margin-top:auto,
   que sigue resolviendo el alineado al fondo del bloque en filas
   estiradas).
   Ronda "microajustes finales": +~7% de tamano (0.9375rem/15px ->
   1rem/16px, dentro de 5-8% pedido) para mas presencia. Color ya
   estaba en --color-espresso puro (el tono mas oscuro de la paleta
   editorial) -- sin margen real para mas contraste sin introducir un
   tono nuevo/mas duro, asi que el aumento de presencia viene solo del
   tamano. Sigue siendo texto plano, sin boton/fondo/borde/sombra. */
.page-projects .projects-areas__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* Se alinea al final de cada bloque vía flex (ver
     .projects-areas__item más abajo) en vez de spacing manual. */
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-espresso);
  cursor: default;
}

/* Ronda "refinamiento móvil": -25% (8px → 6px) de la separación propia
   del CTA respecto al bloque anterior, parte de compactar línea
   técnica→CTA junto con .projects-areas__variables (arriba). Tamaño,
   peso, flecha, color y comportamiento del enlace sin cambio, solo
   <701px. */
@media (max-width: 700px) {
  .page-projects .projects-areas__link {
    padding-top: 0.375rem;
  }
}

/* Ronda "indice tecnico editorial": 0.3s -> 0.5s, mas lenta y sutil
   (dentro de lo pedido "suave, lenta, sutil"), mismo recorrido (4px,
   ya dentro de 3-4px pedido) y misma curva --ease-elegant. */
.page-projects .projects-areas__link-arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-elegant);
}

.page-projects .projects-areas__link:hover .projects-areas__link-arrow {
  transform: translateX(4px);
}

/* Alineación de los "Explorar configuraciones →" dentro de cada fila
   — resuelto por layout, no manualmente. CSS Grid ya estira cada
   .projects-areas__item (item del grid) a la altura de la fila más
   alta de SU propia fila (align-items:stretch es el valor por defecto
   de .projects-areas, nunca se sobreescribió) — eso ya da a cada
   artículo la altura correcta sin tocarlo. Lo que faltaba era
   redistribuir esa altura extra dentro del artículo: con
   display:flex + flex-direction:column aquí y margin-top:auto en el
   enlace (ver .projects-areas__link más arriba), el enlace queda
   siempre pegado al borde inferior del artículo — sin alturas fijas,
   sin recortar texto, sin <br>, sin valores distintos por área. En la
   fila de la 5ª área (sola, sin pareja) no hay altura extra que
   estirar, así que su enlace simplemente sigue su contenido — mismo
   comportamiento en todas las filas, sin reglas especiales. En móvil
   (1 columna) cada fila del grid tiene un solo elemento, por lo que
   tampoco hay altura extra que redistribuir: el enlace sigue su
   propio contenido de forma natural, tal como se pidió. */
.page-projects .projects-areas__item {
  display: flex;
  flex-direction: column;
}

/* ---------- Fila de cierre: "Tratamiento y manejo del agua" ----------
   Ronda "indice tecnico editorial": la 5a area ya no queda sola en la
   columna izquierda del grid de 2 columnas (dejando un hueco vacio a
   la derecha) -- ahora es una fila de ancho completo, hermana de
   .projects-areas__grid dentro de .projects-areas (ver mas arriba),
   con su propio layout de 2 columnas internas (titulo | contenido) en
   desktop. La hairline superior + padding-top ya los hereda de la
   regla general .projects-areas__item de arriba (misma "hairline
   superior completa" pedida, sin regla aparte). En movil/tablet no se
   aplica ningun override aqui: el articulo sigue siendo
   flex-direction:column normal (titulo arriba, contenido abajo), igual
   que las otras 4 areas -- composicion vertical normal, tal como se
   pidió, sin forzar el layout de escritorio en pantallas chicas. */
@media (min-width: 901px) {
  .page-projects .projects-areas__item--closing {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    column-gap: 12rem;
    align-items: start;
  }

  /* El titulo es ahora un item de grid junto al contenido, no el
     primer elemento apilado encima de el -- se retira su margin-bottom
     (era la separacion vertical hacia el texto, sin funcion en este
     layout horizontal). Tamano/peso/color/tipografia sin cambio. */
  .page-projects .projects-areas__item--closing .projects-areas__title {
    margin: 0;
  }

  /* Agrupa todo lo que antes eran hijos directos del articulo (texto,
     "Que evaluamos", variables, tecnologia/logos, enlace) en una sola
     columna -- mismo spacing interno entre ellos (margenes sin tocar),
     con flex-column para que el enlace conserve su margin-top:auto si
     el bloque llegara a estirarse. */
  .page-projects .projects-areas__closing-content {
    display: flex;
    flex-direction: column;
  }
}

/* Entrada escalonada (mismo [data-reveal-group] + .reveal-up genérico
   que ya usan otros grids del sitio) — se fija la duración en 700ms
   (dentro de 600-800ms pedido) para que quede notoriamente más rápida/
   discreta que la declaración editorial de arriba (1150-1400ms) y no
   compita con ella. Se anima el bloque completo como una sola unidad
   (fade + desplazamiento pequeño), no cada línea interna por separado
   — stagger mínimo, sin competir con la animación principal. */
.page-projects .projects-areas__item.reveal-up {
  transition-duration: 700ms;
}

/* ---------- Scrollytelling: "Nuestras áreas de integración" por progreso de scroll ----------
   Con JS + escritorio, main.js toma el control visual de
   .projects-integration__header y de cada .projects-areas__item
   (opacity + transform vía inline style, recalculados cada frame según
   la posición real de cada elemento respecto al viewport — sin
   sticky/track: el contenido es demasiado alto para fijarlo en una
   sola pantalla sin cortarlo ni añadir scroll interno, ver nota en
   main.js). Se anula aquí la transition CSS de .reveal-up por el mismo
   motivo que en la declaración editorial de arriba — evita que cada
   cambio inline intente animarse solo. Fuera de este contexto (sin JS,
   <901px, o prefers-reduced-motion) esta regla no aplica: header y
   áreas siguen su .reveal-up normal, sin cambios. */
@media (min-width: 901px) {
  .js-projects-story-ready .page-projects .projects-integration__header.reveal-up,
  .js-projects-story-ready .page-projects .projects-areas__item.reveal-up {
    transition: none;
  }
}

/* ---------- Header: sin tratamiento especial (corrección) ----------
   El header ya NO vive sobre el video (que ahora es un elemento
   contenido en la columna derecha del hero, no un fondo full-bleed) —
   se retira por completo el velo/blur tipo "vidrio esmerilado" y los
   text-shadow de logo/nav que existían para dar contraste sobre video.
   El header de Proyectos ahora se comporta exactamente igual que en
   las demás páginas (Acerca de, Insumos, Servicios): sin selectores
   propios de .page-projects para .site-header, hereda 100% el
   comportamiento de layout.css, que no se tocó. */

/* ---------- Transición suave de .section--alt (alternativa page-scoped, sin tocar base.css) ----------
   .projects-integration es la única .section--alt de esta página y ya
   no vive dentro del video — su propia regla más arriba
   (section.projects-integration, con selector de tipo para ganar en
   especificidad) anula el background-image de aquí abajo, así que este
   degradado de bordes no le genera una franja blanca. */
.page-projects .section--alt {
  position: relative;
  background-image:
    linear-gradient(to bottom, var(--color-paper), transparent 48px),
    linear-gradient(to top, var(--color-paper), transparent 48px);
  background-repeat: no-repeat;
  background-position: top, bottom;
  background-size: 100% 48px, 100% 48px;
}

/* ---------- Línea central difuminada entre secciones (mismo efecto que Sustrato Hidropónico) ---------- */
.page-projects main .section + .section {
  position: relative;
}

.page-projects main .section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0.5);
  width: min(60%, 480px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-sand), transparent);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-elegant),
    transform var(--duration-slow) var(--ease-elegant);
}

.page-projects main .section + .section.is-visible::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .page-projects main .section + .section::before {
    transition: none;
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Reubicación: "Nuestras áreas de integración" es hermana de
   .project-story-track ("Un proyecto, una solución a la medida"),
   ambas .section directas de <main>.
   Entre .projects-hero y .project-story-track la línea se desactiva
   con .projects-hero + .project-story-track::before (ver esa regla
   junto al hero, más arriba): esa transición es solo espacio negativo.
   Entre .project-story-track y .projects-integration también se
   desactiva — separación únicamente por espacio, sin líneas, en toda
   la mitad inferior de la página. Mismo truco sin conflicto de
   especificidad que la regla del hero (display, una propiedad que la
   regla genérica de arriba nunca fija). */
.page-projects .project-story-track + .projects-integration::before {
  display: none;
}

/* ---------- Tarjetas de proyecto (retiradas en el Paso 2) ----------
   Las 5 tarjetas con caja/borde/expansión por click se sustituyeron por
   bloques editoriales abiertos (.projects-areas, ver arriba). Al no
   quedar en el HTML ningún elemento .card/.card-grid/.card-expand-overlay,
   se retiró también este bloque de CSS (hover, FLIP de expansión,
   overlay, cierre) por quedar sin uso — es CSS específico de esta
   página, no de la lógica general del sitio (main.js no se tocó: su
   propio guard "if (expandableCards.length && cardOverlay)" ya
   contempla el caso de cero tarjetas y queda inactivo sin errores). */

/* ---------- CTA: profundidad sutil (sin tocar layout.css) ---------- */
.page-projects .cta-section {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(199, 165, 124, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(32, 28, 25, 0.18) 0%, rgba(32, 28, 25, 0) 35%, rgba(32, 28, 25, 0.22) 100%);
}