/* Guardian · Nosotros: héroe con la marca, desde 2015, historia, Go Digitals, mapa y reseñas. */

/* ---------- Héroe ---------- */
.a-hero{position:relative;isolation:isolate;padding:clamp(28px,4.5vw,64px) 0 clamp(56px,6vw,96px);overflow:clip}
.a-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(40px,5vw,72px)}
.a-hero-copy{display:grid;gap:24px;justify-items:start}
.a-hero-copy>*{animation:rise 900ms var(--ease-out) both}
.a-hero-copy>.pill-live{animation-delay:40ms}
.a-hero-copy>.lead{animation-delay:380ms;max-width:560px}
.a-hero-copy>.a-actions{animation-delay:480ms}
.a-hero-copy>.a-title{animation:none}
.a-title{font:400 clamp(2.5rem,1.25rem + 3.6vw,4.4rem)/1.03 var(--f-display);letter-spacing:-.012em;word-spacing:.05em}
.a-title em{display:block;font-family:var(--f-serif);font-style:italic;font-size:1.07em;letter-spacing:-.01em;color:var(--lav-strong)}
.a-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.reviews-chip{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px;background:#fff;border:1px solid var(--soft);box-shadow:var(--sh-1);font-size:.84rem;line-height:1.3;font-weight:600;text-decoration:none;color:var(--ink);transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.reviews-chip img{width:36px;height:36px;padding:8px;border-radius:12px;background:var(--panel)}
.reviews-chip>span:last-child{color:var(--lav-strong)}
@media (hover:hover) and (pointer:fine){.reviews-chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}
.reviews-chip:active{transform:scale(.97)}

/* Escena: Guardian sostiene su marca */
.brand-stage{--mw:300px;position:relative;padding-top:calc(var(--mw) * .74);animation:stageIn 1.1s var(--ease-out) .25s both}
@keyframes stageIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.bs-mascot{position:absolute;z-index:3;left:50%;top:0;width:var(--mw);transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 18px 24px rgba(52,28,110,.2))}
.bs-mascot img{width:100%;transform-origin:50% 100%;animation:sway 7s var(--ease-in-out) infinite}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1deg)}}
.bs-card{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;padding:44px 28px 26px;border-radius:var(--r-xl);background:#fff;border:1px solid rgba(24,24,27,.06);box-shadow:var(--sh-3);text-align:center}
.bs-logo{width:min(240px,70%)}
.bs-by{font-size:.95rem;color:var(--muted)}
.bs-by strong{color:var(--ink)}
.bs-status{display:flex;align-items:center;gap:10px;width:100%;max-width:380px;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid #EFEAF8;font-size:.86rem;font-weight:600;text-align:left}
.bs-status .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px rgba(30,154,85,.15)}
.bs-status .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.bs-status .txt.is-out{opacity:0;transform:translateY(5px)}
.bs-status .bar{flex:none;width:56px;height:5px;border-radius:5px;background:var(--soft);overflow:hidden}
.bs-status .bar i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lav),var(--lav-strong));transform-origin:left;animation:fill 2.9s linear infinite}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bs-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:380px}
.bs-cycle li{height:28px;display:grid;place-items:center;border-radius:10px;background:var(--panel);font:500 .68rem/1 var(--f-mono);color:var(--muted);transition:background-color var(--d-slow) var(--ease-out),color var(--d-slow) var(--ease-out)}
.bs-cycle li.on{background:var(--ink);color:var(--lime)}
.bs-foot{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip-note{left:-30px;top:calc(var(--mw) * .74 + 40px);animation:float 7s var(--ease-in-out) infinite}
.chip-note .ci{background:var(--ink);color:var(--lime)}
.chip-note .ci svg{width:18px;height:18px}

/* ---------- Desde 2015 ---------- */
.since{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.since-item{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;padding:28px 24px}
.since-item+.since-item{border-left:1px solid var(--line)}
.since-ico{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--lav-strong)}
.since-ico svg{width:22px;height:22px}
.since-item strong{font:400 1.45rem/1.15 var(--f-display);letter-spacing:-.005em}
.since-item strong em{font-family:var(--f-serif);font-style:italic;color:var(--lav-strong);font-size:1.08em}
.since-item>span:last-child{color:var(--muted);font-size:.95rem}

/* ---------- Historia: lectura que se enciende ---------- */
.origin-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,104px);align-items:start}
.origin-aside{position:sticky;top:110px;display:grid;gap:20px}
.work-cycle{display:grid;gap:6px;margin-top:10px}
.work-cycle li{display:grid;grid-template-columns:30px 40px 1fr;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid transparent;font-weight:600;color:var(--muted);transition:background-color var(--d-slow) var(--ease-out),color var(--d-slow) var(--ease-out),box-shadow var(--d-slow) var(--ease-out),border-color var(--d-slow) var(--ease-out)}
.work-cycle .step{font:500 .72rem/1 var(--f-mono);text-align:center}
.wc-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--panel);color:var(--lav-strong);transition:background-color var(--d-slow) var(--ease-out),color var(--d-slow) var(--ease-out)}
.wc-ico svg{width:20px;height:20px}
.work-cycle li.on{background:#fff;border-color:#ECE7F6;box-shadow:var(--sh-2);color:var(--ink)}
.work-cycle li.on .wc-ico{background:var(--ink);color:var(--lime)}
.origin-copy{display:grid;gap:clamp(28px,4vw,44px);padding-top:8px}
.origin-copy p{font-size:clamp(1.2rem,1.05rem + .55vw,1.55rem);line-height:1.55;letter-spacing:-.005em;color:rgba(24,24,27,.22);transition:color 700ms var(--ease-out)}
.origin-copy p strong{font-weight:600}
.origin-copy p.on{color:var(--ink-2)}
.origin-copy p.on strong{color:var(--ink)}
html:not(.guardian-js) .origin-copy p{color:var(--ink-2)}

/* ---------- Go Digitals ---------- */
.backing-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.backing-top .h2{margin-top:18px}
.backing-copy{display:grid;gap:18px;justify-items:start}
.backing-copy p{color:var(--muted);font-size:var(--t-lead);line-height:1.55}
.go-mark{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;color:var(--muted);transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.go-mark img{width:180px}
@media (hover:hover) and (pointer:fine){.go-mark:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}
.services{padding:12px;border-radius:var(--r-xl);background:var(--panel);border:1px solid #EEE8F7}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;gap:2px;padding:5px;margin:6px;border-radius:999px;background:#fff;border:1px solid #ECE7F6;box-shadow:var(--sh-1)}
.seg-ind{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:999px;background:var(--ink);transition:transform 480ms var(--ease-out),width 480ms var(--ease-out)}
.seg button{position:relative;z-index:1;padding:11px 18px;border:0;border-radius:999px;background:transparent;font-size:.92rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:color var(--d-base) var(--ease-out)}
.seg button[aria-selected="true"]{color:#fff}
.seg button:active{transform:scale(.97)}
.svc-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:stretch;padding-top:6px}
.svc-panel.is-entering .svc-visual,.svc-panel.is-entering .svc-desc{animation:panelIn 520ms var(--ease-out) both}
.svc-panel.is-entering .svc-desc{animation-delay:60ms}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.svc-visual{position:relative;min-height:380px;border-radius:calc(var(--r-xl) - 12px);overflow:hidden;display:grid;place-items:center}
.svc-desc{display:grid;gap:14px;align-content:center;padding:clamp(20px,3vw,40px)}
.svc-kicker{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lav-strong)}
.svc-desc h3{font:400 clamp(1.6rem,1.3rem + 1vw,2.2rem)/1.08 var(--f-display);letter-spacing:-.015em}
.svc-desc>p{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tags li{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid #ECE7F6;font-size:.84rem;font-weight:600}
/* visual web */
.v-web{background:linear-gradient(160deg,var(--tint),var(--cream))}
.bw{position:relative;width:min(84%,420px);border-radius:18px;background:#fff;box-shadow:var(--sh-3);overflow:hidden}
.bw-top{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.78rem;font-weight:600}
.bw-top i{width:9px;height:9px;border-radius:50%;background:#E6E3EC}
.bw-top span{margin-left:8px;flex:1}
.bw-top b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#E8F5EC;color:#14703D;font-size:.7rem}
.bw-scan{position:absolute;left:0;right:0;top:44px;height:40px;background:linear-gradient(180deg,transparent,rgba(135,102,213,.14),transparent);animation:scan 3.4s var(--ease-in-out) infinite}
@keyframes scan{0%{transform:translateY(0)}50%{transform:translateY(150px)}100%{transform:translateY(0)}}
.bw-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:8px 14px;padding:18px}
.bw-hero span{display:block;height:9px;border-radius:6px;background:#EEEAF5}
.bw-hero .l1{height:16px;width:90%;background:var(--ink)}
.bw-hero .l2{width:100%}.bw-hero .l3{width:70%}
.bw-hero .bt{width:90px;height:28px;border-radius:999px;background:var(--lav-strong)}
.bw-hero .ph{grid-column:2;grid-row:1/5;height:auto;min-height:96px;border-radius:12px;background:linear-gradient(135deg,var(--lav-200),var(--cream))}
.bw-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 18px}
.bw-widgets span{height:44px;border-radius:12px;background:var(--panel);border:1px solid #EFEAF8}
.bw-ok{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;box-shadow:var(--sh-2)}
.bw-ok .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:live 2s infinite}
/* visual ads */
.v-ads{background:radial-gradient(70% 80% at 50% 45%,#2A1E45,var(--night) 70%)}
.orbit{position:absolute;left:50%;top:46%;border:1px dashed rgba(185,164,236,.35);border-radius:50%;animation:spin 22s linear infinite}
.o1{width:200px;height:200px;margin:-100px 0 0 -100px}
.o2{width:300px;height:300px;margin:-150px 0 0 -150px;animation-duration:32s;animation-direction:reverse}
.orbit .p{position:absolute;left:50%;top:-18px;display:grid;place-items:center;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:#fff;color:var(--lav-strong);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.orbit .p.p2{top:auto;bottom:-18px}
.orbit .p svg{width:18px;height:18px}
.pulse{position:absolute;left:50%;top:46%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid var(--lav-300);opacity:0;animation:ping 3s var(--ease-out) infinite}
.pulse.s2{animation-delay:1.5s}
.ads-biz{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;margin-top:-30px;padding:14px 18px;border-radius:18px;background:#fff;box-shadow:var(--sh-3)}
.ads-biz svg{width:26px;height:26px;color:var(--lav-strong)}
.ads-biz strong{font-size:.9rem}
.v-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:.86rem;color:rgba(255,255,255,.72)}
/* visual IA */
.v-ai{background:linear-gradient(160deg,var(--cream),var(--tint))}
.mchat{width:min(84%,360px);display:grid;gap:10px;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--sh-3)}
.mc-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:.86rem}
.mc-top .av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tint)}
.mc-top .av img{width:22px;height:22px}
.mc-top strong{flex:1}
.mc-top .dot{width:8px;height:8px;border-radius:50%;background:var(--up)}
.mc-b{max-width:82%;padding:10px 14px;border-radius:16px;font-size:.88rem}
.mc-b.q{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:6px;animation:chatQ 7s var(--ease-out) infinite}
.mc-b.r{justify-self:start;background:var(--panel);border:1px solid #EFEAF8;border-bottom-left-radius:6px;animation:chatR 7s var(--ease-out) infinite}
.mchat .typing{justify-self:start;padding:6px 12px;border-radius:14px;background:var(--panel);animation:chatT 7s linear infinite}
.mchat .typing i{width:6px;height:6px;border-radius:50%;background:var(--lav-300);animation:dot 1.2s var(--ease-in-out) infinite}
.mchat .typing i:nth-child(2){animation-delay:.15s}.mchat .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes chatQ{0%,4%{opacity:0;transform:translateY(8px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes chatT{0%,14%{opacity:0}18%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes chatR{0%,42%{opacity:0;transform:translateY(8px)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
.mchat .typing{display:inline-flex;gap:4px}
.backing-note{margin-top:22px;text-align:center;font:400 clamp(1.15rem,1rem + .5vw,1.45rem)/1.3 var(--f-serif);font-style:italic;color:var(--lav-strong)}

/* ---------- Estados Unidos + Latinoamérica ---------- */
.intl{position:relative;isolation:isolate;margin-inline:clamp(8px,1.4vw,20px);padding-block:clamp(80px,9vw,140px);border-radius:clamp(28px,4vw,48px);background:var(--night);color:#fff;overflow:hidden}
.intl::before{content:"";position:absolute;z-index:-1;width:900px;aspect-ratio:1;right:-20%;top:-40%;background:radial-gradient(closest-side,rgba(135,102,213,.32),transparent);filter:blur(20px)}
.intl-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:center}
.intl .eyebrow{color:var(--lav-300)}
.intl .h2{margin-top:18px}
.intl .h2 em{color:var(--lime)}
.intl-lead{margin-top:18px;color:rgba(255,255,255,.7);font-size:var(--t-lead);line-height:1.55}
.country-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.country-picker button{padding:10px 16px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-size:.88rem;font-weight:600;transition:background-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
.country-picker button[aria-pressed="true"]{background:var(--lav);border-color:var(--lav);color:#fff}
.country-picker button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.country-picker button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.1);color:#fff}}
.country-detail{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:18px;padding:18px;border-radius:20px;background:var(--night-2);border:1px solid var(--night-line)}
.country-detail.is-changing>div{animation:panelIn 420ms var(--ease-out)}
.cd-dot{width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(214,245,106,.18)}
.cd-role{font:500 .68rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--lav-300)}
.country-detail h3{margin-top:6px;font:400 1.5rem/1.1 var(--f-display)}
.country-detail p{margin-top:4px;color:rgba(255,255,255,.68);font-size:.94rem}
.map-frame{position:relative;padding:12px;border-radius:var(--r-xl);background:var(--night-2);border:1px solid var(--night-line)}
.reach-map{width:100%;height:auto}
.reach-map .map-country{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.1);transition:fill 600ms var(--ease-out)}
.reach-map .map-country.is-served{fill:rgba(135,102,213,.38)}
.reach-map .map-country.is-active{fill:var(--lav)}
.reach-map .map-route{stroke:rgba(185,164,236,.35);stroke-dasharray:3 4;transition:stroke 400ms var(--ease-out)}
.reach-map .map-route.is-active{stroke:var(--lime);stroke-width:1.8;stroke-dasharray:4 5;animation:route 1.2s linear infinite}
@keyframes route{to{stroke-dashoffset:-18}}
.reach-map .map-pin{cursor:pointer;outline:none}
.reach-map .pin-dot{fill:var(--lav-300);stroke:var(--night)}
.reach-map .pin-halo{fill:var(--lav);fill-opacity:.18}
.reach-map .map-pin text{fill:rgba(255,255,255,.55);font-weight:600}
.reach-map .map-pin.is-active .pin-dot{fill:var(--lime)}
.reach-map .map-pin.is-active .pin-halo{fill:var(--lime);fill-opacity:.25;transform-box:fill-box;transform-origin:center;animation:halo 2s var(--ease-out) infinite}
.reach-map .map-pin.is-active text{fill:#fff}
.reach-map .map-pin:focus-visible .pin-dot{stroke:var(--lime);stroke-width:3}
@keyframes halo{0%{transform:scale(.6);fill-opacity:.4}100%{transform:scale(1.8);fill-opacity:0}}
.map-hint{margin-top:8px;padding:0 8px 4px;font-size:.8rem;color:rgba(255,255,255,.5)}
.tour-off .map-hint{opacity:0}

/* ---------- Reseñas ---------- */

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .a-hero-grid{grid-template-columns:minmax(0,1fr)}
  .brand-stage{max-width:560px;width:100%;margin-inline:auto}
  .chip-note{left:-10px}
  .origin-grid{grid-template-columns:minmax(0,1fr)}
  .origin-aside{position:static}
  .backing-top{grid-template-columns:minmax(0,1fr);align-items:start}
  .svc-panel{grid-template-columns:minmax(0,1fr)}
  .svc-visual{min-height:320px}
  .intl-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .a-hero{padding-top:16px}
  .a-actions .btn{width:100%;justify-content:space-between}
  .brand-stage{--mw:230px}
  .bs-card{padding:36px 18px 20px}
  .chip-note{display:none}
  .since{grid-template-columns:minmax(0,1fr)}
  .since-item+.since-item{border-left:0;border-top:1px solid var(--line)}
  .since-item{padding:22px 4px}
  .work-cycle{grid-template-columns:1fr 1fr}
  .work-cycle li{grid-template-columns:minmax(0,1fr);justify-items:start;gap:8px;padding:12px}
  .work-cycle .step{text-align:left}
  .services{padding:8px}
  .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:calc(100% - 12px)}
  .seg button{min-width:0;padding:9px 6px;font-size:.78rem;line-height:1.2;white-space:normal}
  .svc-visual{min-height:280px}
  .o2{width:240px;height:240px;margin:-120px 0 0 -120px}
  .country-picker button{padding:9px 13px;font-size:.84rem}
}
