/* ==========================================================================
   TASS — home-about.css
   Estilos EXCLUSIVOS de las páginas Inicio (.page-home) y
   Acerca de TASS (.page-about).

   Este archivo solo se enlaza desde index.html y acerca-de.html.
   No se modifica base.css, layout.css ni components.css: todas las
   reglas de aquí son nuevas y van prefijadas con .page-home / .page-about
   para no afectar a ninguna otra página del sitio.
   ========================================================================== */

/* ==========================================================================
   INICIO (.page-home)
   ========================================================================== */

/* ---------- Hero: centrado vertical real en el viewport ----------
   El header (.site-header, layout.css) ahora es "fixed" y transparente
   sobre el hero (no reserva espacio en el flujo, ver layout.css), así que
   ya no hace falta restar su altura: el hero ocupa el viewport completo y
   el header flota encima. min-height:100vh mantiene el bloque centrado
   sin depender de padding arbitrario.

   Corrección de altura en zoom out (desktop, ≥901px): 100vh se calcula en
   píxeles CSS del viewport, y esos píxeles CSS crecen a medida que se aleja
   el zoom del navegador (a menor zoom, más "píxeles CSS" caben en la misma
   pantalla física) — por eso el Hero se volvía cada vez más alto al alejar
   el zoom (80%, 67%, 50%...), sin límite. clamp(560px, 100vh, 900px)
   conserva exactamente el mismo resultado que antes en el rango normal de
   escritorio (100vh en una ventana de ~700-900px de alto sigue devolviendo
   100vh, sin cambio visual a 100%/90%/80% de zoom en resoluciones típicas
   como 1366×768), pero deja de crecer pasado 900px (el techo se activa con
   el zoom out o en monitores con un viewport inusualmente alto) y nunca baja
   de 560px (piso, para ventanas muy bajas) — sigue mostrando header, H1,
   subtítulo y la burbuja de scroll sin recortes en ambos extremos. El
   contenido del Hero (.hero-content, más abajo) sigue centrado por
   align-items:center dentro de esta misma caja, así que su distribución
   vertical no necesitó ningún ajuste aparte; la burbuja de scroll
   (.hero-scroll-cue, más abajo) se posiciona relativa a esta caja
   (position:relative en .page-hero, layout.css), así que también sigue
   ubicada correctamente sin importar cuál de los tres valores del clamp
   esté activo. */
/* Ronda "refinamiento responsive": el Hero se sentía como una pantalla
   completa vacía (a 1440×900 la altura real llegaba a saturar el techo
   del clamp, 900px = el 100% del viewport). 100vh → 82vh reduce la
   altura de forma proporcional en cualquier alto de viewport (no solo
   recorta un techo puntual): a 1440×900 pasa a 738px, un -18% dentro
   del 15-20% pedido; a 1366×768 (768px antes) pasa a 630px, también
   -18% — la misma reducción relativa en cualquier resolución. El techo
   baja de 900px a 760px (mismo criterio, para que viewports muy altos
   o zoom-out extremo no vuelvan a inflar el Hero) y el piso se
   mantiene en 560px (protección de pantallas muy bajas, sin cambios).
   H1, subtítulo, alineación centrada, fondo, tipografía, animación y
   flecha de scroll no cambian — solo el alto total de la caja. */
.page-home .page-hero {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 760px);
  padding: var(--space-lg) 0;
}

@media (max-width: 900px) {
  .page-home .page-hero {
    /* Ronda "refinamiento responsive": mismo criterio que escritorio
       (arriba) — 100vh → 82vh, misma reducción proporcional (~18%,
       dentro de 15-20% pedido) en cualquier alto de pantalla, con piso
       (480px) y techo (700px) para no comprimir de más en móviles muy
       bajos ni inflarse en tablets muy altas. Padding vertical también
       baja (32px → 20px por lado) como parte de "reorganizar el
       espacio del hero móvil" — con el contenido centrado por
       align-items, esto no desplaza el H1/subtítulo, solo reduce el
       aire disponible alrededor cuando el contenido + padding se
       acerca al piso del clamp. */
    min-height: clamp(480px, 82vh, 700px);
    padding: 20px 0;
  }
}

/* ---------- Hero → Nuestros servicios: costura sin divisor ----------
   "Greenleaf" (corrección de costura, docs/TASS-VISUAL-SYSTEM.md): aquí
   vivía una línea sand estática de 1px, centrada, exactamente en bottom:0
   del hero — el "pequeño divisor visible" reportado en el centro de la
   transición. Se retira por completo: la separación entre Hero y
   "Nuestros servicios" debe producirse solo por espacio negativo y la
   aparición del título, nunca por una línea. (No confundir con
   .hero-scroll-cue, el botón de scroll — es un elemento completamente
   distinto, con su propia posición a 2.5rem del fondo, y no se tocó.) */

/* ---------- Hero: fondo estático (CSS, sin video) ----------
   Quinto ajuste de tono: ahora el degradado va oscureciendo de arriba
   hacia abajo, no al revés. Empieza en var(--color-off-white) (claro,
   junto al header) y llega a un café bastante más profundo (mezcla de
   var(--color-espresso) sobre una base arena-crema, vía color-mix —
   ningún color ajeno a la paleta) en la franja inferior del hero.
   El tramo 40%→72% se mantiene PLANO en el mismo tono medio (mezcla de
   20% var(--color-sand)) a propósito: con el hero centrado
   verticalmente (align-items:center + min-height:100vh, arriba), el
   bloque título+subtítulo puede ocupar tranquilamente ese 40%-72% de
   alto en viewports normales — si el oscurecimiento fuera una rampa
   continua sin este plateau, el subtítulo (más abajo que el título)
   habría caído en una zona ya notablemente más oscura y su contraste
   bajaba de 4.5:1 a ~3.8:1 (verificado). Con el plateau, título y
   subtítulo siguen sobre el mismo tono ya comprobado (~9.6:1 / ~4.5:1+).
   El oscurecimiento real ocurre en el 72%→100% final, ya debajo del
   texto. El velo del overlay (abajo) se ensanchó de 36px a 90px para
   que ese salto final (ahora mucho más marcado: café profundo → blanco)
   se siga viendo como una transición, no un corte, hacia "Nuestros
   servicios".

   Sexto ajuste — capa de volumen añadida arriba de todo (refinamiento
   "Hero premium"): una elipse muy suave de luz cálida cayendo desde el
   borde superior (mismo tono casi-blanco que el velo del glow central,
   rgba(253,251,246,...)), pensada para leerse como una única superficie
   continua entre el header (transparente/off-white) y el hero, no como
   dos fondos distintos — refuerza el punto 6 (integración de header) y
   le da al conjunto una sensación de volumen/luz muy tenue sin añadir
   ninguna forma figurativa. Solo visible de cerca. */
/* "Greenleaf" (iteración v3, docs/TASS-VISUAL-SYSTEM.md): se retira por
   completo la capa verde (era ya casi imperceptible, pero cero verde es
   más seguro que "casi cero") y se aplana drásticamente el resto —
   opacidades bajadas ~65-75% y el tramo café del degradado principal
   pasa de una mezcla de sand al 20%/espresso al 20% a solo 6-8%, para
   que ~95% de la superficie se perciba como crema uniforme y la
   atmósfera restante sea casi imperceptible, tal como se pidió. Mismos
   stops/posiciones que antes (no se toca la estructura, solo la
   intensidad) para no alterar dónde vive cada zona de tono.

   Corrección de costura Hero → Nuestros servicios: el último stop (100%,
   el borde inferior real del hero) pasa de un tono todavía café/tierra
   (color-mix de espresso+sand) a var(--color-paper) exacto — el mismo
   token que usa el fondo de "Nuestros servicios" (ver más abajo). Antes,
   aunque el velo del overlay (más abajo) desvanecía ese café hacia blanco
   en los últimos 90px, el degradado de base seguía siendo tierra debajo,
   y el ojo alcanzaba a leer una franja de transición perceptible antes
   del corte de sección. Con el degradado terminando ya en paper, no hace
   falta "rescatar" el color en el último tramo — Hero y Servicios llegan
   exactamente al mismo blanco.

   Ajuste puntual de intensidad (~12%, un solo factor aplicado a los dos
   componentes café/sand de este degradado — no al óvalo casi-blanco de
   arriba, que es "crema limpio", no "café"): el mix de sand del plateau
   40%→72% baja de 6% a 5.3%, y el círculo sand del rincón superior
   izquierdo de 0.06 a 0.053 de opacidad. La atmósfera se conserva —
   solo se atenúa, sin tocar tono, estructura ni stops.

   Segundo ajuste (otro ~15% adicional, mismo criterio): plateau 5.3% →
   4.5%; círculo 0.053 → 0.045.

   Unificación de fondo claro (docs/TASS-VISUAL-SYSTEM.md): el plateau
   40%→72% pasa de mezclarse sobre --color-off-white a mezclarse sobre
   --color-linen (el nuevo fondo base compartido por Hero/Servicios/
   Estadísticas/Acerca), y el último stop (100%, borde inferior real)
   pasa de --color-paper a --color-linen exacto — coincide ahora con el
   fondo de "Nuestros servicios" (ver más abajo), no solo con un blanco
   aproximado. El 0% inicial se deja en --color-off-white a propósito:
   es la franja que se funde con el header (transparente/off-white,
   "Header sobre el Hero de Inicio", más abajo), un asunto aparte de la
   costura hacia Servicios y fuera de este cambio. */
.page-home .page-hero {
  background-image:
    radial-gradient(ellipse 65% 42% at 50% 0%, rgba(253, 251, 246, 0.18), transparent 68%),
    radial-gradient(circle at 18% 15%, rgba(199, 165, 124, 0.045), transparent 58%),
    linear-gradient(180deg,
      var(--color-off-white) 0%,
      color-mix(in srgb, var(--color-sand) 4.5%, var(--color-linen)) 40%,
      color-mix(in srgb, var(--color-sand) 4.5%, var(--color-linen)) 72%,
      var(--color-linen) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: cover, cover, 100% 100%;
}

/* Velo cálido MUY sutil (no una capa blanca sólida): apoyo mínimo de
   integración para el H1/subtítulo centrado sobre el fondo más profundo
   de arriba, y refuerzo extra de contraste ahí (más blanco = más
   contraste contra el texto café oscuro, nunca menos). Recentrado a 50%
   (antes 18%, pensado para el texto alineado a la izquierda de una
   versión anterior del hero; el texto ahora está centrado) y con
   opacidad moderada para no "lavar" de vuelta el tono más profundo del
   fondo justo donde se supone que debe notarse. Se quitó el lavado
   lateral en 90deg (ya no aplica con texto centrado); el fundido inferior
   hacia var(--color-paper) se conserva (ver comentario debajo), es el
   que entrega la costura suave hacia "Nuestros servicios" junto con el
   propio degradado de arriba.
   Viñeta agregada como capa intermedia: oscurece muy levemente las
   esquinas/bordes (var(--color-ink), el neutro más oscuro de la
   paleta — no un café con tinte, una viñeta se lee como profundidad,
   no como color) y queda totalmente transparente en el 55% central,
   justo donde vive el bloque título+subtítulo, así que no le resta
   nada de contraste al texto. */
/* "Greenleaf" (iteración v3): resplandor central y viñeta bajados a una
   fracción de su intensidad anterior (0.28/0.13 → 0.10/0.04 el óvalo
   cálido; 0.22 → 0.08 la viñeta de esquinas) — quedan como aire, no como
   forma visible. El fundido inferior hacia --color-paper se conserva
   sin cambios: no es atmósfera decorativa, es la costura estructural
   hacia "Nuestros servicios".

   Corrección de costura (más abajo): el fundido hacia paper pasa a ser
   la PRIMERA capa listada (en CSS, con múltiples background-image, la
   primera es la que se pinta más arriba/encima) en vez de la última.
   Antes, la viñeta de esquinas (rgba(32,28,25,0.08) en su 100%) se
   pintaba POR ENCIMA del fundido y seguía tiñendo muy levemente de gris-
   tinta el borde inferior justo donde el fundido ya debía leerse como
   paper puro — una diferencia pequeña pero perceptible frente al blanco
   liso de "Nuestros servicios". Con el fundido encima, el tramo final
   (ahora 160px, antes 90px, para un cierre más gradual) cubre por
   completo la viñeta y el resplandor debajo.

   Unificación de fondo claro: el fundido ya no apunta a --color-paper
   sino a --color-linen, para coincidir exactamente con el nuevo fondo
   compartido de "Nuestros servicios" (antes ambos coincidían en blanco
   puro; ahora coinciden en linen). */
.page-home .page-hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 0%, transparent 45%, color-mix(in srgb, var(--color-linen) 55%, transparent) 80%, var(--color-linen) 100%),
    radial-gradient(ellipse 1000px 620px at 50% 45%, rgba(253, 251, 246, 0.10) 0%, rgba(253, 251, 246, 0.04) 45%, rgba(253, 251, 246, 0) 78%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(32, 28, 25, 0.08) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom, center, center;
  background-size: 100% 160px, auto, cover;
}

@media (max-width: 900px) {
  .page-home .page-hero-video__overlay {
    background-image:
      linear-gradient(to bottom, transparent 0%, transparent 45%, color-mix(in srgb, var(--color-linen) 55%, transparent) 80%, var(--color-linen) 100%),
      linear-gradient(180deg, rgba(253, 251, 246, 0.16) 0%, rgba(253, 251, 246, 0.08) 30%, rgba(253, 251, 246, 0.04) 55%, rgba(253, 251, 246, 0) 85%),
      radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(32, 28, 25, 0.08) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: bottom, 0 0, center;
    background-size: 100% 160px, auto, cover;
  }
}

/* ---------- Hero: grano fotográfico sutil ----------
   Textura de ruido (SVG feTurbulence embebido como data-URI, técnica
   estándar de "film grain" en CSS) sobre todo el hero, para que el
   fondo se sienta más fotográfico/premium y menos "degradado CSS
   plano" — refuerzo del carácter orgánico/atmosférico del hero frente
   a la retícula técnica y estática de "Nuestros servicios". z-index:0
   (mismo nivel que el velo/overlay, MUY por debajo de
   .page-hero-inner en z-index:1) así que nunca toca ni suaviza el
   texto: el grano queda estrictamente en las capas de fondo. Estático,
   sin animación — el grano "vibra" visualmente por su propia
   naturaleza aleatoria, no necesita moverse. */
.page-home .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  /* "Greenleaf" (iteración v3): 0.08 → 0.03 — el grano deja de leerse
     como textura y queda como el último 5% de "no perfectamente liso",
     sin competir con la superficie crema uniforme. */
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* ---------- Hero: burbuja de scroll (botón real) ----------
   Rediseño completo: antes era un pseudo-elemento (::before) con
   loop de reaparición por inactividad; ahora es un <button> real
   (.hero-scroll-cue, ver index.html, dentro de .page-hero) porque el
   click/hover pedidos necesitan un elemento de verdad — un
   pseudo-elemento no se puede aislar como blanco de clic independiente
   de su contenedor, ni recibir foco de teclado. La lógica de
   aparición/desaparición por scroll y el clic-para-bajar viven en
   main.js ("BURBUJA DE SCROLL DEL HERO").

   Vidrio esmerilado, mismo lenguaje que .site-header.is-scrolled y el
   velo del hero: fondo blanco translúcido + backdrop-filter blur +
   borde claro + sombra ligera. Sin colores nuevos: blanco + espresso
   (el ícono), ambos ya usados en el resto del hero.

   "Hero premium" (ajuste #7): más discreto — un poco más chico (40x64 →
   34x54), fondo/borde bajados de opacidad y el borde pasa de blanco a
   un tono café/espresso muy sutil (integrado con la paleta en vez de
   "vidrio" puro), sombra más corta y tenue. Sigue siendo un <button>
   real (comportamiento/click intactos, ver main.js), solo cambia su
   peso visual: debe leerse como señal de navegación, no como elemento
   decorativo protagonista.

   "Greenleaf" (iteración v3): un paso más de silencio — borde, fondo y
   sombra bajados otra vez (~50%), y el blur del vidrio reducido (8px →
   5px) para que el contenedor casi desaparezca en reposo y solo se
   note al aparecer/interactuar (hover/focus siguen intactos, más abajo). */
.page-home .hero-scroll-cue {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%) translateY(8px);
  width: 34px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(70, 49, 31, 0.08);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 3px 8px rgba(70, 49, 31, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-elegant),
    transform 350ms var(--ease-elegant),
    box-shadow 250ms ease;
}

.page-home .hero-scroll-cue.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.page-home .hero-scroll-cue:hover,
.page-home .hero-scroll-cue:focus-visible {
  box-shadow: 0 5px 12px rgba(70, 49, 31, 0.1);
}

.page-home .hero-scroll-cue.is-visible:hover,
.page-home .hero-scroll-cue.is-visible:focus-visible {
  transform: translateX(-50%) translateY(0) scale(1.05);
}

.page-home .hero-scroll-cue:focus-visible {
  outline: 2px solid var(--color-espresso);
  outline-offset: 3px;
}

.page-home .hero-scroll-cue__icon {
  width: 16px;
  height: 16px;
  /* Espresso suavizado (mezcla con transparente), un paso más tenue que
     antes (75% → 58%) — "Greenleaf" (iteración v3). */
  color: color-mix(in srgb, var(--color-espresso) 58%, transparent);
}

/* "Greenleaf" (iteración v3): se retira el rebote en loop infinito —
   era una segunda firma de movimiento continuo compitiendo con la única
   atmósfera permitida (el resplandor del hero). El botón conserva su
   entrada por fade-in/translateY (arriba, .is-visible) y su respuesta a
   hover/focus (abajo): sigue funcionando como señal de scroll, solo deja
   de moverse por sí solo mientras nadie interactúa con él. */

@media (max-width: 900px) {
  .page-home .hero-scroll-cue {
    width: 30px;
    height: 46px;
    bottom: 1.75rem;
  }

  .page-home .hero-scroll-cue__icon {
    width: 13px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-scroll-cue {
    transition: opacity 1ms, box-shadow 1ms;
  }

  .page-home .hero-scroll-cue.is-visible:hover,
  .page-home .hero-scroll-cue.is-visible:focus-visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- Hero: título y subtítulo sobre el fondo estático ----------
   Mismo color que cualquier título/párrafo del sitio (var(--color-espresso)
   / var(--color-graphite), ver cada regla abajo) — ya no una paleta propia
   de la Slide 1. Alineación a la izquierda y ancho de columna (640px)
   sin cambios; tamaño de fuente ajustado a 56–64px desktop / 32–36px
   móvil (H1) y 18–20px desktop / 16px móvil (subtítulo), ver los clamp()
   de cada regla y el override en el media query de abajo. El efecto 3D
   se conserva pero reducido a 1-2 capas muy suaves (ver cada regla), en
   vez de las 6/4 capas anteriores.
   ---------- */
.page-home .hero-content {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  /* .page-hero-inner (más abajo) ya está centrado en la página vía
     .container (margin:0 auto, base.css); esto centra el bloque
     título+subtítulo dentro de esa columna, y el text-align centra el
     texto envuelto en varias líneas dentro de cada uno. */
  margin: 0 auto;
  text-align: center;
  /* "Hero premium" (ajuste #4): el hero sigue centrado verticalmente
     (align-items:center + min-height:100vh en .page-hero) pero se sube
     el bloque ~6.5% de la altura del viewport para acortar el vacío
     entre el header y el H1 sin tocar la estructura de ninguno de los
     dos. El glow (::before, más abajo) es un pseudo-elemento de este
     mismo bloque, así que sube junto con el texto automáticamente. */
  /* "Greenleaf" (evolución v2, docs/TASS-VISUAL-SYSTEM.md): desplazamiento
     reducido de -6.5vh a -4vh — el bloque queda más centrado en el
     viewport, con aire más parejo arriba y abajo, en vez de pegado al
     header. Objetivo: espacio negativo que se sienta intencional, no
     contenido faltante. */
  transform: translateY(-4vh);
}

@media (max-width: 900px) {
  .page-home .hero-content {
    /* Mismo criterio que en desktop, con margen algo más conservador
       (pantalla más baja en términos relativos). */
    transform: translateY(-3vh);
  }
}

/* El H1/subtítulo se suben explícitamente a z-index:2 (por encima del
   resplandor, z-index:1 más abajo) para que el orden de pilas quede
   inequívoco en DevTools, en vez de depender del comportamiento
   implícito de un z-index negativo dentro del flujo normal. */
.page-home .home-hero__title,
.page-home .home-hero__subtitle {
  position: relative;
  z-index: 2;
}

/* Resplandor café, ahora como una franja ancha y difusa (no una mancha
   redonda) que recorre la página: vive en el hero y se repite, con la
   misma receta visual y la misma animación de deriva (@keyframes
   tass-hero-glow-drift, reutilizada por las 3 secciones más abajo), en
   las dos secciones claras siguientes ("Nuestros servicios" y "Acerca
   de nosotros") — así "reaparece" al hacer scroll por las zonas de fondo
   claro, tal como se pidió. No se implementó como una única capa
   position:fixed cubriendo todo el <body>: esas secciones tienen su
   propio background-color/-image OPACO (paper/off-white sólido, sin
   alpha), así que una capa puesta detrás de TODO el documento quedaría
   100% tapada en todas partes, incluido el propio hero — literalmente
   invisible, no solo "oculta en las secciones con fondo sólido". Cada
   instancia, en cambio, vive DENTRO de su sección (misma técnica ya
   usada para el hero) para poder pintarse por encima del fondo de esa
   sección y por debajo de su contenido — lo que si funciona. Las
   secciones oscuras (Experiencia y alcance, CTA final) no llevan
   instancia: ahí SÍ se ocultaría igual que la de una capa global, así
   que se omite a propósito en vez de agregar una que nunca se vería.
   Tono más claro (sand, no espresso), opacidad 0.13–0.22, blur 100–140px,
   forma de banda (mucho más ancha que alta) vía inset asimétrico. */
.page-home .hero-content::before {
  content: "";
  position: absolute;
  top: 50%;
  /* Antes en px fijos (340/-170/-350): en viewports angostos o con zoom
     out (más CSS px visibles), esos valores no escalaban y el glow se
     veía desproporcionado respecto al hero. vh/vw lo atan al tamaño real
     del viewport (el hero mide min-height:100vh, ver arriba), así que
     crece/encoge junto con el resto — ya no hace falta un breakpoint
     aparte para móvil, solo el blur (más abajo, por rendimiento). */
  height: 34vh;
  margin-top: -17vh;
  left: -20vw;
  right: -20vw;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  /* Opacidad subida un poco (0.22→0.28 / 0.13→0.16) respecto a la
     versión anterior: el nuevo fondo del hero (más arriba) ya no es
     blanco/off-white liso, es un beige-café más saturado, así que el
     glow necesitaba un poco más de fuerza para seguir leyéndose como
     una banda de luz sobre ese tono, en vez de perderse en él.
     Segundo acento, muy sutil, en var(--color-water) (el agua del
     logotipo): una segunda capa de radial-gradient, más pequeña y
     descentrada (30% 40%, no 50% 50%, para que no anule al café
     encimándose exacto), al 10% de opacidad — una atmósfera de dos
     tonos en vez de un solo color plano, sin perder sobriedad. Al ser
     una sola capa de fondo en el mismo elemento, se mueve junto con el
     café en el mismo translateX de la animación de deriva. */
  /* "Greenleaf" (evolución v2): se retira la segunda capa (acento agua)
     — una sola firma de movimiento ambiental, "extremadamente sutil",
     en vez de una atmósfera de dos tonos.
     Iteración v3: opacidad bajada otra vez (0.20/0.11 → 0.09/0.05) — la
     única firma de movimiento que queda debe leerse como aire en
     desplazamiento, nunca como una banda de luz visible. */
  /* Ajuste puntual de intensidad (~12%, mismo factor que el degradado de
     fondo de arriba): 0.09/0.05 → 0.08/0.044. Sigue siendo la única firma
     de movimiento ambiental del Hero, solo un poco más tenue. */
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(199, 165, 124, 0.08) 0%,
      rgba(199, 165, 124, 0.044) 45%,
      rgba(199, 165, 124, 0) 75%);
  filter: blur(120px);
  opacity: 0;
  animation:
    tass-fade-in 800ms var(--ease-elegant) both,
    tass-hero-glow-drift 10s ease-in-out infinite alternate;
  animation-delay: 100ms, 100ms;
}

/* translateX puro (nunca left/right) para que el navegador lo resuelva
   en la capa de composición, sin recalcular layout/reflow en cada frame.
   -15%↔15% con alternate = va y regresa suave, sin saltos. */
@keyframes tass-hero-glow-drift {
  from { transform: translateX(-15%); }
  to { transform: translateX(15%); }
}

@media (max-width: 900px) {
  .page-home .hero-content::before {
    /* Solo el blur baja en móvil (costo de GPU); tamaño/posición ya
       escalan solos vía vh/vw, arriba. */
    filter: blur(90px);
  }
}

/* El panel translúcido que antes vivía aquí detrás del H1/subtítulo se
   quitó: con texto en var(--color-espresso)/var(--color-graphite) sobre
   el fondo claro de arriba, el contraste ya es suficiente sin panel —
   igual que "Acerca de" y "Nuestros servicios", que tampoco usan ningún
   panel detrás de sus títulos. */

.page-home .home-hero__title {
  /* Ancho pensado para que el texto quiebre en 2 líneas en vez de 1 o
     3; text-wrap:balance reparte el corte entre ambas líneas lo más
     parejo posible (en vez del salto "greedy" por defecto, que suele
     dejar una línea larga y otra muy corta). min(880px, 90vw) en vez
     de un px fijo: en viewports angostos o con zoom out, el límite
     real pasa a ser el 90% del ancho visible, no un número absoluto
     que no cede. Ampliado de 820/88vw a 880px/90vw (el padre
     .page-hero-inner tolera hasta 900px/92vw) para darle al tamaño de
     fuente de abajo un poco más de aire y que las 2 líneas no se
     conviertan en 3. */
  /* "Greenleaf" (evolución v2): ancho ampliado ~9% (880px → 960px),
     proporcional al aumento de tamaño de fuente de abajo, para conservar
     el mismo salto de línea en 2 renglones (ya balanceado por
     text-wrap:balance) en vez de dejar que el texto crezca sin control
     de columna. */
  max-width: min(960px, 90vw);
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
  /* Más aire entre título y subtítulo (antes 1.25rem) — parte del
     objetivo de más espacio negativo alrededor del bloque. Ronda
     "refinamiento responsive": este valor queda como el de escritorio;
     móvil/tablet tiene su propio override más abajo (@media
     max-width:900px), más compacto, dentro del objetivo de reorganizar
     el espacio del hero móvil. */
  margin-bottom: 1.5rem;
  /* Tamaño de fuente (móvil/tablet, <901px): ligero aumento (~3-5%)
     respecto a la versión anterior (clamp 1.8rem→2.05rem), manteniendo
     el mismo criterio conservador: intentos previos más grandes partían
     el título en 3-4 líneas en teléfonos angostos. */
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.15rem);
  /* 1.22 → 1.24: un pelo más de aire entre las 2 líneas (texto centrado
     vía text-wrap:balance, arriba) para que la primera no se sienta tan
     dominante sobre la segunda. */
  line-height: 1.24;
  /* -0.015em → -0.01em: tracking un poco menos apretado, para una
     sensación ligeramente más calmada/editorial sin cambiar el peso de
     fuente (Manrope solo carga 400/500/600/700 — bajar a 600 sí sería
     cambiar la tipografía, que se pidió conservar). */
  letter-spacing: -0.01em;
  /* "Greenleaf" (iteración v3): 700 → 600 — a este tamaño, 700 se sentía
     corporativo/pesado frente a la referencia; 600 (Manrope ya carga este
     peso, no es tipografía nueva) conserva presencia a gran escala con
     una sensación notablemente más editorial. */
  font-weight: 600;
  /* Mismo color que cualquier h1/h2/h3 del sitio (regla base, base.css)
     y que los títulos de "Nuestros servicios"/"Acerca de": la Slide 1
     ya no usa una identidad cromática propia. */
  color: var(--color-espresso);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Octavo ajuste ("Hero premium — efecto 3D más material"): se
     mantienen las mismas 2 capas de siempre, en el mismo café/espresso
     de antes — solo se suaviza la elevación (8px/20px/0.1 →
     6px/14px/0.08) para que se lea como profundidad tenue apoyada en
     el fondo, no como el texto flotando por encima de él. (Se probó
     sumar un filo claro casi-blanco arriba para simular un bisel/luz
     rasante, pero corría el tono del título fuera del café — se quitó
     a petición del cliente: el tono debe quedarse exactamente en el
     café de antes.) */
  text-shadow:
    0 1px 2px rgba(70, 49, 31, 0.16),
    0 6px 14px rgba(70, 49, 31, 0.08);
}

