/* Inka Terra Asociación · home · Impact (#impacto) v2 (Rodrigo, 12 oct, opción C + sus referencias)
   Sección limpia: solo una frase centrada con la letra, el tamaño y la disposición de la cita de Who We Are (Archivo 500
   en bosque, 25–38 px, datos en 700 musgo) y, junto a cada dato, una foto real metida en el texto (rectángulos de radio 16). Con el rótulo
   «Our impact» centrado; sin botón ni nota. Sobre blanco, entre How ITA works y Where we work (oscuro). Al llegar bajando, la frase sube con
   un fundido (js/impacto.js); las fotos no se animan. La de «48 years» es Duellman y Koechlin en Madre de Dios, 1986. Cifras pendientes de validación. */
.impacto{background:var(--papel);padding:0 0 clamp(80px,8vw,120px)}   /* (12 oct) blanco y pegada a How ITA works: el aire de arriba es solo el de esa sección */
.impacto{text-align:center}
.impacto .rotulo{display:inline-flex;align-items:center;gap:16px;margin:0 0 clamp(24px,2.4vw,32px);font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--musgo);white-space:nowrap}
.impacto .rotulo i{display:block;width:40px;height:1px;background:currentColor;opacity:.6}   /* rótulo centrado con un filete a cada lado, como el de la Field Station */
.impacto .frase-i{margin:0 auto;max-width:30ch;font-family:var(--ui);font-weight:500;font-size:clamp(25px,2.6vw,38px);line-height:1.3;letter-spacing:-.025em;color:var(--bosque);text-wrap:balance}   /* (12 oct) como la cita de Who We Are */
.impacto .frase-i b{font-weight:700;color:var(--musgo)}
.impacto .foto-i{display:inline-block;width:1.6em;height:1em;margin:0 .04em;border-radius:.3em;overflow:hidden;vertical-align:-.17em;background:#E6E1D4}   /* más cortas y con el radio a su escala */
.impacto .foto-i img{display:block;width:100%;height:100%;object-fit:cover}
.impacto .pega{white-space:nowrap}   /* (12 oct) el dato puede partirse en dos líneas, pero la foto va siempre pegada a su última palabra */

/* entrada, una sola vez al bajar (js/impacto.js): los filetes del rótulo se dibujan hacia fuera, la frase aparece palabra a
   palabra y cada foto crece en su turno (transform y opacidad: el texto no se recoloca) */
.impacto.anim .rotulo{opacity:0}
.impacto.anim .rotulo i{scale:0 1}
.impacto.anim .rotulo i:first-child{transform-origin:right}
.impacto.anim .rotulo i:last-child{transform-origin:left}
.impacto.anim .pal{display:inline-block;opacity:0;translate:0 .35em}
.impacto.anim .foto-i{opacity:0;scale:.6}
.impacto.anim.entra .rotulo{opacity:1;transition:opacity .7s ease}
.impacto.anim.entra .rotulo i{scale:1 1;transition:scale .9s var(--curva) .15s}
.impacto.anim.entra .pal{opacity:1;translate:0 0;transition:opacity .6s ease calc(.3s + var(--i,0) * 40ms),translate .8s var(--curva) calc(.3s + var(--i,0) * 40ms)}
.impacto.anim.entra .foto-i{opacity:1;scale:1;transition:opacity .5s ease calc(.3s + var(--i,0) * 40ms),scale .9s var(--curva) calc(.3s + var(--i,0) * 40ms)}
/* microanimación: al pasar por un dato, su foto se acerca y el dato toma el verde bosque */
.impacto .frase-i b{transition:color .35s ease}
.impacto .foto-i img{transition:scale .7s var(--curva)}
@media (hover:hover) and (pointer:fine){
  .impacto .frase-i b:hover{color:var(--bosque)}
  .impacto .frase-i b:hover .foto-i img{scale:1.14}
}

/* ordenador: la frase más ancha, menos líneas (12 oct) */
@media (min-width:961px){.impacto .frase-i{max-width:46ch}}
/* tableta: How ITA works acaba con más aire (104 px visibles); abajo, el mismo */
@media (min-width:621px) and (max-width:960px){.impacto{padding-bottom:116px}}
@media (max-width:620px){
  .impacto{padding:16px 0 60px}   /* (12 oct) en móvil algo más de aire arriba que abajo: el rótulo es ligero y en el teléfono de Rodrigo se veía menos aire arriba */   /* en móvil How ITA works acaba con poco aire (32 px) */
  .impacto .frase-i{line-height:1.3}
}
@media (prefers-reduced-motion:reduce){.impacto *{transition:none!important}}