/* Motion layer — transform and opacity only. Content is visible by default;
   hidden "from" states exist only under html.mo (JS ready, motion allowed). */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- Global: scroll progress ---------- */
.progress{position:fixed;z-index:70;left:0;right:0;top:0;height:4px;background:var(--brown);transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root block)}
  @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- Global: header shrinks on scroll ---------- */
.top::before{transition:transform .35s var(--ease)}
.top__in{transition:transform .35s var(--ease)}
.brand img{transform-origin:left center;transition:transform .35s var(--ease)}
.top.is-small::before{transform:scaleY(.9)}
.top.is-small .top__in{transform:translateY(-3px)}
@media (min-width:1100px){
  .top.is-small::before{transform:scaleY(.86)}
  .top.is-small .top__in{transform:translateY(-4px)}
  .top.is-small .brand img{transform:scale(.9)}
}
/* sliding active-section marker (desktop nav) */
.nav__ind{display:none}
@media (min-width:1100px){
  .nav ul{position:relative}
  .nav__ind{display:block;position:absolute;left:0;bottom:2px;height:3px;width:100px;border-radius:2px;background:var(--terra);transform:translateX(var(--x,0)) scaleX(var(--s,0));transform-origin:left;transition:transform .45s var(--ease);pointer-events:none}
}