/* Ronda "refinamiento responsive": espacio título→subtítulo más
   compacto en móvil/tablet (24px → 16px) — parte de "reorganizar el
   espacio del hero móvil" sin tocar el texto, tamaño ni peso del H1.
   Escritorio (≥901px) conserva su valor de siempre (1.5rem, arriba). */
@media (max-width: 900px) {
  .page-home .home-hero__title {
    margin-bottom: 1rem;
  }
}

.page-home .home-hero__subtitle {
  /* "Greenleaf" (iteración v3): el intento anterior (440px) obligaba al
     copy más largo del sitio a 3 líneas — se amplía a 560px, calculado
     junto con el tamaño de fuente reducido de abajo, para volver a caer
     naturalmente en ~2 líneas en desktop sin tocar el texto. */
  max-width: min(560px, 88vw);
  margin-left: auto;
  margin-right: auto;
  /* Tracking sutil, mismo ajuste editorial de arriba. */
  letter-spacing: 0.005em;
  /* "Greenleaf" (iteración v3): graphite suavizado con off-white (mezcla
     de tokens existentes, no un color nuevo) para restarle protagonismo
     frente al H1 sin sacrificar legibilidad. */
  color: color-mix(in srgb, var(--color-graphite) 80%, var(--color-off-white));
  /* Móvil/tablet: ~15-16px (antes ~16-17px) — un paso más ligero, en
     línea con el menor protagonismo pedido para el subtítulo. */
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Misma lógica que el H1: 1 sola capa, más tenue que la del H1, para
     mantener la jerarquía sin igualar su peso visual. */
  text-shadow: 0 1px 2px rgba(70, 49, 31, 0.12);
}

/* ---------- H1 del Hero: se retira el barrido de brillo en loop ----------
   "Greenleaf" (evolución v2, docs/TASS-VISUAL-SYSTEM.md): .hero-reveal__title
   (base.css, compartida con otras páginas) anima un barrido de brillo
   infinito sobre el título — un efecto continuo que compite por atención
   con el H1, justo lo que se pidió evitar ("el H1 no debe tener un efecto
   continuo que robe atención"). Se anula aquí, solo para Inicio (base.css
   y cualquier otra página que reutilice .hero-reveal__title, como
   insumos-y-servicios.html, no se tocan): se quita el recorte de texto en
   degradado y se conserva únicamente la entrada por fade-up compartida
   (misma animación/tiempos que ya usa .hero-reveal__subtitle). El color
   sigue siendo var(--color-espresso), fijado más abajo en esta misma regla. */
.page-home .home-hero__title.hero-reveal__title {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: tass-fade-up var(--duration-base) var(--ease-elegant) 160ms both;
}

.page-home .page-hero-inner {
  position: relative;
  z-index: 1;
  /* "Greenleaf" (evolución v2): ampliado a 1000px/94vw para acomodar el
     nuevo max-width del título (960px, arriba) sin que el padre lo
     recorte. Mismo criterio de siempre: cede en viewports angostos o
     con zoom out, en vez de un tope absoluto. */
  max-width: min(1000px, 94vw);
}

@media (min-width: 901px) {
  /* "Greenleaf" (evolución v2): el H1 gana ~10-13% de tamaño (antes
     clamp 3.6rem→3.95rem) para dominar claramente la primera pantalla,
     manteniendo la misma proporción de caracteres por línea que antes
     (el max-width de arriba creció en la misma medida) para conservar
     el salto a 2 líneas balanceadas, no forzar 3-4. */
  .page-home .home-hero__title {
    font-size: clamp(3.9rem, 3.1rem + 1.8vw, 4.5rem);
  }

  /* "Greenleaf" (iteración v3): ~17-19px (antes ~20-22px) — junto con el
     max-width ampliado arriba (560px), vuelve a caer en ~2 líneas en
     desktop en vez de 3, y pesa notablemente menos que el H1. */
  .page-home .home-hero__subtitle {
    font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  }
}

/* ---------- Header sobre el Hero de Inicio ----------
   El header (.site-header, layout.css) NO se toca en estructura, logo,
   navegación, botón ni comportamiento: sigue siendo exactamente el mismo
   elemento. Con el Hero ahora claro, el velo de este ::before deja de
   ser un tono café/oscuro y pasa a usar EL MISMO LENGUAJE que ya usa
   .site-header.is-scrolled en todo el sitio (layout.css): velo blanco +
   blur tipo "vidrio esmerilado" (mismo blur(12px) que is-scrolled),
   solo que aquí, en vez de sólido, se desvanece con un mask-image (de
   opaco arriba a transparente abajo) para que nunca se lea como una
   barra sólida independiente, sino como una integración suave con el
   fondo claro de abajo. Solo aplica en el estado transparente inicial
   :not(.is-scrolled); en cuanto el usuario hace scroll y el header gana
   su fondo blanco sólido (.is-scrolled, main.js), esto deja de aplicar
   y el header vuelve a comportarse igual que en el resto del sitio. El
   botón "Solicitar cotización" (.btn-primary, components.css) ya tiene
   fondo café sólido propio, así que no necesita ajuste aparte.
   Logo y nav ya NO llevan drop-shadow/text-shadow de brillo: esos glows
   eran necesarios para leer un logo/menú oscuros sobre un Hero oscuro
   (video/café); con el Hero claro, el logo café y el texto del menú
   (var(--color-ink), layout.css) tienen el mismo contraste que en
   cualquier otra página del sitio sin necesitar ningún tratamiento
   especial — se retiraron en vez de dejarlos sin motivo.

   "Hero premium" (ajuste #6): el velo pasa de blanco puro
   (rgba(255,255,255,...)) a un tono mezclado con var(--color-off-white)
   — el mismo con el que arranca el fondo del hero (ver ".page-hero"
   arriba) — para que no haya ningún salto de tono entre "header
   transparente" y "hero": son literalmente el mismo blanco-crema. El
   mask-image también se alarga (55%→100% pasa a 45%→100%) para que el
   desvanecido sea un poco más largo y gradual, casi imperceptible. */
.page-home .site-header:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-off-white) 60%, white) 0%, color-mix(in srgb, var(--color-off-white) 25%, transparent) 65%, transparent 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

/* ---------- Navegación silenciosa sobre el Hero (solo Inicio) ----------
   "Greenleaf" (evolución v2, docs/TASS-VISUAL-SYSTEM.md): estructura,
   enlaces, destinos y comportamiento del nav NO cambian (layout.css
   intacto) — solo se atenúa su color de reposo (ink → graphite) mientras
   el header está transparente sobre el Hero, para que no compita visualmente
   con el H1. En cuanto el usuario hace scroll (.is-scrolled) el nav vuelve
   a su color normal (ink, layout.css) igual que en el resto del sitio.
   El segundo bloque restaura espresso en hover/foco/página-actual —sin él,
   la mayor especificidad de la regla de reposo (arriba) pisaría esos
   estados y el subrayado dejaría de sentirse "activo" al pasar el mouse. */
.page-home .site-header:not(.is-scrolled) .main-nav a {
  color: var(--color-graphite);
}

.page-home .site-header:not(.is-scrolled) .main-nav a:hover,
.page-home .site-header:not(.is-scrolled) .main-nav a:focus-visible,
.page-home .site-header:not(.is-scrolled) .main-nav a[aria-current="page"] {
  color: var(--color-espresso);
}

/* ---------- Logo del header: animación de entrada (solo Inicio) ----------
   El logo en sí no cambia (tamaño/posición/comportamiento intactos, ver
   layout.css) — únicamente se le agrega una aparición sutil al cargar la
   página, antes que el resto del hero (resplandor en 100ms, título en
   160ms, subtítulo en 320ms, ver .hero-reveal* en base.css). */
.page-home .site-header .logo-link .logo {
  animation: tass-fade-down 560ms var(--ease-elegant) both;
}

@keyframes tass-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .site-header .logo-link .logo {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Anula también la entrada por fade-up que .home-hero__title.hero-reveal__title
     conserva arriba — sin esto, al tener más especificidad que la regla
     equivalente de base.css, seguiría animando pese a la preferencia del
     usuario. El brillo en sí ya está retirado siempre (arriba), con o sin
     reduced-motion. */
  .page-home .home-hero__title.hero-reveal__title {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .page-home .hero-content::before {
    animation: none;
    opacity: 1;
  }

  /* .home-services::after y .home-about::after ya no existen (retirados
     en "Nuestros servicios v2" y en la unificación de fondo claro,
     respectivamente) — nada que anular aquí. */
}

/* ---------- Jerarquía tipográfica de Inicio ----------
   Los H2 de sección (base.css) ya tienen tamaño/color correctos en todo el
   sitio; aquí solo se les suma un poco más de peso y un letter-spacing más
   cerrado, exclusivo de Inicio, para que se sientan más "editoriales" y en
   sintonía con el H1 del Hero — sin tocar base.css ni afectar los H2 de
   ninguna otra página. El H2 de "Nuestros servicios" ya NO comparte esta
   regla: tiene su propio tratamiento (más abajo, "Nuestros servicios v2" —
   Greenleaf); Acerca de y CTA no se tocaron en esta implementación. */
.page-home .home-about__inner h2,
.page-home .home-cta h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ==========================================================================
   NUESTROS SERVICIOS — v5, progreso de scroll continuo
   (docs/TASS-VISUAL-SYSTEM.md, mapa visual de la Home aprobado).
   Reemplaza por completo la v4 (wheel interceptado con preventDefault() +
   máquina de estados "enganchada"/"cooldown"): con scroll muy rápido esa
   máquina de estados podía perder gestos y dejar dos paneles a medio
   camino visibles a la vez — ver "NUESTROS SERVICIOS: PROGRESO DE
   SCROLL" en main.js para el diagnóstico completo. Ahora la interacción
   es scroll 100% nativo en todo momento: aquí solo vive la geometría —
   columna izquierda secundaria (32%) / derecha protagonista (68%), un
   scroller más alto que su stage para que position:sticky (nativo, sin
   JS) decida cuándo se pega y cuándo se libera, y el crossfade
   direccional entre paneles (arriba/abajo según se avance o retroceda,
   calculado por posición de scroll, no por eventos acumulados). Fondo en
   --color-linen, igual que Hero/Estadísticas/Acerca — sin retícula, sin
   resplandores, sin drift, sin fondo propio por servicio.
   ========================================================================== */
/* Ronda "ritmo vertical, servicios→ilustración": el margin-top de
   .home-transition-illustration__img (más abajo) ya está topado en 0px
   (sin márgenes negativos) — como se anticipó en esa misma regla, para
   subir el bloque completo "ilustración + ¿Por qué TASS? + Estadísticas"
   ~40px hace falta tocar este padding-bottom (antes heredado sin
   override propio del default de .section, var(--space-xl): 112px en
   tablet/desktop, 84px en móvil). Único valor tocado: no afecta el
   padding-top de esta sección (arriba) ni nada de su sticky/
   scrollytelling (geometría, alturas, pasos de scroll, crossfade —
   todo eso vive en las reglas de más abajo, sin cambios). El spacing
   interno del bloque que sube (ilustración→pregunta, pregunta→
   estadísticas) tampoco se toca: sube como una sola unidad por flujo
   normal. Reducción proporcionalmente menor en tablet/móvil, mismo
   criterio ya usado en .home-stats/.home-about (ver @media abajo). */
.page-home .home-services {
  background-color: var(--color-linen);
  padding-bottom: 72px;
}

@media (max-width: 900px) {
  .page-home .home-services {
    /* 112px (default de .section en este rango) - 27px, proporcional a
       la reducción de escritorio (-40px). */
    padding-bottom: 85px;
  }
}

@media (max-width: 700px) {
  .page-home .home-services {
    /* 84px (default de .section en móvil) - 18px, proporcional a la
       reducción de escritorio, más conservadora. */
    padding-bottom: 66px;
  }
}

/* ---------- Base / progressive enhancement (sin JS, tablet, móvil) ---------- */

.page-home .home-services__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Ronda "refinamiento responsive": el gap base (112px, var(--space-xl))
   es el que se usa TAMBIÉN como columna-gap del grid de escritorio con
   JS (.js-services-ready, @media min-width:901px, más abajo) — no se
   toca ahí. Aquí se agrega un override exclusivo de móvil/tablet
   (<901px, donde la sección sigue siendo una lista apilada normal, sin
   sticky ni grid) para acortar el hueco entre el texto introductorio y
   "01 / 04" — la queja puntual de esta ronda — y entre cada tarjeta
   apilada. Nada del sistema de escritorio (sticky, alturas, pasos,
   JS) se ve afectado por este bloque. */
@media (max-width: 900px) {
  .page-home .home-services__stage {
    gap: 2.75rem;
  }

  .page-home .home-services__panels {
    gap: 3rem;
  }
}

.page-home .home-services__intro h2 {
  /* Más contenido que en la v3 (2.25–3.25rem): la columna izquierda debe
     ser claramente secundaria frente al panel activo. Mobile/tablet
     (<901px) sin cambios; el aumento de protagonismo pedido vive en el
     override de escritorio, más abajo (@media min-width:901px). */
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Ajuste de composición: más protagonismo para "Nuestros servicios" en
   escritorio (~44-48px) — debe ser el primer elemento que atrae la
   mirada en la columna izquierda, por delante del texto de
   introducción. Mismo font-weight (600, "medium", no bold) y mismo
   color (heredado del H2 base) de siempre — solo cambia el tamaño. */
@media (min-width: 901px) {
  .page-home .home-services__intro h2 {
    /* Ajuste visual (ronda "microajustes finales 2"): +~11% respecto al
       valor real anterior (clamp 2.75rem→3rem, ~44-48px, ~47px en
       1440px de ancho) — la izquierda debía recuperar algo de
       protagonismo frente a la imagen del panel derecho, ahora bastante
       grande. Mismo font-weight (600), mismo color heredado, mismo
       line-height relativo (1.02) y misma cantidad de líneas (2):
       "Nuestros"/"servicios" siguen cabiendo de sobra en el ancho de la
       columna izquierda (~31fr del stage) a este tamaño. */
    font-size: clamp(3rem, 2.75rem + 0.6vw, 3.375rem);
    /* Microajuste: line-height apretado (por defecto heredaba ~1.2-1.3
       del H2 base) para que las 2 líneas ("Nuestros" / "servicios") se
       lean como una sola unidad editorial en vez de dos renglones
       sueltos. 1.02 en vez de 1.0 exacto: deja un pelo de aire para que
       la línea inferior no recorte visualmente contra la descripción. */
    line-height: 1.02;
  }
}

.page-home .home-services__intro-text {
  /* Ajuste visual (ronda "refinamiento editorial"): +16px adicionales
     respecto a la versión anterior (1.5rem) para reforzar la jerarquía
     entre "Nuestros servicios" (ahora bastante más grande) y el párrafo,
     sin separarlos en exceso. Con el H2 y el párrafo ambos más grandes
     en escritorio (ver override arriba), 2.5rem (40px) ya cae dentro
     del rango pedido (36-48px) — se deja sin cambios, en todos los
     breakpoints. */
  margin-top: 2.5rem;
  /* Ajuste de composición: max-width en px (antes 30ch, ~260-280px según
     la fuente) para fijar el ancho pedido con precisión (300-320px), en
     vez de depender del ancho de carácter. Valor base para tablet/móvil;
     el override de escritorio (más abajo) lo amplía a 360px.
     Ronda "refinamiento responsive": -6% (310px → 290px) — el párrafo
     ocupaba demasiado alto en móvil; junto con font-size/line-height
     de abajo, ~7% menos de presencia total, dentro de 5-10% pedido. */
  max-width: 290px;
  /* Ajuste de composición: un paso más discreta frente al H2, ahora
     bastante más grande — contraste reducido mezclando con off-white
     (mismo recurso ya usado en el subtítulo del Hero), sin tocar el
     tamaño de fuente ni el texto. */
  color: color-mix(in srgb, var(--color-graphite) 82%, var(--color-off-white));
  /* Ronda "refinamiento responsive": 0.92rem → 0.86rem (-6.5%) y
     line-height 1.7 → 1.55 (-9%) — mejora lectura/altura en móvil sin
     achicarlo demasiado, dentro del 5-10% de presencia pedido. Sin
     cambios en escritorio (override propio, más abajo). */
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.55;
}

/* Ajuste visual (ronda "microajustes finales 2"): tamaño/line-height/
   ancho mayores del párrafo SOLO en escritorio (≥901px, igual criterio
   que el H2 de arriba) — en tablet/móvil (regla base, arriba) el
   párrafo sigue con sus valores actuales sin cambios, tal como se pidió
   ("en desktop"). Colocada DESPUÉS de la regla base (mismo selector,
   misma especificidad) para que gane en la cascada a partir de 901px. */
@media (min-width: 901px) {
  .page-home .home-services__intro-text {
    /* 0.92rem (14.7px) → 1.125rem (18px, dentro de 17-19px pedido) y
       line-height 1.7 → 1.6 (dentro de 1.55-1.65 pedido) para mejorar
       legibilidad — mismo color/peso/alineación de siempre, sin negrita. */
    font-size: 1.125rem;
    line-height: 1.6;
    /* max-width en px: 310px → 360px (dentro de 330-390px pedido) para
       acompañar el tamaño de fuente mayor sin líneas demasiado largas —
       sigue acotado además por el ancho real de la columna en desktops
       más angostos (≥901px), donde este máximo nunca llega a usarse por
       completo. Ajuste visual (ronda "microajuste tipográfico"): -7%
       adicional (360px → 335px) para un bloque un poco más angosto y
       editorial — mismo font-size/line-height, solo cambia el ancho. */
    max-width: 335px;
    /* Alineación izquierda explícita (ya era el comportamiento por
       defecto, sin justify en ningún punto del árbol) y saltos de línea
       más naturales vía text-wrap:pretty — mejora progresiva: en
       navegadores sin soporte simplemente se ignora y el párrafo sigue
       exactamente igual que antes (sin <br> manuales, sin cambios de
       comportamiento). */
    text-align: left;
    text-wrap: pretty;
  }
}

.page-home .home-services__panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.page-home .home-service-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.page-home .home-service-card:focus-visible {
  outline: 2px solid var(--color-espresso);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.page-home .home-service-card__index {
  /* Ajuste visual "Greenleaf": un poco más de tamaño para que el número
     tenga presencia propia como remate del bloque izquierda/imagen. El
     salto a tamaño realmente protagónico (28-36px) vive en el override
     de escritorio más abajo (@media min-width:901px) — aquí se mantiene
     el tamaño base para tablet/móvil (lista apilada). */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-espresso);
  margin-bottom: var(--space-xs);
}

.page-home .home-service-card__index-total {
  font-weight: 400;
  /* Contraste reducido a propósito respecto al número activo (graphite
     mezclado con off-white): "/ 04" debe leerse claramente secundario.
     Microajuste: bajado otra vez (62% → 45%) para enfatizar más el
     número del servicio activo. Posición sin cambios. */
  color: color-mix(in srgb, var(--color-graphite) 45%, var(--color-off-white));
}

/* Ajuste visual (ronda "refinamiento editorial"): en escritorio, "01"
   pasa a ser realmente protagónico (28-36px) y "/ 04" se queda chico y
   tenue (12-14px) — más jerarquía editorial en el contador, mismo
   contenido/comportamiento. Ambos siguen alineados por herencia normal
   del flujo (el índice y la foto son hermanos directos dentro de
   .home-service-card), así que el "01" queda anclado al mismo borde
   izquierdo que la imagen sin ningún cambio adicional. */
@media (min-width: 901px) {
  .page-home .home-service-card__index {
    /* Fijo (no clamp): con el alto disponible real del panel (ver
       .home-service-card__illustration/__title más abajo) ya no hay
       margen de vw útil — el valor efectivo sería 30px en todo el rango
       de escritorio de cualquier forma, así que se deja explícito. */
    font-size: 1.875rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.625rem;
    /* Ajuste visual (ronda "microajustes"): sin esto, "01" hereda el
       line-height base del body (1.6) — a 30px de fuente eso deja ~9px
       de interlineado invisible ENCIMA del número (medio-interlineado
       repartido arriba/abajo de la línea), mientras que el H2 "Nuestros
       servicios" de la izquierda ya tiene line-height:1.02 (casi sin
       ese aire). Esa asimetría es la razón real por la que todo el
       bloque derecho se siente ~10px más bajo que el izquierdo. Al
       apretar el line-height aquí (sin tocar font-size/peso/color), el
       "01" —y por herencia de flujo flex, la imagen/título/texto/CTA
       que van debajo— suben ese mismo margen, sin usar transform,
       position ni márgenes negativos: es solo la caja del texto
       encogiéndose por su propio interlineado. */
    line-height: 1.25;
  }

  .page-home .home-service-card__index-total {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
}

/* Ajuste visual (ronda "microajustes finales"): cambio deliberado de
   object-fit:contain → cover, pedido explícitamente para esta ronda.
   Con contain (versiones anteriores), cada foto se dibujaba a su propio
   tamaño ajustado según su proporción real dentro del marco — con 4
   proporciones distintas (Servicios ~1.71:1, igual que el marco;
   Insumos/Proyectos/Sustrato ~1.5:1, más "cuadradas"), el ÁREA VISIBLE
   de la foto resultaba distinta entre tarjetas aunque el marco
   (contenedor) ya fuera idéntico en los 4 casos — de ahí que Servicios
   se viera más grande. cover fuerza a las 4 fotos a LLENAR por completo
   ese mismo marco (recortando lo que sobre de cada una según su propia
   proporción), así que ahora las 4 comparten exactamente la misma
   presencia visual, con Servicios como referencia (su proporción ya es
   la más cercana al marco, así que es la que menos se recorta). El
   contenedor en sí (ancho/alto/aspect-ratio) no cambia — ya era
   idéntico en los 4 paneles antes de este ajuste. */
.page-home .home-service-card__illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Ajuste visual "Greenleaf": separación imagen→título reducida (antes
     var(--space-md), 32px) para que el título se sienta más pegado a su
     fotografía, como una sola unidad editorial. Ajuste visual (ronda
     "refinamiento editorial"): reducida otro ~13% (0.75rem → 0.65rem).
     Ajuste visual (ronda "microajustes finales"): en escritorio esta
     separación ahora vive en su propio override más abajo (@media
     min-width:901px) — aquí queda el valor base para tablet/móvil, sin
     cambios respecto a la ronda anterior. */
  margin-bottom: 0.65rem;
}

.page-home .home-service-card__illustration img {
  display: block;
  width: 100%;
  height: 100%;
  /* Ajuste visual (ronda "microajustes finales"): contain → cover (ver
     comentario del contenedor, arriba) — las 4 fotos llenan ahora el
     mismo marco por completo, sin deformarse (cover conserva la
     proporción natural del archivo, solo recorta lo que no cabe). */
  object-fit: cover;
  /* center center: con cover ya no hay "aire sobrante" que alinear (la
     foto siempre llena el marco de borde a borde) — center es el
     encuadre neutro por defecto. Si alguna foto necesita conservar un
     elemento importante fuera del centro, se ajusta puntualmente aquí
     abajo con una regla por panel (object-position individual, sin
     tocar el tamaño del marco). */
  object-position: center;
  border-radius: var(--radius-md);
  transition: transform 0.4s var(--ease-elegant);
}

.page-home .home-service-card:hover .home-service-card__illustration img,
.page-home .home-service-card:focus-visible .home-service-card__illustration img {
  transform: scale(1.02);
}

/* Corrección de exposición por imagen (contrast/brightness/saturate):
   cada foto traía un nivel distinto medido por muestreo de píxeles —
   estos valores llevan las 4 a un rango de brillo y saturación similar.
   Sin cambios de receta respecto a versiones anteriores. */
.page-home .home-service-card[href="insumos.html"] .home-service-card__illustration img {
  filter: saturate(1.8) contrast(1.06) brightness(1.02);
}

.page-home .home-service-card[href="servicios.html"] .home-service-card__illustration img {
  filter: saturate(0.85) contrast(1.02) brightness(0.94);
}

.page-home .home-service-card[href="proyectos.html"] .home-service-card__illustration img {
  filter: saturate(0.85) contrast(1.1) brightness(1.17);
}

.page-home .home-service-card[href="fibra-de-coco.html"] .home-service-card__illustration img {
  filter: saturate(0.78) contrast(1.02) brightness(0.9);
}

/* Reemplazo de imagen (imagen 3.png, ratio ~4:3) — ratio distinto al
   marco (3:2), así que cover recorta arriba/abajo (~11% de alto,
   modesto) en vez de a los lados. object-position individual (sin
   tocar el tamaño del marco, ver comentario general de arriba) para
   sesgar ese recorte hacia arriba (menos techo de invernadero visible)
   y conservar completos los surcos con el rótulo SUHM en la parte
   baja de la foto. */
.page-home .home-service-card[href="fibra-de-coco.html"] .home-service-card__illustration img {
  object-position: center 70%;
}

.page-home .home-service-card__title {
  /* Ajuste visual "Greenleaf": un poco más grande (antes 1.5–2rem) para
     darle más presencia como remate inmediato de la fotografía.
     Microajuste posterior: ~7% más chico (antes clamp 1.65rem→2.15rem)
     para no competir con el H2 "Nuestros servicios", ahora bastante más
     grande y protagonista. */
  font-size: clamp(1.55rem, 1.22rem + 1.22vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Ajuste de composición: un poco más de aire hacia la descripción
     (antes 0.75rem) — la imagen ahora está más pegada arriba (ver
     .home-service-card__illustration, desktop), así que ese espacio se
     "reubica" aquí para que título y descripción no se sientan
     apretados. Ajuste visual (ronda "microajustes finales"): con la
     imagen ahora separada del título (ver override de escritorio más
     abajo), título→descripción se aprieta un poco (1rem → 0.625rem,
     -6px) para que se lean como una unidad más compacta — mismo
     font-size/peso/color/line-height del título, solo cambia este
     spacing. Ajuste visual (ronda "microajustes finales 2"): otro
     -6px (0.625rem → 0.25rem), dentro del 5-8px pedido — título y
     descripción deben leerse como una sola pieza, y libera además un
     poco más de alto de panel para el CTA. */
  margin-bottom: 0.25rem;
}

.page-home .home-service-card__text {
  /* Ajuste visual (ronda "refinamiento editorial"): un paso más suave que
     graphite puro (mismo recurso que .home-services__intro-text) para
     una lectura más elegante; tamaño ligeramente mayor (17px) y ancho
     máximo en px (antes 46ch) para líneas más cortas y editoriales. */
  color: color-mix(in srgb, var(--color-graphite) 88%, var(--color-off-white));
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 480px;
}

.page-home .home-service-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  /* Ajuste visual (ronda "microajustes"): el espacio ÓPTICO real hasta
     aquí no es solo este margin-top — el interlineado del párrafo de
     arriba (1.6) deja ~5px de aire debajo de su última línea, y este
     CTA heredaba el line-height del body (1.6) también, sumando otros
     ~4px de aire ENCIMA de su propio texto — con var(--space-md)=32px
     de margin-top, el total óptico rondaba los 40px (por eso se sentía
     "demasiado abajo"). line-height:1.1 recorta ese aire propio.
     Ajuste visual (ronda "microajustes finales"): margin-top otra vez
     más chico (1.75rem → 1.25rem, 20px) — con el interlineado ya
     recortado, el óptico total queda en ~25-26px (dentro de 22-30px
     pedido), y libera además unos px extra de alto de panel para que el
     CTA no se acerque al borde inferior en 1440×900. Mismo tamaño,
     color, flecha y hover del CTA — solo este spacing cambia.
     Ajuste visual (ronda "microajustes finales 2"): margin-top otra vez
     más chico (1.25rem → 0.875rem, 14px) — con el interlineado del CTA
     ya recortado (1.1) y el título→descripción también más compacto
     (ver .home-service-card__title), el óptico total queda en ~18-20px
     (dentro de 18-24px pedido), recuperando más alto libre de panel
     sin tocar la imagen — así el CTA queda con aire cómodo respecto al
     borde inferior en 1440×900. Mismo tamaño, color, flecha y hover. */
  margin-top: 0.875rem;
  line-height: 1.1;
  padding-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-espresso);
}

.page-home .home-service-card__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-sand);
  transform: scaleX(0);
  /* Subrayado que crece desde el centro (docs/TASS-VISUAL-SYSTEM.md,
     sección 15) — mismo lenguaje de hover que el resto del sitio.
     Duración ajustada a 250ms (ronda "refinamiento editorial", rango
     200-300ms pedido; antes 350ms) para un hover algo más ágil. */
  transform-origin: center;
  transition: transform 0.25s var(--ease-elegant);
}

