/* Generado con python3 scripts/generar-escala.py.
   Desde 1831px, cada píxel del diseño crece con el ancho de pantalla.
   vw, porcentajes y alturas de viewport mantienen su comportamiento original. */
@media (min-width: 1831px) {
  :root { --pixel-diseno: calc(100vw / 1831); }

/* inicio */
:root {
      /* Valores extraídos del frame de Figma 1831 × 1616 px.
         El corte de las dos secciones está en y=808 px. */
      --fondo: #eeede7;
      --texto: #000000;
      --acento: #cc5002;
      --color-linea: var(--color-trazos);
      --grosor-lineas: 1px;
      --linea-inicio: 73.5vh;    /* línea más cerca del HERO centrado */
      --linea-fin: 118.812vh;    /* y=960/808 */
      --posicion-guia: 78;       /* punta a 78% del viewport */
    }

    *, *::before, *::after { box-sizing: border-box; }
    /* Lenis controla el desplazamiento; evitar doble suavizado CSS. */
    html { scroll-behavior: auto; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--fondo);
      color: var(--texto);
      font-family: 'Arimo', Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    a, button { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; }
    button { font: inherit; }
    .pagina { position: relative; isolation: isolate; width: 100%; }

    /* Cortina de entrada: cubre todo antes de revelar el HERO. */
    .pantalla-entrada {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      z-index: 9999;
      background: #000;
      pointer-events: all;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .pantalla-entrada[hidden] { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .pantalla-entrada { display: none; }
    }

    /* Sección 01: 100vh. Layout en Flexbox. */
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      min-height: 100vh;
      height: 100vh;
      width: 100%;
    }
    .navbar {
      position: absolute;
      top: calc(18 * var(--pixel-diseno));
      left: 0;
      right: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      width: 100%;
      height: 6.807vh;           /* 55 / 808 */
      margin-top: 0;
      padding-left: 1.8vw;
      padding-right: 1.8vw;
    }
    .marca { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
    .marca img {
      display: block;
      width: 14.910vw;          /* logo exacto de Figma: 273 × 55 px */
      height: auto;
    }
    .navegacion { display: flex; align-items: center; gap: 2.568vw; }
    .menu-boton {
      border: 0;
      padding: calc(8 * var(--pixel-diseno)) 0;
      background: none;
      color: var(--texto);
      font-size: 1.169vw;       /* Figma 21.413 px */
      letter-spacing: -0.03em;
      cursor: pointer;
    }
    .boton-borde {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      gap: calc(8 * var(--pixel-diseno));
      width: 11.196vw;        /* 205 px */
      height: 6.436vh;         /* 52 px */
      border: var(--grosor-lineas) solid var(--texto);
      color: var(--texto);
      text-decoration: none;
      font-size: 1.169vw;
      line-height: 1;
      letter-spacing: -0.03em;
      /* Relleno circular que crece desde el centro sin cambiar dimensiones. */
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: transparent;
      transition: color .18s ease-out;
    }
    .boton-borde::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 240%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      z-index: -1;
      background: var(--texto);
      transform: translate(-50%, -50%) scale(0);
      transform-origin: center center;
      transition: transform .22s ease-out;
      pointer-events: none;
    }
    .boton-borde:hover::before,
    .boton-borde:focus-visible::before {
      transform: translate(-50%, -50%) scale(1);
      transition-duration: .82s;
      transition-timing-function: cubic-bezier(.3, 0, .25, 1);
    }
    .boton-borde:hover,
    .boton-borde:focus-visible { color: var(--fondo); transition-duration: .42s; }
    .boton-borde:hover img, .boton-borde:focus-visible img { filter: invert(1); transition-duration: .42s; }
    .boton-borde img { display: block; width: 1.42vw; height: auto; transition: filter .18s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      .boton-borde::before { transition-duration: .01ms; }
      .boton-borde, .boton-borde img { transition-duration: .01ms; }
    }
    .menu-opciones {
      position: absolute;
      z-index: 10;
      top: calc(100% + calc(14 * var(--pixel-diseno)));
      right: 16.4vw;
      display: flex;
      flex-direction: column;
      min-width: calc(150 * var(--pixel-diseno));
      padding: calc(13 * var(--pixel-diseno)) calc(15 * var(--pixel-diseno));
      border: calc(1 * var(--pixel-diseno)) solid var(--texto);
      background: var(--fondo);
    }
    .menu-opciones[hidden] { display: none; }
    .menu-opciones a { padding: calc(8 * var(--pixel-diseno)); text-decoration: none; font-size: calc(14 * var(--pixel-diseno)); }
    .menu-opciones a:hover { color: var(--acento); }

    .hero-contenido {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 0; /* centrado real dentro de los 100vh del HERO */
      padding: 0 2vw;
      text-align: center;
    }
    .hero-titulo {
      width: 81.65vw;          /* 1495 / 1831 */
      max-width: none;
      margin: 0;
      font-size: 6.554vw;       /* 120 / 1831 */
      font-weight: 400;
      line-height: 0.85342;     /* 102.41 / 120 */
      letter-spacing: -0.04em; /* -4.8 px @ calc(120 * var(--pixel-diseno)) */
    }
    .hero-titulo .renglon { display: block; white-space: nowrap; }
    .hero-titulo em {
      color: var(--acento);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.08em; /* -9.6 px @ calc(120 * var(--pixel-diseno)) */
    }

    /* Sección 02: 100vh. La jerarquía y los espacios vienen de Figma. */
    .manifiesto {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100vh;
      padding: 27.228vh calc(20 * var(--pixel-diseno)) 0;
      text-align: center;
    }
    .manifiesto-titulo {
      width: 54.342vw;         /* 995 / 1831 */
      max-width: 100%;
      margin: 0;
      font-size: 2.4588vw;     /* 45 / 1831 */
      font-weight: 400;
      line-height: 1.02222;    /* 46 / 45 */
      letter-spacing: 0.01em;  /* 0.45 / 45 */
    }
    .manifiesto-parrafo {
      width: 46.423vw;         /* 850 / 1831 */
      max-width: 100%;
      margin: 4vh 0 0;         /* menor separación visual con el título */
      font-family: Arial, sans-serif;
      font-size: 1.0923vw;     /* 20 / 1831 */
      line-height: 1.45;       /* 29 / 20 */
      letter-spacing: 0.01em;
    }
    .manifiesto-boton {
      width: auto;
      padding-left: 2.2vw;
      padding-right: 2.2vw;
      margin-top: 5.074vh;     /* ajustado a la altura de párrafo de Figma */
      font-size: 1.169vw;
      letter-spacing: -0.01em;
    }

    /* UNA SOLA LÍNEA. Ocupa y=648–960 del frame original, y atraviesa
       el límite de ambas secciones en y=808 sin ninguna interrupción. */
    .linea-guia {
      position: absolute;
      z-index: 1;
      top: var(--linea-inicio);
      left: 50%;
      width: var(--grosor-lineas);
      height: calc(var(--linea-fin) - var(--linea-inicio));
      transform: translateX(-50%);
      pointer-events: none;
    }
    .linea-trazo {
      width: 100%;
      height: 0%;
      background: var(--color-linea);
    }

    /* El logo, el menú y contacto permanecen ocultos hasta terminar el HERO. */
    .js .navbar:not(.navbar-lista) .marca,
    .js .navbar:not(.navbar-lista) .menu-boton,
    .js .navbar:not(.navbar-lista) .navegacion > .boton-borde { opacity: 0; }
    .js .navbar .marca, .js .navbar .menu-boton,
    .js .navbar .navegacion > .boton-borde { will-change: opacity; }


    /* Masked Text Reveal. La tipografía y geometría de Figma se mantienen.
       Primero escondemos todo el h1 para impedir un flash de texto sin máscara.
       JS monta las máscaras y entonces deja visible su contenedor. */
    .js .hero-titulo { visibility: hidden; }
    .js .hero-titulo.mascara-lista { visibility: visible; }
    /* No recortar el renglón completo: con line-height editorial muy cerrado
       se cortarían ascendentes y descendentes durante el reveal. */
    .hero-titulo.en-revelado .renglon { overflow: visible; }
    .hero-titulo.en-revelado .palabra-mascara {
      display: inline-block;
      overflow: hidden;
      /* Aire interno de la máscara sin alterar el flujo ni la altura final. */
      padding-top: .22em;
      padding-bottom: .30em;
      margin-top: -.22em;
      margin-bottom: -.30em;
      vertical-align: baseline;
      white-space: nowrap;
    }
    /* La cursiva de «conecte» sobresale del advance de su última letra.
       El espacio extra evita cortar la e y se compensa para no alterar el tracking. */
    .hero-titulo.en-revelado em .palabra-mascara {
      padding-right: .34em;
      margin-right: -.34em;
    }
    .hero-titulo.en-revelado .palabra-contenido {
      display: inline-block;
      transform: translate3d(0, 130%, 0);
      visibility: hidden; /* Nada asoma antes de su turno de entrada. */
      will-change: transform;
    }

    /* Cursor editorial: círculo naranja, únicamente para mouse/trackpad. */
    .cursor-naranja {
      position: fixed;
      top: 0;
      left: 0;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: var(--acento);
      pointer-events: none;
      z-index: 10001;
      opacity: 0;
      transform: translate3d(-50px, -50px, 0);
      transition: opacity .14s ease;
      will-change: transform;
    }
    .cursor-naranja.visible { opacity: 1; }
    @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
      .cursor-naranja { display: none !important; }
    }

    .palabra-manifiesto { opacity: 0; }

    /* El scroll únicamente dispara la secuencia; no determina su duración. */
    .js [data-revelar] {
      opacity: 0;
      transform: translateY(calc(22 * var(--pixel-diseno)));
      will-change: opacity, transform;
    }

    /* Adaptaciones para pantallas medianas. Sin Grid, sin clamp(). */
    @media (max-width: 1050px) {
      .marca img { width: calc(173 * var(--pixel-diseno)); }
      .navbar { height: calc(54 * var(--pixel-diseno)); }
      .menu-boton, .boton-borde { font-size: calc(13 * var(--pixel-diseno)); }
      .navegacion { gap: calc(25 * var(--pixel-diseno)); }
      .boton-borde { width: calc(132 * var(--pixel-diseno)); height: calc(38 * var(--pixel-diseno)); }
      .boton-borde img { width: calc(18 * var(--pixel-diseno)); }
      .manifiesto-titulo { font-size: calc(28 * var(--pixel-diseno)); width: calc(620 * var(--pixel-diseno)); }
      .manifiesto-parrafo { font-size: calc(13 * var(--pixel-diseno)); width: calc(540 * var(--pixel-diseno)); }
      .manifiesto-boton { width: auto; padding-left: calc(28 * var(--pixel-diseno)); padding-right: calc(28 * var(--pixel-diseno)); }
    }
    @media (max-width: 680px) {
      .navbar { top: calc(12 * var(--pixel-diseno)); margin-top: 0; height: calc(42 * var(--pixel-diseno)); padding: 0 calc(12 * var(--pixel-diseno)); }
      .marca img { width: calc(132 * var(--pixel-diseno)); }
      .navegacion { gap: calc(15 * var(--pixel-diseno)); }
      .menu-boton { font-size: calc(11 * var(--pixel-diseno)); }
      .boton-borde { width: calc(100 * var(--pixel-diseno)); height: calc(31 * var(--pixel-diseno)); font-size: calc(11 * var(--pixel-diseno)); gap: calc(3 * var(--pixel-diseno)); }
      .boton-borde img { width: calc(14 * var(--pixel-diseno)); }
      .menu-opciones { right: calc(122 * var(--pixel-diseno)); }
      .hero-contenido { margin-top: 0; padding: 0 calc(14 * var(--pixel-diseno)); }
      .hero-titulo { width: 100%; font-size: 8.5vw; line-height: .98; letter-spacing: -.054em; }
      .hero-titulo .renglon { white-space: normal; }
      .hero-titulo em { letter-spacing: -.07em; }
      .manifiesto { padding: 26vh calc(18 * var(--pixel-diseno)) 0; }
      .manifiesto-titulo { width: 100%; max-width: calc(360 * var(--pixel-diseno)); font-size: calc(22 * var(--pixel-diseno)); line-height: 1.12; }
      .manifiesto-parrafo { width: 100%; max-width: calc(340 * var(--pixel-diseno)); font-size: calc(11 * var(--pixel-diseno)); line-height: 1.36; margin-top: 3.5vh; }
      .manifiesto-boton { margin-top: 4.2vh; width: auto; padding-left: calc(22 * var(--pixel-diseno)); padding-right: calc(22 * var(--pixel-diseno)); height: calc(36 * var(--pixel-diseno)); font-size: calc(11 * var(--pixel-diseno)); }
      .manifiesto-boton img { width: calc(14 * var(--pixel-diseno)); }
    }
    @media (max-width: 420px) {
      .hero-titulo { font-size: 9vw; }
      .hero-contenido { margin-top: 0; }
      .manifiesto { padding-top: 25vh; }
      .manifiesto-titulo { font-size: calc(20 * var(--pixel-diseno)); max-width: calc(315 * var(--pixel-diseno)); }
      .manifiesto-parrafo { max-width: calc(315 * var(--pixel-diseno)); font-size: calc(10.5 * var(--pixel-diseno)); margin-top: 3vh; }
    }
    @media (max-height: 610px) and (max-width: 680px) {
      .hero-contenido { margin-top: 0; }
      .hero-titulo { font-size: 7vw; }
      .manifiesto { padding-top: 21vh; }
      .manifiesto-titulo { font-size: calc(17 * var(--pixel-diseno)); }
      .manifiesto-parrafo { margin-top: 3vh; font-size: calc(9 * var(--pixel-diseno)); }
      .manifiesto-boton { margin-top: 3vh; height: calc(31 * var(--pixel-diseno)); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js [data-revelar] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .js .hero-titulo { visibility: visible !important; }
      .hero-titulo .palabra-contenido { transform: none !important; }
      .js .navbar .marca, .js .navbar .menu-boton,
      .js .navbar .navegacion > .boton-borde { opacity: 1 !important; animation: none !important; }
    }

/* Invitación a seguir el mismo eje vertical que continúa hacia Manifiesto. */
.indicador-scroll {
  position: absolute;
  z-index: 3;
  top: var(--linea-inicio);
  left: 50%;
  display: flex;
  justify-content: center;
  width: var(--grosor-lineas);
  height: calc(100dvh - var(--linea-inicio));
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 350ms ease;
}
.indicador-scroll::after {
  content: '';
  position: absolute;
  inset: 0 calc(-22 * var(--pixel-diseno));
}
/* La invitación anima el trazo principal real, no una segunda línea. */
.invitacion-lista .linea-trazo.en-espera {
  --color-linea: var(--color-trazos);
  position: relative;
  transform: none !important;
  animation: invitacion-bajar 5.6s cubic-bezier(.37,0,.63,1) infinite;
}
.indicador-scroll:focus-visible { outline: calc(1 * var(--pixel-diseno)) solid var(--acento); outline-offset: calc(4 * var(--pixel-diseno)); }
.indicador-scroll.indicador-scroll-oculto { opacity: 0; pointer-events: none; }
@keyframes invitacion-bajar {
  0% { height: 0%; opacity: 0; }
  8% { height: 1.5%; opacity: 1; }
  40%, 46% { height: calc(100dvh - var(--linea-inicio)); opacity: 1; }
  72%, 100% { height: calc(100dvh - var(--linea-inicio)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .indicador-scroll { transition: none; }
  .invitacion-lista .linea-trazo.en-espera { animation: none; height: 18%; opacity: 1; }
}

/* numeralias */
.cifras {
      --fondo: #eeede7;
      --naranja: #cc5002;
      --trazo: var(--color-trazos);
      --largo-remate: calc(33 * var(--pixel-diseno));
      --grosor-trazo: var(--grosor-lineas);
    }
    *, *::before, *::after { box-sizing: border-box; }


    

    /* Marco de referencia Figma: 1831 × 990 px. Centro del grupo: x=915.5. */
    .cifras {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(990 * var(--pixel-diseno));
      min-height: 100svh;
      width: 100%;
      background: transparent;
      padding: calc(80 * var(--pixel-diseno)) calc(34 * var(--pixel-diseno));
    }
    .cifras-contenedor {
      display: flex;
      width: calc(1383 * var(--pixel-diseno));
      max-width: 100%;
      height: 70svh;
      gap: calc(39 * var(--pixel-diseno));
      flex-shrink: 1;
    }
    .cifra {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    /* Cada corchete es CSS: una vertical y dos pequeños remates.
       Sus medidas cambian con el contenedor; no se utilizan SVG o imágenes. */
    .cifra-marco {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .cifra-marco::before, .cifra-marco::after {
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--largo-remate);
      content: "";
      background:
        linear-gradient(var(--trazo),var(--trazo)) left top / 100% var(--grosor-trazo) no-repeat,
        linear-gradient(var(--trazo),var(--trazo)) left bottom / 100% var(--grosor-trazo) no-repeat;
    }
    .cifra-marco::before { left: 0; border-left: var(--grosor-trazo) solid var(--trazo); }
    .cifra-marco::after { right: 0; border-right: var(--grosor-trazo) solid var(--trazo); }
    .cifra-contenido {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateY(calc(-10 * var(--pixel-diseno)));
      width: 100%;
      padding: 0 calc(12 * var(--pixel-diseno));
    }
    .cifra-numero {
      margin: 0;
      font-size: calc(110 * var(--pixel-diseno));
      font-weight: 400;
      line-height: 1;
      letter-spacing: calc(-4.4 * var(--pixel-diseno));
      white-space: nowrap;
    }
    .cifra-descripcion {
      margin: calc(16 * var(--pixel-diseno)) 0 0;
      font-size: calc(22 * var(--pixel-diseno));
      line-height: calc(28 * var(--pixel-diseno));
      letter-spacing: calc(-.22 * var(--pixel-diseno));
      font-weight: 400;
      color: rgba(0,0,0,.8);
    }
    .cifra--centro .cifra-numero {
      max-width: calc(302 * var(--pixel-diseno));
      white-space: normal;
      line-height: calc(90 * var(--pixel-diseno));
    }
    .cifra--centro .cifra-descripcion { margin-top: calc(18 * var(--pixel-diseno)); }
    /* Los tres números reposan negros; se iluminan al revelarse o al hover. */
    .cifra-numero {
      color: #000;
      transition: color 850ms cubic-bezier(.45, 0, .55, 1);
    }
    .cifra.is-animating .cifra-numero,
    .cifra:hover .cifra-numero {
      color: var(--naranja);
    }
    /* Al retirar el mouse se usa la transición de 850ms del estado base. */
    @media (hover: hover) {
      .cifra:hover .cifra-numero {
        transition-duration: 360ms;
        transition-timing-function: ease-out;
      }
    }
    @media (hover: none) {
      .cifra:hover:not(.is-animating) .cifra-numero { color: #000; }
    }


    /* Revelado, sin modificar el layout original ni el grosor de 1px. */
    .js .cifra-marco::before,
    .js .cifra-marco::after {
      transition: clip-path 1500ms cubic-bezier(.25,.8,.3,1);
    }
    .js .cifra-marco::before { clip-path: inset(0 0 100% 0); }
    .js .cifra-marco::after { clip-path: inset(100% 0 0 0); }
    .js .cifra.is-revealing .cifra-marco::before,
    .js .cifra.is-revealing .cifra-marco::after { clip-path: inset(0 0 0 0); }

    .cifra-numero .numero-mascara { display: inline-block; vertical-align: bottom; overflow: hidden; padding: .12em .075em .13em; margin: -.12em -.075em -.13em; }
    .cifra-numero .numero-interior { display: inline-block; }
    .js .cifra-numero .numero-interior {
      transform: translate3d(0, 145%, 0);
      opacity: 0;
      transition: transform 1200ms cubic-bezier(.22,1,.36,1), opacity 980ms ease-in-out;
      will-change: transform, opacity;
    }
    .js .cifra.is-number-visible .numero-interior { transform: translate3d(0,0,0); opacity: 1; }
    .js .cifra-descripcion {
      opacity: 0;
      transition: opacity 1150ms cubic-bezier(.25,.1,.25,1);
    }
    .js .cifra.is-description-visible .cifra-descripcion { opacity: 1; }

    /* En reversa los elementos se retiran más rápido, conservando el fade. */
    .js .cifra.is-reversing .cifra-marco::before,
    .js .cifra.is-reversing .cifra-marco::after {
      transition-duration: 580ms;
      transition-timing-function: cubic-bezier(.55,0,.85,.45);
    }
    .js .cifra.is-reversing .numero-interior {
      transition: transform 650ms cubic-bezier(.55,0,.85,.45), opacity 540ms ease-in-out;
    }
    .js .cifra.is-reversing .cifra-descripcion {
      transition: opacity 480ms ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) {
      .js .cifra-marco::before, .js .cifra-marco::after,
      .js .cifra-numero .numero-interior, .js .cifra-descripcion, .cifra-numero { transition: none !important; }
    }

    @media (max-width: 1450px) {
      .cifras-contenedor { gap: 2.15vw; height: 40.5vw; max-height: 70svh; }
      .cifra-numero { font-size: 7vw; letter-spacing: -.28vw; }
      .cifra--centro .cifra-numero { line-height: .82; }
      .cifra-descripcion { font-size: 1.45vw; line-height: 1.3; }
    }
    @media (max-width: 700px) {
      .cifras { padding: calc(60 * var(--pixel-diseno)) calc(22 * var(--pixel-diseno)); }
      .cifras-contenedor { flex-direction: column; width: 100%; height: auto; max-height: none; gap: calc(20 * var(--pixel-diseno)); }
      .cifra { flex: none; height: 34svh; }
      .cifra-numero { font-size: calc(72 * var(--pixel-diseno)); letter-spacing: calc(-2.9 * var(--pixel-diseno)); }
      .cifra--centro .cifra-numero { line-height: .83; }
      .cifra-descripcion { font-size: calc(18 * var(--pixel-diseno)); line-height: calc(24 * var(--pixel-diseno)); margin-top: calc(14 * var(--pixel-diseno)); }
      .cifra--centro .cifra-descripcion { margin-top: calc(16 * var(--pixel-diseno)); }
      .cifra-contenido { transform: none; }
      .cifras { --largo-remate: calc(22 * var(--pixel-diseno)); }
    }

/* proyectos */
.proyectos{--fondo:#eeede7;--naranja:#dc5400;--texto:#080808}
*,*::before,*::after{box-sizing:border-box}


.proyectos{position:relative;overflow:hidden;width:100%;background:transparent}
/* Primera pantalla completa: titular y comienzo de la línea central. */
.proyectos-intro-seccion{height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;position:relative;padding:0 calc(34 * var(--pixel-diseno))}
.proyectos-intro{font-size: min(7.12vw,calc(130.341 * var(--pixel-diseno)));letter-spacing:-.04em;line-height:.94;font-weight:400;text-align:center;color:#d3d2ca;margin:0;width:90.2%;max-width:calc(1651 * var(--pixel-diseno))}
/* Random opacity reveal: solo opacidad, sin traslaciones ni saltos de ancho. */
.js .proyectos-intro .intro-palabra{opacity:0}
.js .proyectos-intro .intro-palabra.is-visible{opacity:1}
/* Reverse acelerado, siguiendo el comportamiento del proyecto inicio(1). */
.js .proyectos-intro .intro-palabra.is-reversing{transition-duration:260ms,850ms}
/* Hover fiel a Numeralias: cambia el color real de cada palabra,
   sin capas superpuestas ni barridos. Entrada 360ms, salida 850ms. */
.proyectos-intro .intro-palabra{
  display:inline-block;
  position:relative;
  cursor:default;
  color:inherit;
  transition:opacity 1450ms cubic-bezier(.4,0,.2,1), color 850ms cubic-bezier(.45,0,.55,1);
}
@media(hover:hover){
  .proyectos-intro .intro-palabra:hover{
    color:var(--naranja);
    transition-duration:1450ms,360ms;
    transition-timing-function:cubic-bezier(.4,0,.2,1),ease-out;
  }
}
@media(hover:none){
  .proyectos-intro .intro-palabra:hover{color:inherit}
}
@media(prefers-reduced-motion:reduce){.proyectos-intro .intro-palabra{transition:none!important}}
@media(prefers-reduced-motion:reduce){.js .proyectos-intro .intro-palabra{opacity:1!important;transition:none!important}}
/* Separación real entre el hero y la galería; el eje continúa por detrás. */
.proyectos-separador{height:10vh;height:10svh;width:100%;pointer-events:none}
/* La línea arranca siempre DEBAJO del bloque de texto, con aire visible. */
.proyectos-eje{position:absolute;top:var(--inicio-eje, 83svh);bottom:calc(50vh + calc(95 * var(--pixel-diseno)));left:50%;width:var(--grosor-lineas);transform:translateX(-50%);background:var(--color-trazos);opacity:1;pointer-events:none}
.proyectos-zona{width:100%;max-width:calc(1831 * var(--pixel-diseno));margin:0 auto;position:relative;padding-top:calc(130 * var(--pixel-diseno))}
.proyectos-encabezado{position:absolute;top:calc(24 * var(--pixel-diseno));right:6.45%;margin:0;font-size:calc(83.79 * var(--pixel-diseno));font-weight:400;letter-spacing:calc(-3.35 * var(--pixel-diseno));line-height:1.22}
/* Masked Text Reveal del HERO de inicio.zip: la palabra emerge desde abajo.
   La máscara tiene aire vertical para no cortar letras ni mover el título. */
.js .proyectos-encabezado{visibility:hidden}
.js .proyectos-encabezado.mascara-lista{visibility:visible}
.proyectos-encabezado .palabra-mascara{
  display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:baseline;
  padding-top:.22em;padding-bottom:.30em;padding-right:.14em;margin-top:-.22em;margin-bottom:-.30em;
}
.proyectos-encabezado .palabra-contenido{
  display:inline-block;transform:translate3d(0,130%,0);
  transition:transform 1050ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.proyectos-encabezado.is-visible .palabra-contenido{transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){
  .js .proyectos-encabezado{visibility:visible!important}
  .proyectos-encabezado .palabra-contenido{transform:none!important;transition:none!important}
}
.proyectos-columnas{display:flex;width:100%;align-items:flex-start}
.proyectos-col{width:50%;min-width:0;display:flex;flex-direction:column}
.proyecto{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.proyecto-media{overflow:hidden;display:block;background:#d3d2ca;position:relative;isolation:isolate;cursor:pointer}
.proyecto-media img{display:block;width:100%;height:100%;object-fit:cover;transition:filter 650ms cubic-bezier(.22,1,.36,1)}
/* Hover editorial: filtro naranja y llamada centrada sobre la fotografía. */
.proyecto-media::after{content:"";position:absolute;inset:0;background:#ba4100;opacity:0;z-index:1;pointer-events:none;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}
.proyecto-media .proyecto-hover-texto{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);font:400 max(calc(14 * var(--pixel-diseno)),min(1.15vw,calc(20 * var(--pixel-diseno)))) Arimo,Arial,sans-serif;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.proyecto-media:hover img{filter:blur(calc(5 * var(--pixel-diseno)))}.proyecto-media:hover::after{opacity:.82}.proyecto-media:hover .proyecto-hover-texto{opacity:1}}
@media(prefers-reduced-motion:reduce){.proyecto-media img,.proyecto-media::after,.proyecto-media .proyecto-hover-texto{transition:none}}

.proyecto-titulo{font-size:calc(33 * var(--pixel-diseno));letter-spacing:calc(-.66 * var(--pixel-diseno));line-height:calc(43.932 * var(--pixel-diseno));font-weight:700;margin:calc(17 * var(--pixel-diseno)) 0 0}
.proyecto-categoria{display:flex;align-items:center;gap:calc(15 * var(--pixel-diseno));font-family:Arial,sans-serif;font-size:calc(18 * var(--pixel-diseno));letter-spacing:calc(-.36 * var(--pixel-diseno));line-height:1.5;margin:calc(2 * var(--pixel-diseno)) 0 0}
.proyecto-categoria::before{content:"";display:block;width:calc(13 * var(--pixel-diseno));height:calc(14 * var(--pixel-diseno));flex-shrink:0;background:var(--naranja)}
/* Las distancias se calibran con el marco Figma 1831×4212.
   Quipán y Wellness comparten columna, sin acumular márgenes dobles. */
.proyecto--quipan{margin-left:14.1%;width:70.2%}
.proyecto--quipan .proyecto-media{width:100%;aspect-ratio:643/647}
.proyecto--wellness{margin-left:29.8%;width:54.5%;margin-top:calc(calc(1215 * var(--pixel-diseno)) - calc(647 * var(--pixel-diseno)) - calc(110 * var(--pixel-diseno)))}
.proyecto--wellness .proyecto-media{width:100%;aspect-ratio:499/634}
.proyecto--wellness .proyecto-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.proyecto--zacapoaxtla{margin-left:14.3%;width:72.85%;margin-top:calc(446 * var(--pixel-diseno))}
.proyecto--zacapoaxtla .proyecto-media{width:100%;aspect-ratio:667/811}
.proyecto--cafe{margin-left:14.2%;width:47.4%;margin-top:calc(calc(1847 * var(--pixel-diseno)) - calc(446 * var(--pixel-diseno)) - calc(811 * var(--pixel-diseno)) - calc(110 * var(--pixel-diseno)))}
.proyecto--cafe .proyecto-media{width:100%;aspect-ratio:434/423}
.proyecto--wellness .proyecto-titulo,.proyecto--cafe .proyecto-titulo{white-space:nowrap}
/* Separador adicional de 10vh tras la galería, antes de la pantalla del CTA. */
.proyectos-separador-final{height:10vh;height:10svh;width:100%;pointer-events:none}
/* Última pantalla propia de 100vh, con final de la línea encima del botón. */
.proyectos-cierre{height:100vh;height:100svh;display:flex;justify-content:center;align-items:center;position:relative}
.proyectos-boton{width:auto;min-width:0;max-width:calc(100% - calc(44 * var(--pixel-diseno)));height:calc(52 * var(--pixel-diseno));border:var(--grosor-lineas) solid var(--texto);color:var(--texto);font:400 1.169vw/1 Arimo,Arial,sans-serif;letter-spacing:-.01em;display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--pixel-diseno));text-decoration:none;padding:0 2.2vw;position:relative;isolation:isolate;overflow:hidden;background:transparent;transition:color .18s ease-out}
.proyectos-boton::before{content:"";position:absolute;left:50%;top:50%;width:240%;aspect-ratio:1/1;border-radius:50%;z-index:-1;background:var(--texto);transform:translate(-50%,-50%) scale(0);transform-origin:center;transition:transform .22s ease-out;pointer-events:none}
.proyectos-boton:hover::before,.proyectos-boton:focus-visible::before{transform:translate(-50%,-50%) scale(1);transition-duration:.82s;transition-timing-function:cubic-bezier(.3,0,.25,1)}
.proyectos-boton:hover,.proyectos-boton:focus-visible{color:var(--fondo-pagina);transition-duration:.42s}
.proyectos-boton svg{display:block;width:1.42vw;height:auto;flex:0 0 auto}
@media(max-width:1300px) and (min-width:701px){
.proyectos-encabezado{top:calc(24 * var(--pixel-diseno));font-size:5vw}
.proyecto-titulo{font-size:2.15vw;line-height:1.3}
.proyecto-categoria{font-size:1.25vw}
.proyecto--zacapoaxtla{margin-top:24.36vw}
.proyecto--wellness{margin-top:25vw}
.proyecto--cafe{margin-top:26.2vw}
}
@media(max-width:700px){
.proyectos-intro-seccion{padding:0 calc(16 * var(--pixel-diseno));align-items:center}
.proyectos-intro{font-size:11vw;line-height:1.06;width:94%}
.proyectos-eje{display:none}
.proyectos-zona{padding-top:calc(95 * var(--pixel-diseno))}
.proyectos-encabezado{top:calc(10 * var(--pixel-diseno));right:6%;font-size:calc(42 * var(--pixel-diseno));letter-spacing:calc(-1.5 * var(--pixel-diseno))}
.proyectos-columnas{flex-direction:column}
.proyectos-col{width:100%}
.proyectos-col--izq,.proyectos-col--der{display:contents}
.proyecto{width:82%;margin-left:9%;margin-right:9%}
.proyecto--quipan{order:1}
.proyecto--zacapoaxtla{order:2;margin-top:calc(75 * var(--pixel-diseno))}
.proyecto--wellness{order:3;margin-top:calc(75 * var(--pixel-diseno))}
.proyecto--cafe{order:4;margin-top:calc(75 * var(--pixel-diseno))}
.proyecto-titulo{font-size:calc(26 * var(--pixel-diseno));line-height:1.2;white-space:normal!important;margin-top:calc(12 * var(--pixel-diseno))}
.proyecto-categoria{font-size:calc(15 * var(--pixel-diseno));gap:calc(9 * var(--pixel-diseno))}
.proyecto-categoria::before{width:calc(10 * var(--pixel-diseno));height:calc(10 * var(--pixel-diseno))}
.proyectos-boton{font-size:calc(11 * var(--pixel-diseno));height:calc(36 * var(--pixel-diseno));padding:0 calc(22 * var(--pixel-diseno))}
.proyectos-boton svg{width:calc(14 * var(--pixel-diseno))}
}
@media(prefers-reduced-motion:reduce){.proyectos-boton,.proyectos-boton::before,.proyectos-boton svg{transition:none}}

/* El trazo nace invisible y avanza con el scroll; su punta sigue el 50% del viewport. */
.js .proyectos-eje { background: transparent; opacity: 1; }
.js .proyectos-eje::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% * var(--avance-eje, 0));
  background: var(--color-trazos);
  opacity: 1;
}
/* El botón solo aparece después de completarse el trazo del eje. */
.js .proyectos-boton { opacity: 0; pointer-events: none; transition: opacity 950ms cubic-bezier(.22,1,.36,1), color .18s ease-out; }
.js .proyectos-boton.is-visible { opacity: 1; pointer-events: auto; }
/* Foto y datos se revelan juntos únicamente por opacidad. */
.js .proyecto { opacity: 0; transition: opacity 1000ms cubic-bezier(.22,1,.36,1); }
.js .proyecto.is-en-vista { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .proyecto { opacity: 1; transition: none; }
  .js .proyectos-boton { opacity: 1; pointer-events: auto; transition: none; }
  .js .proyectos-eje::before { height: 100%; }
}

@media (min-width:701px) and (max-width:1100px) {
  .proyectos-boton { font-size:calc(13 * var(--pixel-diseno)); height:calc(38 * var(--pixel-diseno)); padding:0 calc(28 * var(--pixel-diseno)); }
  .proyectos-boton svg { width:calc(18 * var(--pixel-diseno)); }
}
.proyectos-boton:focus-visible { outline:calc(2 * var(--pixel-diseno)) solid currentColor; outline-offset:calc(4 * var(--pixel-diseno)); }

/* soluciones */
:root { --fondo-pagina: #eeede7; --fondo-soluciones: #eeede7; --texto-soluciones: #000000; }
    body.modo-soluciones-oscuro { --texto: #ffffff; --fondo-pagina: #000000; --fondo-soluciones: #000000; --texto-soluciones: #ffffff; }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { font-family: Arimo, Arial, sans-serif; background: var(--fondo-pagina); transition: background-color 900ms cubic-bezier(.22,1,.36,1); }
    
    .soluciones { width: 100%; background: var(--fondo-soluciones); color: var(--texto-soluciones); overflow: hidden; transition: background-color 900ms cubic-bezier(.22,1,.36,1), color 900ms cubic-bezier(.22,1,.36,1); }
    .soluciones-interior { width: 100%; max-width: calc(1831 * var(--pixel-diseno)); margin: 0 auto; padding: 0 0 calc(228 * var(--pixel-diseno)); }
    .soluciones-titulo { font-family: Arimo, Arial, sans-serif; font-size: calc(83.79 * var(--pixel-diseno)); font-weight: 400; letter-spacing: calc(-3.3516 * var(--pixel-diseno)); line-height: calc(102.41 * var(--pixel-diseno)); margin: 0 9.45% calc(98 * var(--pixel-diseno)) 0; padding-top: calc(116 * var(--pixel-diseno)); text-align: right; }
    .soluciones-listado { margin-left: 7.045%; margin-right: 0; border-top: none; }
    .soluciones-bloque { height: 80vh; height: 80svh; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--pixel-diseno)); border-bottom: none; padding-top: 0; padding-right: 9.3%; }
    .soluciones-bloque:last-child { border-bottom: none; }

    /* Las divisorias se dibujan de izquierda a derecha al pasar por el scroll. */
    .soluciones-listado { position: relative; }
    .soluciones-listado::before,
    .soluciones-bloque:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: var(--grosor-lineas);
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1050ms cubic-bezier(.22,1,.36,1), background-color 900ms cubic-bezier(.22,1,.36,1);
      pointer-events: none;
      z-index: 3;
    }
    .soluciones-listado::before { top: 0; }
    .soluciones-bloque { position: relative; }
    .soluciones-bloque:not(:last-child)::after { bottom: 0; }
    .soluciones-listado.linea-inicial-visible::before,
    .soluciones-bloque.linea-visible::after { transform: scaleX(1); }
    @media (prefers-reduced-motion: reduce) {
      .soluciones-listado::before,
      .soluciones-bloque:not(:last-child)::after { transform: scaleX(1); transition: none; }
    }

    .soluciones-contenido { flex: 0 1 calc(673 * var(--pixel-diseno)); min-width: 0; padding-top: 0; text-align: left; }
    .soluciones-contenido h3 { font-size: calc(38 * var(--pixel-diseno)); line-height: 1.35; font-weight: 400; letter-spacing: calc(-1.14 * var(--pixel-diseno)); margin: 0 0 calc(48 * var(--pixel-diseno)); }
    .soluciones-contenido p { font-size: calc(18 * var(--pixel-diseno)); line-height: calc(28 * var(--pixel-diseno)); opacity: .8; font-weight: 400; margin: 0 0 calc(29 * var(--pixel-diseno)); max-width: calc(673 * var(--pixel-diseno)); }
    /* Botones homologados con el botón Manifiesto del archivo inicio(2).zip. */
    .soluciones-informes {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      gap: calc(8 * var(--pixel-diseno));
      width: auto;
      height: calc(52 * var(--pixel-diseno));
      padding-left: 2.2vw;
      padding-right: 2.2vw;
      border: var(--grosor-lineas) solid currentColor;
      color: inherit;
      background: transparent;
      font-family: Arimo, Arial, sans-serif;
      font-size: 1.169vw;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.01em;
      cursor: pointer;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      transition: color .18s ease-out, border-color 900ms cubic-bezier(.22,1,.36,1);
    }
    .soluciones-informes::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 240%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      z-index: -1;
      background: var(--texto-soluciones);
      transform: translate(-50%, -50%) scale(0);
      transform-origin: center;
      transition: transform .22s ease-out, background-color 900ms cubic-bezier(.22,1,.36,1);
      pointer-events: none;
    }
    .soluciones-informes:hover::before,
    .soluciones-informes:focus-visible::before {
      transform: translate(-50%, -50%) scale(1);
      transition-duration: .82s;
      transition-timing-function: cubic-bezier(.3,0,.25,1);
    }
    .soluciones-informes:hover,
    .soluciones-informes:focus-visible {
      color: var(--fondo-soluciones);
      transition-duration: .42s;
    }
    .soluciones-informes svg {
      width: 1.42vw;
      height: auto;
      flex: 0 0 auto;
      transition: color .18s ease-out;
    }
    .soluciones-informes:focus-visible { outline: calc(2 * var(--pixel-diseno)) solid currentColor; outline-offset: calc(4 * var(--pixel-diseno)); }
    @media (prefers-reduced-motion: reduce) {
      .soluciones-informes,
      .soluciones-informes::before,
      .soluciones-informes svg { transition-duration: .01ms !important; }
    }
    .soluciones-foto { width: calc(643 * var(--pixel-diseno)); height: calc(427 * var(--pixel-diseno)); flex: 0 0 calc(643 * var(--pixel-diseno)); margin-top: 0; overflow: hidden; }
    .soluciones-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .soluciones-bloque--2 .soluciones-foto img { object-position: center; }
    .soluciones-bloque--3 .soluciones-foto img { object-position: center; }
    @media (max-width: 1500px) {
      .soluciones-titulo { font-size: 5.45vw; line-height: 1.23; }
      .soluciones-bloque { gap: 4vw; padding-right: 5vw; height: 80vh; height: 80svh; min-height: 0; padding-bottom: 0; }
      .soluciones-contenido { flex: 1 1 45%; }
      .soluciones-foto { width: 42%; flex: 0 0 42%; height: auto; aspect-ratio: 643 / 427; }
      .soluciones-contenido h3 { margin-bottom: calc(36 * var(--pixel-diseno)); }
      .soluciones-contenido p { font-size: max(calc(15 * var(--pixel-diseno)), 1.2vw); line-height: 1.5; }
    }
    @media (min-width: 701px) and (max-width: 1100px) {
      .soluciones-informes { font-size: calc(13 * var(--pixel-diseno)); padding-left: calc(28 * var(--pixel-diseno)); padding-right: calc(28 * var(--pixel-diseno)); height: calc(38 * var(--pixel-diseno)); }
      .soluciones-informes svg { width: calc(18 * var(--pixel-diseno)); }
    }
    @media (max-width: 700px) {
      .soluciones-interior { padding-bottom: calc(80 * var(--pixel-diseno)); }
      .soluciones-titulo { padding-top: calc(65 * var(--pixel-diseno)); margin: 0 7% calc(58 * var(--pixel-diseno)); font-size: calc(46 * var(--pixel-diseno)); letter-spacing: calc(-1.7 * var(--pixel-diseno)); line-height: 1.18; }
      .soluciones-listado { margin: 0 7%; }
      .soluciones-bloque { height: 80vh; height: 80svh; min-height: 0; padding: calc(35 * var(--pixel-diseno)) 0; display: flex; flex-direction: column-reverse; align-items: stretch; gap: calc(20 * var(--pixel-diseno)); justify-content: center; }
      .soluciones-foto { width: 100%; flex: none; aspect-ratio: 643 / 427; }
      .soluciones-contenido { width: 100%; flex: none; padding-top: 0; }
      .soluciones-contenido h3 { font-size: calc(29 * var(--pixel-diseno)); margin-bottom: calc(20 * var(--pixel-diseno)); letter-spacing: calc(-.7 * var(--pixel-diseno)); }
      .soluciones-contenido p { font-size: calc(15 * var(--pixel-diseno)); line-height: 1.5; margin-bottom: calc(25 * var(--pixel-diseno)); }
      .soluciones-informes { font-size: calc(11 * var(--pixel-diseno)); padding-left: calc(22 * var(--pixel-diseno)); padding-right: calc(22 * var(--pixel-diseno)); height: calc(36 * var(--pixel-diseno)); }
      .soluciones-informes svg { width: calc(14 * var(--pixel-diseno)); }
    }

    /* Una sola fotografía persistente: el límite de cada servicio atraviesa
       su marco y revela la siguiente imagen solamente debajo del corte. */
    @media (min-width: 701px) {
      .soluciones-listado { position: relative; }
      .soluciones-bloque { position: relative; }
      .soluciones-bloque > .soluciones-foto { visibility: hidden; }
      .soluciones-visual-carril {
        position: absolute;
        top: calc(128 * var(--pixel-diseno));
        bottom: 0;
        right: 9.3%;
        width: calc(643 * var(--pixel-diseno));
        pointer-events: none;
        z-index: 2;
      }
      .soluciones-visual-sticky {
        width: 100%;
        aspect-ratio: 643 / 427;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
      }
      .soluciones-visual-sticky img {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: inset(var(--corte-superior, calc(0 * var(--pixel-diseno))) 0 var(--corte-inferior, calc(0 * var(--pixel-diseno))) 0);
        will-change: clip-path;
      }
    }
    @media (min-width: 701px) and (max-width: 1500px) {
      .soluciones-visual-carril { width: 42%; right: 5vw; }
      .soluciones-visual-sticky { top: 0; }
    }
    @media (max-width: 700px) {
      .soluciones-visual-carril { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .soluciones-visual-carril { display: none; }
      .soluciones-bloque > .soluciones-foto { visibility: visible; }
    }

    /* Primera fotografía: aparición delicada solo al entrar a Estrategia.
       No altera los recortes que transforman imágenes durante el scroll. */
    .js .soluciones-visual-sticky { opacity: 0; transition: opacity 1100ms cubic-bezier(.22,1,.36,1); }
    .js .soluciones-visual-sticky.foto-inicial-visible { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .js .soluciones-visual-sticky { opacity: 1; transition: none; }
    }

    /* Titular de Soluciones: Masked Text Reveal del encabezado de Proyectos. */
    .js .soluciones-titulo:not(.mascara-lista) { visibility: hidden; }
    .soluciones-titulo .palabra-mascara {
      display: inline-block; overflow: hidden; white-space: nowrap;
      vertical-align: baseline; padding: .22em .14em .30em 0;
      margin-top: -.22em; margin-bottom: -.30em;
    }
    .soluciones-titulo .palabra-contenido {
      display: inline-block; transform: translate3d(0,130%,0);
      transition: transform 1050ms cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }
    .soluciones-titulo.is-visible .palabra-contenido { transform: translate3d(0,0,0); }
    /* Los servicios usan el reveal editorial por renglones de inicio(3).zip. */
    .js .soluciones-contenido.animacion-preparada .soluciones-palabra { opacity: 0; }
    .soluciones-palabra { display: inline; }
    .js .soluciones-contenido.animacion-preparada > p,
    .js .soluciones-contenido.animacion-preparada > .soluciones-informes { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .js .soluciones-titulo:not(.mascara-lista) { visibility: visible !important; }
      .soluciones-titulo .palabra-contenido { transform: none !important; transition: none !important; }
      .js .soluciones-contenido.animacion-preparada .soluciones-palabra,
      .js .soluciones-contenido.animacion-preparada > p,
      .js .soluciones-contenido.animacion-preparada > .soluciones-informes {
        opacity: 1 !important; transition: none !important;
      }
    }

/* El fondo pertenece al documento: las secciones dejan ver la misma transición. */
body { transition: background-color 900ms cubic-bezier(.22,1,.36,1), color 900ms cubic-bezier(.22,1,.36,1); }
.proyectos { color: var(--texto); transition: color 900ms cubic-bezier(.22,1,.36,1); }
body.modo-soluciones-oscuro .proyectos { --texto: #ffffff; }

/* integracion */
/* Prueba de espaciado Manifiesto → Numeralias.
   Ambas secciones conservan su altura original de pantalla completa.
   Solo se superponen 12vh de sus zonas vacías de transición.
   Cambiar --acercamiento-numeralias a 0vh restaura la separación original. */
:root {
  --acercamiento-numeralias: 12vh;
}
#numeralias {
  margin-top: calc(-1 * var(--acercamiento-numeralias));
}

/* Numeralias → introducción de Proyectos: mismo acercamiento de 12vh,
   manteniendo la altura de pantalla completa de la introducción. */
.proyectos {
  margin-top: calc(-1 * var(--acercamiento-numeralias));
}

/* Cierre de Proyectos → Soluciones: acercamiento de 24vh en el espacio vacío
   sin cambiar los 100vh de la sección del botón. */
#soluciones {
  position: relative;
  margin-top: -24vh;
}


/* Navegación persistente, fuera del contexto de apilamiento de Inicio. */
.navbar {
  position: fixed;
  top: calc(32 * var(--pixel-diseno));
  z-index: 100;
  --fondo: var(--fondo-pagina);
}
.navbar .marca img {
  transition: filter 900ms cubic-bezier(.22,1,.36,1);
}
body.modo-soluciones-oscuro .navbar .marca img {
  filter: brightness(0) invert(1);
}
.navbar .boton-borde svg {
  display: block;
  width: 1.42vw;
  height: auto;
  flex: 0 0 auto;
}
.navbar .menu-boton,
.navbar .boton-borde,
.navbar .menu-opciones {
  transition: color 900ms cubic-bezier(.22,1,.36,1),
    border-color 900ms cubic-bezier(.22,1,.36,1),
    background-color 900ms cubic-bezier(.22,1,.36,1);
}
.navbar .boton-borde:hover,
.navbar .boton-borde:focus-visible { transition-duration: .42s; }
@media (max-width: 1050px) {
  .navbar .boton-borde svg { width: calc(18 * var(--pixel-diseno)); }
}
@media (max-width: 680px) {
  .navbar { top: calc(22 * var(--pixel-diseno)); }
  .navbar .boton-borde svg { width: calc(14 * var(--pixel-diseno)); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar .marca img, .navbar .menu-boton,
  .navbar .boton-borde, .navbar .menu-opciones { transition: none; }
}

/* Ocultar al bajar y mostrar al subir; el desplazamiento incluye el margen superior. */
.navbar {
  transition: transform 350ms cubic-bezier(.22,1,.36,1), visibility 350ms;
}
.navbar.navbar-oculta {
  transform: translateY(calc(-100% - calc(40 * var(--pixel-diseno))));
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none; }
}

/* Evitar que el centrado reparta un trazo de 1px entre dos columnas de píxeles. */
.linea-guia, .proyectos-eje, .indicador-scroll {
  width: var(--grosor-lineas);
  transform: none;
}
@supports (left: round(nearest, 50%, 1px)) {
  .linea-guia, .proyectos-eje, .indicador-scroll {
    left: round(nearest, 50%, 1px);
  }
}

/* Un mismo contraste para todos los trazos decorativos. */
:root { --color-trazos: #000000; }
body.modo-soluciones-oscuro { --color-trazos: #ffffff; }
.soluciones-listado::before,
.soluciones-bloque:not(:last-child)::after { background: var(--color-trazos); }

/* Adaptar la barra a la proporción del logo definitivo, sin deformarlo. */
.navbar { height: auto; min-height: 6.807vh; }
@media (max-width: 1050px) { .navbar { min-height: calc(54 * var(--pixel-diseno)); } }
@media (max-width: 680px) { .navbar { min-height: calc(42 * var(--pixel-diseno)); } }

/* tipografia */
/* Escala fluida común: mínimos legibles y máximos del diseño original. */
:root {
  --tipo-seccion: clamp(calc(42 * var(--pixel-diseno)), 4.576vw, calc(83.79 * var(--pixel-diseno)));
  --tipo-subtitulo: clamp(calc(26 * var(--pixel-diseno)), 2.075vw, calc(38 * var(--pixel-diseno)));
  --tipo-cuerpo: clamp(calc(15 * var(--pixel-diseno)), 1.0923vw, calc(20 * var(--pixel-diseno)));
  --tipo-boton: clamp(calc(13 * var(--pixel-diseno)), 1.169vw, calc(21.413 * var(--pixel-diseno)));
  --alto-boton: clamp(calc(38 * var(--pixel-diseno)), 2.84vw, calc(52 * var(--pixel-diseno)));
  --padding-boton: clamp(calc(22 * var(--pixel-diseno)), 2.2vw, calc(40.3 * var(--pixel-diseno)));
  --icono-boton: clamp(calc(16 * var(--pixel-diseno)), 1.42vw, calc(26 * var(--pixel-diseno)));
}
.hero-titulo { font-size: clamp(calc(48 * var(--pixel-diseno)), 6.554vw, calc(120 * var(--pixel-diseno))); }
.proyectos-intro { font-size: clamp(calc(44 * var(--pixel-diseno)), 7.12vw, calc(130.341 * var(--pixel-diseno))); }
.manifiesto-titulo { font-size: clamp(calc(24 * var(--pixel-diseno)), 2.4588vw, calc(45 * var(--pixel-diseno))); line-height: 1.12; }
.proyectos-encabezado, .soluciones-titulo {
  font-size: var(--tipo-seccion);
  line-height: 1.22;
  letter-spacing: -.04em;
}
.proyecto-titulo, .soluciones-contenido h3 {
  font-size: var(--tipo-subtitulo);
  line-height: 1.3;
  letter-spacing: -.03em;
}
.manifiesto-parrafo, .proyecto-categoria, .soluciones-contenido p {
  font-size: var(--tipo-cuerpo);
  line-height: 1.45;
}
.cifra-numero { font-size: clamp(calc(64 * var(--pixel-diseno)), 7vw, calc(110 * var(--pixel-diseno))); letter-spacing: -.04em; }
.cifra--centro .cifra-numero { line-height: .83; }
.cifra-descripcion { font-size: clamp(calc(16 * var(--pixel-diseno)), 1.45vw, calc(22 * var(--pixel-diseno))); line-height: 1.3; }
.menu-boton, .boton-borde, .proyectos-boton, .soluciones-informes {
  font-size: var(--tipo-boton);
  line-height: 1;
  letter-spacing: -.01em;
}
.boton-borde, .proyectos-boton, .soluciones-informes {
  width: auto;
  height: var(--alto-boton);
  padding: 0 var(--padding-boton);
  gap: calc(8 * var(--pixel-diseno));
}
.boton-borde img, .navbar .boton-borde svg,
.proyectos-boton svg, .soluciones-informes svg {
  width: var(--icono-boton);
  height: auto;
  flex-shrink: 0;
}
.menu-opciones a { font-size: clamp(calc(14 * var(--pixel-diseno)), 1.0923vw, calc(20 * var(--pixel-diseno))); }
.proyecto-media .proyecto-hover-texto { font-size: var(--tipo-cuerpo); }
@media (max-width: 700px) {
  .hero-titulo { font-size: clamp(calc(30 * var(--pixel-diseno)), 8.5vw, calc(59.5 * var(--pixel-diseno))); }
  .proyectos-intro { font-size: clamp(calc(32 * var(--pixel-diseno)), 11vw, calc(77 * var(--pixel-diseno))); }
  .cifra-numero { font-size: clamp(calc(64 * var(--pixel-diseno)), 10.3vw, calc(80 * var(--pixel-diseno))); }
  .navbar .boton-borde { padding-inline: calc(14 * var(--pixel-diseno)); }
}
@media (max-height: 610px) and (max-width: 680px) {
  .hero-titulo { font-size: clamp(calc(26 * var(--pixel-diseno)), 7vw, calc(47.6 * var(--pixel-diseno))); }
}

}