/* ---------- Global: heading word reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
.mo .wi{transform:translateY(108%);opacity:0}
.mo .in .wi{transform:none;opacity:1;transition:transform .7s var(--ease) calc(var(--i,0)*70ms),opacity .4s ease calc(var(--i,0)*70ms)}
.hero h1.in .wi{transition-delay:calc(var(--i,0)*95ms + 150ms)}

/* ---------- Global: organic wave dividers ---------- */
.sec{position:relative;--bg:var(--cream);background:var(--bg)}
.sec--sand{--bg:var(--sand)}
.sec--leaf{--bg:var(--leaftint)}
.sec:not(#cafes)::before{content:"";position:absolute;left:0;right:0;top:1px;height:clamp(22px,4vw,46px);transform:translateY(-100%);background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48C220 6 430 4 680 26S1170 52 1440 10V48Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48C220 6 430 4 680 26S1170 52 1440 10V48Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
#equipo::before,#contacto::before{transform:translateY(-100%) scaleX(-1)}
.mo .sec:not(#cafes)::before{transform-origin:bottom}

/* ---------- Global: tasting-notes ribbon ---------- */
.ribbon{background:var(--olive);color:var(--cream);overflow:hidden;padding-block:16px;position:relative;z-index:1}
.ribbon__in{display:flex;width:max-content;animation:marq 60s linear infinite}
.ribbon__track{display:flex;flex:none;align-items:center}
.ribbon__track li{display:flex;align-items:center;font:700 1.25rem/1 var(--f-head);white-space:nowrap;padding-inline:20px}
.ribbon__track li::after{content:"";width:18px;height:18px;margin-left:40px;background:var(--cream);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22C2 10 9 3 22 2C22 14 15 21 2 22Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22C2 10 9 3 22 2C22 14 15 21 2 22Z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}
.ribbon:hover .ribbon__in,.ribbon:focus-within .ribbon__in,.ribbon.is-off .ribbon__in{animation-play-state:paused}

/* ---------- Hero ---------- */
.hero__leaf{will-change:transform}
.hero__copy,.hero__stage{position:relative;z-index:1}
.beans{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bean{position:absolute;width:26px;height:26px;color:var(--brown);opacity:.28;animation:bean 9s ease-in-out infinite alternate}
.b1{left:46%;top:9%;width:20px;height:20px;animation-duration:8s}
.b2{right:5%;top:46%;width:30px;height:30px;animation-duration:11s;animation-delay:-3s}
.b3{left:3%;bottom:11%;width:24px;height:24px;animation-duration:10s;animation-delay:-5s}
.b4{left:52%;bottom:7%;width:18px;height:18px;animation-duration:7s;animation-delay:-2s}
.b5{right:36%;top:3%;width:22px;height:22px;animation-duration:12s;animation-delay:-6s}
@keyframes bean{from{transform:translate3d(0,0,0) rotate(-12deg)}to{transform:translate3d(8px,-16px,0) rotate(14deg)}}
.b4,.b5{display:none}
@media (min-width:1100px){.b4,.b5{display:block}}
.hero.is-off .bean,.hero.is-off .steam path{animation-play-state:paused}
.steam{position:absolute;left:6%;bottom:46%;width:22%;height:auto;pointer-events:none;overflow:visible}
.steam path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:0;animation:steam 5.5s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.7s}
.steam path:nth-child(3){animation-delay:3.4s}
@keyframes steam{0%{opacity:0;transform:translate3d(0,26px,0) scaleY(.85)}25%{opacity:.55}100%{opacity:0;transform:translate3d(6px,-34px,0) scaleY(1.1)}}
.stage{transform:translate3d(var(--tx,0),var(--ty,0),0);will-change:transform}
.hero__stage{will-change:auto}

/* ---------- Reduced motion: everything static and legible ---------- */
@media (prefers-reduced-motion:reduce){
  .progress{animation:none;transform:scaleX(0)}
  .ribbon__in{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .ribbon__track:nth-child(2){display:none}
  .ribbon__track{flex-wrap:wrap;justify-content:center}
  .bean,.steam{display:none}
  .stage{transform:none}
}

/* ---------- Cafés: tabs ---------- */
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;background:var(--sand);border-radius:999px;margin-bottom:28px;width:100%;max-width:420px}
.tab{position:relative;z-index:1;min-height:48px;padding:0 20px;border:0;background:transparent;border-radius:999px;font:700 1.0625rem var(--f-body);color:var(--olive);cursor:pointer;transition:color .3s}
.tab[aria-selected=true]{color:#fff}
.tabs__ind{position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 16px)/2);border-radius:999px;background:var(--olive);transform:translateX(calc(var(--i,0)*(100% + 4px)));transition:transform .45s var(--ease)}
.panel.is-out{animation:panelOut .18s ease-in both}
@keyframes panelOut{to{opacity:0;transform:translate3d(-14px,0,0)}}

/* ---------- Cafés: cards ---------- */
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.card.tilting{transition:transform .08s linear}
.mo .card{opacity:0;translate:0 30px;scale:.97}
.mo .card.in{opacity:1;translate:none;scale:1;transition:transform .6s var(--ease),opacity .6s ease calc(var(--k,0)*90ms),translate .75s var(--ease) calc(var(--k,0)*90ms),scale .75s var(--ease) calc(var(--k,0)*90ms)}
.mo .card.in.tilting{transition:transform .08s linear}
.card__ph{perspective:1000px;overflow:visible}
.card__ph--empty img{animation:floaty 5s ease-in-out infinite alternate}
@keyframes floaty{to{transform:translate3d(0,-8px,0)}}
.flip{position:relative;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.face{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face--front{position:relative;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.face--back{position:absolute;inset:0;transform:rotateY(180deg);background:var(--leaftint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;overflow:auto}
.card.is-flipped .flip{transform:rotateY(180deg)}
.ring{position:relative;width:112px;height:112px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(79,106,46,.22);stroke-width:10}
.ring__fg{fill:none;stroke:var(--olive);stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7px;stroke-dashoffset:326.7px}
.ring__n{position:absolute;inset:0;display:grid;place-items:center;font:800 2rem var(--f-head);color:var(--brown)}
.ring__lbl{font:700 1rem/1.2 var(--f-body);color:var(--olive);text-align:center}
.card.is-flipped .ring__fg{stroke-dashoffset:calc(326.7px * (1 - (var(--sc,80) - 80) / 20));transition:stroke-dashoffset 1.1s var(--ease) .45s}
.notes-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.note{padding:6px 12px;border-radius:999px;background:var(--bone);color:var(--ink);font:600 1rem/1.2 var(--f-body);opacity:0;transform:translate3d(0,10px,0) scale(.92);transition:opacity .2s,transform .2s}
.card.is-flipped .note{opacity:1;transform:none;transition:opacity .4s ease calc(.5s + var(--i,0)*70ms),transform .55s var(--ease) calc(.5s + var(--i,0)*70ms)}
.back__close{min-height:44px;padding:8px 18px}
.size-tag{position:absolute;right:14px;bottom:14px;background:var(--cream);color:var(--olive);font:800 1rem var(--f-head);padding:6px 14px;border-radius:999px;box-shadow:0 8px 16px -10px rgba(58,26,14,.6)}
.size-tag.bump{animation:bump .5s var(--ease)}
@keyframes bump{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.btn.ping{animation:ping .5s var(--ease)}
@keyframes ping{40%{transform:scale(1.04)}}
.notes-btn{margin-top:-4px}
@media (prefers-reduced-motion:reduce){
  .card{transform:none}
  .flip{transition:none;transform:none!important;transform-style:flat}
  .face--back{transform:none;display:none}
  .card.is-flipped .face--back{display:flex;position:relative}
  .card.is-flipped .face--front{display:none}
  .note{opacity:1;transform:none;transition:none}
  .ring__fg{transition:none!important}
  .card__ph--empty img{animation:none}
}

/* ---------- Origen: schematic map + altitude gauge ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.geo{display:grid;gap:24px;margin-top:clamp(40px,6vw,72px)}
.map{margin:0;background:var(--bone);border-radius:var(--r);padding:14px 14px 10px}
.map__stage{position:relative;aspect-ratio:2016/2088}
.map__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
.map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map__land path:first-child{fill:var(--leaftint);stroke:var(--olive);stroke-width:2}
.map__land .c2,.map__land .c3{fill:none;stroke:var(--olive);stroke-width:1.5;opacity:.4}
.map__land{transform-origin:50% 50%;transform-box:fill-box}
.map__note{font-size:1rem;color:var(--ink);padding:8px 6px 4px;text-align:center}
.pt{position:absolute;left:calc(var(--x) - 24px);top:calc(var(--y) - 24px);width:48px;height:48px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.pt__dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--terra-d);box-shadow:0 0 0 3px var(--bone)}
.pt__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--terra);animation:pulse 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.is-off .pt__dot::after{animation-play-state:paused}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
.pt__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tip{position:absolute;bottom:calc(100% + 2px);left:50%;width:max-content;max-width:200px;transform:translate(-50%,6px);opacity:0;pointer-events:none;background:var(--ink);color:var(--cream);border-radius:12px;padding:10px 14px;font:500 1rem/1.35 var(--f-body);text-align:left;transition:opacity .2s ease,transform .3s var(--ease);z-index:3}
.pt:hover .tip,.pt:focus-visible .tip,.pt.is-open .tip{opacity:1;transform:translate(-50%,0)}
.pt:nth-of-type(3) .tip{left:auto;right:-6px;transform:translate(0,6px)}
.pt:nth-of-type(3):hover .tip,.pt:nth-of-type(3):focus-visible .tip,.pt:nth-of-type(3).is-open .tip{transform:none}
.pt:focus-visible{outline:3px solid var(--terra-d);outline-offset:0}
.mo .map__land{opacity:0;transform:scale(.92)}
.mo .map.in .map__land{opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--ease)}
.mo .pt{opacity:0;transform:scale(.4)}
.mo .map.in .pt{opacity:1;transform:none;transition:opacity .4s ease calc(.5s + var(--k)*.18s),transform .6s var(--ease) calc(.5s + var(--k)*.18s)}
.alt{background:var(--bone);border-radius:var(--r);padding:22px 24px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.alt h3{font-weight:800;font-size:1.5rem;color:var(--brown)}
.alt__body{display:flex;gap:18px;min-height:240px}
.alt__gauge{position:relative;width:26px;flex:none}
.alt__line{position:absolute;left:11px;top:0;bottom:0;width:4px;border-radius:2px;background:rgba(79,106,46,.2)}
.alt__fill{position:absolute;left:11px;top:0;bottom:0;width:4px;border-radius:2px;background:var(--olive);transform-origin:bottom;transform:scaleY(var(--p,1))}
.alt__dot{position:absolute;left:3px;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--terra-d);box-shadow:0 0 0 4px var(--bone);transform:translateY(calc((1 - var(--p,1)) * var(--h,240px)))}
.alt__ticks{display:flex;flex-direction:column;justify-content:space-between;font:700 1rem/1 var(--f-head);color:var(--olive)}
.alt__read{font:600 1.25rem var(--f-head)}
.alt__read b{font:800 2.5rem/1 var(--f-head);color:var(--brown)}
@media (min-width:768px){.geo{grid-template-columns:1.5fr 1fr;align-items:stretch}.alt__body{min-height:260px}}
@media (prefers-reduced-motion:reduce){.pt__dot::after{animation:none;opacity:0}.tip{transition:none}.alt__fill,.alt__dot{transition:none}}

/* ---------- Proceso: pinned horizontal (desktop) / swipe carousel (mobile) ---------- */
.proc__nav,.vh#procLive{display:none}
.mo .proc__nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.mo .proc__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.mo .proc__track::-webkit-scrollbar{display:none}
.mo .proc__track>.step{overflow:hidden;flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:1fr;gap:18px;align-content:start}
.mo .proc__track>.step:nth-child(even) img{order:0}
.mo .step img{opacity:var(--o,1);transform:scale(var(--z,1));will-change:transform,opacity}
.mo .step__t{opacity:var(--ot,1);transform:translate3d(0,calc((1 - var(--ot,1)) * 22px),0)}
.mo .step .num{margin-bottom:2px}
.pbtn{flex:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--olive);background:transparent;color:var(--olive);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.pbtn svg{width:22px;height:22px}
.pbtn:hover{background:var(--olive);color:#fff}
.pbtn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.proc__line{position:relative;flex:1;height:48px;margin-inline:28px;--pp:0}
.proc__rail,.proc__fill{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.proc__rail{background:rgba(79,106,46,.22)}
.proc__fill{background:var(--olive);transform-origin:left;transform:scaleX(var(--pp))}
.dot{position:absolute;top:50%;left:calc(var(--i) / 6 * 100%);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.dot span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cream);border:2px solid var(--olive);color:var(--olive);transition:background .3s,color .3s,transform .3s var(--ease)}
.dot[aria-current=true] span{background:var(--olive);transform:scale(1.25)}
.dot.is-done span{background:var(--olive)}
.proc__bean{position:absolute;top:50%;left:0;width:30px;height:30px;margin:-34px 0 0 -15px;color:var(--brown);translate:calc(var(--pp) * var(--lw,0px)) 0;pointer-events:none}
.proc__bean svg{width:100%;height:100%;transform:rotate(calc(var(--pp) * 900deg));display:block}
@media (min-width:768px) and (max-width:1099px){
  .mo .proc__track>.step{grid-template-columns:1fr 1fr;gap:28px;align-items:center}
}
@media (min-width:1100px){
  .mo .proc{height:calc(100vh + 6 * 62vh);margin-inline:calc(var(--gut) * -1)}
  .mo .proc__pin{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-inline:var(--gut)}
  .mo .proc__track{overflow:visible;scroll-snap-type:none;transform:translate3d(var(--tx,0px),0,0);will-change:transform;margin-inline:calc(var(--gut) * -1)}
  .mo .proc__track>.step{grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;padding-inline:var(--gut)}
  .mo .step img{max-height:calc(100vh - var(--hdr) - 190px)}
  .mo .proc__nav{width:100%;max-width:1160px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){.proc__bean svg{transform:none}}

/* ---------- Nosotros: timeline that draws with scroll + counter ---------- */
.timeline{position:relative;padding-left:30px;--tp:1}
.timeline::before,.timeline::after{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:4px;border-radius:2px}
.timeline::before{background:rgba(199,107,59,.22)}
.timeline::after{background:var(--terra);transform-origin:top;transform:scaleY(var(--tp))}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-32px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--cream);border:4px solid var(--terra);transform:scale(var(--on,1));transition:transform .5s var(--ease)}
.mo .timeline li{--on:0}
.mo .timeline li.on{--on:1}
.mo .timeline li>*{opacity:.35;transition:opacity .5s ease}
.mo .timeline li.on>*,.mo .timeline li.on .yr{opacity:1}
.stat{margin-top:10px;font:600 1.0625rem var(--f-body);color:var(--olive);display:flex;align-items:baseline;gap:8px}
.count{font:800 2.5rem/1 var(--f-head);color:var(--terra-d)}

/* ---------- Valores: expanding cards with animated SVG icons ---------- */
.mvv{margin-top:clamp(40px,6vw,72px)}
.values{margin-top:28px}
.values h3{font-weight:800;font-size:1.5rem;color:var(--olive);margin-bottom:14px}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vgrid li:last-child:nth-child(odd){grid-column:1/-1}
.vcard{width:100%;min-height:120px;border:2px solid transparent;border-radius:var(--r);background:var(--leaftint);color:var(--olive);display:grid;place-items:center;gap:8px;align-content:center;padding:16px 10px;font:700 1.0625rem/1.2 var(--f-head);cursor:pointer;transition:transform .5s var(--ease),background .3s,color .3s,box-shadow .5s var(--ease);text-align:center}
.vcard svg{width:44px;height:44px;transition:transform .5s var(--ease);overflow:visible}
.vcard span{color:var(--brown);transition:color .3s}
.vcard:hover,.vcard:focus-visible,.vcard[aria-expanded=true]{transform:scale(1.07);background:var(--olive);color:var(--cream);box-shadow:0 22px 30px -22px rgba(58,26,14,.7);position:relative;z-index:2}
.vcard:hover span,.vcard:focus-visible span,.vcard[aria-expanded=true] span{color:var(--cream)}
.vcard:hover svg,.vcard:focus-visible svg,.vcard[aria-expanded=true] svg{transform:scale(1.35) translateY(-4px)}
.ico{transform-box:fill-box;transform-origin:center}
.vcard:hover .ico--star,.vcard:focus-visible .ico--star,.vcard[aria-expanded=true] .ico--star{animation:spin 1.2s var(--ease)}
.vcard:hover .ico--pin,.vcard:focus-visible .ico--pin,.vcard[aria-expanded=true] .ico--pin{animation:hop .8s var(--ease)}
.vcard:hover .ico--beam,.vcard:focus-visible .ico--beam,.vcard[aria-expanded=true] .ico--beam{animation:rock 1.4s ease-in-out}
.vcard:hover .ico--leafL,.vcard:focus-visible .ico--leafL,.vcard[aria-expanded=true] .ico--leafL{animation:sway 1.2s ease-in-out 2;transform-origin:100% 100%}
.vcard:hover .ico--leafR,.vcard:focus-visible .ico--leafR,.vcard[aria-expanded=true] .ico--leafR{animation:sway2 1.2s ease-in-out 2;transform-origin:0 100%}
.vcard:hover .ico--bulb,.vcard:focus-visible .ico--bulb,.vcard[aria-expanded=true] .ico--bulb{animation:glow 1s ease-in-out 2}
.vcard:hover .ico--rays,.vcard:focus-visible .ico--rays,.vcard[aria-expanded=true] .ico--rays{animation:glow 1s ease-in-out 2}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hop{30%{transform:translateY(-9px)}60%{transform:translateY(0)}80%{transform:translateY(-3px)}}
@keyframes rock{20%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@keyframes sway{50%{transform:rotate(-14deg)}}
@keyframes sway2{50%{transform:rotate(14deg)}}
@keyframes glow{50%{transform:scale(1.12);opacity:.65}}
@media (min-width:768px){.vgrid{grid-template-columns:repeat(5,1fr)}.vgrid li:last-child:nth-child(odd){grid-column:auto}}

/* ---------- Equipo: staggered entrance, muted → colour, role slides up ---------- */
.team li.member{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bone);outline-offset:4px}
.team li.member img{margin-bottom:0;border-radius:0;filter:grayscale(.9) brightness(.97);transform:scale(1.001);transition:filter .6s ease,transform .8s var(--ease);display:block}
.cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 14px;background:rgba(255,251,243,.95);transform:translate3d(0,var(--shift,34px),0);transition:transform .55s var(--ease)}
.cap h3{font-size:1.375rem}
.cap p{margin-top:2px;line-height:1.6}
.team li.member:hover img,.team li.member:focus-visible img,.team li.member.is-on img{filter:none;transform:scale(1.04)}
.team li.member:hover .cap,.team li.member:focus-visible .cap,.team li.member.is-on .cap{transform:none}
.mo .team li.member{opacity:0;translate:0 36px}
.mo .team li.member.in{opacity:1;translate:none;transition:opacity .7s ease calc(var(--k,0)*120ms),translate .9s var(--ease) calc(var(--k,0)*120ms)}
@media (prefers-reduced-motion:reduce){
  .team li.member img{filter:none;transition:none}
  .cap{position:static;transform:none;transition:none}
  .vcard{transition:none}.vcard svg{transition:none}
  .vcard .ico{animation:none!important}
  .timeline::after{transform:none}
  .timeline li::before{transform:none}
}

/* ---------- Contacto: pulse + cascade ---------- */
.contact .btn--wa{position:relative}
.contact .btn--wa::after,.nav__cta::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--terra);opacity:0;animation:ring 2.8s ease-out infinite;pointer-events:none}
.contact.is-off .btn--wa::after{animation-play-state:paused}
@keyframes ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.5)}}
.nav__cta{position:relative}
.nav__cta::after{display:none}
.mo .clist li{opacity:0;translate:0 18px}
.mo .clist.in li{opacity:1;translate:none;transition:opacity .5s ease calc(var(--k,0)*90ms),translate .7s var(--ease) calc(var(--k,0)*90ms)}
@media (prefers-reduced-motion:reduce){.contact .btn--wa::after{display:none}}

.ribbon__ctl{position:absolute;z-index:2;right:10px;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid var(--cream);background:var(--olive);color:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0}
.ribbon__ctl svg{width:20px;height:20px}
.ribbon__ctl .i-play{display:none}
.ribbon__ctl[aria-pressed=true] .i-pause{display:none}
.ribbon__ctl[aria-pressed=true] .i-play{display:block}
.ribbon.is-paused .ribbon__in{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ribbon__ctl{display:none}}