.page-home .home-service-card:hover .home-service-card__cta::after,
.page-home .home-service-card:focus-visible .home-service-card__cta::after {
  transform: scaleX(1);
}

.page-home .home-service-card__cta-arrow {
  /* Ajuste visual (ronda "refinamiento editorial"): flecha un poco más
     larga (antes 14px) para sentirse menos "CTA genérico" y más editorial. */
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease-elegant);
}

.page-home .home-service-card:hover .home-service-card__cta-arrow,
.page-home .home-service-card:focus-visible .home-service-card__cta-arrow {
  transform: translateX(4px);
}

/* ---------- Escritorio con JS: progreso de scroll continuo (v5) ----------
   Reemplaza por completo el mecanismo de v4 (wheel interceptado con
   preventDefault + máquina de estados "pinned"/"cooldown" + stage en
   position:fixed). Ese mecanismo dependía de CAPTURAR cada gesto de
   rueda uno por uno; con scroll muy rápido el navegador puede agrupar
   varios gestos en menos callbacks de los esperados, y la máquina de
   estados podía quedar en un paso intermedio incorrecto mientras dos
   paneles seguían a medio transicionar — el "empalme" reportado.

   v5 no intercepta wheel/touch en absoluto (scroll 100% nativo, en
   cualquier velocidad) y no tiene estado de "enganchado/liberado" propio:
   .home-services__scroller es simplemente más alto que el stage, y
   .home-services__stage se resuelve con position:sticky nativo — el
   propio navegador decide cuándo se pega y cuándo se libera, sin JS. El
   único trabajo de main.js es leer, en cada scroll (rAF-throttled),
   CUÁNTO se ha recorrido ese alto extra (un cálculo de posición, nunca
   de eventos acumulados) y convertir ese progreso directamente al paso
   0-3 correspondiente — así, si el usuario salta de golpe del paso 1 al
   4, el siguiente cálculo da 4 directamente, sin pasar "de a uno". Ver
   "NUESTROS SERVICIOS: PROGRESO DE SCROLL" en main.js. */
