/* Grupos que dan vida a los valores. Misma identidad, selección y animación. */
.value-stage.has-people{grid-template-columns:minmax(0,1fr) 500px;gap:24px;min-height:320px;padding:24px 28px 24px 44px}
.value-copy{position:relative;z-index:2;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:24px}
.has-people .value-emblem{width:76px;height:76px;margin-top:2px}
.has-people .value-morph{width:48px;height:48px}
.has-people .value-message{padding:0;min-height:0;align-self:center}
.has-people .value-message h4{font-size:clamp(30px,3.2vw,40px);margin-bottom:14px}
.has-people .value-message p{font-size:clamp(21px,2vw,25px);max-width:29ch;text-wrap:pretty}
.value-person{position:relative;z-index:1;align-self:end;width:100%;aspect-ratio:1000/520;margin:0 0 -24px;pointer-events:none;isolation:isolate}
.value-person::before{content:"";position:absolute;z-index:-1;inset:-45px -16px -12px;background:radial-gradient(ellipse at 50% 63%,rgba(52,156,196,.22),rgba(196,227,238,.25) 44%,transparent 72%)}
.value-person img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;filter:url(#values-photo-tone)}
.value-person img.is-current{opacity:1}
.has-people .value-progress{z-index:3}
@media(max-width:1050px){
  .value-stage.has-people{grid-template-columns:minmax(0,1fr) 360px;padding:28px 16px 24px 32px;gap:20px;min-height:312px}
  .value-copy{grid-template-columns:1fr;gap:16px}
  .has-people .value-emblem{width:64px;height:64px;margin:0}
  .has-people .value-morph{width:42px;height:42px}
  .has-people .value-message h4{font-size:32px}
  .has-people .value-message p{font-size:22px}
}
@media(max-width:800px){
  .value-stage.has-people{grid-template-columns:1fr;gap:0;padding:0;min-height:0}
  .value-person{grid-row:1;width:min(calc(100% - 16px),500px);justify-self:center;margin:16px 0 0}
  .value-person::before{inset:-16px -20px -8px}
  .value-copy{grid-row:2;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:20px 32px 44px}
  .has-people .value-message{min-height:130px}
  .has-people .value-message p{max-width:none}
}
@media(max-width:640px){
  .value-copy{display:block;padding:12px 24px 44px}
  .has-people .value-emblem{position:absolute;left:24px;top:12px;width:52px;height:52px}
  .has-people .value-morph{width:34px;height:34px}
  .has-people .value-message{padding:0;min-height:160px}
  .has-people .value-message h4{display:flex;align-items:center;min-height:52px;padding-left:68px;font-size:28px;margin-bottom:16px;line-height:1.1}
  .has-people .value-message p{font-size:21px;line-height:1.4}
}
@media(max-width:400px){
  .has-people .value-emblem{width:48px;height:48px}
  .has-people .value-message h4{padding-left:60px;font-size:26px}
}
@media(max-width:370px){
  .has-people .value-message{min-height:180px}
  .has-people .value-message h4{font-size:24px}
  .has-people .value-message p{font-size:20px}
}