/* Inka Terra Asociación · home · Wellbeing (#bienestar) v3 (Rodrigo, 12 oct, sobre su referencia)
   Franja oscura y chata, sin foto ni rótulo: la pregunta (al tamaño de los titulares de sección del home, 36–54 px; toda en blanco, ligera con «live better?» en gruesa), una
   entrada corta y un botón de contorno crema, todo centrado. Grabados de hojas muy tenues en dos esquinas opuestas.
   Dirección emergente: el texto dice «exploring»; sin promesas de salud ni citas. La cabecera pasa a vidrio oscuro encima
   (data-oscuro). Entrada una vez al bajar (js/bienestar.js). */
.bienestar{position:relative;overflow:clip;background:#18210F;padding:clamp(64px,6vw,96px) 0;color:#FBF8F1;text-align:center}
.bienestar .grabado-b{position:absolute;width:clamp(300px,30vw,460px);height:auto;opacity:.85;pointer-events:none}
.bienestar .g-izq{left:-70px;bottom:-120px}
.bienestar .g-der{right:-70px;top:-120px}   /* la imagen ya viene girada 180° (linea-planta-fondo-180.png) */
.bienestar .texto-b{position:relative;display:flex;flex-direction:column;align-items:center}
.bienestar h2{margin:0 0 18px;max-width:none;font-family:"Archivo Fina","Archivo",var(--ui);font-weight:200;font-size:clamp(36px,3.7vw,54px);line-height:1.02;letter-spacing:-.035em;color:#FBF8F1;text-wrap:balance}
.bienestar h2 b{font-weight:600}   /* (12 oct) todo en blanco; el contraste lo da el peso, ligera + gruesa, como «Amazon Field Station» */
.bienestar .intro-b{margin:0 0 clamp(26px,2.6vw,34px);max-width:52ch;font-family:var(--texto);font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.6;color:rgba(251,248,241,.74);text-wrap:balance}
.bienestar .ir-b{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px 0 26px;border-radius:16px;background:none;color:#FBF8F1;font-family:var(--ui);font-weight:500;font-size:15.5px;letter-spacing:-.005em;text-decoration:none}
.bienestar .ir-b:not(#b):not(#c){box-shadow:inset 0 0 0 1.5px rgba(251,248,241,.55)}   /* botones.css quita las sombras: el contorno es una sombra interior */
.bienestar .ir-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bienestar .ir-b:focus-visible{outline:2px solid #FBF8F1;outline-offset:3px}

/* entrada, una sola vez al bajar */
.bienestar.anim .texto-b > *{opacity:0;translate:0 16px}
.bienestar.anim.entra .texto-b > *{opacity:1;translate:0 0;transition:opacity .8s ease calc(.1s + var(--k,0) * .1s),translate .9s var(--curva) calc(.1s + var(--k,0) * .1s)}

@media (max-width:620px){
  .bienestar{padding:56px 0}
  .bienestar .grabado-b{width:200px;opacity:.6}
  .bienestar .g-izq{left:-80px;bottom:-90px}
  .bienestar .g-der{right:-80px;top:-90px}
  .bienestar h2 br{display:none}   /* en móvil reparte las líneas el text-wrap:balance */
  .bienestar .intro-b{margin-bottom:26px}
  .bienestar .ir-b{align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.bienestar *{transition:none!important}}
/* (Rodrigo, 12 oct) las hojas de las esquinas crecen y giran con el avance de la sección por la pantalla: --p (0 → 1) lo
   calcula js/bienestar.js; al subir hacen el recorrido inverso. Cada una crece y gira desde su propia esquina (no se
   desplaza): la de abajo a la izquierda gira hacia la derecha y la de arriba a la derecha hacia la izquierda */
.bienestar .grabado-b{scale:calc(.82 + var(--p,.5) * .4);rotate:calc((var(--p,.5) - .5) * 24deg);will-change:scale,rotate}
.bienestar .g-izq{transform-origin:0 100%}
.bienestar .g-der{transform-origin:100% 0}