@media (min-width: 901px) {

  .js-services-ready .page-home .home-services__scroller {
    position: relative;
    /* El alto total define cuánto hay que recorrer para ver los 4 pasos.
       main.js lee este alto real (scroller.offsetHeight) para calcular
       el progreso — no hay ningún número mágico duplicado entre CSS y
       JS que pueda desincronizarse. */
    height: 280vh;
  }

  .js-services-ready .page-home .home-services__stage {
    position: sticky;
    top: 100px;
    height: clamp(520px, 64vh, 720px);
    display: grid;
    /* Ajuste visual "Greenleaf": proporción 31/54 (antes 32/68) + gap
       ampliado (antes var(--space-xl), 112px) para que quede "bastante
       espacio blanco" real entre columnas — con fr, las dos columnas
       siempre se reparten el 100% del ancho disponible DESPUÉS de
       restar el gap, así que un gap grande empuja la columna izquierda
       a ~30-32% y la derecha a ~52-56% del ancho total del stage, sin
       riesgo de desbordar en ningún ancho de escritorio (≥901px). */
    grid-template-columns: minmax(0, 31fr) minmax(0, 54fr);
    align-items: start;
    gap: 10rem;
  }

  .js-services-ready .page-home .home-services__intro {
    align-self: start;
  }

  /* Alto explícito (no 100%): dentro de una fila de grid con
     align-items:start, un hijo con height:100% no tiene garantizada una
     altura real de la que heredar ese 100% (la fila, sin
     grid-template-rows explícito, puede quedar del alto de su
     contenido — y el contenido de .home-services__panels son solo
     paneles position:absolute, que no aportan altura propia).

     Ajuste visual "Greenleaf" — efecto "sobresale": se le suman 56px al
     alto del stage (nunca se toca el alto del stage en sí, que es lo
     que main.js usa para el cálculo de scroll — ver
     assets/js/main.js). Como .home-service-card (más abajo) apila su
     contenido desde arriba (justify-content:flex-start) dentro de esta
     caja ahora más alta, el bloque derecho (contador+foto+título+texto+
     CTA) puede extender su borde inferior por debajo de donde termina
     la columna izquierda — la sensación de "continúa fuera de la
     composición principal" pedida — sin mover ni un píxel el alto
     funcional del stage/scroller/sticky. El efecto es más visible en
     viewports de alto típico/bajo (donde clamp() se acerca a su piso de
     520px) y se atenúa en monitores muy altos (donde el stage crece
     hasta 720px vía 64vh) — degradación aceptable, nunca rota. */
  .js-services-ready .page-home .home-services__panels {
    position: relative;
    height: calc(clamp(520px, 64vh, 720px) + 56px);
  }

  /* Los 4 paneles ocupan exactamente el mismo espacio (inset:0) y se
     alternan por opacidad/transform — nunca display:none ni
     visibility:hidden, para que los 4 sigan existiendo en el DOM,
     accesibles por teclado y lectores de pantalla en todo momento (ver
     main.js: el foco en un enlace también activa su panel). Transición
     direccional: is-before (ya mostrado, arriba) / is-after (todavía no
     mostrado, abajo) / is-active — así avanzar y retroceder producen un
     desplazamiento con sentido, no un simple parpadeo. */
  .js-services-ready .page-home .home-service-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    /* Ajuste visual (ronda "refinamiento editorial"): 500ms → 750ms
       (dentro de 650-850ms pedido) — solo la duración del crossfade
       visual; el MOMENTO en que main.js cambia de panel (is-before /
       is-active / is-after) no se toca, sigue decidido por progreso de
       scroll, no por esta transición. */
    transition: opacity 750ms var(--ease-elegant),
      transform 750ms var(--ease-elegant);
  }

  .js-services-ready .page-home .home-service-card.is-before {
    transform: translateY(-15px);
  }

  .js-services-ready .page-home .home-service-card.is-after {
    transform: translateY(15px);
  }

  .js-services-ready .page-home .home-service-card.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Secuencia interna del panel activo (punto 17): imagen → título →
     descripción → CTA, con un stagger corto (120ms) entre cada uno.
     Puramente visual — animación de opacidad/translateY sobre el
     contenido YA presente en el panel is-active; main.js no cambia en
     absoluto (sigue sin saber nada de esta animación), y el alto del
     track/stage/steps tampoco se ve afectado, pues los hijos ya ocupan
     su espacio normal en el flujo (solo cambia su opacidad/transform). */
  .js-services-ready .page-home .home-service-card__illustration,
  .js-services-ready .page-home .home-service-card__title,
  .js-services-ready .page-home .home-service-card__text,
  .js-services-ready .page-home .home-service-card__cta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 750ms var(--ease-elegant),
      transform 750ms var(--ease-elegant);
  }

  .js-services-ready .page-home .home-service-card.is-active .home-service-card__illustration {
    transition-delay: 0ms;
  }

  .js-services-ready .page-home .home-service-card.is-active .home-service-card__title {
    transition-delay: 120ms;
  }

  .js-services-ready .page-home .home-service-card.is-active .home-service-card__text {
    transition-delay: 240ms;
  }

  .js-services-ready .page-home .home-service-card.is-active .home-service-card__cta {
    transition-delay: 360ms;
  }

  .js-services-ready .page-home .home-service-card.is-active .home-service-card__illustration,
  .js-services-ready .page-home .home-service-card.is-active .home-service-card__title,
  .js-services-ready .page-home .home-service-card.is-active .home-service-card__text,
  .js-services-ready .page-home .home-service-card.is-active .home-service-card__cta {
    opacity: 1;
    transform: translateY(0);
  }

  .js-services-ready .page-home .home-service-card__illustration {
    /* Alto explícito en vez de aspect-ratio: el stage mide
       clamp(520px, 64vh, 720px) siempre, así que la foto necesita un
       tope de alto fijo para que índice + foto + título + texto + CTA
       quepan sin generar scroll interno. Con object-fit:contain (arriba)
       la foto se ve completa dentro de este tope, sin recortarse.

       Ajuste visual "Greenleaf": ancho fijo (antes 100% de la columna)
       de 520-580px — más grande que antes, bastante más chica que la
       referencia — y alto 280-330px (antes tope de 280px). width usa
       min(560px, 100%) para no desbordar si la columna derecha llega a
       ser más angosta que 560px en el extremo inferior de escritorio.

       Ajuste visual (ampliación): marco subido ~7% (560px→600px de
       ancho, 280-330px→300-350px de alto) para darle más presencia a la
       fotografía. La columna derecha del stage mide bastante más que
       600px en cualquier ancho de escritorio (≥901px) con la proporción
       31/54 + gap de 10rem ya vigente, así que sigue sin riesgo de
       desborde; el crecimiento vertical se absorbe con el mismo margen
       de "sobresale" (+56px en .home-services__panels, más abajo) ya
       previsto para esta sección.

       Ajuste visual (ronda "refinamiento editorial"): +10% adicional
       (600px→660px de ancho, 300-350px→330-385px de alto, proporción de
       vh ajustada igual) para que la imagen tenga más protagonismo real
       dentro de la columna derecha, sin cambiar el alto del stage/panels,
       que es lo que usa main.js para el cálculo de scroll (el recorte
       real de cada foto ahora depende de object-fit:cover, ver
       .home-service-card__illustration img más arriba — el tamaño del
       marco en sí, aquí, no cambió por eso). Se dejó en el extremo bajo
       del 10-15% pedido a propósito: en 1440×900 el panel (alto del
       stage/panels sin tocar) queda justo para contador+foto+título+
       texto+CTA con el resto de aumentos de esta ronda — un % mayor
       forzaría overflow del contenido dentro del panel. */
    aspect-ratio: auto;
    width: min(660px, 100%);
    height: clamp(330px, 44vh, 385px);
    /* Ajuste de composición: separación imagen→título reducida (antes
       var(--space-sm), 16px) para que se perciban como una misma
       composición — título→descripción y descripción→CTA (más arriba,
       .home-service-card__title / __cta) conservan su espacio propio.
       Ajuste visual (ronda "refinamiento editorial"): reducida otro ~20%
       (0.5rem → 0.4rem) para conectar aún más imagen y contenido.
       Ajuste visual (ronda "microajustes"): a 0 — con 0.4rem (6.4px) ya
       no quedaba margen positivo suficiente para restar los 8-12px
       pedidos sin usar valores negativos; se lleva al mínimo posible
       dentro de esa restricción.
       Ajuste visual (ronda "microajustes finales"): de vuelta a 0.75rem
       (12px, dentro de 10-16px pedido) — el ajuste anterior (a 0) dejó
       el título demasiado pegado a la imagen; con título→descripción y
       descripción→CTA apretados en esta misma ronda (ver reglas
       correspondientes) sigue habiendo margen de sobra para que el CTA
       quede completamente visible en 1440×900. */
    margin-bottom: 0.75rem;
  }

  /* Ajuste visual (ronda "refinamiento editorial"): el nombre del
     servicio pasa a 38-46px en escritorio (antes clamp ~24.8-32px, que
     se conserva sin cambios para tablet/móvil, ver regla base más
     arriba) — más protagonismo como remate inmediato de la fotografía,
     ahora también más grande. Misma tipografía/peso/color heredados,
     line-height apretado para un bloque de título compacto. */
  .page-home .home-service-card__title {
    /* Dentro del rango pedido (38-46px), en el extremo bajo por el mismo
       motivo de presupuesto de alto explicado junto a la imagen arriba. */
    font-size: clamp(2.375rem, 1.85rem + 1vw, 2.5rem);
    line-height: 1.05;
  }

  /* Detalle editorial sutil (único recurso usado, punto 12): una hairline
     vertical de 1px, muy bajo contraste, centrada en el espacio entre
     columnas (gap de 10rem del grid del stage) — decorativa, con
     pointer-events:none, no reparte ancho ni afecta el grid/columnas.
     Ajuste visual (ronda "microajustes"): contraste reducido (35% → 18%
     de mezcla con sand) y acortada al 70% de la altura del panel,
     centrada (15% arriba/abajo) — para que lea como un detalle
     editorial secundario y no como una división rígida en dos mitades.
     Ajuste visual (ronda "microajustes finales"): recortada otro ~14%
     (70% → 60% de la altura, dentro del 10-15% pedido), reduciendo por
     igual arriba y abajo (15% → 20% de margen cada lado) — mismo color
     y grosor de 1px, solo más corta. */
  .js-services-ready .page-home .home-services__panels::before {
    content: "";
    position: absolute;
    top: 20%;
    left: -5rem;
    width: 1px;
    height: 60%;
    background-color: color-mix(in srgb, var(--color-sand) 18%, transparent);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-services-ready .page-home .home-service-card,
  .js-services-ready .page-home .home-service-card__illustration,
  .js-services-ready .page-home .home-service-card__title,
  .js-services-ready .page-home .home-service-card__text,
  .js-services-ready .page-home .home-service-card__cta {
    transition: opacity 1ms linear;
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   TRANSICIÓN: ilustración editorial (prueba de reubicación, ex-Hero)
   Firma visual discreta asociada al bloque "¿Por qué TASS?" — mismo
   asset ya validado (imagen-hero-inicio-transparente-trim.png, sin
   reprocesar, sin filtros, misma opacidad 1), mucho más chica que en
   el Hero, para que se sienta como detalle + pausa, nunca como una
   sección nueva. No es .section: sin padding-block propio, sin
   franja/fondo distinto — el mismo --color-linen de siempre, fondo
   directo, sin card/círculo/sombra.

   Espaciado (ronda "microajuste de posición"): el padding-bottom de
   "Nuestros servicios" (.section, var(--space-xl) = 112px desktop/
   tablet, 84px móvil ≤700px) sigue sin tocarse — es el espacio antes
   de la ilustración. Se le suma aquí un margin-top propio (ver
   .home-transition-illustration__img) para "bajarla" hacia el título,
   tal como se pidió — el layout normal (margin), sin position/top/
   translateY/márgenes negativos. La separación ilustración→título ya
   NO depende del padding-top de "¿Por qué TASS?" solo: ese valor se
   redujo en esta misma ronda (ver .home-why, más abajo) precisamente
   para que esa relación quede en 30-45px — su padding-bottom (relación
   con Estadísticas) no se tocó. */
.page-home .home-transition-illustration {
  background-color: var(--color-linen);
  /* Corrección de la franja blanca reportada: sin esto, el margin-top
     de .home-transition-illustration__img (más abajo) colapsa hacia
     afuera a través de este <div> y de su .container interno (ninguno
     de los dos tiene padding-top/borde ni contexto de formato de
     bloque propio) y queda como espacio vacío ENCIMA de esta caja —
     ahí se veía el fondo real de <body> (var(--color-paper), #FFFFFF),
     no un color mal puesto. flow-root crea ese contexto de bloque
     (mismo efecto que overflow:hidden para este propósito, sin su
     riesgo de recortar contenido) y hace que el margen del hijo quede
     CONTENIDO dentro de esta caja en vez de escapar — el hueco visual
     sigue siendo del mismo tamaño exacto, solo que ahora se pinta en
     --color-linen en vez de dejar ver el blanco de atrás. No mueve
     nada, no cambia ningún valor de spacing. */
  display: flow-root;
}

.page-home .home-transition-illustration__img {
  display: block;
  /* Ronda "microajustes finales": +~11% (105px → 117px).
     Ronda "refinamiento ¿Por qué TASS?": +~8.5% (117px → 127px).
     Ronda "microajuste final de tamaño": +~6% (127px → 135px).
     Ronda "escala editorial": +18% (135px → 159px).
     Ronda "escala decisiva": +~41.5% adicional (159px → 225px, dentro
     de 35-45% pedido; el usuario confirmó explícitamente partir del
     valor real actual —159px— y no del número de referencia que había
     dado, que resultó ser menor al ya vigente) — firma gráfica con
     presencia real, sigue secundaria frente a "TASS?" (más grande, más
     pesado, más oscuro — sin cambios de tamaño de texto en esta
     ronda). Mismo archivo, sin reprocesar; height:auto conserva la
     proporción exacta. Posición (margin-top/margin-left) sin cambios:
     solo crece el tamaño. El alto real crece en la misma proporción
     (mismo aspect-ratio) — se compensa exactamente en .home-why
     (padding-top, más abajo) para que el espacio ilustración→título
     se sienta igual que antes, sin mover el título. */
  /* Tamaño sin cambios en esta ronda: 225px (mismo archivo, misma
     proporción, sin reprocesar). Solo se ajusta spacing/posición
     vertical, ver margin-top abajo. */
  /* Ronda "subir más + ilustración más grande": +12% (punto de
     partida pedido) sobre el ancho vigente, 225px → 252px. Mismo
     archivo sin reprocesar, height:auto conserva la proporción exacta;
     margin-left (clamp, más abajo) no cambia, así que el eje izquierdo
     y la posición relativa respecto al headline se mantienen intactos
     — solo crece desde su propia escala. Sigue secundaria frente a
     "TASS?" (mismo criterio de "escala decisiva", arriba). */
  width: 252px;
  height: auto;
  /* Centrada en tablet/móvil (sin oferta de eje propio del título ahí,
     ver override de escritorio más abajo). */
  margin: 0 auto;
  /* "Bajar la ilustración" ~50px (dentro de 40-60px pedido) respecto a
     su posición anterior (0 de margen).
     Ronda "acercar al headline": +40px (50px → 90px).
     Ronda "microajuste final de separación": +28px adicionales (90px
     → 118px, punto de partida pedido) — layout normal (margin), sin
     transform ni posicionamiento absoluto. Esto solo desplaza la
     ilustración dentro de su propio espacio (crece el aire respecto a
     "Nuestros servicios", arriba); el espacio hacia el título lo
     define únicamente el padding-top de .home-why (más abajo), que ya
     estaba en 50px — dentro de los 50-60px pedidos esta ronda — así
     que no necesitó cambiar.
     Ronda "ritmo vertical, ajuste de ritmo desde ¿Por qué TASS?":
     -60px (punto de partida pedido) para acercar el bloque completo
     "¿Por qué TASS?" a "Nuestros servicios" (118px → 58px). Único
     valor tocado en esta ronda: el padding-bottom de "Nuestros
     servicios" (.section, sin cambios) y todo el spacing interno de
     esta sección hacia abajo (ilustración→título, título→estadísticas,
     etc.) quedan exactamente igual — solo sube el bloque completo como
     consecuencia natural del flujo normal del documento.
     Ronda "microajuste adicional de ritmo vertical": -24px adicionales
     (punto de partida pedido), 58px → 34px. Mismo criterio: único
     valor tocado, spacing interno hacia abajo sin cambios.
     Ronda "subir más + ilustración más grande": se pidió -40px
     adicionales (35-45px pedido), pero 34px era ya lo único disponible
     sin cruzar a márgenes negativos (regla explícita de esta ronda:
     "NO usar... márgenes negativos") — se topa en 0px (reducción real
     de -34px) en vez de -40px. El resto del ritmo vertical pedido
     (~6px) no se puede lograr con este mecanismo sin violar esa regla;
     si se requiere el rango completo, haría falta relajar esa
     restricción o tocar el padding-bottom de "Nuestros servicios"
     (fuera de alcance de esta ronda). */
  margin-top: 0px;
}

@media (max-width: 900px) {
  .page-home .home-transition-illustration__img {
    /* +10% (90px → 99px). Ronda "refinamiento ¿Por qué TASS?": +~8%
       (99px → 107px). Ronda "microajuste final de tamaño": +~6%
       (107px → 113px). Ronda "escala editorial": +~15% (113px →
       130px). Ronda "escala decisiva": +35% adicional (130px →
       176px) — mismo criterio proporcional que escritorio (41.5%),
       un poco más conservador para evitar overflow en esta columna. */
    /* Ronda "subir más + ilustración más grande": +12%, 176px → 197px,
       mismo criterio que escritorio. */
    width: 197px;
    /* Un poco menos que en desktop: la sección "¿Por qué TASS?" ya es
       más compacta en pantallas chicas, no hace falta el mismo aire.
       Ronda "acercar al headline": +24px (34px → 58px).
       Ronda "microajuste final de separación": +22px adicionales
       (58px → 80px), proporcional al ajuste de escritorio.
       Ronda "ritmo vertical, ajuste de ritmo desde ¿Por qué TASS?":
       -40px (80px → 40px), reducción proporcional a la de escritorio
       (-60px de 118px), más conservadora para no compactar de más en
       tablet.
       Ronda "microajuste adicional de ritmo vertical": -16px
       adicionales (40px → 24px), proporcional al -24px de escritorio.
       Ronda "subir más + ilustración más grande": mismo tope que
       escritorio — 24px ya era menos de lo que pediría la reducción
       proporcional, así que también topa en 0px (sin márgenes
       negativos). */
    margin-top: 0px;
  }
}

@media (max-width: 700px) {
  .page-home .home-transition-illustration__img {
    /* +~11% (75px → 83px). Ronda "refinamiento ¿Por qué TASS?": +~8.5%
       (83px → 90px). Ronda "microajuste final de tamaño": +~6%
       (90px → 95px). Ronda "escala editorial": +~10% (95px → 105px).
       Ronda "escala decisiva": +~30% adicional (105px → 137px), más
       conservador que desktop/tablet para no arriesgar overflow en
       pantallas angostas — sigue siendo notablemente más grande que
       antes. Tamaño sin cambios en esta ronda. */
    /* Ronda "subir más + ilustración más grande": +12%, 137px → 153px,
       mismo criterio que escritorio/tablet. */
    width: 153px;
    /* Ronda "acercar al headline": +16px (24px → 40px).
       Ronda "microajuste final de separación": +17px adicionales
       (40px → 57px), proporcional al ajuste de escritorio.
       Ronda "ritmo vertical, ajuste de ritmo desde ¿Por qué TASS?":
       -28px (57px → 29px), reducción proporcional a la de escritorio
       (-60px de 118px), más conservadora para no compactar de más en
       móvil.
       Ronda "microajuste adicional de ritmo vertical": -11px
       adicionales (29px → 18px), proporcional al -24px de escritorio.
       Ronda "subir más + ilustración más grande": mismo tope que
       escritorio/tablet — 18px ya era menos de lo que pediría la
       reducción proporcional, así que también topa en 0px (sin
       márgenes negativos). */
    margin-top: 0px;
  }
}

/* Alineación horizontal (solo escritorio): mismo clamp() que usa
   .home-why__question para su margin-left (más abajo) — ambos
   contenedores son .container (idéntico max-width/padding/centrado),
   así que el mismo desplazamiento en vw produce el mismo borde
   izquierdo real en pantalla. Con esto la ilustración queda alineada
   con el eje del bloque del título, no centrada al viewport completo,
   y el título en sí no se mueve ni un píxel. */
@media (min-width: 901px) {
  .page-home .home-transition-illustration__img {
    margin-left: clamp(0px, 24vw, 340px);
    margin-right: 0;
  }
}

/* Reveal propio sobre .reveal-up (mismo IntersectionObserver de
   siempre, ver main.js — no se toca nada de JS): recorrido/duración
   personalizados, sin afectar --reveal-distance/--duration-base
   compartidos por el resto del sitio (mismo criterio ya usado en
   .home-why__line.reveal-up, más abajo).
   Ronda "refinamiento de animación, entrada más fina y editorial":
   recorrido 13px → 14px (dentro de 12-18px pedido, referencia 14px) y
   duración 900ms → 1250ms (dentro de 1100-1400ms pedido, punto de
   partida 1250ms) — easing sin cambio, ya era var(--ease-elegant) =
   cubic-bezier(0.22, 1, 0.36, 1), exactamente la curva pedida. Sin
   scale/rotación/blur/parallax: nunca los tuvo. El estado final
   (opacity:1, transform:translate(0,0)) lo sigue dando
   .reveal-up.is-visible de base.css, sin cambios — misma posición/
   tamaño/spacing de siempre, solo cambia el recorrido de entrada. El
   pequeño desfase hacia "¿Por qué TASS?" no depende de un delay propio
   aquí, sino de que cada elemento dispara su propio IntersectionObserver
   al entrar en viewport (mismo observer de siempre, sin tocar JS) — al
   no tocar ese mecanismo, el orden ilustración→título se conserva
   igual que antes. */
.page-home .home-transition-illustration__img.reveal-up {
  transform: translateY(14px);
  transition: opacity 1250ms var(--ease-elegant), transform 1250ms var(--ease-elegant);
}

/* La regla global de prefers-reduced-motion en base.css apunta a
   .reveal-up (una sola clase); esta tiene más especificidad (3 clases)
   y por eso necesita su propio reset aquí — si no, bajo reduced-motion
   la ilustración quedaría desplazada 14px de forma permanente (el
   observer de main.js no llega a correr bajo reduced motion, así que
   .is-visible nunca se agrega). Mismo patrón ya usado en
   .about-statement__illustration.reveal-up (ver about.css): sin
   desplazamiento, solo el fade a opacity:1 que ya resuelve la regla
   global de base.css. */
@media (prefers-reduced-motion: reduce) {
  .page-home .home-transition-illustration__img.reveal-up {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   ¿POR QUÉ TASS? — transición narrativa hacia Estadísticas
   Momento editorial breve entre "Nuestros servicios" (qué hacemos) y
   "Experiencia y alcance" (la respuesta, en cifras) — sección propia,
   nunca toca nada de "Nuestros servicios" (ni su CSS ni su alto/track):
   simplemente vive después de ella en el flujo normal del documento.
   Sin sticky, sin pinning, sin cajas/bordes/fondos adicionales — mismo
   --color-linen que el resto de la zona clara de Inicio. La entrada usa
   .reveal-up (con más recorrido/duración que el resto del sitio, por
   tratarse de un "momento" propio) y la salida al seguir bajando se
   calcula en main.js, atada a la posición real de scroll (ver
   "¿POR QUÉ TASS?" en main.js) — nunca a un evento interceptado. */
/* Ajuste de espaciado: se midió que con min-height:55vh (intento previo
   de este mismo ajuste) el alto seguía dominado por el min-height (no
   por el contenido), dejando ~158px de aire arriba y abajo de la
   pregunta — sumado a los 112px de padding propios de "Nuestros
   servicios" (--space-xl, .section base, sin tocar) el salto total
   seguía sintiéndose largo. Se retira min-height por completo: el alto
   de la sección ahora lo define solo el contenido + padding-block:80px
   (dentro de 70-90px pedido), ~338px de alto total (~38vh en 900px de
   viewport) — notablemente más compacto. display:flex + justify-
   content:center se conservan: con min-height fuera, ya no tienen efecto
   visible (el contenido ocupa toda la caja), pero se dejan para que la
   pregunta siga garantizada centrada si el contenido llegara a ser más
   bajo que la caja en algún viewport. */
.page-home .home-why {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-linen);
  /* Ronda "microajuste de posición": 80px → 38px.
     Ronda "microajustes finales": 38px → 13px.
     Ronda "refinamiento ¿Por qué TASS?": -8px adicionales (13px → 5px,
     dentro de 8-12px de reducción pedidos) para que la ilustración se
     sienta más conectada con el título, sin llegar a tocarlo. El
     título no se movió: sigue siendo la referencia fija, solo se
     acortó el padding que lo precede. El padding-bottom (relación con
     Estadísticas, más abajo) NO se tocó — ese aire se conserva
     exactamente igual. La pregunta/estadísticas/animación/texto de
     esta sección no cambiaron en nada — solo este padding.
     Ronda "escala editorial": la ilustración creció ~18% en ancho
     (ver .home-transition-illustration__img) y, con height:auto, su
     alto real creció ~18px en la misma proporción — eso por sí solo
     habría acercado su borde inferior al título ese mismo tanto. Para
     que el espacio ilustración→título se siga sintiendo igual que
     antes ("no acercarla más al título" pedido), este padding sube
     esos mismos ~18px (5px → 23px).
     Ronda "escala decisiva": la ilustración pasó de 159px a 225px de
     ancho — con el mismo aspect-ratio, su alto real crece ~50px más.
     Mismo criterio: se suma aquí (23px → 73px) para que el espacio
     ilustración→título se conserve igual que antes de este cambio, sin
     mover el título ni un píxel.
     Ronda "acercar al headline": esta vez SÍ se pidió reducir el gap
     real (no solo compensar) — este padding es lo único que define la
     distancia visual entre el borde inferior de la ilustración y el
     inicio de "¿Por qué" (el margin-top de la ilustración, arriba,
     solo mueve el bloque dentro de su propio espacio: no cambia esta
     distancia, porque .home-why empieza justo después y se desplaza
     con ella). Se reduce -23px (73px → 50px, dentro de 45-60px
     pedido). El título sigue sin moverse: solo se acortó el padding
     que lo precede. El padding-bottom (relación con Estadísticas, más
     abajo) NO se tocó.
     Ronda "microajuste final de separación": el nuevo objetivo pedido
     (50-60px) ya lo cumplía este mismo valor (50px) — sin cambios
     aquí; el ajuste de esta ronda fue únicamente el margin-top de la
     ilustración (arriba), que solo mueve el bloque dentro de su propio
     espacio y no afecta esta distancia.
     Ronda "subir más + ilustración más grande": la ilustración creció
     +12% en ancho (225px → 252px, ver más arriba) y, con height:auto,
     su alto real crece ~20px en la misma proporción — eso por sí solo
     acercaría su borde inferior al título ese mismo tanto. Mismo
     criterio que "escala editorial"/"escala decisiva": se suma aquí
     (50px → 70px) para que el espacio ilustración→título se conserve
     exactamente igual que antes, sin mover el título ni un píxel. */
  padding-top: 70px;
  /* Ronda "tres momentos": +40px respecto al padding-bottom anterior
     (80px), dentro de los 30-50px adicionales pedidos, para que la
     pregunta y las estadísticas se perciban como dos momentos
     relacionados pero distintos, no pegados.
     Ronda "ritmo vertical (pregunta→respuesta)": -40px (120px → 80px,
     dentro de 35-50px de reducción pedidos, punto de partida) — ahora
     se busca lo contrario: que las estadísticas se lean como la
     respuesta directa de "¿Por qué TASS?", no como un momento aparte.
     Sigue sin pegarlas (80px de aire real). El título/ilustración de
     arriba no se tocan; esto solo acorta el espacio DESPUÉS de
     "TASS?". */
  padding-bottom: 80px;
}

@media (max-width: 900px) {
  .page-home .home-why {
    /* Ronda "escala decisiva": 18px → 53px.
       Ronda "acercar al headline": -8px (53px → 45px), mismo criterio
       que en escritorio, algo más conservador en este ancho.
       Ronda "subir más + ilustración más grande": +16px (45px → 61px)
       para compensar el crecimiento real (~16px) de la ilustración en
       este ancho (176px → 197px), mismo criterio que escritorio.
       Ronda "refinamiento responsive": -23px (61px → 38px) — la
       ilustración y "¿Por qué TASS?" se sentían más lejos de lo
       necesario en móvil/tablet; siguen sin tocarse (sin llegar a
       "pegados"). Nada más de esta sección cambia. */
    padding-top: 38px;
    /* Ronda "refinamiento responsive": override propio de
       padding-bottom (antes heredaba 80px de escritorio, arriba) —
       -32px (80px → 48px) para acercar "TASS?" a la primera
       estadística ("pregunta → respuesta"), sumado a la reducción del
       padding-top de .home-stats (más abajo). El título/ilustración de
       arriba no se tocan. */
    padding-bottom: 48px;
  }
}

@media (max-width: 700px) {
  .page-home .home-why {
    /* Ronda "escala decisiva": 13px → 37px. Sin cambios en esta
       ronda: en móvil el gap ya está compacto (37px), dentro de un
       rango razonable — el pedido de 45-60px se verificó en 1440×900.
       Ronda "subir más + ilustración más grande": +12px (37px → 49px)
       para compensar el crecimiento real (~12px) de la ilustración en
       este ancho (137px → 153px), mismo criterio que escritorio/tablet.
       Ronda "refinamiento responsive": -19px (49px → 30px), mismo
       criterio que tablet, algo más conservador. */
    padding-top: 30px;
    /* Ronda "refinamiento responsive": -44px (80px → 36px), mismo
       criterio que tablet (arriba), más conservador para no comprimir
       de más en el ancho más angosto. */
    padding-bottom: 36px;
  }
}

.page-home .home-why__question {
  margin: 0;
  max-width: 600px;
}

/* Desplazamiento hacia la derecha (solo escritorio): ni pegada al borde
   izquierdo del contenedor (como el resto de las secciones) ni centrada
   tipo diapositiva — a medio camino, "centro con ligero sesgo a la
   izquierda", dejando bastante aire a la derecha. */
@media (min-width: 901px) {
  .page-home .home-why__question {
    margin-left: clamp(0px, 24vw, 340px);
  }
}

.page-home .home-why__line {
  display: block;
  letter-spacing: -0.01em;
}

/* "¿Por qué": más ligera y discreta — tipografía y color ya existentes
   del sitio (Manrope 500, graphite suavizado con off-white, mismo
   recurso ya usado en el subtítulo del Hero), sin introducir nada nuevo.
   Ronda "escala editorial": este clamp base pasa a ser el valor de
   ESCRITORIO (+10%, dentro de 8-12% pedido) — cada .home-why__line es
   display:block (arriba), así que "¿Por qué"/"TASS?" ya están
   estructuralmente en líneas separadas sin importar el tamaño de
   fuente; el @media(max-width:900px)/(max-width:700px) de abajo
   revierten a un aumento más conservador (tablet) o al tamaño anterior
   sin cambios (móvil), para no arriesgar que "¿Por qué" se parta en 2
   líneas en pantallas angostas.
   Ronda "refinamiento tipográfico": +9% adicional (dentro de 8-10%
   pedido) sobre el valor de escritorio. Color: 88% → 94% de mezcla con
   graphite (mismos dos tokens de siempre, sin color nuevo) — ~7-8% más
   oscuro que antes, calculado sobre luminancia aproximada, dentro de
   5-10% pedido. Sigue siendo un tono claramente más suave/gris que el
   espresso de "TASS?" (nunca se acerca a ese café ni a negro),
   manteniendo la jerarquía. */
.page-home .home-why__line--soft {
  font-size: clamp(2.7rem, 1.92rem + 3.36vw, 5.25rem);
  font-weight: 500;
  line-height: 1.08;
  color: color-mix(in srgb, var(--color-graphite) 94%, var(--color-off-white));
}

@media (max-width: 900px) {
  .page-home .home-why__line--soft {
    /* +5% respecto al tamaño anterior a esta ronda — crece un poco en
       tablet sin acercarse al aumento de escritorio.
       Ronda "refinamiento tipográfico": +5% adicional (2.3625rem →
       2.481rem, etc.) — proporcional, más conservador que escritorio. */
    font-size: clamp(2.481rem, 1.764rem + 3.087vw, 4.823rem);
  }
}

@media (max-width: 700px) {
  .page-home .home-why__line--soft {
    /* Sin cambios respecto a antes de esta ronda: prioridad a no
       romper el salto de línea en los teléfonos más angostos. El color
       más oscuro (arriba, no media-gated) sí aplica aquí — no supone
       ningún riesgo de overflow/salto de línea. */
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4.375rem);
  }
}

/* "TASS?": mayor protagonismo — más grande y con más peso (700, ya
   cargado por el sitio), mismo espresso de cualquier título.
   Ronda "escala editorial": clamp base = valor de ESCRITORIO (+12%,
   punto de partida pedido) — "TASS?" es una sola palabra sin espacios,
   así que no hay riesgo de partirse en 2 líneas en ningún ancho; los
   overrides de abajo son solo para mantener proporción/jerarquía
   frente a "¿Por qué" en tablet/móvil. */
.page-home .home-why__line--strong {
  /* Tamaño sin cambios en esta ronda (pedido explícito). */
  font-size: clamp(3.08rem, 2.464rem + 4.704vw, 7.35rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--color-espresso);
  /* Ronda "refinamiento tipográfico": 0.1em → 0.025em — a 1440px de
     ancho (font-size real ~107px, sin cambios) esto reduce el espacio
     entre "¿Por qué" y "TASS?" en ~8px (dentro de 6-10px pedido, punto
     de partida 8px). Sigue en em (relativo al tamaño de "TASS?", que
     no cambió) para escalar igual de bien en cualquier ancho. El
     bloque completo no se mueve: esto solo acerca la 2ª línea a la
     1ª, no desplaza el conjunto respecto a la ilustración ni al resto
     de la página (el padding-top de .home-why, que ancla el inicio
     del bloque, no se tocó). */
  margin-top: 0.025em;
}

@media (max-width: 900px) {
  .page-home .home-why__line--strong {
    /* +6% respecto al tamaño anterior a esta ronda — crece un poco en
       tablet, manteniendo su proporción frente a "¿Por qué" (que sube
       +5% en este mismo breakpoint). */
    font-size: clamp(2.915rem, 2.332rem + 4.452vw, 6.95625rem);
  }
}

@media (max-width: 700px) {
  .page-home .home-why__line--strong {
    /* Sin cambios respecto a antes de esta ronda, mismo criterio que
       "¿Por qué" en móvil. */
    font-size: clamp(2.75rem, 2.2rem + 4.2vw, 6.5625rem);
  }
}

/* Entrada: mismo .reveal-up de siempre (IntersectionObserver, main.js),
   con recorrido de 30px (dentro de 20-30px pedido en la ronda "tres
   momentos") y duración de 1300ms (dentro de 1200-1500ms pedido) — muy
   por encima del default del sitio (22px / 650ms). La pregunta debe
   tener un momento propio y terminar de aparecer casi por completo
   antes de que las estadísticas empiecen a construir su entrada (ver
   el delay de .home-stats__item, más abajo). Desfase entre líneas:
   "TASS?" entra ~140ms después de "¿Por qué" (dentro de 100-180ms
   pedido). prefers-reduced-motion ya está resuelto de forma global para
   .reveal-up (ver base.css) — nada que repetir aquí. */
.page-home .home-why__line.reveal-up {
  transform: translateY(30px);
  transition: opacity 1300ms var(--ease-elegant), transform 1300ms var(--ease-elegant);
}

.page-home .home-why__line--strong.reveal-up {
  transition-delay: 140ms;
}

/* ---------- Experiencia y alcance ----------
   Statement de marca inmediatamente después de "Nuestros servicios".
   Unificación de fondo claro (docs/TASS-VISUAL-SYSTEM.md): pasa de franja
   espresso independiente a la misma superficie linen que Hero/Servicios/
   Acerca — los tres indicadores de trayectoria se resuelven ahora como
   declaración tipográfica pura (espresso/graphite sobre linen), sin caja,
   sin sombra, sin resplandores decorativos. Los dos primeros conservan su
   contador animado (ver main.js, [data-count-to], sin cambios); el
   tercero sigue siendo un valor de texto. Sin línea divisoria hacia las
   secciones vecinas — ver "Línea central difuminada", más abajo,
   desactivada para Inicio. ---------- */
/* Ronda "tres momentos": las estadísticas son la "respuesta" visual de
   "¿Por qué TASS?" — deben ser uno de los momentos fuertes de Inicio.
   Se retira el padding-bottom reducido de la ronda anterior
   (var(--space-lg), 64px): vuelve a heredar el default de .section
   (var(--space-xl), 112px) para abrir la pausa mayor pedida frente a
   "Acerca de nosotros" (ver el padding-top espejo en .home-about, más
   abajo, con el mismo ajuste). El padding superior de esta sección
   (frente a "¿Por qué TASS?") no se toca.
   Ronda "ritmo vertical, acercar estadísticas + Acerca de nosotros":
   ahora SÍ se toca el padding superior — es "el espacio antes de las
   estadísticas" pedido, el único lado que se ajusta (el padding-bottom
   de .home-why, que define el cierre propio de "¿Por qué TASS?", no se
   toca). -24px (punto de partida pedido) sobre el default heredado de
   .section (112px), explícito aquí como override propio: 112px → 88px.
   Nada del contenido de esta sección (números, textos, columnas,
   hairlines, animaciones) cambia — solo baja la posición vertical del
   bloque completo. El padding-bottom sigue heredando el default de
   .section sin cambios en esta regla (se ajusta aparte, ver abajo). */
.page-home .home-stats {
  background-color: var(--color-linen);
  padding-top: 88px;
}

@media (max-width: 900px) {
  .page-home .home-stats {
    /* 112px (default de .section en este rango) - 16px, reducción
       proporcional a la de escritorio (-24px), más conservadora para
       no compactar de más en tablet.
       Ronda "refinamiento responsive": -40px adicionales (96px →
       56px) — junto con el padding-bottom reducido de .home-why
       (arriba), "¿Por qué TASS?" y la primera estadística quedan
       claramente relacionadas ("pregunta → respuesta") en vez de
       separadas por una pantalla casi vacía. Contenido/columnas/
       hairlines/animación de las estadísticas sin cambios. */
    padding-top: 56px;
  }
}

@media (max-width: 700px) {
  .page-home .home-stats {
    /* 84px (default de .section en móvil) - 11px, reducción
       proporcional a la de escritorio, aún más conservadora.
       Ronda "refinamiento responsive": -29px adicionales (73px →
       44px), mismo criterio que tablet. */
    padding-top: 44px;
  }
}

.page-home .home-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.page-home .home-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-sm);
}

