.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 34px}
.proyectos-intro{font-size: min(7.12vw,130.341px);letter-spacing:-.04em;line-height:.94;font-weight:400;text-align:center;color:#d3d2ca;margin:0;width:90.2%;max-width:1651px}
/* 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 + 95px);left:50%;width:var(--grosor-lineas);transform:translateX(-50%);background:var(--color-trazos);opacity:1;pointer-events:none}
.proyectos-zona{width:100%;max-width:1831px;margin:0 auto;position:relative;padding-top:130px}
.proyectos-encabezado{position:absolute;top:24px;right:6.45%;margin:0;font-size:83.79px;font-weight:400;letter-spacing:-3.35px;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(14px,min(1.15vw,20px)) 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(5px)}.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:33px;letter-spacing:-.66px;line-height:43.932px;font-weight:700;margin:17px 0 0}
.proyecto-categoria{display:flex;align-items:center;gap:15px;font-family:Arial,sans-serif;font-size:18px;letter-spacing:-.36px;line-height:1.5;margin:2px 0 0}
.proyecto-categoria::before{content:"";display:block;width:13px;height:14px;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(1215px - 647px - 110px)}
.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:446px}
.proyecto--zacapoaxtla .proyecto-media{width:100%;aspect-ratio:667/811}
.proyecto--cafe{margin-left:14.2%;width:47.4%;margin-top:calc(1847px - 446px - 811px - 110px)}
.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% - 44px);height:52px;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:8px;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:24px;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 16px;align-items:center}
.proyectos-intro{font-size:11vw;line-height:1.06;width:94%}
.proyectos-eje{display:none}
.proyectos-zona{padding-top:95px}
.proyectos-encabezado{top:10px;right:6%;font-size:42px;letter-spacing:-1.5px}
.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:75px}
.proyecto--wellness{order:3;margin-top:75px}
.proyecto--cafe{order:4;margin-top:75px}
.proyecto-titulo{font-size:26px;line-height:1.2;white-space:normal!important;margin-top:12px}
.proyecto-categoria{font-size:15px;gap:9px}
.proyecto-categoria::before{width:10px;height:10px}
.proyectos-boton{font-size:11px;height:36px;padding:0 22px}
.proyectos-boton svg{width:14px}
}
@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:13px; height:38px; padding:0 28px; }
  .proyectos-boton svg { width:18px; }
}
.proyectos-boton:focus-visible { outline:2px solid currentColor; outline-offset:4px; }