/* Ronda "tres momentos": reveal secuencial propio (no el stagger
   genérico de 90ms de [data-reveal-group], base.css, compartido con
   el resto del sitio) — más recorrido/duración por ítem y, sobre todo,
   una pausa deliberada antes de que arranque el primero: 550ms (dentro
   de 450-700ms pedido) desde que el bloque de estadísticas entra al
   viewport, tiempo en el que "¿Por qué TASS?" (arriba) ya lleva buena
   parte de su propia entrada de 1300ms — así no se sienten dos
   animaciones simultáneas. Los ítems 2 y 3 seleccionados
   ordinalmente vía :nth-child, no cronológicamente. */
.page-home .home-stats__item.reveal-up {
  transform: translateY(16px);
  transition: opacity 900ms var(--ease-elegant), transform 900ms var(--ease-elegant);
}

.page-home .home-stats__grid > .home-stats__item:nth-child(1) { transition-delay: 550ms; }
.page-home .home-stats__grid > .home-stats__item:nth-child(2) { transition-delay: 700ms; }
.page-home .home-stats__grid > .home-stats__item:nth-child(3) { transition-delay: 850ms; }

.page-home .home-stats__item + .home-stats__item {
  /* rgba(255,255,255,.14) (pensado para fondo espresso) → var(--color-border):
     el hairline sutil estándar del sitio, ahora que el fondo es linen.
     Refinamiento editorial: aún más tenue (mezclado con el propio fondo
     linen) para que la línea divisoria no compita con los números,
     ahora más protagonistas. */
  border-left: 1px solid color-mix(in srgb, var(--color-border) 55%, var(--color-linen));
}

.page-home .home-stats__number-wrap {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.page-home .home-stats__number,
.page-home .home-stats__plus {
  font-size: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* var(--color-paper) (texto claro sobre espresso) → var(--color-espresso)
     (texto oscuro sobre linen). */
  color: var(--color-espresso);
  line-height: 1;
}

.page-home .home-stats__plus {
  margin-left: 2px;
  color: var(--color-sand);
}

.page-home .home-stats__word {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  line-height: 1;
}

/* Ronda "tres momentos": las cifras pasan a ser casi un elemento
   gráfico — 64-84px en escritorio (antes 48-58px), escalando con el
   viewport disponible. "Atención personalizada" (texto, no cifra) no
   cambia: a este tamaño ya domina claramente la fila sin necesitar más
   peso. Mobile y tablet (<901px) sin cambios — la fórmula fluida base
   (arriba) ya entrega ~44-54px en móvil y ~54-61px en tablet, dentro de
   lo pedido, sin necesidad de tocarla.
   Contenedor y gap: la fila aprovecha más ancho (1320px, mismo valor ya
   usado en Insumos para su catálogo — no un número nuevo) solo dentro de
   esta sección/página (max-width global de base.css intacto), con más
   aire entre columnas (var(--space-lg) en vez de var(--space-md)) para
   una sensación más arquitectónica y menos "métricas pequeñas juntas al
   centro". */
@media (min-width: 901px) {
  .page-home .home-stats__number,
  .page-home .home-stats__plus {
    font-size: clamp(4rem, 3.2rem + 2.2vw, 5.25rem);
  }

  .page-home .home-stats__word {
    font-size: clamp(1.75rem, 1.5rem + 0.6vw, 2.125rem);
  }

  .page-home .home-stats .container {
    max-width: 1320px;
  }

  .page-home .home-stats__grid {
    gap: var(--space-lg);
  }
}

/* Ronda "tres momentos": 13px → 15px (dentro de 14-17px pedido), con
   line-height propio para que no se sienta apretado junto a números
   mucho más grandes — sigue siendo claramente secundario (uppercase,
   graphite, ancho controlado), no compite con las cifras. */
.page-home .home-stats__label {
  margin-top: var(--space-xs);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* #C9BFAF (tan claro, pensado para fondo oscuro) → var(--color-graphite),
     el texto secundario estándar del sitio sobre fondo claro. */
  color: var(--color-graphite);
  max-width: 220px;
}

.page-home .home-stats__label--sentence {
  margin-top: var(--space-xs);
  font-size: 0.92rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 240px;
}

@media (max-width: 700px) {
  .page-home .home-stats__grid {
    grid-template-columns: 1fr;
    /* Ronda "refinamiento responsive": var(--space-md) → var(--space-sm)
       (32px → 16px) — cada estadística ocupaba demasiado alto entre sí
       apiladas. Sumado al padding-top de abajo (también reducido), el
       salto real entre 30+/100+/Atención personalizada pasa de ~64px a
       ~32px. Tamaño de números, jerarquía, hairlines y textos sin
       cambios — solo el espacio entre ellas. */
    gap: var(--space-sm);
    max-width: 320px;
    margin: 0 auto;
  }

  .page-home .home-stats__item + .home-stats__item {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
  }
}

/* ---------- Acerca de nosotros (introducción breve en Inicio) ----------
   Bloque de texto original + imagen en 2 columnas (patrón genérico del
   sitio: media + contenido, ver .hero/.hero-media en layout.css, aquí con
   clases propias .home-about__* para no tocar esas reglas globales). La
   imagen conserva su proporción original vía aspect-ratio (sin recortar
   contenido) y solo lleva radio de esquina + sombra muy sutil, en línea
   con el lenguaje visual ya usado en tarjetas (components.css). En móvil
   el grid pasa a una sola columna; la imagen queda arriba por orden
   natural del HTML.

   Tratamiento cinematográfico: el archivo original NO se toca (ver
   assets/img/home/tass-acerca-de-inicio-2.jpg, copia del original subido
   por el usuario) — el look se logra 100% con CSS sobre el <img>: un
   filter sutil (contraste + saturación ligeramente reducida) y dos capas
   ::before/::after superpuestas en el contenedor (viñeta muy tenue con
   mix-blend-mode:multiply + veladura cálida con mix-blend-mode:soft-light)
   para dar profundidad tonal y temperatura cálida sin oscurecer ni
   desaturar la fotografía de forma perceptible ni caer en un look
   naranja/teal. ---------- */

/* Unificación de fondo claro (docs/TASS-VISUAL-SYSTEM.md): fondo propio en
   --color-linen (antes heredaba --color-off-white de .section--alt,
   base.css — ese override global no se toca, esto es un override
   page-scoped que gana por especificidad). Se retira por completo el
   resplandor café con deriva que vivía en ::after (misma receta que el
   glow del Hero): la fotografía debe ser el elemento visual principal de
   esta sección, sin ninguna atmósfera compitiendo con ella. overflow:hidden
   se conserva sin cambios — no tiene ya nada que recortar, pero tampoco
   afecta en nada dejarlo. */
/* Ronda "tres momentos": se retira el padding-top reducido de la ronda
   anterior (var(--space-lg), 64px) — vuelve a heredar el default de
   .section (var(--space-xl), 112px) para abrir una pausa mayor frente a
   "Experiencia y alcance" (ver el padding-bottom espejo en
   .home-stats, arriba, con el mismo ajuste). El padding inferior
   (frente al CTA final) no se toca. Nada más de esta sección cambia:
   título, texto, imagen, columnas y animaciones internas intactos.
   Ronda "ritmo vertical (nuevo capítulo)": +75px adicionales (dentro
   de 60-90px pedido, punto de partida) sobre el default heredado de
   .section (112px), explícitos aquí como override propio — 112px →
   187px. Es el espacio ANTES de que empiece esta sección; nada de su
   contenido (título, texto, imagen, columnas, animaciones) cambia.
   .home-stats (arriba) no se tocó — el aire extra se agrega solo de
   este lado. Tablet/móvil, más abajo, suman una cantidad menor para no
   generar un espacio excesivo en pantallas chicas.
   Ronda "ritmo vertical, acercar estadísticas + Acerca de nosotros":
   -42px (punto de partida pedido), 187px → 145px, para acortar la
   pausa frente a las estadísticas ("pausa editorial más controlada").
   Sigue siendo un solo valor (padding-top de esta sección): sube el
   wrapper .home-about completo como una sola unidad — imagen, título,
   párrafos, CTA y su relación/alineación interna no cambian en nada,
   ni tampoco el padding-bottom de .home-stats (el lado de arriba de
   este mismo espacio).
   Ronda "ritmo vertical, subir Acerca de nosotros": -30px (punto de
   partida pedido), 145px → 115px. Mismo criterio: único valor tocado,
   sube el wrapper .home-about completo (imagen + contenido, juntos)
   como una sola unidad; alineación imagen/texto, título, párrafos y
   CTA internos no cambian, ni tampoco .home-stats. */
.page-home .home-about {
  position: relative;
  overflow: hidden;
  background-color: var(--color-linen);
  padding-top: 115px;
}

@media (max-width: 900px) {
  .page-home .home-about {
    /* 112px (default de .section en este rango) + 50px, más
       conservador que el +75px de escritorio.
       Ronda "ritmo vertical, acercar estadísticas + Acerca de
       nosotros": -28px, reducción proporcional a la de escritorio
       (-42px), 162px → 134px.
       Ronda "ritmo vertical, subir Acerca de nosotros": -20px,
       proporcional a la de escritorio (-30px), 134px → 114px. */
    padding-top: 114px;
  }
}

@media (max-width: 700px) {
  .page-home .home-about {
    /* 84px (default de .section en móvil, var(--space-xl) reducido) +
       35px — la misma lógica, aún más conservadora.
       Ronda "ritmo vertical, acercar estadísticas + Acerca de
       nosotros": -20px, reducción proporcional a la de escritorio
       (-42px), 119px → 99px.
       Ronda "ritmo vertical, subir Acerca de nosotros": -14px,
       proporcional a la de escritorio (-30px), 99px → 85px. */
    padding-top: 85px;
  }
}

.page-home .home-about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Refinamiento editorial: 5fr/6fr (media ~45%) → 8fr/6fr (media ~57%),
     ~26% más ancha — con height:auto + aspect-ratio (más abajo), esto
     escala la fotografía completa proporcionalmente sin tocar el
     archivo. La columna de contenido pasa de ~576px a ~453px en
     escritorio (1440px), lo que fija el ancho del párrafo (más abajo)
     dentro del rango 430-480px pedido de forma natural. */
  grid-template-columns: minmax(0, 8fr) minmax(0, 6fr);
  /* Ronda "alineación superior imagen/texto": center → start. La
     imagen (columna izquierda) es notablemente más alta que el bloque
     de texto (columna derecha) — con align-items:center ambas quedaban
     centradas dentro de la misma fila, así que el bloque de texto (más
     corto) arrancaba más abajo que la imagen y terminaba más arriba,
     un desfase que no tiene relación con el padding-top de la sección
     (ese solo mueve la fila completa, imagen y texto por igual). start
     ancla ambas columnas al mismo borde superior — la imagen no se
     mueve (ya estaba arriba), el texto sube para compartir ese eje.
     No afecta el layout de una sola columna en tablet/móvil (más abajo,
     @media max-width:900px), donde imagen y texto ya no comparten fila. */
  align-items: start;
  gap: var(--space-xl);
}

.page-home .home-about__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -22px rgba(70, 49, 31, 0.4);
}

.page-home .home-about__media::before,
.page-home .home-about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.page-home .home-about__media::before {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(15, 11, 6, 0.3) 100%);
  mix-blend-mode: multiply;
}

.page-home .home-about__media::after {
  background: linear-gradient(155deg, rgba(199, 165, 124, 0.22) 0%, rgba(199, 165, 124, 0) 48%, rgba(20, 14, 8, 0.16) 100%);
  mix-blend-mode: soft-light;
}

.page-home .home-about__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5184 / 3456;
  object-fit: cover;
  filter: contrast(1.09) saturate(0.92) brightness(0.99);
}

.page-home .home-about__inner {
  max-width: 480px;
  text-align: left;
}

/* Refinamiento editorial: título más comedido en escritorio (antes el
   H2 base, hasta 50px) — 38-44px, coherente con el resto de títulos de
   sección de la nueva dirección visual (mismo peso/tracking de siempre,
   .home-about__inner h2 más abajo, sin cambios). Mobile/tablet (<901px)
   conservan el H2 base. */
@media (min-width: 901px) {
  .page-home .home-about__inner h2 {
    font-size: clamp(2.3rem, 2.1rem + 0.5vw, 2.75rem);
  }
}

.page-home .home-about__inner p {
  color: var(--color-graphite);
  margin-top: var(--space-sm);
  /* Refinamiento editorial: ancho máximo explícito (430-480px pedido) —
     en escritorio ya queda cubierto por el propio ancho de columna
     (~453px, ver .home-about__grid), esto solo lo fija con precisión y
     evita que crezca de más en anchos intermedios. */
  max-width: 460px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .page-home .home-about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .page-home .home-about__inner {
    max-width: 100%;
  }
}

/* Refinamiento editorial: mismo lenguaje visual que
   .home-service-card__cta ("CONOCER MÁS →" en "Nuestros servicios") —
   discreto, en versalitas con tracking, y el mismo subrayado que crece
   desde el centro al pasar el mouse en vez del border-bottom simple de
   antes. */
.page-home .home-about__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  padding-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-espresso);
}

.page-home .home-about__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-sand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-elegant);
}

.page-home .home-about__link:hover::after,
.page-home .home-about__link:focus-visible::after {
  transform: scaleX(1);
}

.page-home .home-about__link-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-elegant);
}

.page-home .home-about__link:hover .home-about__link-arrow,
.page-home .home-about__link:focus-visible .home-about__link-arrow {
  transform: translateX(4px);
}

/* ---------- CTA de Inicio (ajuste puntual; .cta-section no se modifica) ---------- */
/* Refinamiento editorial: 80px de padding-block (antes var(--space-lg),
   64px) — buena respiración para el cierre premium de la página sin
   volverse una sección alta (el H2 ahora más comedido, ver más abajo,
   ayuda a mantener el bloque compacto pese al padding extra). */
.page-home .home-cta {
  padding-block: 80px;
}

/* max-width ampliado de 560px a 620px + text-wrap:balance (mismo patrón
   que .home-hero__title) para forzar exactamente 2 líneas balanceadas
   en vez de 1 o 3 según el viewport. Refinamiento editorial: tamaño
   reducido en escritorio a 36-44px (antes el H2 base, hasta 50px),
   coherente con el resto de títulos de la nueva dirección visual. */
.page-home .home-cta h2 {
  max-width: 620px;
  margin: 0 auto;
  text-wrap: balance;
}

@media (min-width: 901px) {
  .page-home .home-cta h2 {
    font-size: clamp(2.25rem, 2.05rem + 0.5vw, 2.75rem);
  }
}

.page-home .home-cta p {
  margin-top: var(--space-sm);
  margin-bottom: 1.25rem;
  /* Refinamiento editorial: un paso más grande (antes heredaba 16px del
     <p> base) — el H2 ahora es más comedido, así que el subtítulo gana
     un poco de presencia sin dejar de leerse claramente secundario. */
  font-size: 1.0625rem;
}

/* Refinamiento editorial: más presencia sin exagerar (antes 12px/24px,
   heredado de .btn en components.css). */
.page-home .home-cta .btn {
  padding: 1rem 2rem;
}

@media (max-width: 700px) {
  /* Reducción proporcional del alto en móvil (misma proporción ~0.75
     que usa --space-xl en este breakpoint: 112px→84px). */
  .page-home .home-cta {
    padding: 3rem 0;
  }

  /* max-width más angosto que el contenedor típico de este rango para
     que el título no colapse a 1 línea en tablets/móviles grandes, y
     tamaño de letra con margen de seguridad bajo el piso genérico del
     h2 (2rem) para que las 2 líneas quepan también en teléfonos
     angostos sin forzar una 3ª línea. */
  .page-home .home-cta h2 {
    max-width: 320px;
    font-size: 1.75rem;
  }
}

/* ---------- Footer: barra de contacto ----------
   El marcado y los estilos de .footer-contact__* ahora son compartidos
   por todas las páginas del sitio y viven en layout.css (sin prefijo de
   página), porque el footer es idéntico en todas ellas. ---------- */

/* ==========================================================================
   ACERCA DE TASS (.page-about)
   ========================================================================== */

.page-about .about-intro__body {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.page-about .about-intro__body p {
  text-align: left;
  /* Ajuste de precisión: ligeramente más oscuro que --color-graphite puro
     (mezclado con --color-ink, el mismo tono secundario que ya usa el
     Home para su cuerpo de texto, no un color nuevo) — un paso más de
     contraste sin acercarse al negro ni al café espresso del título. */
  color: color-mix(in srgb, var(--color-graphite) 82%, var(--color-ink) 18%);
}

/* Ronda "refinamiento móvil": los 3 párrafos ocupaban demasiado alto en
   móvil. -6.25% de font-size (16px → 15px) y line-height algo más
   compacto (1.6 heredado → 1.5), dentro del 5-8% pedido, sin perder
   legibilidad. El gap entre párrafos (16px → 13px, -19%, dentro de
   15-20% pedido) vive en .about-intro__body, justo abajo — ambos
   overrides solo aplican <701px; escritorio conserva el body text y el
   spacing de siempre (reglas base, sin @media, arriba). */
@media (max-width: 700px) {
  .page-about .about-intro__body {
    gap: 13px;
  }

  .page-about .about-intro__body p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

/* ---------- "Impulsados por": palabra dinámica del hero ----------
   Extensión del bloque de texto existente (mismo eje izquierdo que el
   título y los párrafos, dentro de .about-hero__content), no una
   sección nueva — sin tarjeta, sin fondo, sin ícono. Rotación
   controlada por main.js, ver comentario ahí para el mecanismo. Título
   "Acerca de TASS", párrafos, imagen y columnas no se tocan; este
   bloque solo añade su propio spacing hacia arriba, dejando crecer el
   alto natural de la columna de texto dentro del grid existente (sin
   tocar el padding propio de .about-hero).
   Ronda "más presencia": más aire arriba (2.75rem → 3.25rem/52px,
   dentro de 45-60px pedido respecto al último párrafo) + un margen
   inferior propio (antes 0, el bloque no tenía "espacio visual" suyo,
   solo el padding-bottom compartido de .about-hero, que no se toca)
   para que ahora sí se sienta como su propio momento dentro del hero. */
/* Ronda "refinamiento vivo": -24px (3.25rem → 1.75rem) — sube el
   bloque completo ("Impulsados por:" + palabra) acercándolo al último
   párrafo. Vía spacing normal (margin-top), sin transform/position/
   márgenes negativos.
   Ronda "refinamiento (bloque principal)": +24px de vuelta (1.75rem →
   3.25rem) — compensa exactamente la reducción del margin-bottom de
   .section__header (arriba, título→párrafos, -24px) para que este
   bloque NO se mueva de su posición actual en la página: los párrafos
   suben 24px hacia el título, y este margin-top crece esos mismos 24px
   para que "Impulsados por:" quede exactamente donde estaba. */
.page-about .about-hero__driver {
  margin-top: 3.25rem;
  margin-bottom: 1.25rem;
}

/* Ronda "refinamiento móvil": -23% (52px → 40px) para que "Impulsados
   por:" se sienta más conectado con el tercer párrafo en móvil, sin
   quedar pegado. Escritorio conserva 52px (regla base, arriba). */
@media (max-width: 700px) {
  .page-about .about-hero__driver {
    margin-top: 2.5rem;
  }
}

/* Refinamiento: un poco más visible (12-13px → 14px) y algo más de
   contraste de color (mezcla con espresso, sigue dentro de la paleta
   café/beige, sin color nuevo), pero MENOS peso que la palabra dinámica
   (regular/400, antes 500 — igual que ella) para que quede clara la
   jerarquía "etiqueta secundaria vs. palabra protagonista". Margen
   inferior reducido (10px → 6px) para que se perciba como una sola
   unidad con la palabra de abajo.
   Ronda "más presencia": tamaño 14px → clamp 13-16px (dentro de 14-16px
   pedido en desktop y 13-14px en móvil, un solo valor fluido para
   ambos) + más contraste de color (mezcla 80/20 → 70/30 con espresso,
   sigue dentro de la paleta café/beige) — sigue siendo claramente
   secundaria frente a la palabra. Margen inferior 6px → 9px (dentro de
   8-10px pedido) para acompañar el nuevo tamaño de la palabra sin
   perder la sensación de unidad entre ambas.
   Micro-ronda "refinamiento": mismo tamaño (sin cambio, ya pedido así)
   y muy poco más de contraste (70/30 → 62/38, dentro de lo pedido como
   "muy ligero") para que se lea mejor sobre el linen sin acercarse al
   peso visual de la palabra. letter-spacing ya estaba en 0.04em (dentro
   de 0.02-0.04em pedido) — se deja igual. Sin uppercase (no lo usaba
   antes, sigue sin usarlo). */
/* Ronda "refinamiento vivo": +9% (dentro de 8-10% pedido) — sigue
   funcionando como etiqueta secundaria, no compite con la palabra.
   Mismo peso/color/alineación/letter-spacing de siempre.
   Ronda "refinamiento (bloque principal)": tamaño SIN CAMBIO (pedido
   explícito). El espacio real hacia la palabra no era solo el
   margin-bottom (9px): sin line-height propio, este elemento heredaba
   el 1.6 del body, dejando ~5px de interlineado invisible debajo del
   texto además del margen — el gap percibido real rondaba ~14px, no
   9px. line-height:1.15 (mismo valor ya usado en la palabra rotatoria)
   recorta ese aire propio, y el margin-bottom baja de 0.5625rem a
   0.3125rem — juntos, ~8px menos de separación percibida (dentro de
   6-10px pedido), sin tocar tamaño/peso/color/alineación. */
.page-about .about-hero__driver-label {
  margin: 0 0 0.3125rem;
  font-size: clamp(0.885rem, 0.8175rem + 0.3815vw, 1.09rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-graphite) 62%, var(--color-espresso) 38%);
}

/* Contenedor "estable": las 5 palabras están todas en el DOM, apiladas
   con position:absolute una sobre otra. La altura se fija en em (misma
   unidad que el font-size del propio elemento) para que sea constante
   sin importar cuál palabra esté activa ni el breakpoint — así el
   cambio de palabra nunca empuja el contenido de abajo ni mueve la
   fotografía, y crece automáticamente con el nuevo tamaño de fuente sin
   necesidad de un valor fijo en px. El ancho no necesita fijarse: al
   ser un bloque normal (no absoluto) ocupa el ancho de la columna de
   texto, que ya es fijo por el grid (sin tocar) — las palabras (nowrap)
   simplemente se pintan más angostas o más anchas dentro de ese mismo
   ancho de columna, sin alterarlo.
   Ronda "más presencia": salto grande (antes 28-36px) a un clamp de
   32-50px — ~32px en móvil pequeño, ~36-40px en móvil grande/tablet
   (dentro de 32-40px pedido en móvil), ~44px alrededor de 901px, tope
   de 50px desde ~1440px (dentro de 42-50px pedido en desktop). Peso,
   color y line-height sin cambio (500/espresso/1.15) — sigue por debajo
   del H1 "Acerca de TASS" (54-64px en desktop), sin competir con él.
   Micro-ronda "refinamiento": mismo tamaño/color/peso/line-height (sin
   cambio, ya pedido así) — se retira overflow:hidden, que era el
   verdadero riesgo de recorte: el crossfade mueve cada palabra ±8px
   (ver .about-hero__driver-word-item más abajo) y ese recorrido podía
   quedar cortado contra el borde de una caja del alto exacto de una
   línea (1.15em = line-height). Como las palabras son position:absolute
   (no afectan el tamaño del contenedor), quitar overflow:hidden no
   cambia en nada la estabilidad del layout — la altura fija en em sigue
   siendo la que la garantiza — solo deja que el recorrido de ±8px se
   vea completo en vez de cortado contra el borde de la caja. */
/* Ronda "refinamiento vivo": +13% (dentro de 12-15% pedido) — la
   palabra activa debe ser el foco claro del bloque. height:1.15em
   crece junto con el font-size automáticamente (misma unidad), sin
   necesidad de tocarlo aparte. Peso/color/line-height sin cambio.
   Ronda "refinamiento (bloque principal)": -12% (dentro de 10-15%
   pedido, punto de partida) — había empezado a competir con "Acerca de
   TASS". Resultado en escritorio (1440px): ~49.8px, dentro de los
   44-50px pedidos. Mismo peso/color/line-height; height:1.15em vuelve
   a seguir el font-size automáticamente. */
.page-about .about-hero__driver-word {
  position: relative;
  height: 1.15em;
  font-size: clamp(1.99rem, 1.49rem + 2.19vw, 3.11rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-espresso);
}

/* Cross-fade con solape real (antes ambas transiciones arrancaban y
   terminaban juntas, sin instante de "las dos presentes a la vez" más
   que el propio recorrido): ahora cada palabra tiene su propia
   transición de 1000ms (dentro de 900-1200ms pedido) y main.js retrasa
   el inicio de la entrante ~780ms respecto a la salida de la saliente,
   dejando una ventana real de ~220ms (dentro de 180-280ms) en la que
   ambas están visibles con opacidad parcial — un crossfade continuo,
   nunca un hueco vacío entre palabras. Distancia de movimiento 8px
   (dentro de 6-10px pedido): la saliente sube y se desvanece, la
   entrante llega desde abajo. Solo opacity/transform (mismo principio
   de rendimiento del sitio) y --ease-elegant (cubic-bezier(0.22, 1,
   0.36, 1), la misma curva premium de siempre — la que se pidió como
   referencia). Ver main.js para el temporizado exacto (DRIVER_*_MS). */
/* Ronda "refinamiento vivo": duración 1000ms → 800ms (dentro de
   700-900ms pedido — sigue siendo un ritmo lento y premium, ver
   DRIVER_TRANSITION_MS en main.js, ajustado igual para no desincronizar
   el temporizado del crossfade) y recorrido 8px → 10px (dentro de
   8-12px pedido). Sigue siendo solo opacity/transform, mismo
   --ease-elegant de siempre, sin bounce/zoom/3D. */
.page-about .about-hero__driver-word-item {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms var(--ease-elegant), transform 800ms var(--ease-elegant);
}

.page-about .about-hero__driver-word-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

.page-about .about-hero__driver-word-item.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}

/* Hairline muy sutil bajo la palabra activa (punto opcional pedido):
   vive en el ::after de cada palabra, así que hereda automáticamente
   la misma opacity/transition de su .about-hero__driver-word-item — no
   hace falta ninguna estructura nueva ni JS adicional, aparece y
   desaparece exactamente junto con la palabra. Corta (28px, no todo el
   ancho) y de bajo contraste (--color-sand, ya usado en el sitio como
   línea divisoria fina, a 55% de opacidad) para que se lea como detalle
   editorial, no como un subrayado convencional. */
.page-about .about-hero__driver-word-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 28px;
  height: 1px;
  background-color: var(--color-sand);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-hero__driver-word-item {
    transition: opacity 220ms linear;
    transform: none;
  }

  .page-about .about-hero__driver-word-item.is-leaving {
    transform: none;
  }
}

/* ---------- Hero: fondo unificado con Inicio ----------
   Continuidad visual Inicio → Acerca de: mismo --color-linen plano que
   usa el área principal del Home (Hero/Servicios/Estadísticas/Acerca de
   nosotros, ver home-about.css sección INICIO) — se retira por completo
   el resplandor radial + degradado paper/off-white que tenía antes esta
   sección, ya que el Home tampoco lleva ningún glow en sus fondos claros
   (retirado en su propia unificación de fondo).

   Costura hacia Misión y Visión: esa sección ahora también usa
   --color-linen como fondo propio (ver .about-mission-vision, tarea de
   "Misión y Visión" — continuidad de fondo en toda la página), así que
   el fundido de costura que llevaba este bloque (linen → paper, de
   cuando Misión/Visión todavía era blanca) ya no hace falta — ambos
   lados del límite son el mismo linen. Se retira el background-image
   (quedaría como un degradado transparente→linen sobre un fondo ya
   linen, sin ningún efecto visible, solo ruido en el código). El resto
   del primer bloque (título, imagen, composición) no se toca. */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-linen);
}

/* Texto a la izquierda / imagen a la derecha (elemento independiente, no
   fondo): mismo patrón de 2 columnas que .home-about__grid en Inicio, con
   clases propias .about-hero__* para no tocar esas reglas ni las
   genéricas .hero/.hero-media de layout.css. En móvil pasa a 1 columna y
   la imagen queda debajo del texto por orden natural del HTML.
   Rediseño editorial: antes 12fr/5fr con gap:0 — el contenido (limitado a
   560px por .about-intro__body, más abajo) dejaba mucho aire "muerto"
   dentro de su propia columna en vez de un gap real entre columnas, y la
   imagen quedaba angosta (columna de solo 5/17 ≈ 29%). Ahora 7fr/5fr
   (contenido ~52%, imagen ~38%, dentro de lo pedido) + gap real de 112px
   — la imagen gana ancho (≈343px → ≈440px en 1440px) sin tocar el
   archivo ni su proporción (sigue sin aspect-ratio forzado, sin recorte). */
.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-xl);
}

.page-about .about-hero__content .section__header {
  max-width: 100%;
  /* Ajuste de precisión: 48px (antes var(--space-lg), 64px) — 16px menos
     para que título y párrafos se perciban más relacionados como una
     misma composición, sin perder el espacio negativo.
     Ronda "refinamiento (bloque principal)": -24px adicionales (3rem →
     1.5rem, dentro de 20-30px pedido, punto de partida) — título y
     párrafos deben leerse como una sola introducción. El título en sí
     (texto/tamaño/peso/color/line-height/posición) no se toca: esto
     solo acorta el espacio DESPUÉS de él. Ver .about-hero__driver más
     abajo, donde se compensa este mismo desplazamiento para que
     "Impulsados por:" no se mueva de su posición actual. */
  margin: 0 0 1.5rem;
  text-align: left;
}

.page-about .about-hero__content .section__header::after {
  margin: var(--space-sm) 0 0;
}

/* ---------- Títulos de Acerca de: mismo tamaño que las secciones de contenido de Inicio ----------
   Ya no se usa el tamaño/efecto del H1 del Hero (slide 1, pensado para ir
   sobre el video) — en su lugar, el H1 "Acerca de TASS" iguala el tamaño
   que usan los H2 de sección de Inicio en "Nuestros servicios" y "Acerca
   de nosotros" (slides 2 y 3: clamp 2–3.125rem, ver
   .home-services .section__header h2 / .home-about__inner h2 más arriba),
   sin text-shadow — esas secciones tampoco lo llevan, van sobre fondo
   claro liso. Misión/Visión (H2) quedan un escalón por debajo, del mismo
   tamaño que el h3 base del sitio, para una jerarquía clara y con aire
   dentro del espacio más angosto de esta página. Los párrafos ya usaban el
   mismo tamaño/color que los de Inicio (1rem, --color-graphite), así que
   no requieren cambio. */
.page-about .about-hero__content .section__header h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.125rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Rediseño editorial (solo escritorio, ≥901px — pedido explícitamente
   "en desktop"; mobile/tablet conservan el tamaño/peso de arriba sin
   cambios): el H1 "Acerca de TASS" deja de igualar el tamaño de los H2
   de sección y gana protagonismo propio como primer elemento de la
   página — 54-64px (antes hasta 50px), peso 600 ("medium/semibold",
   Manrope ya lo carga — antes 700, se sentía pesado/convencional para
   esta dirección editorial) y line-height más cerrado (1.05, explícito).
   Mismo color (var(--color-espresso), heredado) y letter-spacing de
   siempre. */
@media (min-width: 901px) {
  .page-about .about-hero__content .section__header h1 {
    font-size: clamp(3.375rem, 3rem + 1.2vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
  }
}

.page-about .about-mission h2,
.page-about .about-vision h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.125rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Imagen: fotografía editorial independiente, no una textura de fondo.
   Proporción natural (sin recorte ni aspect-ratio forzado) para no perder
   composición; radio de esquina + sombra cálida muy sutil + las mismas dos
   capas de gradación cinematográfica (viñeta discreta en multiply, veladura
   cálida en soft-light) que ya usamos en la vista previa de Inicio
   (.home-about__media), para que ambas fotografías de "Acerca de" compartan
   el mismo lenguaje visual. */
.page-about .about-hero__media {
  position: relative;
}

/* Alineación óptica con el título (se retira el desfase editorial de
   48px de una ronda anterior — a petición explícita, la imagen debe
   alinearse con "Acerca de TASS", no separarse de él). El grid ya usa
   align-items:start (arriba), así que ambas cajas comparten
   matemáticamente el mismo borde superior sin este margin; los 4px que
   quedan son la compensación óptica mínima (dentro de los 2-6px
   pedidos) por el hueco de ascendente propio de cualquier tipografía a
   este tamaño — el H1 no tiene padding/margin superior (reset global,
   base.css), pero el trazo visible de la letra arranca unos px por
   debajo del borde de su caja de línea; la imagen no tiene ese hueco,
   así que sin esta compensación se vería empezando más arriba que el
   texto. Solo aplica en el layout de 2 columnas (≥701px); en móvil
   (1 columna, imagen debajo del texto) no hay alineación que resolver. */
@media (min-width: 701px) {
  .page-about .about-hero__media {
    margin-top: 4px;
  }
}

.page-about .about-hero__media::before,
.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius-md);
}

.page-about .about-hero__media::before {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(15, 11, 6, 0.22) 100%);
  mix-blend-mode: multiply;
}

.page-about .about-hero__media::after {
  background: linear-gradient(155deg, rgba(199, 165, 124, 0.18) 0%, rgba(199, 165, 124, 0) 48%, rgba(20, 14, 8, 0.12) 100%);
  mix-blend-mode: soft-light;
}

.page-about .about-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -26px rgba(70, 49, 31, 0.4);
  filter: contrast(1.09) saturate(0.92) brightness(0.99);
}

@media (max-width: 700px) {
  .page-about .about-hero__grid {
    grid-template-columns: 1fr;
    /* Ronda "refinamiento móvil": -25% (32px → 24px) — espacio antes de
       la foto (entre "Impulsados por:" y la imagen) un poco más
       ajustado, parte de "que no quede aislada". */
    gap: 1.5rem;
  }

  .page-about .about-intro__body {
    max-width: 100%;
  }

  /* Ronda "refinamiento móvil" (corrección importante): la fotografía
     es un archivo retrato (700×1052, ratio 0.665) — a ancho completo
     en móvil, height:auto la deja ~50% más alta que ancha, dominando
     la pantalla. aspect-ratio la controla a un ratio de retrato más
     moderado (7:8 = 0.875), -24% de alto real respecto al alto
     anterior (dentro del 20-30% pedido), mismo ancho completo/radio/
     archivo/calidad. object-fit:cover + object-position recortan solo
     una franja del techo/cielo superior (la zona menos importante de
     la foto): pasillo, vegetación y la persona con las cajas —el
     elemento central, ubicado en el tercio medio-bajo del encuadre
     original— se mantienen completos y visibles. Solo aplica en
     móvil: escritorio conserva height:auto (regla base, arriba). */
  .page-about .about-hero__image {
    aspect-ratio: 7 / 8;
    object-fit: cover;
    object-position: 50% 58%;
  }
}

/* ---------- Frase editorial (puente entre Acerca de TASS y Misión/Visión) ----------
   Momento visual discreto: solo tipografía + espacio negativo, sin
   tarjeta, fondo, borde ni ícono. Padding moderado (no min-height,
   sin pinning/sticky) para que se sienta como un puente, no como una
   pantalla completa.
   Ronda "lienzo continuo": fondo explícito --color-linen (antes
   transparente, heredaba el blanco --color-paper del body) — sin esto
   la frase quedaba sobre un tono distinto al de Acerca de TASS y
   Misión/Visión, que sí lo declaran, rompiendo la sensación de lienzo
   único.
   Ronda "ritmo vertical" + ronda "mucho más espacio": más aire arriba
   (desde el hero) y abajo (hacia Misión/Visión), aumentado de forma
   claramente perceptible — ver el @media más abajo para los valores
   de desktop y el porqué de cada uno. Base (aquí) subida moderadamente
   para móvil (2.75rem → 3.25rem ambos lados): sumado a los 5rem/80px
   fijos de .about-hero (sin tocar) y a los 3rem/48px base de
   .about-mission-vision (sin tocar en móvil), da ~132px hacia el hero
   y ~100px hacia Misión/Visión — dentro de los 90-130px de referencia
   para móvil, sin copiar los valores grandes de desktop.
   Ronda "declaración de marca": padding-bottom sube otra vez, solo en
   móvil (3.25rem → 4rem) — más aire después de la frase también ahí,
   proporcional y bastante menor que el salto de desktop (ver @media
   abajo). padding-top sin tocar: la mayor parte del aire nuevo debe
   estar después de la frase, no antes.
   Ronda "todavía más pausa": +8px más en móvil (4rem → 4.5rem),
   proporcionalmente menor que el salto de desktop (+48px) — misma
   proporción 2:3 que el ajuste equivalente hacia testimonios, más
   abajo. padding-top sigue sin tocarse. */
.page-about .about-statement {
  /* Ronda "ritmo vertical (pausas editoriales)": el tramo "Acerca de
     TASS → frase" se sentía demasiado amplio — se reduce el padding-top
     (móvil aquí; desktop en el @media de abajo) en -24px (3.25rem →
     1.75rem), proporcionalmente menor que el ajuste de escritorio
     (-60px). El padding-bottom de .about-hero (80px, sin tocar) sigue
     aportando su parte de este tramo sin cambios.
     Ronda "conectar con el hero": -12px más (28px→16px, proporcionalmente
     menor que el ajuste de escritorio de -60px de abajo) — mueve el
     bloque completo (frase, ilustración, Misión, Visión) más cerca del
     hero, sin tocar el padding-bottom de .about-hero. */
  padding-top: 1rem;
  /* Ronda "ilustración arquitectónica": con la ilustración ocupando
     ahora la columna derecha (ver .about-statement__grid más abajo),
     la fila pasa a medir lo que mide la imagen (más alta que las dos
     líneas de texto) en vez de solo el texto — para no sumar esa
     diferencia completa a la altura de la sección, este padding-bottom
     se reduce (42px→20px) y absorbe parte del crecimiento; el resto es
     la imagen ocupando el espacio negativo que ya existía hacia
     Misión/Visión, tal como se pidió.
     Ronda "refinamiento móvil": -20% (20px → 16px) — junto con el gap
     de .about-statement__grid (arriba), ~20% menos de aire alrededor
     de la ilustración en móvil/tablet (<901px, donde aplica esta
     regla base — desktop la sobreescribe por completo a 0, sin
     cambios). */
  padding-bottom: 1rem;
  /* Ronda "pausa más controlada": la pausa entre "Impulsados por" y la
     frase editorial se sentía demasiado grande. Sin tocar el
     padding-bottom de .about-hero (80px, fuera de alcance), se acerca
     el bloque completo (frase + ilustración + Misión/Visión +
     testimonios, arrastrados como unidad por estar en flujo normal)
     con un margin-top negativo aplicado solo aquí — la composición
     interna de cada sección no se toca. En tablet/móvil el ajuste es
     proporcionalmente menor (-30px vs. -50px en desktop, ver @media
     901px abajo) para conservar suficiente aire en pantallas más
     angostas. */
  margin-top: -1.875rem;
  background-color: var(--color-linen);
}

/* Ronda "ilustración arquitectónica": composición de 2 columnas
   (texto/ilustración) dentro de la MISMA sección — no es una sección
   nueva. Mobile-first: 1 columna (imagen apilada debajo del texto, en
   el orden natural del DOM). Mismo breakpoint que
   .about-mission-vision__grid (700px, ver más abajo) para que "en
   tablet conserve la composición lado a lado mientras exista espacio
   suficiente" tal como se pidió — no se inventa un breakpoint nuevo. */
.page-about .about-statement__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  /* Ronda "refinamiento móvil": -19% (32px → 26px) — solo importa en
     móvil apilado (<701px); desde 701px se reemplaza por su propio
     column-gap, más abajo, sin cambios. Parte de compactar ~20% el
     espacio alrededor de la ilustración (junto con el padding-bottom
     de .about-statement, más abajo). */
  gap: 1.625rem;
}

@media (min-width: 701px) {
  .page-about .about-statement__grid {
    /* 45% texto / 55% ilustración, dentro de lo pedido. */
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    column-gap: var(--space-md);
  }
}

@media (min-width: 901px) {
  .page-about .about-statement__grid {
    /* Gap completo (64px) solo en desktop, mismo token que ya usa
       .about-mission-vision__grid — no un valor nuevo. */
    column-gap: var(--space-lg);
  }
}

/* Envoltorio de la ilustración: centrado en móvil (apilada), alineada
   hacia el borde derecho desde tablet — la imagen ya está diseñada con
   su masa visual hacia la derecha (ver .about-statement__illustration
   más abajo); dentro de una columna más ancha que su propio max-width,
   este alineado la acerca al borde derecho del container en vez de
   dejarla flotando a la izquierda de su columna. */
.page-about .about-statement__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 701px) {
  .page-about .about-statement__visual {
    justify-content: flex-end;
  }
}

/* Ilustración: PNG con fondo blanco (archivo original, sin procesar)
   — mix-blend-mode:multiply funde el blanco con el --color-linen de
   fondo de esta sección (mismo mecanismo que un blanco sobre crema:
   blanco × color = color, así que el rectángulo blanco desaparece
   visualmente y solo quedan los trazos, más oscuros que el blanco).
   Ronda "más presencia": opacidad 0.32→0.45 (+40%, dentro de 35-50%
   pedido). Ronda "microajuste final": 0.45→0.50 (+11%, dentro de
   10-15% pedido) — un poco más de definición, la jerarquía sigue
   siendo frase > ilustración. Sin
   card, sin fondo propio, sin sombra, sin borde. object-fit:contain +
   width:100%/height:auto conservan la proporción original sin recorte
   ni deformación. max-width por breakpoint controla el tamaño real
   (90% en móvil, 400px en tablet, 660px en desktop — ronda "más
   presencia": +18% sobre los valores anteriores de tablet/desktop,
   85%→90% en móvil, un ajuste más moderado ahí para evitar overflow y
   mantenerla secundaria en pantallas pequeñas). */
.page-about .about-statement__illustration {
  display: block;
  width: 100%;
  height: auto;
  max-width: 90%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* Ronda "ilustración +15% (solo móvil)": tamaño ampliado respecto al
   90% original de la columna de texto.

   Ronda "ilustración +10% adicional, ancho independiente del texto":
   el enfoque anterior (bleed relativo a la columna de .container) ya
   dejaba la imagen a solo ~10px del borde real de pantalla — no había
   margen físico para otro +10% completo sin desbordar el viewport
   (confirmado con el usuario: el techo matemático absoluto, borde a
   borde, es ~+5.6% sobre el estado de esa ronda). Se resuelve con un
   ancho relativo al VIEWPORT (100vw), no al contenedor de texto — así
   el límite deja de ser el padding de .container (16px) y pasa a ser
   el propio viewport, con solo 2px de margen de seguridad por lado
   (acordado con el usuario). .about-statement__text/.about-statement__grid
   no se tocan: el texto sigue exactamente en su misma columna, ancho,
   padding, posición y saltos de línea — la imagen y el texto ya eran
   hijos independientes de .about-statement__grid (filas separadas), así
   que bastó con desacoplar el ancho de la imagen, sin nuevo wrapper ni
   cambios de arquitectura.
   Centrado sin transform/position/márgenes negativos: .about-statement__visual
   (el contenedor directo de esta imagen) ya es display:flex +
   justify-content:center en todos los breakpoints (regla base, más
   arriba) — cuando un hijo flex mide más que su contenedor, "center"
   lo desborda de forma simétrica por diseño del propio flexbox, sin
   necesidad de ningún margin/offset adicional aquí.
   height:auto conserva la proporción exacta del archivo; opacidad,
   mix-blend-mode, color y la animación de aparición (reveal-up, más
   abajo) no se tocan. Solo <701px: tablet (400px) y desktop (660px),
   en los @media de abajo, no se ven afectados. */
@media (max-width: 700px) {
  .page-about .about-statement__illustration {
    width: calc(100vw - 4px);
    max-width: calc(100vw - 4px);
  }

  /* La imagen crece también en alto (mismo archivo, misma proporción,
     height:auto) — se conservan los microajustes ya hechos en la ronda
     anterior para absorber ese crecimiento sin ampliar de más el alto
     total de la sección: gap hacia la frase (32px → 20px) y
     padding-bottom hacia Misión/Visión (20px → 12px). La frase
     editorial, su tamaño, y el resto del spacing de la página no se
     tocan. */
  .page-about .about-statement__grid {
    gap: 1.25rem;
  }

  .page-about .about-statement {
    padding-bottom: 0.75rem;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .page-about .about-statement__illustration {
    /* 340px→400px (+18%). El grid es fluido (fr-based), así que a
       anchos de tablet más angostos la imagen sigue acotada por el
       ancho real de su columna (nunca fuerza overflow ni toca el
       texto), y solo alcanza los 400px llena cerca de los 900px. */
    max-width: 400px;
  }
}

@media (min-width: 901px) {
  .page-about .about-statement__illustration {
    /* 560px→660px (+18%, punto de partida pedido). */
    max-width: 660px;
    /* Ronda "más presencia": desplazamiento de 32px hacia la
       izquierda (dentro de 25-40px pedido), dentro del flujo normal
       — margin-right sobre la imagen alineada con
       justify-content:flex-end en .about-statement__visual (ver
       arriba): un margen a la derecha la aleja de ese borde en vez de
       acercarla, sin position:absolute, transforms ni márgenes
       negativos. Solo en desktop, tal como se pidió (tablet/móvil no
       fuerzan este mismo desplazamiento). */
    margin-right: 2rem;
  }
}

/* Ronda "mismo reveal que la frase": mismo sistema .reveal-up +
   IntersectionObserver de main.js (sin observer nuevo, sin sistema
   paralelo) — y ahora también los mismos valores exactos que
   .about-statement__line.reveal-up (misma duración base 1150ms/1400ms
   desktop, mismo --ease-elegant, mismo desplazamiento 40px, dentro de
   35-45px pedido). Antes tenía su propio desplazamiento (24px) y
   delay distintos; ahora solo el delay se mantiene propio, encadenado
   tras la segunda línea: 220ms (delay de
   .about-statement__line--second) + 160ms pedido = 380ms base;
   280ms + 160ms = 440ms desktop — "frase → ilustración" como un solo
   gesto, sin ser simultáneos. El estado final (opacidad 0.5, tamaño,
   posición, mix-blend-mode) no cambia: la animación solo controla
   cómo se llega a ese estado, no el estado en sí. */
.page-about .about-statement__illustration.reveal-up {
  transform: translateY(40px);
  transition: opacity 1150ms var(--ease-elegant), transform 1150ms var(--ease-elegant);
  transition-delay: 380ms;
}

@media (min-width: 901px) {
  .page-about .about-statement__illustration.reveal-up {
    transition-duration: 1400ms;
    transition-delay: 440ms;
  }
}

/* Mismo motivo que .about-statement__line.reveal-up más abajo: esta
   regla tiene más especificidad que el reset genérico de .reveal-up en
   base.css, así que necesita su propio reset bajo reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-statement__illustration.reveal-up {
    transform: none;
    transition: none;
  }
}

/* Refinamiento: tamaño reducido (antes hasta 56px, podía romper la
   primera línea "Tecnología, servicio y confianza" en dos por sí sola,
   sumando una tercera línea visual al <br> del HTML) + max-width algo
   mayor (880px → 960px) para que esa primera línea quepa con holgura a
   los ~44-48px pedidos. Peso y color sin cambio (500, espresso).
   Ronda "declaración de marca": tamaño móvil 32-40px → 34-40px (dentro
   de 34-40px pedido, "sin exagerar"). max-width 960px → 1100px (el
   .container tiene 1200px máx. con 32px de padding total = 1168px
   disponibles a 1440px, así que 1100px cabe con margen) — necesario
   para el tamaño de escritorio más grande de abajo, que si no rompería
   "Tecnología, servicio y confianza" en dos líneas por sí sola. Peso,
   color, alineación: sin cambio. */
.page-about .about-statement__text {
  margin: 0;
  max-width: min(1100px, 100%);
  font-size: clamp(2.125rem, 1.9rem + 1.1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
  text-align: left;
}

/* Ronda "entrada por línea": cada línea es ahora un <span> propio (antes
   una sola línea con <br>) para poder animarlas con un pequeño desfase
   — mismo patrón que "¿Por qué TASS?" en Inicio (.home-why__line,
   home.why.soft/.strong), solo que aquí NO hay salida/fade-out al
   seguir bajando: es únicamente la entrada. display:block reproduce
   exactamente el mismo salto de línea que antes daba el <br>, sin
   cambiar tamaño/peso/color/line-height/ancho (heredados del <p>
   .about-statement__text, sin tocar). */
.page-about .about-statement__line {
  display: block;
}

/* Entrada: reutiliza .reveal-up + el IntersectionObserver ya existente
   en main.js (activa .is-visible una sola vez por elemento y deja de
   observarlo — nunca se vuelve a ocultar al salir del viewport, nunca
   hay una segunda lógica de scroll). Distancia (40px, dentro de
   35-45px pedido) y --ease-elegant (cubic-bezier premium ya usado en
   todo el sitio, sin bounce/zoom/rotación) se mantienen fijos en todo
   breakpoint; la duración/desfase se ralentizan más en desktop (ver
   @media abajo) y algo menos en móvil (base, aquí) — "puede ser algo
   más corta en móvil, pero debe seguir sintiéndose pausada".
   Ronda "más lenta": duración 900ms→1150ms base / 1400ms en desktop
   (dentro de 1200-1500ms pedido), desfase entre líneas 150ms→220ms
   base / 280ms en desktop (dentro de 220-320ms pedido) — antes se
   percibía demasiado rápida. opacity ya queda en 1 bajo prefers-
   reduced-motion por la regla global de base.css; transform/transition
   necesitan su propio reset por especificidad, ver más abajo. */
.page-about .about-statement__line.reveal-up {
  transform: translateY(40px);
  transition: opacity 1150ms var(--ease-elegant), transform 1150ms var(--ease-elegant);
}

.page-about .about-statement__line--second.reveal-up {
  transition-delay: 220ms;
}

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

  .page-about .about-statement__line--second.reveal-up {
    transition-delay: 280ms;
  }
}

/* La regla global de prefers-reduced-motion en base.css apunta a
   .reveal-up (una sola clase); esta tiene más especificidad
   (.page-about .about-statement__line.reveal-up, 3 clases) y por eso
   necesita su propio reset aquí — si no, bajo reduced-motion el texto
   quedaría desplazado 40px de forma permanente (el observer de main.js
   no llega a correr, así que .is-visible nunca se agrega). Coincide
   con lo pedido: "muestra la frase directamente sin desplazamientos". */
@media (prefers-reduced-motion: reduce) {
  .page-about .about-statement__line.reveal-up {
    transform: none;
    transition: none;
  }
}

@media (min-width: 901px) {
  .page-about .about-statement {
    /* Ronda "mucho más espacio": el ajuste anterior (4.25rem/4.5rem) se
       sintió todavía comprimido — aumento claramente perceptible.
       Arriba: 7.5rem/120px + los 5rem/80px fijos de .about-hero (sin
       tocar) = ~200px hacia el hero, dentro de 180-220px pedido. SIN
       TOCAR en esta ronda — "la mayor cantidad de aire debe estar
       después de la frase, no antes".
       Abajo, ronda "declaración de marca": 6rem/96px → 10.5rem/168px.
       Ronda "todavía más pausa": +48px más (10.5rem → 13.5rem/216px,
       dentro de 40-60px adicionales pedido) — único valor tocado para
       este tramo, ya que es literalmente "el espacio después de la
       frase". Sumado a los 7rem/112px de padding-top de
       .about-mission-vision en desktop (sin tocar): ~328px hacia
       Misión/Visión — la "pausa amplia" pedida, sin volverse una
       sección aparte (mismo fondo, sin línea divisoria).
       Ronda "ritmo vertical (pausas editoriales)": la referencia fue
       revisada al 25% de zoom, pero el ajuste se hace sobre los px
       reales de CSS. "Acerca de TASS → frase" se sentía demasiado
       amplio: -60px (7.5rem → 3.75rem). Sumado a los 80px de
       .about-hero (sin tocar): 200px → 140px de aire real — sigue
       siendo el tramo "amplio" pedido, solo menos exagerado.
       Ronda "conectar con el hero": se pidió reducir 70-90px más
       (80px como punto de partida) para que el bloque completo
       (frase+ilustración+Misión/Visión, movido como unidad) se sienta
       más conectado con el hero. El máximo posible sin tocar el
       padding-bottom de .about-hero (80px, fuera de alcance en este
       pedido) es -60px (3.75rem→0) — no alcanza el piso de 70px
       pedido; ver nota fuera de este archivo. Aire real resultante:
       80px (solo el padding-bottom de .about-hero, sin tocar). */
    padding-top: 0;
    /* Ronda "ilustración arquitectónica": con la ilustración (560px de
       ancho máx., ~315px de alto) marcando ahora la altura de la fila
       en vez de las dos líneas de texto (~119px), la fila crece
       ~196px por sí sola. Para no sumar ese crecimiento completo a la
       altura de la sección, este padding-bottom se reduce de forma
       importante (132px→24px, el mínimo que sigue dejando una pausa
       clara antes de Misión/Visión) — el resto del espacio que antes
       era aire vacío ahora lo ocupa la imagen, tal como se pidió.
       Resultado neto (antes de la ronda "más presencia" de abajo):
       la sección crecía ~88px respecto al estado previo a la
       ilustración.
       Ronda "más presencia": la ilustración sube de 560px a 660px de
       ancho máx. (+18%, ver .about-statement__illustration), así que
       su alto pasa de ~315px a ~371px (+56px) — para absorber la
       mayor parte posible de ese crecimiento sin tocar el padding-top
       (mismo principio de siempre) este padding-bottom baja a 0
       (mínimo posible). Aun así, quedan ~32px de crecimiento
       adicional que no se pueden compensar sin volverse negativo —
       Misión/Visión se desplaza esos ~32px más abajo (sumado a los
       ~88px de la ronda anterior). Sumado a los 112px de
       .about-mission-vision (sin tocar): ~112px hacia Misión/Visión,
       pausa clara sin volverse una sección aparte. */
    padding-bottom: 0;
    /* Ronda "pausa más controlada": -50px (dentro de lo pedido) sobre el
       tramo hero→frase, vía margin-top negativo (no se toca el
       padding-bottom de .about-hero, fuera de alcance) — el bloque
       completo (frase, ilustración, Misión/Visión, testimonios) se
       acerca al hero sin alterar el padding-top/bottom propios de esta
       sección ni la composición interna de ninguna sección siguiente.
       Objetivo: 1440×900/100% zoom (pendiente de verificación visual
       manual, sin acceso a navegador en esta sesión). */
    margin-top: -3.125rem;
  }

  /* Ronda "declaración de marca": 44-48px → 48-54px (dentro de lo
     pedido) — carácter de declaración de marca, por debajo del H1
     "Acerca de TASS" (58-64px en este rango de ancho) y claramente por
     encima de Misión/Visión (36-44px). Curva deliberadamente lenta al
     inicio: llega a ~47px justo en los 901px (el mismo valor ya
     probado como seguro para que "Tecnología, servicio y confianza"
     no se parta en dos por sí sola — justo en ese punto el ancho
     disponible lo limita el contenedor, antes que el max-width de
     arriba) y solo alcanza el máximo de 54px hacia 1440px+, donde ya
     sobra ancho. line-height compacto sin cambio (1.1). */
  .page-about .about-statement__text {
    font-size: clamp(2.875rem, 2.2rem + 1.3vw, 3.375rem);
    line-height: 1.1;
  }
}

/* ---------- Misión y Visión: integrada con el bloque de arriba ----------
   Ver "Lienzo continuo" más abajo para el estado actual (mismo
   --color-linen plano en toda la página, sin fundidos ni línea
   divisoria entre secciones). */
/* Rediseño editorial: más respiración general del bloque — padding
   superior aumentado (antes 112px, heredado de .section base) para más
   aire debajo del header. Padding inferior: llegó a 7rem en la ronda
   "lienzo continuo" (sin línea divisoria, el espacio tenía que bastar
   por sí solo entre Acerca de TASS y Misión/Visión); ahora que la
   frase editorial ocupa ese lugar con su propio padding (ver
   .about-statement más abajo), se reduce a 5rem para no duplicar el
   aire — el bloque inicial en sí (título, párrafos, imagen) no se
   toca. */
.page-about .about-hero {
  padding-top: 9rem;
  padding-bottom: 5rem;
}

/* Ronda "refinamiento móvil": -40% (80px → 48px) — espacio después de
   la foto, hacia la frase editorial, era el mayor contribuyente a que
   la imagen se sintiera aislada en móvil. Escritorio conserva 80px
   (regla base, arriba) — esta ronda es principalmente de móvil. */
@media (max-width: 900px) {
  .page-about .about-hero {
    padding-bottom: 48px;
  }
}

/* Ronda "acercar al header (solo móvil real)": el header es fixed (no
   reserva espacio en el flujo, ver layout.css), así que este
   padding-top es literalmente todo el hueco entre el header y "Acerca
   de TASS" en móvil. -40px (144px → 104px, punto de partida pedido,
   dentro de 35-50px) — header, logo, selector, botón y hamburguesa no
   se tocan (viven en layout.css, fuera de este archivo); tampoco se
   toca el resto del spacing interno ya afinado (párrafos, "Impulsados
   por", foto, frase editorial, ilustración, Misión/Visión,
   testimonios) — un solo valor, y todo el bloque sube junto por flujo
   normal, sin transform/position/márgenes negativos.
   Scope estrictamente <701px (no 900px, como el resto de overrides
   de esta sección): a esta ronda se le pidió explícitamente no tocar
   tablet, solo el móvil real — así que usa su propio breakpoint en vez
   de sumarse al bloque de arriba. */
@media (max-width: 700px) {
  .page-about .about-hero {
    padding-top: 104px;
  }
}

/* Ronda "lienzo continuo": incluida esta sección, toda la página usa
   exactamente el mismo --color-linen plano del Home (Hero/Servicios/
   Estadísticas/Acerca de nosotros) — se retira el fundido hacia
   --color-paper que llevaba el borde inferior (pensado para cuando
   "Lo que dicen nuestros clientes" era blanca; esa sección ahora
   también es --color-linen, ver más abajo, así que el fundido dejaría
   una franja de tono distinto en medio de un fondo ya uniforme).
   Padding ligeramente mayor (2.5rem → 3rem, ambos lados) para que cada
   columna se sienta un poco más amplia sin crear un hueco grande.
   Refinamiento posterior: padding-bottom reducido a 2.25rem (junto con
   el padding-top de .about-testimonials, más abajo) para acercar
   Misión/Visión a testimonios — seguían sintiéndose como dos bloques
   separados pese al mismo fondo continuo. padding-top intacto.
   Ronda "ritmo vertical": ese acercamiento se sintió demasiado apretado
   una vez sumada la nueva animación de la frase — se sube de nuevo a
   2.5rem base (mobile incluido, respiración algo mayor mientras no
   pese como el valor de desktop) y a 3rem en el @media de abajo.
   Ronda "mucho más espacio": sigue sintiéndose comprimido — padding-top
   sube a 3.5rem base / 4.5rem en desktop (frase → Misión/Visión, ver
   también el padding-bottom de .about-statement más arriba) y
   padding-bottom sube a 3rem base / 4.5rem en desktop (Misión/Visión →
   testimonios, ver también el padding-top de .about-testimonials más
   abajo). Estructura, columnas, títulos y textos internos no se
   tocan — solo el aire externo de la sección. */
.page-about .about-mission-vision {
  /* Ronda "microajuste final": -12px (56px→44px, proporcionalmente
     menor que el ajuste de escritorio de abajo) — mueve el bloque
     completo (Misión, Visión, hairlines, textos, todos con la misma
     relación interna) un poco más cerca de la ilustración, sin tocar
     spacing/columnas/alineación internos (esos viven en las reglas de
     abajo, sin cambios). Solo este padding-top se toca; el
     padding-bottom (hacia testimonios) sigue igual.
     Ronda "refinamiento móvil": -16% ambos lados (44px → 37px /
     48px → 40px) — parte de compactar ~15% el ritmo interno de
     Misión/Visión (ilustración→título y final de Visión→testimonios).
     Solo aplica <901px: desde 901px esta sección sobreescribe ambos
     valores por completo (@media abajo, sin cambios). */
  padding-top: 2.3125rem;
  padding-bottom: 2.5rem;
  background-color: var(--color-linen);
}

@media (min-width: 901px) {
  .page-about .about-mission-vision {
    /* Ajuste puntual de spacing: +40px solo en este lado (dentro de
       30-50px pedido) para separar más la frase editorial del inicio
       de Misión/Visión. Único valor tocado en este ajuste — no afecta
       el tramo hero→frase (padding-top/bottom de .about-hero y
       .about-statement, sin tocar) ni el tramo Misión/Visión→
       testimonios (padding-bottom de aquí abajo, sin tocar).
       Ronda "microajuste final": -42px (112px→70px, punto de partida
       pedido) — mueve el bloque completo de Misión/Visión hacia
       arriba como unidad (solo este padding-top externo; spacing,
       columnas, hairlines y textos internos sin cambios) para una
       pausa editorial más controlada tras la ilustración. */
    padding-top: 4.375rem;
    padding-bottom: 4.5rem;
  }
}

/* Rediseño editorial: se retira el centrado (antes max-width:900px +
   margin:0 auto, que además desalineaba la sección respecto al borde
   izquierdo del bloque de "Acerca de TASS" de arriba) — ahora ocupa el
   ancho completo del container, alineada al mismo borde izquierdo, y
   con más aire entre columnas (antes var(--space-lg), 64px) para que
   Misión y Visión no se sientan pegadas. */
.page-about .about-mission-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.page-about .about-mission,
.page-about .about-vision {
  display: flex;
  flex-direction: column;
}

/* Línea superior editorial (kicker): antes convivía aquí con un número
   "01"/"02" a su izquierda (ronda "simplificación visual": números
   eliminados del HTML por pedido explícito — .about-mission-vision__index,
   que solo estilizaba ese número, ya no tiene ningún elemento al que
   aplicarse y se retira). Se conserva el contenedor flex (kicker) y la
   línea (rule), exactamente con el mismo grosor/color/posición/ancho de
   siempre — la línea ya no "le deja sitio" a ningún número, pero su
   propio ancho/estilo no cambia. aria-hidden se conserva en el kicker:
   la línea sigue siendo puramente decorativa. */
.page-about .about-mission-vision__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

/* Ronda "refinamiento móvil": hairline→título -17% (36px → 30px),
   dentro del ~15% pedido de compactación interna de Misión/Visión.
   Escritorio conserva 36px (regla base, arriba). */
@media (max-width: 900px) {
  .page-about .about-mission-vision__kicker {
    margin-bottom: 1.875rem;
  }
}

.page-about .about-mission-vision__rule {
  flex-shrink: 0;
  width: 32px;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-sand) 75%, var(--color-espresso) 25%);
}

.page-about .about-mission h2,
.page-about .about-vision h2 {
  margin-bottom: 1.5rem;
  /* Rediseño editorial: más presencia (antes hasta 50px, igual que los
     H2 de sección) pero un escalón por debajo del H1 de "Acerca de
     TASS" — 38-44px, peso 600 ("medium/semibold", antes 700) y
     line-height compacto. Mismo color heredado (--color-espresso).
     Mobile/tablet (<901px) conservan el tamaño/peso base, sin cambios.
     Margen inferior (título → párrafo): 1rem → 1.25rem, y de nuevo a
     1.5rem en la ronda "mucho más espacio" — solo aire, tamaño/peso/
     line-height del h2 sin cambio. */
}

/* Ronda "refinamiento móvil": título→párrafo -17% (24px → 20px), sin
   tocar tamaño/peso del heading (pedido explícito: "no reduzcas
   agresivamente los headings"). Escritorio conserva 24px (regla base,
   arriba). */
@media (max-width: 900px) {
  .page-about .about-mission h2,
  .page-about .about-vision h2 {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 901px) {
  .page-about .about-mission h2,
  .page-about .about-vision h2 {
    font-size: clamp(2.25rem, 2rem + 0.6vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
  }
}

.page-about .about-mission p,
.page-about .about-vision p {
  /* Rediseño editorial: mismo tono secundario ya usado en los párrafos
     del bloque superior (graphite mezclado con ink, un paso más de
     contraste que el graphite puro de antes) — coherencia de color
     entre ambos bloques de la página. Tamaño/line-height ya heredaban
     16px/1.6 del <p> base, dentro de lo pedido (15-16px, 1.55-1.65);
     sin cambio. */
  color: color-mix(in srgb, var(--color-graphite) 82%, var(--color-ink) 18%);
}

/* Ronda "refinamiento móvil": -6.25% (16px → 15px / line-height 1.6 →
   1.5) para alinear el body text de Misión/Visión con el resto de la
   versión móvil (mismo criterio que .about-intro__body p, arriba),
   dentro del ~5-8% pedido. Escritorio sin cambios. */
@media (max-width: 700px) {
  .page-about .about-mission p,
  .page-about .about-vision p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

@media (max-width: 700px) {
  .page-about .about-mission-vision__grid {
    grid-template-columns: 1fr;
    /* Ronda "refinamiento móvil": -19% (32px → 26px) — final de
       Misión → inicio de Visión un poco más ajustado. */
    gap: 1.625rem;
  }
}

/* ---------- Lo que dicen nuestros clientes (carrusel tipo marquee) ----------
   Franja continua en CSS puro (sin librerías ni dependencia de main.js):
   .about-testimonials__track es el único elemento animado (translateX 0 →
   -50%, linear infinite) y contiene dos .about-testimonials__group
   idénticos uno detrás de otro (10 tarjetas cada uno) — al desplazarse
   exactamente la mitad del ancho total, el segundo grupo queda donde
   empezaba el primero y el ciclo se repite sin salto. El viewport tiene
   overflow:hidden y vive fuera de .container (a ancho completo) para que
   el desplazamiento se sienta amplio y editorial; el encabezado sí queda
   dentro de .container, como el resto de la página. Un mask-image difumina
   los bordes izquierdo/derecho para que las tarjetas no se corten en seco
   (funciona sobre cualquier fondo porque atenúa opacidad, no superpone un
   color — no requiere tocarse aunque cambie el fondo de la sección).
   Ronda "elevar testimonios": se retira el acento "dark olive" (verde,
   ajeno a la paleta café/beige/espresso del resto de la página) que
   marcaba el filo izquierdo de la tarjeta y la ubicación — ver el
   detalle de cada regla más abajo (.about-testimonial,
   .about-testimonial__location).

   Rediseño editorial (elevar diseño visual sin tocar el mecanismo del
   loop): se agrega el encabezado "Lo que dicen nuestros clientes" +
   subtítulo, tarjetas más amplias y con más aire interno, tipografía del
   testimonio más legible, ubicación más tenue como firma discreta, y el
   loop se hace más lento (100s → 150s) para que se sienta pausado y
   elegante en vez de ticker de noticias. Pause-on-hover/focus y el fade
   de los extremos ya existían y no se tocan.

   Ronda "lienzo continuo": fondo antes --color-paper (blanco), ahora el
   mismo --color-linen que el resto de la página — ya no hay costura de
   tono hacia Misión/Visión. Padding superior ligeramente mayor (2.5rem
   → 3rem) para más aire antes del encabezado, sin crear un hueco
   grande. Título reducido (antes hasta 42px, demasiado cerca del tamaño
   de Misión/Visión) para que quede claramente terciario/intermedio:
   ahora ~28-34px en desktop.
   Refinamiento posterior: padding-top reducido a 2.25rem (ver también
   el padding-bottom de .about-mission-vision, arriba) para que ambos
   bloques se sientan más conectados sobre el lienzo continuo, sin
   perder aire de por medio.
   Ronda "ritmo vertical": vuelve a subir a 2.5rem base (mobile
   incluido) y a 3rem en desktop.
   Ronda "mucho más espacio": todavía comprimido — sube a 3rem base /
   6rem en desktop (ver @media abajo). Sumado a los 3rem/4.5rem de
   padding-bottom de .about-mission-vision (arriba): ~96px en móvil,
   ~168px en desktop — dentro de 150-190px pedido, para que testimonios
   se sienta como "el siguiente capítulo".
   Ronda "elevar testimonios" + "carrusel más grande": ver el valor
   real y vigente de padding-top/padding-bottom en el @media de abajo
   (base aquí queda en 3rem solo para <901px; en desktop el @media lo
   sobreescribe por completo, valores y porqué documentados ahí).
   Ronda "todavía más pausa": +12px en móvil (3rem → 3.75rem) — misma
   proporción 2:3 que el ajuste equivalente de .about-statement, arriba
   (+8px ahí, +12px aquí), proporcionalmente menor que el salto de
   desktop (+72px) y sin generar un hueco exagerado. */
.page-about .about-testimonials {
  /* Ronda "ritmo vertical (pausas editoriales)": "Misión/Visión →
     testimonios" se reduce -12px en móvil (3.75rem → 3rem),
     proporcionalmente menor que el ajuste de escritorio (-50px, ver
     @media abajo) — sigue existiendo una pausa clara, solo menos
     amplia. El padding-bottom de .about-mission-vision (sin tocar)
     sigue aportando su parte de este tramo sin cambios.
     Ronda "ritmo vertical, acercar Misión/Visión + testimonios":
     -14px adicionales (3rem → 2.125rem/34px), proporcional al -60px
     de escritorio (ver @media abajo) con el mismo criterio
     conservador ya usado en este tramo (esta única regla cubre tablet
     y móvil, sin breakpoint propio en esta sección).
     Ronda "microajuste adicional, acercar Misión/Visión +
     testimonios": -8px adicionales (2.125rem → 1.625rem/26px),
     proporcional al -35px de escritorio (ver @media abajo).
     Ronda "último microajuste, acercar Misión/Visión + testimonios":
     -5px adicionales (1.625rem → 1.3125rem/21px), proporcional al
     -22px de escritorio (ver @media abajo).
     Ronda "microajuste final, acercar Misión/Visión + testimonios":
     -3px adicionales (1.3125rem → 1.125rem/18px), proporcional al
     -12px de escritorio (ver @media abajo).
     Ronda "pausa más corta": -8px adicionales (1.125rem → 0.625rem/
     10px), proporcional al -35px de escritorio (ver @media abajo,
     primer punto de prueba pedido) — mismo criterio de siempre: único
     valor tocado, sube el wrapper completo de testimonios (título,
     subtítulo, carrusel, tarjetas, controles, contenido interno) como
     una sola unidad vía flujo normal, sin transform/position/márgenes
     negativos. .about-mission-vision (posición, spacing y padding-
     bottom propios) no se toca.
     Ronda "microajuste 12px": -3px adicionales (0.625rem → 0.4375rem/
     7px), proporcional a los -12px de escritorio (ver @media abajo).
     Mismo criterio: único valor tocado, sin transform/márgenes
     negativos/offsets. */
  padding-top: 0.4375rem;
  padding-bottom: var(--space-lg);
  background-color: var(--color-linen);
  overflow: hidden;
}

@media (min-width: 901px) {
  .page-about .about-testimonials {
    /* padding-top: espacio Misión/Visión → título de testimonios.
       Corrección: la ronda anterior ("espacio debajo del carrusel")
       había reemplazado por error este padding-top (9rem, fijado en la
       ronda "mucho más espacio") en vez de añadir el padding-bottom
       junto a él — quedaban sin querer en 3rem/48px de base, perdiendo
       ese ajuste. Se restauró y se sumaron 48px ("testimonios se
       sienta como el siguiente capítulo"): 9rem (144px) → 12rem
       (192px).
       Ronda "todavía más pausa": +72px más (12rem → 16.5rem/264px,
       dentro de 60-80px adicionales pedido) — único valor tocado para
       este tramo, ya que es literalmente "el comienzo de testimonios".
       Sumado a los 4.5rem/72px de padding-bottom de
       .about-mission-vision (sin tocar): ~336px de aire entre
       Misión/Visión y el título — un punto más que los ~328px del
       tramo frase→Misión/Visión (ver .about-statement más arriba),
       reflejando que testimonios es un cambio de capítulo más claro.

       padding-bottom: espacio hacia el CTA final. Ya estaba en 9rem
       (144px), dentro de 130-170px pedido — sin cambio en esta ronda
       (no forma parte de lo pedido ahora). El CTA (.cta-section, sin
       tocar) es un bloque oscuro con su propio padding-top de 112px ya
       dentro de esa caja oscura (no es "aire" del lienzo crema), así
       que la separación visible real sobre fondo crema es exactamente
       este padding-bottom, un solo valor, sin sumar otros márgenes.
       Ronda "ritmo vertical (pausas editoriales)": ajuste "más
       conservador" pedido para este tramo — -50px (16.5rem →
       13.375rem, dentro de 40-60px pedido, exactamente el punto de
       partida de 50px). Sumado a los 72px de .about-mission-vision
       (sin tocar): 336px → 286px. Sigue siendo el tramo más amplio de
       los tres (pausa "clara" antes de testimonios), pero ya no
       desproporcionado.
       Ronda "ritmo vertical, acercar Misión/Visión + testimonios":
       -60px (punto de partida pedido), 13.375rem/214px → 9.625rem/
       154px, para que testimonios no se sienta desconectado de
       Misión/Visión. El padding-bottom de .about-mission-vision (sin
       tocar) sigue aportando su parte de este tramo sin cambios —
       único valor tocado, sube el wrapper completo de testimonios
       (título, subtítulo, carrusel, tarjetas, controles) como una
       sola unidad.
       Ronda "microajuste adicional, acercar Misión/Visión +
       testimonios": -35px adicionales (punto de partida pedido),
       9.625rem/154px → 7.4375rem/119px. Mismo criterio: único valor
       tocado, sube el wrapper completo como unidad.
       Ronda "último microajuste, acercar Misión/Visión +
       testimonios": -22px adicionales (punto de partida pedido),
       7.4375rem/119px → 6.0625rem/97px. Mismo criterio: único valor
       tocado, sube el wrapper completo como unidad.
       Ronda "microajuste final, acercar Misión/Visión + testimonios":
       -12px adicionales (punto de partida pedido), 6.0625rem/97px →
       5.3125rem/85px. Mismo criterio: único valor tocado, sube el
       wrapper completo como unidad.
       Ronda "pausa más corta": -35px adicionales (primer punto de
       prueba pedido), 5.3125rem/85px → 3.125rem/50px. Mismo criterio:
       único valor tocado (padding-top), sube el wrapper completo de
       testimonios (título, subtítulo, carrusel, tarjetas, controles,
       contenido interno y posterior, footer incluido por flujo normal)
       como una sola unidad, sin transform/position/márgenes negativos.
       .about-mission-vision no se toca: posición, títulos, textos,
       columnas, hairlines, spacing interno y animaciones intactos.
       Ronda "microajuste 12px": -12px adicionales (posición actual ya
       prácticamente aprobada, solo un microajuste), 3.125rem/50px →
       2.375rem/38px. Mismo criterio: único valor tocado (padding-top),
       sube el wrapper completo de testimonios (título, subtítulo,
       carrusel, tarjetas, controles, contenido posterior) como una
       sola unidad vía flujo normal, sin transform/márgenes negativos/
       offsets. .about-mission-vision, spacing interno de testimonios,
       tamaños, tipografías, animaciones, frase editorial e ilustración
       no se tocan. */
    padding-top: 2.375rem;
    padding-bottom: 9rem;
  }
}

.page-about .about-testimonials__intro {
  max-width: 620px;
  /* Ronda "refinamiento móvil": -27% (44px → 32px) — el subtítulo
     ("Relaciones que se construyen...") y el carrusel se sentían
     lejos entre sí. Solo aplica <901px: desde 901px esta sección
     sobreescribe el margin-bottom por completo (@media abajo). Título,
     subtítulo y contenido sin cambios. */
  margin: 0 0 2rem;
}

/* Ronda "elevar testimonios": un poco más de presencia (antes 28-34px)
   sin llegar al tamaño de Misión/Visión (36-44px) — clamp ajustado a
   32-36px en desktop (dentro de lo pedido), peso/color/alineación sin
   cambio (600/espresso/izquierda, ya correctos). */
.page-about .about-testimonials__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
}

/* Ya estaba en 14-16px (clamp existente) — dentro de lo pedido, sin
   cambio. */
.page-about .about-testimonials__subtitle {
  margin: 0.75rem 0 0;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--color-graphite);
}

@media (min-width: 901px) {
  .page-about .about-testimonials__intro {
    /* Ronda "elevar testimonios": 56px → 64px, dentro de 50-70px pedido
       entre el bloque de encabezado y el comienzo de las tarjetas.
       Ronda "carrusel más grande": +8px más (64px → 72px) para
       acompañar la mayor presencia vertical de las tarjetas nuevas. */
    margin-bottom: 4.5rem;
  }
}

.page-about .about-testimonials__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

/* Ronda "elevar testimonios": en móvil las tarjetas son más angostas y
   el viewport también — un fade del 6% ahí se come proporcionalmente
   más contenido útil ("reduce el fade lateral para no tapar
   contenido"), así que se reduce a la mitad. Mecanismo sin tocar
   (sigue siendo mask-image, funciona sobre cualquier fondo). */
@media (max-width: 700px) {
  .page-about .about-testimonials__viewport {
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  }
}

/* Ronda "elevar testimonios": mucho más lento (150s → 220s) para que
   se sienta ambiental y dé tiempo a leer un testimonio mientras se
   desplaza — mismo mecanismo (linear infinite, imprescindible para que
   el loop sea perfectamente continuo y sin salto al reiniciar; una
   curva con easing rompería la velocidad constante).
   Ronda "carrusel más grande": +20s más (220s → 240s) — con tarjetas y
   gap más anchos el track total es un poco más largo, y el texto
   también creció; este ajuste mantiene la misma sensación pausada en
   vez de una velocidad ligeramente mayor por el track más largo. */
.page-about .about-testimonials__track {
  display: flex;
  width: max-content;
  animation: about-testimonials-scroll 240s linear infinite;
}

.page-about .about-testimonials__viewport:hover .about-testimonials__track,
.page-about .about-testimonials__viewport:focus-within .about-testimonials__track {
  animation-play-state: paused;
}

/* Ronda "elevar testimonios": gap 32px → 24px (dentro de 18-28px
   pedido) — con tarjetas más grandes, 32px se sentía como demasiado
   aire entre ellas.
   Ronda "carrusel más grande": 24px → 28px (dentro de 22-30px pedido
   ahora), acompañando el nuevo ancho de tarjeta. */
.page-about .about-testimonials__group {
  display: flex;
  flex-shrink: 0;
  gap: 1.75rem;
  padding: 0 calc(var(--space-md) / 2);
}

@keyframes about-testimonials-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Ronda "elevar testimonios": más presencia (336px → hasta 360px, con
   el gap de 24px eso da ~3 tarjetas completas + una fracción de la
   cuarta en 1440px, en vez de 4 exactas) y más aire interno (2rem/
   2.25rem → 2.25rem/2.5rem, dentro de 32-40px pedido). Borde uniforme
   y fino en los 4 lados (antes un border-left de 2px en verde oscuro,
   un acento con más contraste del pedido — "borde extremadamente fino,
   poco contraste"; se retira, todo el borde usa ahora el mismo
   --color-border tenue que ya usa el resto del sitio). Sombra aún más
   suave (opacidad 0.28 → 0.18) para un acabado casi plano. Fondo,
   radio de esquina: sin cambio (ya eran discretos). Transición para el
   hover de abajo.
   Ronda "carrusel más grande": otro salto claramente perceptible —
   360px → 372px (dentro de 330-380px pedido; con el gap de 28px, sigue
   dando ~3 tarjetas completas + fracción de la cuarta en 1440px) y
   padding 36px/40px → 40px/42px (dentro de 34-42px pedido). Sin alto
   fijo: con el texto ahora en 18px/1.6 y este padding mayor, el alto
   real ronda ya el rango pedido (190-230px) según la longitud de cada
   testimonio — forzar un valor fijo recortaría los más largos o
   dejaría hueco vacío en los más cortos (evitar alturas artificiales,
   igual que el resto de la página). */
.page-about .about-testimonial {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: min(372px, 86vw);
  padding: 2.5rem 2.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-off-white);
  box-shadow: 0 10px 24px -20px rgba(70, 49, 31, 0.18);
  transition: transform 300ms var(--ease-elegant), border-color 300ms var(--ease-elegant);
}

/* Microinteracción muy sutil: borde ligeramente más visible (mismo
   --color-sand café/beige que el resto de los detalles editoriales de
   la página) + máximo translateY(-2px) — nada de sombras grandes ni
   elevaciones tipo SaaS. */
.page-about .about-testimonial:hover {
  border-color: var(--color-sand);
  transform: translateY(-2px);
}

/* Comillas discretas: mismo tratamiento de color que los índices 01/02
   de Misión y Visión (color-mix sand/espresso) en vez del sand plano +
   opacity de antes — misma familia visual que el resto de la página.
   Tamaño reducido (26px → 22px) y peso menor (700 → 600) para que sea
   un detalle, no un elemento decorativo grande. */
.page-about .about-testimonial__mark {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--color-sand) 75%, var(--color-espresso) 25%);
}

/* El comentario como protagonista de la tarjeta: 17px → 18px (dentro
   de 16-18px pedido), line-height sin cambio (1.6, ya dentro de
   1.5-1.65) y un poco más de contraste de color. */
.page-about .about-testimonial__text {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-graphite) 78%, var(--color-ink) 22%);
}

/* Firma discreta al final de la tarjeta: tamaño (11px) y uppercase sin
   cambio (ya dentro de lo pedido), tracking un poco mayor (0.1em →
   0.12em, igual que los índices 01/02) y color pasa del verde oscuro
   de acento a la misma familia café/beige/graphite del resto de la
   página — más tenue que el comentario, sin introducir un color fuera
   de esa paleta. */
.page-about .about-testimonial__location {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-graphite) 65%, var(--color-sand) 35%);
}

/* Ronda "carrusel más grande": 300px/28px → 312px/30px — mismo salto
   proporcional que en desktop, dejando ver una tarjeta protagonista y
   una fracción de la siguiente sin riesgo de overflow horizontal
   (min() sigue acotando a 86vw en pantallas muy angostas). */
@media (max-width: 700px) {
  .page-about .about-testimonial {
    width: min(312px, 86vw);
    /* Ronda "refinamiento móvil": padding vertical -13% (30px → 26px,
       dentro de 10-15% pedido) — las tarjetas se sentían un poco
       altas. Horizontal sin cambio (30px). Legibilidad, texto,
       ubicación y carrusel intactos; no se toca la lógica/loop/swipe. */
    padding: 1.625rem 1.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-testimonial {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-testimonials__track {
    animation: none;
  }
}

/* ---------- CTA: profundidad sutil (sin tocar layout.css) ----------
   Solo Inicio conserva este degradado sutil. La ronda "cierre editorial"
   (más abajo) lo retira específicamente para Acerca de TASS — se pidió
   explícitamente "no agregar gradientes... el contraste crema + café
   oscuro debe ser suficiente" — dejando su CTA en el --color-espresso
   plano que ya define layout.css (.cta-section), sin tocar Inicio ni
   ninguna otra página. */
.page-home .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%);
}

/* ---------- CTA "¿Tienes un proyecto?": cierre editorial (Acerca de TASS) ----------
   Todo lo de aquí abajo vive bajo .page-about — nunca toca layout.css
   ni las reglas compartidas .cta-section/.btn-outline-light que usan
   otras páginas. Fondo: sin cambio, sigue siendo el --color-espresso
   plano de layout.css (sin degradado, ver arriba) — ya es el mismo
   café oscuro de la paleta TASS, contraste suficiente contra el crema
   del resto de la página. Composición: sigue centrada (container
   .text-center de layout.css, sin tocar) — mensaje → explicación →
   acción, sin columnas ni elementos nuevos. */
@media (min-width: 901px) {
  .page-about .cta-section {
    /* Más respiración: 112px (var(--space-xl), heredado de .section
       base) → 144px, dentro de 110-150px pedido. En móvil/tablet no se
       toca: sigue heredando var(--space-xl), que ya es más compacto ahí
       (84px en <=700px, ver base.css) — "generoso pero menor que
       desktop" sin código adicional. */
    padding-block: 9rem;
  }
}

/* Título: protagonista absoluto del cierre. Tamaño base (aquí, <901px)
   32-40px → 34-40px (dentro de lo pedido en móvil); en desktop
   (@media abajo) sube a ~47-52px (dentro de 44-52px pedido), frente a
   los 42-50px que ya alcanzaba el h2 global heredado — más presencia y
   consistente en todo el rango de escritorio. Peso (600, heredado del
   h2 global) y color (--color-paper, heredado de .cta-section h2 en
   layout.css) sin cambio — ya eran "medium/semibold" y "crema/blanco
   cálido". line-height más compacto (1.15 heredado → 1.1). max-width
   560px → 680px (heredado de layout.css): con el tamaño mayor, 560px
   arriesgaba partir "¿Tienes un proyecto?" en dos líneas. */
.page-about .cta-section h2 {
  max-width: 680px;
  margin-bottom: 1.375rem;
  font-size: clamp(2.125rem, 1.85rem + 1.1vw, 2.5rem);
  line-height: 1.1;
}

@media (min-width: 901px) {
  .page-about .cta-section h2 {
    font-size: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
  }
}

/* Texto secundario: mismo texto, mismo tono (#E9E2D9, heredado de
   .cta-section p en layout.css — ya "claro pero más tenue que el
   título"). Ancho controlado (sin max-width antes, ocupaba todo el
   container) + tamaño ligeramente mayor (16px, dentro de 15-17px
   pedido) para que se lea cómodo sin dejar de ser secundario frente al
   título. line-height 1.6 heredado (ya "cómodo"), sin cambio. */
.page-about .cta-section p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Botón: más área clicable y presencia, sin volverse un botón grande
   tipo SaaS. Padding 12px/24px → 15px/28px (dentro de 14-17px /
   26-34px pedido), texto 14.4px → 15px (dentro de 14-16px). Margen
   hacia el texto: 32px → 36px (dentro de 32-44px pedido). Border,
   color y estructura (.btn-outline-light, layout.css/components.css)
   sin cambio — sigue siendo el mismo botón fino y minimalista. */
.page-about .cta-section .btn {
  padding: 0.9375rem 1.75rem;
  font-size: 0.9375rem;
  margin-top: 2.25rem;
}

/* Hover: refina el ya existente .btn-outline-light:hover (transparente
   → --color-paper, sin tocar esa parte) solo para esta CTA — easing
   --ease-elegant en vez del "ease" genérico del sitio, y translateY
   más discreto (-2px → -1px, "casi imperceptible"). Sin escalado,
   sombras fuertes, glow ni bounce. */
.page-about .cta-section .btn-outline-light {
  transition: background-color 300ms var(--ease-elegant),
    color 300ms var(--ease-elegant),
    border-color 300ms var(--ease-elegant),
    transform 300ms var(--ease-elegant);
}

.page-about .cta-section .btn-outline-light:hover {
  transform: translateY(-1px);
}

/* Entrada: el contenedor ya usa .reveal-up (mismo sistema de siempre,
   IntersectionObserver de main.js, una sola vez, en todo breakpoint).
   Aquí solo se alarga la duración (650ms → 900ms, dentro de
   800-1000ms pedido) para que se sienta más premium — la distancia por
   defecto (22px en desktop, 14px en móvil vía --reveal-distance, ver
   base.css) ya estaba dentro de los 20-30px pedidos en desktop; en
   móvil la propia base.css ya reduce distancia/duración a propósito
   ("desplazamientos más cortos y sutiles"), así que no se toca aquí.
   Sin stagger por elemento: más simple y coherente con "no es
   obligatorio si complica la implementación". Bajo prefers-reduced-
   motion, la regla global de base.css ya deja el bloque estático
   (opacity:1, sin transform) desde el inicio — este ajuste de
   duración no tiene efecto visible ahí, no hace falta repetirlo. */
.page-about .cta-section .reveal-up {
  transition: opacity 900ms var(--ease-elegant), transform 900ms var(--ease-elegant);
}

/* ---------- Lienzo continuo (ronda "refinamiento visual global") ----------
   Acerca de TASS → Misión/Visión → testimonios comparten ahora
   exactamente el mismo --color-linen (visto arriba en cada sección) sin
   ningún fundido intermedio hacia --color-paper, y la línea divisoria
   larga que marcaba la costura Acerca de TASS → Misión/Visión (un
   ::before centrado, min(60%, 480px), en .page-about main > .section +
   .section) se retira por completo: la separación entre bloques se
   consigue solo con espacio negativo (padding de cada sección, ver
   arriba), nunca con una línea de ancho completo — pidiéndolo así
   explícitamente. Las dos líneas cortas sobre Misión y Visión (kickers
   individuales, sin conexión entre sí) se conservan, ver
   .about-mission::before / .about-vision::before más arriba. */