/* generated by .ds-reference/_build/assemble.mjs home — do not edit; edit the section files */ /* ==== home-01-inicio.css ==== */ /* 01 · HERO (#inicio) — reference 08_rwh (dark, full viewport) Layers: .hero__bg (parallax --sy) > .hero__media (entrance zoom 1.12→1 + scroll zoom) > photo + canvas > shade/vignette > still lens ring (reduced motion / no JS) > chips layer (.hero__fx) Copy centred (.hero__in), hint top-right, bottom strip (count · service pills · proof), custom cursor. */ .hero{position:relative;width:100%;height:clamp(720px,100svh,1080px);min-height:640px;overflow:hidden;background:var(--night);color:var(--white);isolation:isolate} @supports not (height:100svh){.hero{height:clamp(720px,100vh,1080px)}} .hero.has-cur,.hero.has-cur *{cursor:none!important} /* background ------------------------------------------------------------------------------- */ .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;translate:0 calc(var(--sy,0)*14%)} .hero__media{position:absolute;inset:0;transform:scale(calc(1 + var(--sy,0)*.08));transform-origin:50% 50%;scale:1;transition:scale 2.2s var(--ease-out)} html.js .hero:not(.is-on) .hero__media{scale:1.12} .hero__media picture{display:contents} .hero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;filter:brightness(.84) saturate(.96);transition:filter .8s ease} /* desktop mouse + motion allowed: greyscale, darkened base — colour lives in the canvas (spotlight + waves) */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ html.js .hero:not(.is-flat):not(.is-still) .hero__img{filter:grayscale(1) brightness(.54) contrast(1.05)} } .hero__cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .8s;pointer-events:none} .hero.is-gl .hero__cv{opacity:1} /* shade (reference .rwh-shade) + vignette (reference shader: top 0–20% ×.28, bottom 45–100% ×.55) */ .hero__shade{position:absolute;inset:0;pointer-events:none;background: radial-gradient(60% 46% at 50% 50%,color-mix(in srgb,var(--night) 52%,transparent),transparent 72%), linear-gradient(180deg,color-mix(in srgb,var(--night) 55%,transparent) 0,transparent 18%), linear-gradient(180deg,rgba(4,7,20,.28) 0,rgba(4,7,20,.24) 5%,rgba(4,7,20,.14) 10%,rgba(4,7,20,.04) 15%,transparent 20%,transparent 45%,rgba(4,7,20,.09) 60%,rgba(4,7,20,.27) 72.5%,rgba(4,7,20,.46) 85%,rgba(4,7,20,.55) 100%)} /* still fallback: green lens ring that "colours" the photo (reference .rwh-stillring) */ .hero__still{position:absolute;left:62%;top:44%;width:520px;height:520px;translate:-50% -50%;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px var(--accent),0 0 60px 6px color-mix(in srgb,var(--accent) 40%,transparent);-webkit-backdrop-filter:saturate(1.35) brightness(1.2);backdrop-filter:saturate(1.35) brightness(1.2)} html.js .hero:not(.is-still) .hero__still{display:none} /* chips (example events popping where a wave passes a person) -------------------------------- */ .hero__fx{position:absolute;inset:0;pointer-events:none} .hero__chip{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;border-radius:999px;background:var(--white);color:var(--ink);font-family:var(--font-m);font-size:12px;line-height:1.2;letter-spacing:.01em;white-space:nowrap;box-shadow:var(--sh-chip);translate:-50% calc(-100% - 40px);transform-origin:50% 100%;scale:.4;opacity:0;transition:scale .5s var(--ease-pop),opacity .35s,translate .6s var(--ease-out)} .hero__chip.is-up{scale:1;opacity:1;translate:-50% calc(-100% - 18px)} .hero__chip::after{content:"";position:absolute;left:50%;bottom:-16px;width:1.5px;height:14px;background:var(--white);translate:-50% 0;opacity:.8} .hero__chip-i{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:700} .hero__chip-i svg{width:13px;height:13px;stroke-width:2.4} .hero__chip-p{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 2px var(--white)} /* static chips: visible without JS / reduced motion only */ .hero__chip--s{scale:1;opacity:1;translate:-50% calc(-100% - 18px)} .hero__chip--s1{left:22%;top:34%} .hero__chip--s2{left:77%;top:30%} .hero__chip--s3{left:77%;top:75%} html.js .hero:not(.is-still) .hero__chip--s{display:none} /* hint (top right) ------------------------------------------------------------------------------ */ .hero__hint{position:absolute;z-index:4;right:var(--hpad);top:96px;display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-m);font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 70%,transparent);pointer-events:none} .hero__hint-r{position:relative;flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent)} .hero__hint-r::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);animation:gc-ring 1.8s var(--ease-ping) infinite} .hero__hint-t{display:none} @media (hover:none){.hero__hint-m{display:none}.hero__hint-t{display:inline}} html:not(.js) .hero__hint,.hero.is-still .hero__hint{display:none} /* copy (centred) -------------------------------------------------------------------------------- */ .hero__in{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding:110px var(--hpad) 180px;pointer-events:none} .hero__copy{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:1100px;text-align:center;pointer-events:auto} .hero__ann{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 14px 8px 12px;border-radius:999px;font-family:var(--font-m);font-size:12px;line-height:1.3;letter-spacing:.04em;color:var(--white);background:color-mix(in srgb,var(--night) 45%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 16%,transparent)} .hero__h1{color:var(--white);text-shadow:0 2px 40px color-mix(in srgb,var(--night) 45%,transparent)} /* reference word mask: .rwh-w padding 0 .02em .1em, no side overlap; accent words carry the box ±.08em */ .hero__h1 .hd-w{padding:0 .02em .1em;margin:0 0 -.1em} .hero__h1 .hd-w.is-accw{padding:0 .08em .1em;margin:0 -.02em -.1em} .hero__h1 .hd-w.is-accw::before{top:.12em;bottom:.12em;border-radius:.16em} .hero__h1 .hd-i{transition:translate .55s var(--ease-out)} .hero__h1 .hd-w.is-accw::before{transition-duration:.45s} html.js .hero [data-reveal]{transition:opacity .45s ease var(--rv-d,0ms),translate .5s var(--ease-out) var(--rv-d,0ms)} html.js .hero__h1.is-split:not(.is-on) .hd-i{translate:0 105%} .hero__h1.is-done .hd-w{overflow:visible} /* no JS: the box limited to the x-height band, like the split version */ .hero__h1:not(.is-split) mark{position:relative;display:inline-block;vertical-align:top;isolation:isolate;padding:0 .08em .1em!important;margin:0 -.02em -.1em;border-radius:0;background:none!important;text-shadow:none} .hero__h1:not(.is-split) mark::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.12em;bottom:.12em;border-radius:.16em;background:var(--accent)} .hero__sub{margin:0;max-width:600px;font-size:18px;line-height:1.5;color:color-mix(in srgb,var(--white) 86%,transparent);text-shadow:0 1px 18px color-mix(in srgb,var(--night) 70%,transparent)} .hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px} .hero__btns .btn{--ring-bg:var(--night)} /* bottom strip ------------------------------------------------------------------------------------ */ .hero__strip{position:absolute;z-index:4;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;max-width:var(--measure);margin:0 auto;padding:0 var(--hpad) 36px} .hero__count{min-width:0} .hero__count-l{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--font-m);font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 72%,transparent)} .hero__count-n{display:flex;align-items:flex-start;gap:.24em;margin:0;font-family:var(--font-d);font-weight:600;font-size:clamp(34px,3.2vw,52px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap} .hero__odo{display:inline-flex} .hero__tags{display:flex;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--font-m);font-size:12px;line-height:1.3} .hero__tags a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;color:var(--white);text-decoration:none;white-space:nowrap;background:color-mix(in srgb,var(--night) 45%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 16%,transparent);transition:background .3s,color .3s,box-shadow .3s} .hero__tags a span{color:var(--accent);transition:color .3s} .hero__tags a:hover{background:var(--white);color:var(--ink);box-shadow:none} .hero__tags a:hover span{color:var(--accent-2)} .hero__proof{display:flex;flex-direction:column;align-items:flex-end;justify-self:end;gap:4px;margin:0;font-family:var(--font-m);font-size:12px;line-height:1.35;letter-spacing:.02em;text-align:right} .hero__cert{display:inline-flex;align-items:center;gap:7px} .hero__cert b{font-weight:600} .hero__ck{width:13px;height:13px;color:var(--accent);stroke-width:2.6} .hero__dim{color:color-mix(in srgb,var(--white) 66%,transparent)} /* custom cursor (fine pointer; created by JS) ------------------------------------------------------ */ .hero__cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;transition:opacity .3s} .hero__cur-d,.hero__cur-r{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:50%} .hero__cur-d{width:8px;height:8px;background:var(--accent);transition:scale .3s,opacity .3s} .hero__cur-r{display:grid;place-items:center;width:74px;height:74px;box-shadow:inset 0 0 0 1.5px var(--accent);transition:width .45s var(--ease-pop),height .45s var(--ease-pop),background .3s,box-shadow .3s} .hero__cur-r b{font-family:var(--font-m);font-size:10px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);translate:0 22px;transition:opacity .25s} .hero__cur[data-m="out"]{opacity:0} .hero__cur[data-m="dot"] .hero__cur-r{width:28px;height:28px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--white) 60%,transparent)} .hero__cur[data-m="dot"] .hero__cur-r b,.hero__cur[data-m="btn"] .hero__cur-r b{opacity:0} .hero__cur[data-m="btn"] .hero__cur-r{width:10px;height:10px;background:var(--accent);box-shadow:none} .hero__cur[data-m="btn"] .hero__cur-d{opacity:0} .hero__cur.is-ping .hero__cur-r::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--accent);animation:gc-ring .9s var(--ease-ping)} /* tablet --------------------------------------------------------------------------------------------- */ @media (max-width:1199px){ .hero__strip{grid-template-columns:1fr 1fr} .hero__tags{display:none} } /* phone (reference .is-ph): auto height, stacked copy, strip in flow ------------------------------------ */ @media (max-width:809px){ .hero{display:flex;flex-direction:column;height:auto;min-height:100svh} @supports not (height:100svh){.hero{min-height:100vh}} .hero__in{position:relative;inset:auto;flex:1;place-items:start center;padding:86px 16px 36px} .hero__copy{gap:18px;width:100%} .hero__sub{font-size:16px} /* rev3b (client): compact pills, not full width — side by side when they fit, centred */ .hero__btns{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;width:100%} .hero__btns .btn{width:auto} /* rev3 (client): full-width pills read off-centre with the label left and the chip mid-way — centre label + chip, slimmer */ .hero__btns .btn{min-height:46px;font-size:14px} .hero__btns .btn__face{padding:0 6px 0 18px;gap:10px} .hero__btns .btn__arr{width:32px;height:32px} .hero__strip{position:relative;grid-template-columns:1fr;gap:16px;padding:0 16px 28px} .hero__tags{display:flex;flex-wrap:wrap} .hero__proof{align-items:flex-start;justify-self:start;text-align:left} .hero__hint{display:none} .hero__chip{font-size:11px} .hero__chip--s{display:none} .hero__still{width:300px;height:300px;top:30%} } /* reduced motion: final state, no zoom, no parallax --------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .hero__media{scale:1!important;transform:none!important} .hero__bg{translate:none!important} } /* rev3c (client): strip under the centred hero copy read off-centre on phones — centre it too */ @media (max-width:809px){ .hero__strip{justify-items:center;text-align:center} .hero__count-l,.hero__count-n{justify-content:center} .hero__tags{justify-content:center} .hero__proof{align-items:center;justify-self:center;text-align:center} } /* ==== home-02-mercados.css ==== */ /* 02 · MERCADOS (#mercados) — reference 11_rwcl (clients radar, bone ground) Grid 5fr / 7fr centred: copy (eyebrow · H2 with 3 green boxes · line · mono meta) | 500px radar (right-aligned). Radar layers: dotted grid (masked circle) > SVG rings / cross / 72 ticks > degree + ring labels > green conic sweep (rotated by JS) > core (El Salvador, BASE) > market blips (dot + name + blue tag on hit). States: .is-park (no JS / reduced motion: sweep parked at 40°, static rings) · .is-mv (live sweep, JS) · .is-on (revealed by motion.js) · .mk-blip.is-hit (lit by the sweep or hovered). Tablet ≤1099 (reference .is-tab: 1fr / 1.05fr) · phone ≤809 (reference .is-ph: one column, 350px radar). */ #mercados{padding:clamp(56px,4.8vw,80px) 0;overflow-x:clip} #mercados .mk-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,4vw,72px)} /* copy --------------------------------------------------------------------------------------------- */ #mercados .mk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:520px;min-width:0} /* reference rwcl H2 keeps the base tracking (-.042em); each authored line stays on one line on desktop/tablet */ #mercados .mk-hd{letter-spacing:-.042em;white-space:nowrap} /* reference box geometry (.rw-it): the payoff word carries .06em inner padding and the box hugs it, so boxed words sit one full space apart and the box starts on the word's flow position (shared default: box = mask ± .04em) */ #mercados .mk-hd .hd-i.is-acc{padding:0 .06em} #mercados .mk-hd .hd-w.is-accw::before{left:.04em;right:.04em;top:-.045em} /* no-JS (unsplit) marks: same box as the split state instead of an inline background that bleeds into line 1 */ #mercados .mk-hd:not(.is-split) mark{position:relative;display:inline-block;isolation:isolate;padding:0 .06em;border-radius:0;background:none;color:var(--ink);line-height:inherit;vertical-align:top} #mercados .mk-hd:not(.is-split) mark::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-.045em;bottom:-.11em;border-radius:.16em;background:var(--accent)} #mercados .mk-line{margin:0;max-width:440px;font-size:17px;line-height:1.5;color:var(--mut)} #mercados .mk-meta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;padding-top:18px;border-top:1px solid var(--line-2);font-family:var(--font-m);font-weight:400} #mercados .mk-meta p{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:12px;line-height:normal;letter-spacing:.08em;text-transform:uppercase} #mercados .mk-rate{min-height:17px;color:var(--ink)} /* 50/50 split glyph (replaces the reference's star row): navy half SV · green half GT */ /* rev1: globe glyph ("cualquier país · cualquier idioma") replaces the old SV/GT 50-50 split bar */ #mercados .mk-globe{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round} #mercados .mk-read{color:var(--mut)} #mercados .mk-read-l{flex:none} #mercados .mk-read-v{min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mercados .mk-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)} #mercados .mk-live::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);animation:mk-p 1.8s var(--ease-ping) infinite} /* radar scope ---------------------------------------------------------------------------------------- */ #mercados .mk-stage{display:flex;justify-content:flex-end;min-width:0} #mercados .mk-scope{--nm:14px;position:relative;flex:none;width:min(500px,100%);aspect-ratio:1;border-radius:50%} #mercados .mk-grid{position:absolute;inset:4%;border-radius:50%; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--white) 70%,transparent),color-mix(in srgb,var(--white) 20%,transparent) 70%), radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.3px) 0 0/14px 14px; -webkit-mask:radial-gradient(circle,#000 62%,transparent 71%);mask:radial-gradient(circle,#000 62%,transparent 71%)} #mercados .mk-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible} #mercados .mk-ring{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:.35} #mercados .mk-ring--o{stroke:color-mix(in srgb,var(--ink) 38%,transparent);stroke-width:.5} #mercados .mk-cross{fill:none;stroke:color-mix(in srgb,var(--ink) 14%,transparent);stroke-width:.3} #mercados .mk-diag{stroke-dasharray:1 2.2} #mercados .mk-tick{stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:.3} #mercados .mk-tick--l{stroke:color-mix(in srgb,var(--ink) 60%,transparent);stroke-width:.45} #mercados .mk-deg{position:absolute;font-family:var(--font-m);font-size:10px;font-weight:400;line-height:normal;letter-spacing:.1em;color:var(--mut);white-space:nowrap} #mercados .mk-deg--0{left:50%;top:-4px;translate:-50% -100%} #mercados .mk-deg--1{right:-6px;top:50%;translate:100% -50%} #mercados .mk-deg--2{left:50%;bottom:-4px;translate:-50% 100%} #mercados .mk-deg--3{left:-6px;top:50%;translate:-100% -50%} #mercados .mk-rl{position:absolute;translate:5px -50%;padding:1px 3px;border-radius:3px;background:color-mix(in srgb,var(--bone) 80%,transparent);font-family:var(--font-m);font-size:9.5px;font-weight:400;line-height:normal;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--ink) 42%,transparent);pointer-events:none} /* sweep: green wedge trailing a navy edge line; JS writes transform:rotate() (parked at 40° in the markup) */ #mercados .mk-sweep{position:absolute;inset:4%;border-radius:50%;pointer-events:none;will-change:transform; background:conic-gradient(from 285deg,transparent 0deg,color-mix(in srgb,var(--accent) 8%,transparent) 30deg,color-mix(in srgb,var(--accent) 58%,transparent) 68deg,color-mix(in srgb,var(--accent) 90%,transparent) 75deg,transparent 75.2deg); opacity:1;transition:opacity 1.2s ease .3s} html.js #mercados:not(.is-on):not(.is-park) .mk-sweep{opacity:0} #mercados .mk-edge{position:absolute;left:50%;top:0;width:1.5px;height:50%;translate:-50% 0;background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 10%,transparent),var(--ink))} /* core = El Salvador (home): navy dot, green ring, slow pulse; name on the left, BASE chip above */ #mercados .mk-core{position:absolute;z-index:2;left:50%;top:50%;width:14px;height:14px;translate:-50% -50%;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--accent),0 0 0 5px color-mix(in srgb,var(--ink) 30%,transparent)} #mercados .mk-core i{position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink);animation:mk-p 2.4s var(--ease-ping) infinite} #mercados .mk-home{position:absolute;z-index:3;left:50%;top:50%;width:0;height:0} #mercados .mk-home .mk-nm{left:auto;right:17px;color:var(--ink);font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;font-size:calc(var(--nm)*1.12)} @keyframes mk-p{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}} /* blips ------------------------------------------------------------------------------------------------ */ #mercados .mk-blip{position:absolute;z-index:2;width:0;height:0} #mercados .mk-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 45%,transparent);transition:background .5s,scale .5s var(--ease-pop)} #mercados .mk-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 2px var(--accent),0 0 14px 2px color-mix(in srgb,var(--accent) 70%,transparent);opacity:0} #mercados .mk-nm{position:absolute;left:12px;top:0;translate:0 -50%;white-space:nowrap;font-size:var(--nm);line-height:1;color:color-mix(in srgb,var(--ink) 40%,transparent);transition:color 1.4s ease,translate .6s var(--ease-out);cursor:default} #mercados .mk-blip--l .mk-nm{left:auto;right:12px} /* four "type treatments" (reference logo-wall texture; proper nouns keep their capitals) */ #mercados .mk-blip--grot .mk-nm{font-family:var(--font-b);font-weight:400;letter-spacing:-.04em;font-size:calc(var(--nm)*1.08)} #mercados .mk-blip--round .mk-nm{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;font-size:calc(var(--nm)*1.12)} #mercados .mk-blip--cond .mk-nm{font-family:var(--font-b);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:calc(var(--nm)*.92);transform:scaleX(.84);transform-origin:left center} #mercados .mk-blip--cond.mk-blip--l .mk-nm{transform-origin:right center} #mercados .mk-blip--mono .mk-nm{font-family:var(--font-m);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:calc(var(--nm)*.8)} /* market tag (reference pink metric badge → Growco blue, words instead of numbers) */ #mercados .mk-bdg{position:absolute;left:0;top:-14px;translate:-50% -100%;padding:4px 8px;border-radius:999px;background:var(--accent-2);color:var(--white);font-family:var(--font-m);font-size:11px;font-weight:400;line-height:normal;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 0 2.5px var(--bone),0 10px 20px -10px rgba(0,0,0,.5);scale:.3;opacity:0;transform-origin:50% 100%;transition:scale .5s var(--ease-pop),opacity .4s,translate .5s var(--ease-out);pointer-events:none} #mercados .mk-blip:hover,#mercados .mk-blip.is-hit{z-index:4} #mercados .mk-blip:hover .mk-nm,#mercados .mk-blip.is-hit .mk-nm{color:var(--ink);transition-duration:.25s} #mercados .mk-blip:hover .mk-dot,#mercados .mk-blip.is-hit .mk-dot{background:var(--ink);scale:1.25;transition-duration:.2s} #mercados .mk-blip:hover .mk-dot::after,#mercados .mk-blip.is-hit .mk-dot::after{animation:mk-ping 1.5s var(--ease-ping) both} #mercados .mk-blip:hover .mk-bdg,#mercados .mk-blip.is-hit .mk-bdg{scale:1;opacity:1;translate:-50% calc(-100% - 4px);transition-duration:.5s,.2s,.5s} #mercados.is-park .mk-blip.is-hit .mk-dot::after{animation:none;opacity:.9;transform:scale(1.6)} @keyframes mk-ping{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}} /* BASE chip: navy (home, always on) — pops in once the radar has faded up */ #mercados .mk-bdg--home{top:-17px;background:var(--ink);scale:1;opacity:1;translate:-50% -100%;transition:scale .5s var(--ease-pop) 1.1s,opacity .4s ease 1.1s} html.js #mercados:not(.is-on) .mk-bdg--home{scale:.3;opacity:0} /* tablet (reference .is-tab) ---------------------------------------------------------------------------- */ @media (max-width:1099px) and (min-width:810px){ #mercados .mk-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px} #mercados .mk-scope{--nm:12px} #mercados .mk-line{font-size:16px} } /* phone (reference .is-ph): radar full width under the copy -------------------------------------------- */ @media (max-width:809px){ #mercados{padding:64px 0 56px} #mercados .mk-in{grid-template-columns:minmax(0,1fr);gap:40px} #mercados .mk-copy{max-width:none;gap:18px} #mercados .mk-hd{white-space:normal} #mercados .mk-line{font-size:16px} #mercados .mk-stage{justify-content:center} #mercados .mk-scope{width:min(350px,100%);--nm:11px} #mercados .mk-grid{background-size:auto,11px 11px} #mercados .mk-deg{display:none} #mercados .mk-rl{font-size:8.5px} #mercados .mk-bdg{font-size:10px;padding:3px 7px} } /* reduced motion: parked radar, no loops (site.css §19 also zeroes durations) ---------------------------- */ @media (prefers-reduced-motion:reduce){ #mercados .mk-live::after,#mercados .mk-core i{animation:none;opacity:0} #mercados .mk-sweep{transition:none} } /* ==== home-03-por-que.css ==== */ /* 03 · POR QUÉ (#por-que) — reference 14_rwin (bone ground, navy crowd panel) Top grid 7.4fr / 4.6fr aligned to the bottom (lead: eyebrow + H2 · side: sub, ghost button, facts row), then the crowd panel (radius 24, height clamp(420px,36vw,540px), radial pine→ink, 1px inner ring) holding the canvas (.wy-cv, drawn by home-03-por-que.js), the left statement + live status over an ink fade, the cluster labels (opacity driven by --p, the panel's sort progress) and the "Segmentación con datos" chip. Tiers follow the reference component: tablet ≤1099 (is-tab), phone ≤809 (is-ph). */ #por-que{--wy-pi:clamp(22px,2.6vw,40px);--wy-lo:clamp(52px,4.6vw,64px);padding:clamp(96px,9vw,150px) 0 clamp(88px,8vw,132px);overflow-x:clip} /* top grid ----------------------------------------------------------------------------------------------- */ #por-que .wy-top{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(44px,4.6vw,72px)} #por-que .wy-lead{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0} #por-que .wy-title{font-size:clamp(40px,5vw,76px);line-height:.95;letter-spacing:-.042em} /* 2-line build at every desktop width, as in the reference: "Hallamos a tus clientes." is ~10.25em and the 7.4fr column is 10.45–11.5em wide, so the H2 may borrow up to .3em of the column gap (≥55px) to absorb rounding near 1100px */ @media (min-width:1100px){#por-que .wy-title{margin-inline-end:-.3em}} #por-que .wy-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;padding-bottom:6px} #por-que .wy-sub{margin:0;max-width:460px;font-size:18px;line-height:1.5;color:var(--mut)} #por-que .wy-act{display:flex} #por-que .wy-facts{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%;margin:0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line-2);font-family:var(--font-m);font-size:11.5px;font-weight:400;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)} #por-que .wy-facts li{display:inline-flex;align-items:center;gap:8px} #por-que .wy-facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35} /* crowd panel -------------------------------------------------------------------------------------------- */ #por-que .wy-panel{--p:1;position:relative;height:clamp(420px,36vw,540px);border-radius:24px;overflow:hidden;isolation:isolate;color:var(--white);background:radial-gradient(120% 90% at 60% 50%,var(--pine),var(--ink) 70%)} #por-que .wy-panel::after{content:"";position:absolute;z-index:5;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 10%,transparent);pointer-events:none} #por-que .wy-field{position:absolute;inset:0} #por-que .wy-cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;touch-action:pan-y} /* left statement over the ink fade (rev1: qualitative headline + live status, no counts) */ #por-que .wy-ratio{position:absolute;z-index:2;left:var(--wy-pi);top:var(--wy-pi);bottom:var(--wy-pi);width:min(300px,26%);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;pointer-events:none} #por-que .wy-ratio::before{content:"";position:absolute;z-index:-1;left:calc(var(--wy-pi)*-1);top:calc(var(--wy-pi)*-1);bottom:calc(var(--wy-pi)*-1);width:calc(100% + 140px);background:linear-gradient(90deg,var(--ink) 30%,transparent)} #por-que .wy-ratio-k{display:flex;align-items:center;gap:9px;margin:0 0 auto;font-family:var(--font-m);font-size:11px;font-weight:400;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--white) 70%,transparent)} #por-que .wy-ratio-n{margin:0;font-family:var(--font-d);font-size:clamp(34px,3.1vw,50px);font-weight:600;line-height:.98;letter-spacing:-.045em;text-wrap:balance} #por-que .wy-ratio-v{color:var(--accent)} #por-que .wy-ratio-t{margin:10px 0 0;font-family:var(--font-b);font-size:15px;font-weight:400;line-height:1.45;letter-spacing:0;color:color-mix(in srgb,var(--white) 72%,transparent);text-wrap:pretty} /* panel chip ("Segmentación con datos") */ #por-que .wy-note{position:absolute;z-index:4;top:calc(var(--wy-pi) - 6px);right:var(--wy-pi);display:inline-flex;align-items:center;margin:0;padding:5px 11px;border-radius:999px;font-family:var(--font-m);font-size:10.5px;font-weight:400;line-height:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--white) 78%,transparent);background:color-mix(in srgb,var(--ink) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 20%,transparent);pointer-events:none} /* cluster labels: tag pill + mono descriptor; fade in with the sort (reference: opacity clamp((p − .45)·3)) */ #por-que .wy-lab{--x:.42;--y:.52;position:absolute;z-index:3;left:calc(var(--x)*100%);top:calc(var(--y)*100%);display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:var(--wy-lo);translate:-50% 0;opacity:clamp(0,calc((var(--p) - .45)*3),1);pointer-events:none} #por-que .wy-lab--1{--x:.63;--y:.38;margin-top:0;translate:-50% calc(-100% - var(--wy-lo))} #por-que .wy-lab--2{--x:.84;--y:.58} #por-que .wy-tag{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:11px;font-weight:400;line-height:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} #por-que .wy-cnt{font-family:var(--font-m);font-size:12px;font-weight:400;line-height:16px;letter-spacing:.02em;white-space:nowrap;color:color-mix(in srgb,var(--white) 82%,transparent)} /* static fallback (no JS / no canvas): dotted crowd + three green halos with the final labels */ #por-que .wy-halo{--x:.42;--y:.52;--d:98px;position:absolute;z-index:1;left:calc(var(--x)*100%);top:calc(var(--y)*100%);display:none;width:var(--d);height:var(--d);translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);background:radial-gradient(circle,var(--accent) 0 2.2px,transparent 2.8px) 50% 50%/13px 13px,color-mix(in srgb,var(--accent) 6%,transparent)} #por-que .wy-halo--1{--x:.63;--y:.38;--d:104px} #por-que .wy-halo--2{--x:.84;--y:.58;--d:90px} #por-que .wy-panel:not(.is-live) .wy-halo{display:block} #por-que .wy-panel:not(.is-live) .wy-field{background: radial-gradient(circle,color-mix(in srgb,var(--white) 30%,transparent) 0 1.3px,transparent 1.9px) 0 0/37px 29px, radial-gradient(circle,color-mix(in srgb,var(--white) 22%,transparent) 0 1.2px,transparent 1.8px) 11px 17px/53px 41px, radial-gradient(circle,color-mix(in srgb,var(--white) 16%,transparent) 0 1.1px,transparent 1.7px) 29px 7px/61px 47px} #por-que .wy-panel.is-live{--p:0} /* tablet (reference is-tab: 810–1099) ---------------------------------------------------------------------- */ @media (max-width:1099px){ #por-que .wy-top{grid-template-columns:1fr;gap:28px;align-items:start} #por-que .wy-panel{height:440px} #por-que .wy-ratio{width:34%} #por-que .wy-ratio-n{font-size:36px} #por-que .wy-lab--0,#por-que .wy-halo--0{--x:.36;--y:.52} #por-que .wy-lab--1,#por-que .wy-halo--1{--x:.6;--y:.4} #por-que .wy-lab--2,#por-que .wy-halo--2{--x:.84;--y:.56} #por-que .wy-halo{--d:84px} } /* phone (reference is-ph: ≤809): counter on top, a 360px field below, clusters stacked on the left with labels to their right --------------------------------------------------------------------------------------------- */ @media (max-width:809px){ #por-que{padding:72px 0} #por-que .wy-top{gap:26px;margin-bottom:36px} #por-que .wy-lead{gap:18px} /* reference: 11.4vw (44.5px @390) → 4 lines ("Todos son / multitud. / Hallamos a tus / clientes.") */ #por-que .wy-title{font-size:clamp(38px,11.4vw,54px)} #por-que .wy-sub{font-size:16px} #por-que .wy-facts{gap:8px 14px} #por-que .wy-panel{display:flex;flex-direction:column;height:auto} #por-que .wy-field{position:relative;inset:auto;flex:none;height:360px} #por-que .wy-ratio{position:relative;inset:auto;width:auto;gap:4px;padding:22px 20px 4px} #por-que .wy-ratio::before{display:none} #por-que .wy-ratio-k{margin:0 0 10px} #por-que .wy-ratio-n{font-size:34px} #por-que .wy-ratio-t{font-size:15px;margin-top:8px} #por-que .wy-note{top:auto;right:16px;bottom:14px;font-size:10px} #por-que .wy-lab{width:calc(78% - 64px);margin:0 0 0 54px;translate:0 -50%} #por-que .wy-lab--0,#por-que .wy-halo--0{--x:.22;--y:.2} #por-que .wy-lab--1,#por-que .wy-halo--1{--x:.22;--y:.5} #por-que .wy-lab--2,#por-que .wy-halo--2{--x:.22;--y:.8} #por-que .wy-cnt{white-space:normal;line-height:1.35} #por-que .wy-halo{--d:68px} } @media (prefers-reduced-motion:reduce){ #por-que .wy-lab{opacity:1} } /* ==== home-04-servicios.css ==== */ /* 04 · SERVICIOS (#servicios) — reference 17_rwsv (bone ground) Head = shared .sec-head (1.3fr / 1fr, baseline-aligned). Accordion modes: - base (no JS, or the section script missing / failed): the four panels stacked, all open (readable) - .is-ready (set by home-04 JS once it has initialised) + <1240px: vertical accordion, fixed open slot (--oh, set by JS). The open/close height animation is driven by JS (WAAPI: every panel restarted together from its current height, one duration + curve), so the panels' total, and the page length, never changes mid-switch - .is-ready + ≥1240px: horizontal accordion — closed panels 104px (4 panels, ref §6.2), open panel flex-grows 0.95s; its content is a fixed-width layer (--ow, set by JS) so the copy never re-wraps while it grows. Panel grounds (reference fog · ink · cloud · lime → DECISIONS §1): fog #DDDEE6 · navy · white · green 58% on paper. Pink pings → blue. Mini-UIs: final frame by default; JS adds .is-pre (hidden start state) and .is-on per item. */ #servicios{padding:clamp(88px,9vw,150px) 0 clamp(96px,10vw,160px);overflow-x:clip} /* reference services marker radius (.14em; the shared box geometry already spans line top → ~1.06em like .rwsv-it) */ #servicios .sv__title .hd-w.is-accw::before{border-radius:.14em} #servicios .sv__side .lead{line-height:1.5} /* the reference keeps its 1.3fr / 1fr head down to 1100px (is-tab starts below 1100); the shared head collapses at 1199 */ @media (min-width:1100px) and (max-width:1199px){ #servicios .sv__head{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end} #servicios .sv__side{justify-self:end;max-width:400px} } @media (max-width:1099px){#servicios .sv__head{gap:40px;align-items:start}} /* ---------------------------------------------------------------- panels (all modes) */ #servicios .sv__acc{position:relative;display:flex;flex-direction:column;gap:6px;overflow-anchor:none;--cw:104px;--ease:var(--ease-panel)} #servicios .sv__p{position:relative;overflow:hidden;border-radius:22px;background:var(--pbg);color:var(--pfg);isolation:isolate; --pbg:var(--fog);--pfg:var(--ink); --pline:color-mix(in srgb,var(--ink) 14%,transparent); --pmut:color-mix(in srgb,var(--ink) 66%,transparent); --stg:color-mix(in srgb,var(--ink) 6%,transparent); --ring-bg:var(--pbg)} #servicios .sv__p--cloud{--pbg:var(--white);--stg:var(--bone)} #servicios .sv__p--lime{--pbg:color-mix(in srgb,var(--accent) 58%,var(--bone));--stg:color-mix(in srgb,var(--white) 55%,transparent)} #servicios .sv__p--ink{--pbg:var(--ink);--pfg:var(--white); --pline:color-mix(in srgb,var(--white) 16%,transparent); --pmut:color-mix(in srgb,var(--white) 70%,transparent); --stg:color-mix(in srgb,var(--white) 7%,transparent)} /* the panel switch: h3 > button (APG accordion) */ #servicios .sv__hd{margin:0;font:inherit;font-size:16px;font-weight:400;line-height:1.2;letter-spacing:normal} #servicios .sv__sp{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;min-height:76px;margin:0;padding:0 16px 0 18px;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} #servicios .sv__sp:focus-visible{outline:3px solid currentColor;outline-offset:-4px;box-shadow:none;border-radius:22px} #servicios .sv__num{display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 9px;border-radius:999px;font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.08em;line-height:1;box-shadow:inset 0 0 0 1px var(--pline);transition:background .45s,color .45s,box-shadow .45s} #servicios .sv__p.is-open .sv__num{background:var(--accent);color:var(--ink);box-shadow:none} #servicios .sv__p--lime.is-open .sv__num{background:var(--ink);color:var(--accent)} #servicios .sv__vt{font-family:var(--font-d);font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1;white-space:nowrap} #servicios .sv__plus{position:relative;display:block;flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--pline);transition:rotate .6s var(--ease-pop),background .35s,color .35s,box-shadow .35s} #servicios .sv__plus i{position:absolute;left:50%;top:50%;width:13px;height:1.6px;border-radius:2px;background:currentColor;translate:-50% -50%} #servicios .sv__plus i+i{rotate:90deg;transition:scale .45s} #servicios .sv__p.is-open .sv__plus{background:var(--accent);color:var(--ink);box-shadow:none} #servicios .sv__p.is-open .sv__plus i+i{scale:0 1} #servicios .sv__p--lime.is-open .sv__plus{background:var(--ink);color:var(--accent)} #servicios .sv__p:not(.is-open) .sv__sp:hover .sv__plus{rotate:90deg;background:var(--pfg);color:var(--pbg);box-shadow:none} #servicios:not(.is-ready) .sv__plus{display:none} /* open content */ #servicios .sv__pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:4px 18px 22px} #servicios .sv__stage{position:relative;overflow:hidden;height:340px;border-radius:18px;background:var(--stg);container:sv-stage/size} #servicios .sv__tx{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0} #servicios .sv__tt{display:none;margin:0;font-family:var(--font-d);font-size:min(48px,3.6vw);font-weight:600;line-height:.98;letter-spacing:-.045em} #servicios .sv__body{margin:0;max-width:40ch;font-size:16.5px;line-height:1.5} #servicios .sv__il{margin:0 0 10px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--pmut)} #servicios .sv__inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} #servicios .sv__inc li{position:relative;padding-left:27px;font-size:15px;line-height:1.35} #servicios .sv__inc li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--accent) url("data:image/svg+xml;utf8,") center/11px no-repeat} #servicios .sv__p--lime .sv__inc li::before{background:var(--ink) url("data:image/svg+xml;utf8,") center/11px no-repeat} #servicios .sv__foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:6px} /* vertical (tablet) mode: one wrapping row like the reference foot (stat · price · button) */ @media (min-width:810px) and (max-width:1239px){#servicios .sv__foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px}} #servicios .sv__stat{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:8px 13px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1.2} #servicios .sv__stat i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-2)} #servicios .sv__p--lime .sv__stat{background:var(--ink);color:var(--accent)} #servicios .sv__p--lime .sv__stat i{background:var(--accent-2-dark)} /* ---------------------------------------------------------------- vertical accordion (JS, <1240px) */ /* no CSS height transition: one reversed mid-way (fast scroll switching) is shortened by the browser, the panels' sum stops being constant and the section collapsed by up to ~680px. home-04 JS animates the height instead (0.8s). */ #servicios.is-ready .sv__pc{height:0;overflow:hidden} #servicios.is-ready .sv__p.is-open .sv__pc{height:var(--oh,640px)} /* the open panel's copy settles in after the panel has grown; a closing panel's copy leaves at once */ #servicios.is-ready .sv__pin{transition:opacity .25s ease,translate .25s ease} #servicios.is-ready .sv__p:not(.is-open) .sv__pin{opacity:0;translate:0 14px} #servicios.is-ready .sv__p.is-open .sv__pin{opacity:1;translate:0 0;transition:opacity .6s ease .32s,translate .8s var(--ease-out) .32s} /* ---------------------------------------------------------------- horizontal accordion (JS, ≥1240px) */ @media (min-width:1240px){ #servicios.is-ready .sv__acc{flex-direction:row;gap:8px;height:600px} #servicios.is-ready .sv__p{flex:0 0 var(--cw);transition:flex-grow .95s var(--ease),background-color .5s} #servicios.is-ready .sv__p.is-open{flex-grow:1} #servicios.is-ready .sv__hd{position:absolute;z-index:3;left:0;top:0;bottom:0;width:var(--cw)} #servicios.is-ready .sv__p:not(.is-open) .sv__hd{right:0;width:auto} #servicios.is-ready .sv__sp{display:flex;flex-direction:column;align-items:center;height:100%;min-height:0;padding:24px 0} #servicios.is-ready .sv__vt{margin-top:auto;margin-bottom:22px;writing-mode:vertical-rl;rotate:180deg;transition:opacity .4s,translate .6s var(--ease-out)} #servicios.is-ready .sv__p.is-open .sv__vt{opacity:0;translate:0 20px} #servicios.is-ready .sv__p:not(.is-open):hover{background-color:color-mix(in srgb,var(--pbg) 90%,var(--pfg))} #servicios.is-ready .sv__pc{position:absolute;top:0;bottom:0;left:var(--cw);width:var(--ow,885px);height:auto;transition:none} #servicios.is-ready .sv__p.is-open .sv__pc{height:auto} #servicios.is-ready .sv__pin{gap:clamp(24px,2.6vw,40px);height:100%;padding:24px 32px 28px 0} #servicios.is-ready .sv__stage{height:auto} #servicios.is-ready .sv__tx{padding-top:8px} #servicios.is-ready .sv__tt{display:block} } /* ---------------------------------------------------------------- rail */ #servicios .sv__rail{display:flex;align-items:center;gap:22px;margin-top:18px} #servicios .sv__seg{display:flex;flex:none;gap:6px} #servicios .sv__seg i{display:block;width:28px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 14%,transparent);transition:background .4s,width .6s var(--ease-out)} #servicios .sv__seg i.is-past{background:color-mix(in srgb,var(--ink) 42%,transparent)} #servicios .sv__seg i.is-on{width:56px;background:var(--ink)} #servicios .sv__now{display:flex;align-items:center;gap:12px;min-width:0;font-family:var(--font-m);font-size:12px;letter-spacing:.06em;line-height:16px;text-transform:uppercase;white-space:nowrap} #servicios .sv__now b{font-weight:500;padding:4px 9px;border-radius:999px;background:var(--accent);color:var(--ink)} #servicios .sv__hint{display:none;align-items:center;gap:8px;margin-left:auto;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;line-height:14px;text-transform:uppercase;color:var(--mut);white-space:nowrap} #servicios .sv__hint i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:gc-blink 1.4s ease-in-out infinite} @media (min-width:1240px){ #servicios .sv__rail{margin-top:22px} #servicios .sv__hint{display:flex} } #servicios:not(.is-ready) .sv__rail{display:none} /* ---------------------------------------------------------------- phone */ @media (max-width:809px){ #servicios{padding:80px 0 88px} #servicios .sv__head{gap:24px;margin-bottom:36px} #servicios .sv__sp{min-height:68px;column-gap:12px;padding:0 12px 0 14px} #servicios .sv__vt{font-size:25px} #servicios .sv__num{min-width:36px;height:24px;padding:0 7px;font-size:10.5px} #servicios .sv__plus{width:36px;height:36px} #servicios .sv__pin{grid-template-columns:1fr;gap:18px;padding:2px 12px 18px} #servicios .sv__stage{height:300px} #servicios .sv__body{font-size:15.5px} #servicios .sv__inc li{font-size:14.5px} #servicios .sv__foot{align-items:stretch;width:100%} #servicios .sv__foot .sv__stat{align-self:flex-start} #servicios .sv__foot .btn{display:flex;width:100%} #servicios .sv__foot .btn__face{justify-content:space-between} #servicios .sv__rail{gap:14px} #servicios .sv__seg i{width:16px} #servicios .sv__seg i.is-on{width:32px} } /* ================================================================ mini-UIs ================================== */ #servicios .sv-ui{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:20px;color:var(--ink);font-size:12px;line-height:1.3} #servicios .sv-ui p{margin:0} #servicios .sv-av{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent))} #servicios .sv-k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-ex{flex:none;padding:4px 8px;border-radius:999px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)} #servicios .sv-ex--solid{background:var(--ink);color:var(--white);box-shadow:none} #servicios .sv-card{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:14px;background:var(--white)} /* toast (reference .rwsv-toast) */ #servicios .sv-toast{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 13px 8px 9px;border-radius:999px;background:var(--white);color:var(--ink);font-family:var(--font-m);font-size:11.5px;line-height:1.2;white-space:nowrap;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--night) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);transition:opacity .35s,scale .55s var(--ease-pop),translate .55s var(--ease-pop)} #servicios .sv-toast i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 5px var(--accent),inset 0 0 0 9px var(--ink)} #servicios .sv-toast::after{content:"";position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 2px var(--white)} #servicios .is-pre .sv-toast:not(.is-on){opacity:0;scale:.6;translate:0 10px} /* loops (floating hearts, typing dots) never keep running inside a closed (hidden, inert) panel */ #servicios.is-ready .sv__p:not(.is-open) .sv-ui *{animation-play-state:paused} /* 01 · ads ------------------------------------------------------------------------------------------------ */ #servicios .sv-ads__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none} #servicios .sv-plat{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase} #servicios .sv-plat b{position:relative;z-index:1;padding:6px 14px;font-weight:500;text-align:center;transition:color .45s} #servicios .sv-plat b.is-on{color:var(--white)} #servicios .sv-plat i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);transition:translate .6s var(--ease-snap)} #servicios .sv-plat.is-g i{translate:100% 0} #servicios .sv-ads__pv{position:relative;flex:none;height:168px} #servicios .sv-ad{position:absolute;inset:0;border-radius:16px;opacity:0;scale:.96;translate:0 8px;transition:opacity .45s ease,scale .6s var(--ease-out),translate .6s var(--ease-out)} #servicios .sv-ad.is-on{opacity:1;scale:1;translate:0 0} #servicios .sv-ad--meta{display:grid;grid-template-columns:minmax(0,1fr) 30%;grid-template-rows:auto 1fr auto;gap:8px 14px;padding:16px;background:var(--ink);color:var(--white)} #servicios .sv-ad__spon{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 66%,transparent)} #servicios .sv-ad--meta .sv-av{width:18px;height:18px} #servicios .sv-ad--meta .sv-ad__hl{grid-column:1;align-self:start;text-wrap:balance;font-family:var(--font-d);font-size:19px;font-weight:600;line-height:1.08;letter-spacing:-.03em} #servicios .sv-ad__img{position:relative;grid-column:2;grid-row:1/4;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 35% 30%,var(--accent),color-mix(in srgb,var(--accent) 30%,var(--ink)) 70%)} #servicios .sv-ad__img i{position:absolute;left:50%;top:56%;width:46px;height:46px;border-radius:50%;translate:-50% -50%;background:var(--white);box-shadow:0 0 0 10px color-mix(in srgb,var(--white) 26%,transparent)} #servicios .sv-ad__btn{grid-column:1;justify-self:start;padding:7px 12px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:11px} #servicios .sv-ad--g{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--white);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 12px 26px -18px color-mix(in srgb,var(--night) 50%,transparent)} #servicios .sv-ad--g .sv-ad__spon{gap:6px;letter-spacing:.02em;text-transform:none;font-size:11px;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-ad--g .sv-ad__spon b{font-family:var(--font-b);font-weight:700;color:var(--ink)} #servicios .sv-ad--g .sv-ad__hl{font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--accent-2)} #servicios .sv-ad--g em{display:block;height:6px;width:94%;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent)} #servicios .sv-ad--g em.sv-ad__l2{width:68%;background:color-mix(in srgb,var(--ink) 8%,transparent)} #servicios .sv-ad__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} #servicios .sv-ad__links i{padding:5px 10px;border-radius:999px;font-style:normal;font-size:11px;color:var(--accent-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)} #servicios .sv-seg{flex:none} #servicios .sv-seg__c{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} #servicios .sv-seg__c li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:999px;background:var(--bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);font-size:11.5px;line-height:1.2;white-space:nowrap;transition:opacity .35s,scale .55s var(--ease-pop),translate .55s var(--ease-pop)} #servicios .sv-seg__c li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--ink)} #servicios .is-pre .sv-seg__c li:not(.is-on){opacity:0;scale:.6;translate:0 6px} #servicios .sv-ab{flex:1;min-height:0} #servicios .sv-ab .sv-k span{padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--ink);letter-spacing:.08em} #servicios .sv-ab__v{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0} #servicios .sv-ab__c{display:flex;flex-direction:column;gap:7px;min-height:0} #servicios .sv-ab__t{flex:1;min-height:30px;border-radius:10px} #servicios .sv-ab__t--a{background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--accent)))} #servicios .sv-ab__t--b{background:radial-gradient(circle at 60% 40%,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--bone)) 75%)} #servicios .sv-ab__c b{font-family:var(--font-m);font-size:10.5px;font-weight:400;letter-spacing:.04em} #servicios .sv-ab__c em{position:relative;display:block;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden} #servicios .sv-ab__c em::after{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:inherit;background:var(--ink);transform-origin:left;transition:scale 1.4s var(--ease-out)} #servicios .is-pre .sv-ab__c em:not(.is-on)::after{scale:0 1} #servicios .sv-ads .sv-toast{right:14px;top:62px} @container sv-stage (max-height:430px){ #servicios .sv-ab{display:none} #servicios .sv-ads__pv{height:150px} #servicios .sv-ad--meta .sv-ad__hl{font-size:16px} } @container sv-stage (max-height:320px){ #servicios .sv-ads{gap:8px;padding:14px} #servicios .sv-ads__pv{height:112px} #servicios .sv-ad--meta{gap:6px 12px;padding:12px} #servicios .sv-ad--meta .sv-ad__hl{font-size:15px} #servicios .sv-ad--g{gap:5px;padding:11px 14px} #servicios .sv-ad--g .sv-ad__hl{font-size:14px} #servicios .sv-ad__links{display:none} #servicios .sv-seg{gap:7px;padding:10px 12px} #servicios .sv-seg__c li{padding:5px 9px 5px 7px;font-size:11px} #servicios .sv-seg__c li:nth-child(n+5){display:none} #servicios .sv-ads .sv-toast{right:10px;top:50px} } /* 02 · film (phone with a real piece) --------------------------------------------------------------------- */ #servicios .sv-film{align-items:center;justify-content:center;padding:18px} #servicios .sv-phone{position:relative;display:flex;flex-direction:column;width:min(100%,286px);height:100%;max-height:510px;padding:10px;border-radius:30px;background:var(--white);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 30px 60px -30px rgba(4,7,20,.7)} #servicios .sv-phone__h{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;font-family:var(--font-m);font-size:11.5px} #servicios .sv-phone__h b{margin-left:auto;font-weight:400;color:color-mix(in srgb,var(--ink) 60%,transparent)} #servicios .sv-phone__v{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:18px;background:var(--ink)} #servicios .sv-phone__poster,#servicios .sv-phone__vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} #servicios .sv-phone__vid{opacity:0;transition:opacity .5s ease} #servicios .sv-phone__vid.is-playing{opacity:1} #servicios .sv-phone__play{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;margin:0;border:0;border-radius:inherit;background:none;color:var(--white);cursor:pointer} #servicios .sv-phone__play span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--night) 50%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 30%,transparent);transition:background .35s,color .35s,scale .5s var(--ease-pop)} #servicios .sv-phone__play svg{width:15px;height:15px;translate:1px 0} #servicios .sv-phone__play:hover span,#servicios .sv-phone__play:focus-visible span{background:var(--accent);color:var(--ink);scale:1.08} #servicios .sv-phone__play:focus-visible{outline:3px solid var(--white);outline-offset:-5px;box-shadow:none} #servicios .sv-phone__fmt{position:absolute;z-index:1;right:10px;top:10px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--night) 50%,transparent);color:var(--white);font-family:var(--font-m);font-size:10px;letter-spacing:.08em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #servicios .sv-toast--s{left:10px;top:10px} #servicios .sv-float{position:absolute;z-index:1;right:18px;bottom:14px;width:24px;height:80px;pointer-events:none} #servicios .sv-float i{position:absolute;left:0;bottom:0;width:18px;height:18px;opacity:0;background:var(--accent-2-dark);clip-path:path('M9 16.5S1 11.8 1 6.3A3.9 3.9 0 0 1 9 4.6 3.9 3.9 0 0 1 17 6.3c0 5.5-8 10.2-8 10.2z')} #servicios .sv-float.is-on i{animation:sv-fl 2.2s cubic-bezier(.2,.7,.3,1) infinite} #servicios .sv-float.is-on i:nth-child(2){left:8px;animation-delay:.5s} #servicios .sv-float.is-on i:nth-child(3){left:-6px;animation-delay:1.1s} @keyframes sv-fl{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-78px) scale(1.1) rotate(-12deg)}} #servicios .sv-phone__pb{display:flex;align-items:center;gap:12px;padding:10px 4px 4px} #servicios .sv-ic{width:21px;height:21px} #servicios .sv-hrt{position:relative;display:grid;place-items:center;width:23px;height:23px;color:var(--accent-2);transition:color .3s} #servicios .sv-hrt svg{width:23px;height:23px} #servicios .sv-hrt i{position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 2px var(--accent);opacity:0} #servicios .is-pre .sv-hrt:not(.is-on){color:var(--ink)} #servicios .is-pre .sv-hrt.is-on svg{animation:sv-hp .6s var(--ease-pop)} #servicios .is-pre .sv-hrt.is-on i{animation:gc-ring 1s var(--ease-ping)} @keyframes sv-hp{0%{scale:1}45%{scale:1.45}100%{scale:1}} #servicios .sv-phone__t{margin:4px 4px 0;font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2} #servicios .sv-phone__cap{margin:2px 4px 4px;overflow:hidden;font-size:12px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis} #servicios .sv-phone__cap b{font-weight:600} @container sv-stage (max-height:360px){ #servicios .sv-film{padding:14px} #servicios .sv-phone{width:min(100%,250px);padding:8px;border-radius:24px} #servicios .sv-phone__h{padding:2px 4px 6px} #servicios .sv-phone__pb{padding:6px 4px 2px} #servicios .sv-phone__v{border-radius:14px} #servicios .sv-phone__cap,#servicios .sv-phone__fmt{display:none} } /* 03 · chat ----------------------------------------------------------------------------------------------- */ #servicios .sv-chat{padding:18px} #servicios .sv-chat__w{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;border-radius:16px;background:var(--white);box-shadow:0 20px 40px -26px color-mix(in srgb,var(--night) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)} #servicios .sv-chat__h{display:flex;align-items:center;gap:10px;flex:none;padding:12px 14px;border-bottom:1px solid var(--fog)} #servicios .sv-chat__av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--accent)} #servicios .sv-chat__av svg{width:15px;height:15px} #servicios .sv-chat__n{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} #servicios .sv-chat__n b{font-size:13px;font-weight:600;line-height:1.2} #servicios .sv-chat__n small{display:flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10px;letter-spacing:.04em;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-chat__n .dot{width:6px;height:6px;box-shadow:0 0 0 1px var(--ink)} #servicios .sv-chat__log{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:8px;min-height:0;overflow:hidden;padding:14px;background:var(--bone)} #servicios .sv-ui .sv-day{align-self:center;margin-bottom:auto;padding:4px 10px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.35} #servicios .sv-msg--in{align-self:flex-start;border-bottom-left-radius:4px;background:var(--white);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);transform-origin:0 100%} #servicios .sv-msg--out{align-self:flex-end;border-bottom-right-radius:4px;background:var(--accent);color:var(--ink);transform-origin:100% 100%} #servicios .sv-qr{display:flex;align-self:flex-end;gap:6px;transform-origin:100% 100%} #servicios .sv-qr span{padding:5px 11px;border-radius:999px;font-family:var(--font-m);font-size:11px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);transition:background .35s,color .35s,box-shadow .35s} #servicios .sv-qr .sv-qr__on{background:var(--ink);color:var(--accent);box-shadow:none} #servicios .is-pre .sv-qr:not(.is-sel) .sv-qr__on{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)} #servicios .sv-typing{display:none;align-self:flex-start;gap:4px;padding:11px 12px;border-radius:14px;border-bottom-left-radius:4px;background:var(--white);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)} #servicios .sv-typing.is-on{display:inline-flex} #servicios .sv-typing i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 40%,transparent);animation:sv-dot 1s ease-in-out infinite} #servicios .sv-typing i:nth-child(2){animation-delay:.15s} #servicios .sv-typing i:nth-child(3){animation-delay:.3s} @keyframes sv-dot{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -3px;opacity:1}} #servicios .is-pre :is(.sv-msg,.sv-qr):not(.is-on){display:none} #servicios .is-pre :is(.sv-msg,.sv-qr).is-on{animation:sv-pop .5s var(--ease-pop) both} @keyframes sv-pop{from{opacity:0;scale:.82;translate:0 8px}} #servicios .sv-chat__in{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin:10px;padding:6px 6px 6px 14px;border-radius:999px;background:var(--bone);font-size:12px;color:color-mix(in srgb,var(--ink) 60%,transparent)} #servicios .sv-chat__in i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--accent)} #servicios .sv-chat__in svg{width:13px;height:13px} #servicios .sv-chat .sv-toast{right:30px;top:112px} @container sv-stage (max-height:360px){ #servicios .sv-chat{padding:12px} #servicios .sv-chat__h{padding:9px 12px} #servicios .sv-chat__log{gap:6px;padding:10px} #servicios .sv-msg{padding:7px 10px;font-size:12px} #servicios .sv-chat__in{display:none} #servicios .sv-day{display:none} #servicios .sv-chat .sv-toast{right:22px;top:60px} } /* 04 · inventory (Stockly, demo data) ---------------------------------------------------------------------- */ #servicios .sv-inv{padding:18px} #servicios .sv-inv__w{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0;overflow:hidden;padding:18px;border-radius:16px;background:var(--white);box-shadow:0 20px 40px -26px color-mix(in srgb,var(--night) 55%,transparent)} #servicios .sv-inv__h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none} #servicios .sv-inv__b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;white-space:nowrap} #servicios .sv-inv__b i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 5px var(--accent),inset 0 0 0 9px var(--ink)} #servicios .sv-inv__k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none} #servicios .sv-inv__k span{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--bone)} #servicios .sv-inv__k small{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-inv__k b{font-family:var(--font-d);font-size:28px;font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} #servicios .sv-inv__th{padding:0 10px} #servicios .sv-inv__t{display:flex;flex:1;flex-direction:column;gap:6px;min-height:0;overflow:hidden;margin:0;padding:0;list-style:none} #servicios .sv-inv__r{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 26px 58px;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--bone);transition:box-shadow .4s,background .4s} #servicios .sv-inv__r>span{display:flex;flex-direction:column;gap:2px;min-width:0} #servicios .sv-inv__r>span b{overflow:hidden;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;text-overflow:ellipsis} #servicios .sv-inv__r>span small{font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 66%,transparent)} #servicios .sv-bar{display:block;height:6px;overflow:hidden;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent)} #servicios .sv-bar em{display:block;width:calc(var(--v,0) * 100%);height:100%;border-radius:inherit;background:var(--ink);transform-origin:left;transition:scale .9s var(--ease-out)} #servicios .sv-inv__r--lo .sv-bar em{background:var(--accent-2)} #servicios .sv-inv__r:nth-child(2) .sv-bar em{transition-delay:.09s} #servicios .sv-inv__r:nth-child(3) .sv-bar em{transition-delay:.18s} #servicios .sv-inv__r:nth-child(5) .sv-bar em{transition-delay:.27s} #servicios .sv-inv__r:nth-child(6) .sv-bar em{transition-delay:.36s} #servicios .is-pre .sv-bar em:not(.is-on){scale:0 1} #servicios .sv-inv__u{font-family:var(--font-m);font-size:12px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums} #servicios .sv-st{justify-self:end;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;line-height:1.2;text-decoration:none;text-transform:uppercase} #servicios .sv-st--lo{background:var(--accent-2);color:var(--white)} #servicios .sv-st--out{background:var(--ink);color:var(--white)} #servicios .sv-inv__r--hit.is-hit{background:var(--white);box-shadow:0 0 0 1.5px var(--ink),0 0 0 6px color-mix(in srgb,var(--accent) 70%,transparent)} #servicios .sv-inv .sv-toast{right:18px;bottom:18px} @container sv-stage (max-height:360px){ #servicios .sv-inv{padding:12px} #servicios .sv-inv__w{gap:9px;padding:12px} #servicios .sv-inv__k span{gap:4px;padding:8px 10px} #servicios .sv-inv__k b{font-size:22px} #servicios .sv-inv__th{display:none} #servicios .sv-inv__r{padding:6px 9px} #servicios .sv-inv__r:nth-child(n+4){display:none} #servicios .sv-inv .sv-toast{right:12px;bottom:12px} } @container sv-stage (max-width:340px){ #servicios .sv-inv__r{grid-template-columns:minmax(0,1fr) 44px 24px 54px;gap:8px} #servicios .sv-inv__k small{font-size:8.5px;letter-spacing:.06em} #servicios .sv-ex--solid{font-size:8.5px;letter-spacing:.08em} #servicios .sv-inv__b{font-size:12px} } /* ---------------------------------------------------------------- reduced motion: final frames, no loops */ @media (prefers-reduced-motion:reduce){ #servicios .sv-float i,#servicios .sv-typing i,#servicios .sv__hint i{animation:none!important} #servicios .sv__p,#servicios .sv__pc,#servicios .sv__pin{transition:none!important} } #servicios .sv__hint-m{display:none} @media (max-width:809px){#servicios .sv__hint-d{display:none}#servicios .sv__hint-m{display:inline}} /* ==== home-05-trabajo.css ==== */ /* 05 · TRABAJO (#trabajo) — reference 20_rwwk "Results you can count" (night → navy), measured at 1440×900: section 130/144 · head 1.3fr/1fr (gap 40, mb clamp(40,4.4vw,64)) · tabs 56 tall (gap 8, mb 12) · viewer 16/8 radius 24 (max 78svh) · info 1.15fr/1fr (gap 4vw, mt clamp(24,2.6vw,36)). Real client cases (v3: client-supplied account figures; 2K photos in the viewer, UGC reel wall for Academia Europea). 4 tabs instead of the reference's 6 → 4 columns; the reference's 40 px round avatar becomes a 40 px white logo chip (client logos need a light ground). Component breakpoints (reference ResizeObserver): tablet ≤1099 (head 1 col, tabs 2 cols, viewer 4/3), phone ≤809 (tab strip with edge bleed, viewer 4/5 radius 20, numerals small). Colours: DECISIONS §1 (lime → --accent, pink pings → --accent-2, pine → --pine). */ #trabajo.wk{padding:clamp(88px,9vw,150px) 0 clamp(96px,10vw,160px);overflow-x:clip} /* head --------------------------------------------------------------------------------------- */ #trabajo .wk-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:40px;margin-bottom:clamp(40px,4.4vw,64px)} #trabajo .wk-hl{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0} #trabajo .wk-hr{display:flex;flex-direction:column;align-items:flex-start;gap:24px;justify-self:end;max-width:400px;min-width:0} #trabajo .wk-sub{margin:0;font-size:17px;line-height:1.5;color:var(--mut);text-wrap:pretty} /* tabs ----------------------------------------------------------------------------------------- */ #trabajo .wk-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px} #trabajo .wk-tab{position:relative;display:flex;align-items:center;gap:11px;min-width:0;margin:0;padding:8px 12px 8px 8px;border:0;border-radius:999px;cursor:pointer;color:var(--white);background:color-mix(in srgb,var(--white) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 12%,transparent);overflow:hidden;text-align:left;font-family:var(--font-b);font-size:12px;line-height:normal;transition:background .35s,box-shadow .35s,color .35s} /* logo chip (reference: 40 px avatar, greyscale until hover / select) */ #trabajo .wk-chip{flex:none;display:flex;align-items:center;justify-content:center;gap:5px;height:40px;min-width:40px;padding:0 11px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 0%,transparent);transition:box-shadow .35s} #trabajo .wk-chip--3{gap:6px;padding:0 10px} #trabajo .wk-chip img{display:block;width:auto;max-width:72px;object-fit:contain;filter:grayscale(1) contrast(.9) opacity(.72);transition:filter .5s} #trabajo .wk-tab-t{display:flex;flex-direction:column;gap:3px;min-width:0} #trabajo .wk-tab-t b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #trabajo .wk-tab-t small{font-family:var(--font-m);font-size:10.5px;letter-spacing:.02em;color:color-mix(in srgb,var(--white) 66%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s} #trabajo .wk-tab:hover{background:color-mix(in srgb,var(--white) 11%,transparent)} #trabajo .wk-tab:hover .wk-chip img{filter:none} #trabajo .wk-tab.is-active{background:var(--white);color:var(--ink);box-shadow:none} #trabajo .wk-tab.is-active .wk-chip{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)} #trabajo .wk-tab.is-active .wk-chip img{filter:none} #trabajo .wk-tab.is-active small{color:color-mix(in srgb,var(--ink) 70%,transparent)} /* 7 s progress (motion.js writes --tp 0→1 on the active tab while auto-rotating) */ #trabajo .wk-prog{position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 .5px var(--ink);transform:scaleX(var(--tp,0));transform-origin:left;pointer-events:none} #trabajo .wk-tab:not(.is-active) .wk-prog{opacity:0} /* deck: one grid cell, panels stacked (JS) / listed (no JS) ------------------------------------- */ #trabajo .wk-deck{display:grid} #trabajo .wk-panel{min-width:0} html:not(.js) #trabajo .wk-panel+.wk-panel{margin-top:72px} html.js #trabajo .wk-panel{grid-area:1/1;visibility:hidden;pointer-events:none} html.js #trabajo .wk-panel.is-active{z-index:1;visibility:visible;pointer-events:auto} html.js #trabajo .wk-panel.is-out{z-index:2;visibility:visible;pointer-events:none} /* outgoing case: only its media cross-fades (reference .rwwk-case.is-out); chrome + info swap at once */ html.js #trabajo .wk-panel.is-out .wk-view{background:transparent;box-shadow:none} html.js #trabajo .wk-panel.is-out :is(.wk-top,.wk-div,.wk-handle,.wk-cur,.wk-info,.wk-reels){visibility:hidden} html.js #trabajo .wk-panel.is-out .wk-case{animation:wk-out .8s ease both} html.js #trabajo .wk-panel.is-active .wk-case{animation:wk-in .8s ease both} @keyframes wk-in{from{opacity:0}} @keyframes wk-out{to{opacity:0}} /* viewer --------------------------------------------------------------------------------------- */ #trabajo .wk-view{--dv:.15;--dt:1;position:relative;width:100%;aspect-ratio:16/8;max-height:78svh;border-radius:24px;overflow:hidden;background:var(--pine);isolation:isolate;container-type:inline-size;-webkit-user-select:none;user-select:none} #trabajo .wk-view--ab{touch-action:pan-y;cursor:ew-resize} #trabajo .wk-case{position:absolute;inset:0} #trabajo .wk-lay{position:absolute;inset:0;overflow:hidden} /* photo layer (2K photos cover the 16:8 frame; swaps in a 4:5 crop on phones) */ #trabajo .wk-ph,#trabajo .wk-vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none} #trabajo .wk-after :is(.wk-ph,.wk-vid){scale:calc(1.08 - var(--dt)*.08)} #trabajo .wk-vid{opacity:0;transition:opacity .6s ease} #trabajo .wk-vid.is-on{opacity:1} /* before layer clipped at --dv; the same piece greyscale + darkened (reference .rwwk-before) */ #trabajo .wk-before{clip-path:inset(0 calc((1 - var(--dv))*100%) 0 0)} #trabajo .wk-before :is(.wk-ph,.wk-vid){filter:grayscale(1) brightness(.46) contrast(1.08)} #trabajo .wk-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--night) 46%,transparent),transparent 26%,transparent 46%,color-mix(in srgb,var(--night) 76%,transparent))} #trabajo .wk-before .wk-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 44%,transparent),transparent 30%,color-mix(in srgb,var(--night) 60%,transparent))} /* chart: OSMO real monthly cost-per-new-account path (normalised shape, no values) over the dashed March level; grows with the drag */ #trabajo .wk-ch{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;overflow:visible;pointer-events:none} #trabajo .wk-ch-a{transform-origin:50% 100%;transform:scaleY(calc(.14 + var(--dt)*.86))} #trabajo .wk-ln{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 70%,transparent))} #trabajo .wk-fl{fill:none;stroke:color-mix(in srgb,var(--white) 55%,transparent);stroke-width:2;stroke-dasharray:6 7} /* numerals (reference slots: big green = after / headline figure, outlined ghost = before / second figure) */ #trabajo .wk-num{position:absolute;z-index:2;bottom:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:12px;pointer-events:none} #trabajo .wk-num-a{right:clamp(22px,3vw,44px);align-items:flex-end;text-align:right} #trabajo .wk-num-b{left:clamp(22px,3vw,44px);bottom:clamp(76px,8vw,118px);align-items:flex-start} #trabajo .wk-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-family:var(--font-m);font-size:11px;letter-spacing:.14em;line-height:normal;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--white) 86%,transparent);background:color-mix(in srgb,var(--night) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 34%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} #trabajo .wk-pill.is-a{color:var(--ink);background:var(--accent);box-shadow:none} #trabajo .wk-pill.is-a i{width:7px;height:7px;border-radius:50%;background:var(--accent-2)} #trabajo .wk-big{font-family:var(--font-d);font-size:clamp(84px,10.4vw,176px);font-weight:600;line-height:.84;letter-spacing:-.06em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 6px 50px rgba(0,0,0,.35)} /* rolling digits: full 1em cells, line box kept at .84em; shadow as a filter so the digit masks don't clip it */ #trabajo .wk-big .odo{margin:-.08em 0;text-shadow:none;filter:drop-shadow(0 6px 26px rgba(0,0,0,.3))} #trabajo .wk-ghost{font-family:var(--font-d);font-size:clamp(44px,4.8vw,80px);font-weight:600;line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--white) 74%,transparent);font-variant-numeric:tabular-nums;white-space:nowrap} /* top row: white client pill + glass label */ #trabajo .wk-top{position:absolute;z-index:4;left:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);top:clamp(16px,2vw,24px);display:flex;justify-content:space-between;gap:12px;pointer-events:none;font-family:var(--font-m);font-size:11.5px;letter-spacing:.06em;line-height:normal} #trabajo .wk-cl{display:inline-flex;align-items:center;gap:9px;min-width:0;padding:8px 14px 8px 12px;border-radius:999px;background:var(--white);color:var(--ink);white-space:nowrap} #trabajo .wk-port{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:gc-blink 1.4s ease-in-out infinite} #trabajo .wk-ml{display:inline-flex;align-items:center;min-width:0;padding:8px 14px;border-radius:999px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--white);background:color-mix(in srgb,var(--night) 40%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 22%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* drag divider + handle (positions on the compositor: 100cqw = viewer width) */ #trabajo .wk-div{position:absolute;z-index:3;top:0;bottom:0;left:0;width:0;translate:calc(var(--dv)*100cqw) 0;pointer-events:none} #trabajo .wk-div i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--white);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 24px 2px color-mix(in srgb,var(--accent) 55%,transparent)} #trabajo .wk-handle{position:absolute;z-index:5;top:50%;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;color:var(--white);background:color-mix(in srgb,var(--night) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 2px var(--accent),0 12px 30px -8px rgba(0,0,0,.6);transition:scale .5s var(--ease-pop),background .3s,color .3s} #trabajo .wk-handle{left:0;translate:calc(var(--dv)*100cqw - 50%) -50%;cursor:ew-resize;touch-action:none} #trabajo .wk-handle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--accent);animation:wk-hp 2.2s var(--ease-ping) infinite;pointer-events:none} @keyframes wk-hp{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}} #trabajo .wk-handle svg{width:24px;height:24px} #trabajo .wk-view:hover .wk-handle,#trabajo .wk-view.is-drag .wk-handle,#trabajo .wk-handle:focus-visible{scale:1.22;background:var(--accent);color:var(--ink)} html:not(.js) #trabajo .wk-handle{display:none} /* cursor tag ("Arrastra" / "Ver video" over a reel), follows the mouse (lerp .22) */ #trabajo .wk-cur{position:absolute;z-index:6;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s} #trabajo .wk-cur b{display:block;translate:18px 18px;padding:7px 12px;border-radius:999px;background:var(--white);color:var(--ink);font-family:var(--font-m);font-size:10.5px;font-weight:500;letter-spacing:.14em;line-height:normal;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)} @media (hover:hover) and (pointer:fine){#trabajo .wk-view.is-hov .wk-cur{opacity:1}} /* photo cases (Valderrama, DLC · RoadMarket · ICEE): 2K image + honest count motifs over it */ #trabajo .wk-photo .wk-ph{object-position:50% 50%} #trabajo .wk-photo--val .wk-ph{object-position:62% 50%} #trabajo .wk-photo--dlc .wk-ph{object-position:60% 50%} html.js #trabajo .wk-panel.is-active .wk-view--photo .wk-ph{animation:wk-settle 1.7s var(--ease-out) both} @keyframes wk-settle{from{scale:1.08}} /* Valderrama: the left half darkens so the week rows read over the photo */ #trabajo .wk-photo--val .wk-scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--night) 78%,transparent),color-mix(in srgb,var(--night) 40%,transparent) 42%,transparent 64%),linear-gradient(180deg,color-mix(in srgb,var(--night) 40%,transparent),transparent 26%,transparent 50%,color-mix(in srgb,var(--night) 74%,transparent))} #trabajo .wk-photo--dlc .wk-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 44%,transparent),transparent 28%,transparent 46%,color-mix(in srgb,var(--night) 78%,transparent))} /* "clientes por semana": 1 dot = 1 client, the ring = top of the range (3–4 → 6–7) */ #trabajo .wk-week{position:absolute;z-index:2;left:clamp(22px,3vw,44px);top:clamp(84px,10cqw,140px);display:flex;flex-direction:column;gap:max(10px,1.1cqw)} #trabajo .wk-wr{display:flex;align-items:center;gap:max(6px,.75cqw)} #trabajo .wk-wr span{flex:none;width:clamp(92px,8.6cqw,118px);font-family:var(--font-m);font-size:11px;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:color-mix(in srgb,var(--white) 80%,transparent)} #trabajo .wk-wr i{flex:none;width:clamp(16px,2.1cqw,28px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--white) 78%,transparent)} #trabajo .wk-wr.is-a span{color:var(--accent)} #trabajo .wk-wr.is-a i{background:var(--accent);box-shadow:0 0 14px -2px color-mix(in srgb,var(--accent) 70%,transparent)} #trabajo .wk-wr i.is-r{background:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--white) 78%,transparent)} #trabajo .wk-wr.is-a i.is-r{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)} #trabajo .wk-wr i.is-e{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 22%,transparent)} html.js #trabajo .wk-panel.is-active .wk-wr i{animation:wk-dot .5s var(--ease-pop) calc(var(--i,0)*70ms + .3s) both} html.js #trabajo .wk-panel.is-active .wk-wr.is-a i{animation-delay:calc(var(--i,0)*70ms + .75s)} @keyframes wk-dot{from{opacity:0;scale:.4}} #trabajo .wk-fcap{margin:4px 0 0;font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:color-mix(in srgb,var(--white) 70%,transparent)} #trabajo .wk-fcap b{font-weight:500;color:var(--white)} /* DLC · RoadMarket · ICEE: reach rings over the store */ #trabajo .wk-rings{position:absolute;left:60%;top:44%;width:0;height:0;pointer-events:none} #trabajo .wk-rings i{position:absolute;left:0;top:0;width:min(64cqw,840px);aspect-ratio:1;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent);opacity:0} html.js #trabajo .wk-panel.is-active .wk-rings i{animation:wk-ring 4.2s var(--ease-ping) infinite} #trabajo .wk-rings i:nth-child(2){animation-delay:1.4s!important} #trabajo .wk-rings i:nth-child(3){animation-delay:2.8s!important} @keyframes wk-ring{0%{opacity:.9;scale:.18}100%{opacity:0;scale:1}} html:not(.js) #trabajo .wk-rings i{opacity:.35;scale:.5} #trabajo.is-off .wk-rings i,#trabajo.is-off .wk-port{animation-play-state:paused} /* Academia Europea: wall of 6 AI UGC reels (muted previews: max 2, JS) — a click opens the shared player */ #trabajo .wk-ugc{background:radial-gradient(70% 90% at 22% 34%,color-mix(in srgb,var(--accent-2-dark) 20%,transparent),transparent 70%),radial-gradient(60% 80% at 86% 92%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--pine)} #trabajo .wk-ugc::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--white) 14%,transparent) 1px,transparent 1.4px) 0 0/24px 24px;-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%);pointer-events:none} /* rev1 (client review): the figures get their own column and the reels a 3 × 2 grid sized from the viewer height (--vh = the viewer's real height: 16:8 capped at 78svh; 4:3 on tablet), capped at 46 % of the width, so a reel can never cover a figure at any desktop / tablet size. */ #trabajo .wk-ugc{--px:clamp(22px,3vw,44px);--t:clamp(66px,6.6cqw,88px);--b:clamp(22px,3vw,40px);--g:max(8px,.9cqw);--vh:min(50cqw,78svh);--rh:min(calc((var(--vh) - var(--t) - var(--b) - var(--g))/2),calc((46cqw - var(--g)*2)/3*16/9));--rw:calc(var(--rh)*9/16*3 + var(--g)*2)} #trabajo .wk-reels{position:absolute;z-index:3;right:var(--px);top:var(--t);display:grid;grid-template-columns:repeat(3,calc(var(--rh)*9/16));grid-auto-rows:var(--rh);gap:var(--g);margin:0;padding:0;list-style:none} #trabajo .wk-reels li{min-width:0} #trabajo .wk-reel{position:relative;display:block;height:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--ink-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 14%,transparent),0 24px 44px -26px rgba(0,0,0,.85);transition:translate .6s var(--ease-out),box-shadow .4s} #trabajo .wk-reel img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:scale 1.2s var(--ease-out)} #trabajo .wk-reel .wk-vid{z-index:1} #trabajo .wk-reel::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 14%,transparent);pointer-events:none;transition:box-shadow .4s} #trabajo .wk-rp{position:absolute;z-index:3;right:10px;bottom:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--white);background:color-mix(in srgb,var(--night) 50%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,color .3s,scale .5s var(--ease-pop)} #trabajo .wk-rp svg{width:13px;height:13px;margin-left:2px} #trabajo .wk-reel:is(:hover,:focus-visible){translate:0 -6px} #trabajo .wk-reel:is(:hover,:focus-visible)::after{box-shadow:inset 0 0 0 2px var(--accent)} #trabajo .wk-reel:is(:hover,:focus-visible) img{scale:1.05} #trabajo .wk-reel:is(:hover,:focus-visible) .wk-rp{background:var(--accent);color:var(--ink);scale:1.1} #trabajo .wk-reel:focus-visible{outline:2px solid var(--accent);outline-offset:3px} html.js #trabajo .wk-panel.is-active .wk-reels li{animation:wk-rise .9s var(--ease-out) calc(var(--i,0)*70ms + .08s) both} @keyframes wk-rise{from{opacity:0;translate:0 18px}} /* figures column: a line on top, "+50" and the big figure at the bottom (reference numeral slot), all on plain ground */ #trabajo .wk-ugc-f{position:absolute;z-index:2;left:var(--px);top:var(--t);bottom:var(--b);right:calc(var(--px) + var(--rw) + clamp(24px,3cqw,48px));display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0;pointer-events:none} #trabajo .wk-ugc-q{margin:0;max-width:15ch;font-family:var(--font-d);font-size:clamp(24px,2.5cqw,38px);font-weight:600;line-height:1.06;letter-spacing:-.035em;color:var(--white);text-wrap:balance} #trabajo .wk-ugc-s{display:flex;flex-direction:column;gap:clamp(18px,2.2cqw,30px)} #trabajo .wk-ugc-r{display:flex;flex-wrap:wrap;gap:18px clamp(24px,3.2cqw,52px)} #trabajo .wk-ugc-x{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0} #trabajo .wk-ugc-n{font-family:var(--font-d);font-size:clamp(40px,4.8cqw,76px);font-weight:600;line-height:.9;letter-spacing:-.05em;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap} #trabajo .wk-view--ugc .wk-big{font-size:clamp(72px,11cqw,176px);text-shadow:none} /* info row ---------------------------------------------------------------------------------- */ #trabajo .wk-info{margin-top:clamp(24px,2.6vw,36px)} #trabajo .wk-info-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start} html.js #trabajo .wk-panel.is-active .wk-info-in{animation:wk-info .8s var(--ease-out) both} @keyframes wk-info{from{opacity:0;translate:0 12px}} #trabajo .wk-meta{display:block;margin:0 0 14px;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--mut)} #trabajo .wk-meta span+span::before{content:"·";margin:0 10px} #trabajo .wk-title{margin:0;font-family:var(--font-d);font-size:clamp(28px,2.6vw,40px);font-weight:600;line-height:1.04;letter-spacing:-.04em;text-wrap:balance;color:var(--white)} /* reference: the title link's accent underline grows from the left on hover (.6s) */ #trabajo .wk-title a{color:inherit;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .6s var(--ease-out)} #trabajo .wk-title a:hover,#trabajo .wk-title a:focus-visible{background-size:100% 2px} /* results strip: every figure from the deck, verbatim */ #trabajo .wk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:26px 0 0;padding:0;max-width:640px} #trabajo .wk-kpis>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0;padding:14px 18px 0 0;border-top:1px solid var(--line)} #trabajo .wk-kpis>div+div{padding-left:18px;box-shadow:inset 1px 0 0 var(--line)} #trabajo .wk-kpis dd{margin:0;font-family:var(--font-d);font-size:clamp(26px,2.3vw,34px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap} #trabajo .wk-kpis dt{font-family:var(--font-m);font-size:10.5px;letter-spacing:.08em;line-height:1.45;text-transform:uppercase;color:var(--mut)} #trabajo .wk-sum{margin:0 0 20px;max-width:46ch;font-size:17px;line-height:1.5;color:color-mix(in srgb,var(--white) 82%,transparent)} #trabajo .wk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px} #trabajo .wk-svs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} #trabajo .wk-svs li{padding:6px 12px;border-radius:999px;font-family:var(--font-m);font-size:11px;letter-spacing:.06em;line-height:normal;color:var(--white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 26%,transparent)} #trabajo .wk-acts{display:flex;flex-wrap:wrap;gap:6px} #trabajo .wk-read{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:12px;letter-spacing:.08em;line-height:normal;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:gap .4s var(--ease-pop),background .3s,color .3s,box-shadow .3s} #trabajo .wk-read:hover{gap:16px} #trabajo .wk-read svg{width:13px;height:13px} #trabajo .wk-read--o{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 34%,transparent)} #trabajo .wk-read--o:hover{background:var(--white);color:var(--ink);box-shadow:none} /* OSMO (richest case) — percentages / relative changes only (client rule) ------------------------ */ /* glass card on the "after" layer: new accounts a month as an index (Mar = 100); the drag covers it like the after figure */ #trabajo .wk-bars{margin:0} #trabajo .wk-bars--v{position:absolute;z-index:2;right:clamp(22px,3vw,44px);top:clamp(66px,6.4cqw,90px);width:clamp(292px,24cqw,340px);padding:14px 16px 12px;border-radius:18px;background:color-mix(in srgb,var(--night) 44%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 18%,transparent),0 18px 40px -24px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} #trabajo .wk-bars-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--white)} #trabajo .wk-bars-h b{font-weight:500} #trabajo .wk-bars-h span{font-family:var(--font-d);font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1;text-transform:none;color:var(--accent)} #trabajo .wk-bars-c{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;height:96px;margin:0;padding:0;list-style:none} #trabajo .wk-bars-c li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0} #trabajo .wk-bars-c span{font-family:var(--font-m);font-size:10px;letter-spacing:.02em;line-height:1;color:color-mix(in srgb,var(--white) 62%,transparent);font-variant-numeric:tabular-nums} #trabajo .wk-bars-c i{display:block;flex:none;width:100%;height:calc(var(--h,1)*62px);border-radius:4px 4px 1px 1px;background:color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:inset 0 2px 0 var(--accent);transform-origin:50% 100%} #trabajo .wk-bars-c em{font-style:normal;font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:color-mix(in srgb,var(--white) 56%,transparent)} #trabajo .wk-bars-c .is-0 i{background:color-mix(in srgb,var(--white) 14%,transparent);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--white) 72%,transparent)} #trabajo .wk-bars-c .is-n i{background:var(--accent);box-shadow:0 0 18px -4px color-mix(in srgb,var(--accent) 80%,transparent)} #trabajo .wk-bars-c :is(.is-0,.is-n) :is(span,em){color:var(--white)} #trabajo .wk-bars-c .is-n span{color:var(--accent)} #trabajo .wk-bars-s{margin:10px 0 0;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:color-mix(in srgb,var(--white) 56%,transparent)} html.js #trabajo .wk-panel.is-active .is-on .wk-bars-c i{animation:wk-bar .9s var(--ease-out) calc(var(--i,0)*70ms + .35s) both} html.js #trabajo .wk-panel.is-active .is-on .wk-bars-c span{animation:wk-fade .5s ease calc(var(--i,0)*70ms + .8s) both} @keyframes wk-bar{from{scale:1 0}} @keyframes wk-fade{from{opacity:0}} /* six relative KPIs in two rows of three: value · label · basis */ #trabajo .wk-kpis--6{max-width:660px;row-gap:22px} #trabajo .wk-kpis--6>div{flex-direction:column;justify-content:flex-start;gap:7px} #trabajo .wk-kpis--6>div:nth-child(3n+1){padding-left:0;box-shadow:none} #trabajo .wk-kpis--6 dd{order:-1} #trabajo .wk-kpis--6 dd.wk-kd{order:2;font-family:var(--font-m);font-size:11px;font-weight:400;letter-spacing:.02em;line-height:1.4;white-space:normal;color:color-mix(in srgb,var(--white) 58%,transparent)} #trabajo .wk-src{margin:18px 0 0;max-width:640px;font-size:12.5px;line-height:1.55;color:var(--mut);text-wrap:pretty} /* "Qué hicimos" */ #trabajo .wk-did{max-width:540px;margin:0 0 24px} #trabajo .wk-did-h{margin:0 0 6px;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--mut)} #trabajo .wk-did ol{margin:0;padding:0;list-style:none;counter-reset:wkd} #trabajo .wk-did li{position:relative;padding:9px 0 9px 34px;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:color-mix(in srgb,var(--white) 88%,transparent);counter-increment:wkd;text-wrap:pretty} #trabajo .wk-did li::before{content:counter(wkd,decimal-leading-zero);position:absolute;left:0;top:11px;font-family:var(--font-m);font-size:11px;letter-spacing:.06em;line-height:1.4;color:var(--accent)} #trabajo .wk-did small{display:block;margin-top:3px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.03em;line-height:1.5;color:var(--mut)} #trabajo .wk-did-k{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;line-height:1.4;vertical-align:1px;white-space:nowrap} /* brands that trust Growco (quiet closing row) ----------------------------------------------- */ #trabajo .wk-brands{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:24px 40px;margin-top:clamp(64px,7vw,104px);padding-top:28px;border-top:1px solid var(--line)} #trabajo .wk-brands-l{margin:0;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--mut)} #trabajo .wk-brands-r{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none} #trabajo .wk-brands-r li{display:grid;place-items:center;height:64px;padding:0 10px;border-radius:16px;background:var(--bone)} #trabajo .wk-brands-r img{display:block;width:auto;max-width:100%;object-fit:contain} /* laptop (≤1279) */ @media (max-width:1279px){ #trabajo .wk-brands{grid-template-columns:1fr} } /* tablet (reference is-tab: 810–1099) ---------------------------------------------------------- */ @media (max-width:1099px){ #trabajo .wk-head{grid-template-columns:1fr;align-items:start} #trabajo .wk-hr{justify-self:start;max-width:560px} #trabajo .wk-sub{max-width:400px} #trabajo .wk-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} #trabajo .wk-view{aspect-ratio:4/3} #trabajo .wk-info-in{grid-template-columns:1fr;gap:18px} #trabajo .wk-photo--val .wk-ph{object-position:68% 50%} #trabajo .wk-photo--dlc .wk-ph{object-position:64% 50%} #trabajo .wk-week{top:clamp(76px,10cqw,110px)} #trabajo .wk-wr i{width:clamp(16px,2.6cqw,26px)} #trabajo .wk-ugc{--vh:min(75cqw,78svh)} #trabajo .wk-brands-r{grid-template-columns:repeat(5,minmax(0,1fr))} /* OSMO: summary | "Qué hicimos" side by side, the foot under both */ #trabajo .wk-info-in--rich .wk-ir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(24px,4vw,40px);align-items:start} #trabajo .wk-info-in--rich .wk-foot{grid-column:1/-1} /* OSMO's six KPIs on one row here, so its info stays close to the other cases' height */ #trabajo .wk-kpis--6{grid-template-columns:repeat(6,minmax(0,1fr));max-width:none} #trabajo .wk-kpis--6>div:nth-child(n){padding-left:14px;padding-right:10px;box-shadow:inset 1px 0 0 var(--line)} #trabajo .wk-kpis--6>div:first-child{padding-left:0;box-shadow:none} #trabajo .wk-kpis--6 dd{font-size:clamp(24px,2.8vw,30px)} } /* phone (reference is-ph: ≤809) ---------------------------------------------------------------- */ @media (max-width:809px){ #trabajo.wk{padding:80px 0 88px} #trabajo .wk-head{gap:24px;margin-bottom:32px} #trabajo .wk-hr{justify-self:stretch;max-width:none} #trabajo .wk-sub{font-size:16px;max-width:none} #trabajo .wk-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-4px calc(var(--pad,20px)*-1) 8px;padding:6px var(--pad,20px);scroll-padding:0 var(--pad,20px);overscroll-behavior-x:contain} #trabajo .wk-tabs::-webkit-scrollbar{display:none} #trabajo .wk-tab{flex:none;width:auto;max-width:300px;scroll-snap-align:start} #trabajo .wk-view{aspect-ratio:4/5;max-height:none;border-radius:20px} #trabajo .wk-ch{height:46%} /* pills sit over the playing piece here: no backdrop blur (re-computed every frame), a denser tint instead */ #trabajo .wk-pill:not(.is-a){-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--night) 52%,transparent)} #trabajo .wk-big{font-size:clamp(56px,17vw,76px)} #trabajo .wk-ghost{font-size:32px;-webkit-text-stroke-width:1.1px} #trabajo .wk-num{bottom:18px;gap:8px} #trabajo .wk-num-a{right:16px} #trabajo .wk-num-b{left:16px;bottom:auto;top:66px} #trabajo .wk-ml{display:none} #trabajo .wk-handle{width:54px;height:54px} /* photo cases: 4:5 crops (); Valderrama rows on top, both figures on the bottom line */ #trabajo .wk-photo--val .wk-ph,#trabajo .wk-photo--dlc .wk-ph{object-position:50% 50%} #trabajo .wk-photo--val .wk-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--night) 74%,transparent),color-mix(in srgb,var(--night) 30%,transparent) 44%,transparent 56%,color-mix(in srgb,var(--night) 78%,transparent))} #trabajo .wk-week{left:16px;right:16px;top:62px;gap:10px} #trabajo .wk-wr{gap:6px} #trabajo .wk-wr span{width:86px;font-size:10px} #trabajo .wk-wr i{width:min(5.4cqw,22px)} #trabajo .wk-fcap{font-size:9.5px} #trabajo .wk-view--photo .wk-photo--val .wk-num-b{top:auto;bottom:18px} /* reel wall → edge-to-edge snap strip on top (2.8 reels in view); the figures get their own band below it */ #trabajo .wk-reels{display:flex;left:0;right:0;top:60px;gap:10px;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y} #trabajo .wk-reels::-webkit-scrollbar{display:none} #trabajo .wk-reels li{flex:0 0 35cqw;scroll-snap-align:start} #trabajo .wk-reel{height:auto;border-radius:12px} #trabajo .wk-rp{right:8px;bottom:8px;width:28px;height:28px;-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--night) 66%,transparent)} #trabajo .wk-ugc-f{left:16px;right:16px;top:auto;bottom:18px} #trabajo .wk-ugc-q{display:none} #trabajo .wk-ugc-s{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:end;gap:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--white) 16%,transparent)} #trabajo .wk-ugc-r{display:contents} #trabajo .wk-ugc-x--d{display:none} #trabajo .wk-ugc-x{flex-direction:column-reverse;gap:8px} #trabajo .wk-ugc-x.is-a{order:-1} #trabajo .wk-ugc-x .wk-pill{padding:0;background:none;box-shadow:none;color:color-mix(in srgb,var(--white) 76%,transparent);font-size:9.5px;letter-spacing:.1em;white-space:normal;line-height:1.35} #trabajo .wk-ugc-x .wk-pill.is-a{color:var(--accent)} #trabajo .wk-ugc-x .wk-pill.is-a i{display:none} #trabajo .wk-ugc-n{font-size:clamp(34px,10vw,42px)} #trabajo .wk-view--ugc .wk-big{font-size:clamp(52px,16cqw,68px)} #trabajo .wk-rings{top:50%} #trabajo .wk-rings i{width:130cqw} #trabajo .wk-info-in{grid-template-columns:1fr;gap:16px} #trabajo .wk-title{font-size:28px} #trabajo .wk-sum{font-size:16px} #trabajo .wk-kpis>div{padding-right:10px} #trabajo .wk-kpis>div+div{padding-left:10px} #trabajo .wk-kpis dd{font-size:24px} #trabajo .wk-kpis dt{font-size:9.5px;letter-spacing:.06em} #trabajo .wk-brands-r{grid-template-columns:repeat(3,minmax(0,1fr))} #trabajo .wk-brands-r li{height:56px} /* OSMO: the index card leaves the 4:5 crop (it would cover the face). rev1: it no longer moves under the title — the "Cuentas nuevas al mes ×2" KPI carries it — so OSMO's info stays close to the other cases' height; KPIs 2 × 3 */ #trabajo .wk-bars--v{display:none} #trabajo .wk-kpis--6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px} #trabajo .wk-kpis--6>div:nth-child(n){padding-left:10px;padding-right:6px;box-shadow:inset 1px 0 0 var(--line)} #trabajo .wk-kpis--6>div:nth-child(3n+1){padding-left:0;box-shadow:none} #trabajo .wk-kpis--6 dd{font-size:22px} #trabajo .wk-kpis--6 dd.wk-kd{font-size:10px;letter-spacing:0} #trabajo .wk-did li{font-size:14.5px} #trabajo .wk-did small{display:none} #trabajo .wk-info-in--rich .wk-ir{display:block} } /* reduced motion: final states, no loops (site.css §19 already kills durations) -------------------- */ @media (prefers-reduced-motion:reduce){ #trabajo .wk-case,#trabajo .wk-info-in,#trabajo .wk-wr i,#trabajo .wk-reels li,#trabajo .wk-bars-c :is(i,span),#trabajo .wk-lay :is(.wk-ph,.wk-vid){animation:none!important} #trabajo .wk-reel,#trabajo .wk-reel img{transition:box-shadow .3s} #trabajo .wk-reel:is(:hover,:focus-visible){translate:none} #trabajo .wk-reel:is(:hover,:focus-visible) img{scale:1} #trabajo .wk-port,#trabajo .wk-handle::after{animation:none!important} #trabajo .wk-rings i{animation:none!important;opacity:.35;scale:.5} #trabajo .wk-rings i:nth-child(2){scale:.75;opacity:.22} #trabajo .wk-rings i:nth-child(3){scale:1;opacity:.12} #trabajo .wk-prog{display:none} } /* rev3 (2026-10-12, client): on phones the stacked panels kept the tallest case's height, leaving a big gap under the shorter cases before "Marcas que confían" — size the stack to the visible case and tighten the brands gap. */ @media (max-width:809px){ html.js #trabajo .wk-panel:not(.is-active):not(.is-out){display:none} #trabajo .wk-info{margin-top:20px} #trabajo .wk-sum{margin-bottom:16px} #trabajo .wk-did{margin-bottom:18px} #trabajo .wk-brands{margin-top:40px;padding-top:22px} } /* ==== home-06-proceso.css ==== */ /* 06 · CÓMO TRABAJAMOS (#proceso) — reference 23_rwfn. Base rules = the "flat" layout (tablet / phone / reduced motion / no JS); #proceso.is-pinned (motion.js data-sticky, ≥1200 px, motion allowed) = the pinned stage. One DOM for both: in flat mode the left/right columns and the lists are display:contents so each funnel band + its step form one reference card in the section grid. */ #proceso{--fn-tint:color-mix(in srgb,var(--ink) 5%,transparent);--fn-done:color-mix(in srgb,var(--accent) 45%,var(--bone))} #proceso .fn-title{letter-spacing:-.045em} /* live eyebrow dot (reference rwfn-live: a navy 30 % halo growing 0 → 9 px). Done with transform/opacity on a pseudo halo under a pseudo copy of the dot, and paused while the section is off screen (.fn-vis is set by the section JS). */ #proceso .eb>i::before,#proceso .eb>i::after{content:"";position:absolute;inset:0;border-radius:50%} #proceso .eb>i::before{background:color-mix(in srgb,var(--ink) 30%,transparent);animation:fn-live 1.8s linear infinite} #proceso .eb>i::after{background:inherit} #proceso.fn-live:not(.fn-vis) .eb>i::before{animation-play-state:paused} @keyframes fn-live{0%{transform:scale(1);opacity:1}100%{transform:scale(3.57);opacity:0}} #proceso .fn-intro{margin:0;max-width:44ch;font-size:17px;line-height:1.5;color:var(--mut)} /* shared atoms ------------------------------------------------------------------------------------------- */ #proceso .fn-steps{list-style:none;margin:0;padding:0} /* title row: the h3 + its "Paso N" chip as a sibling (aria-hidden, the
    already gives the order) so the heading outline reads just "Diagnóstico", "Lanzamiento"… */ #proceso .fn-step-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:3px 0 6px} #proceso .fn-step h3{margin:0;font-family:var(--font-d);font-size:24px;font-weight:600;line-height:1.05;letter-spacing:-.035em;color:var(--fg)} #proceso .fn-step-tag{padding:4px 9px;color:var(--fg);border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);font-family:var(--font-m);font-size:11px;font-weight:400;line-height:1.05;letter-spacing:.12em;text-transform:uppercase} #proceso .fn-step p{margin:0;font-size:16px;line-height:1.45;color:var(--mut)} #proceso .fn-band-l{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.3} #proceso .fn-band-l em{display:grid;place-items:center;flex:none;font-style:normal;border-radius:999px;background:var(--ink);color:var(--accent);font-size:10px;letter-spacing:inherit} #proceso .fn-band-v{font-family:var(--font-d);font-weight:600;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap} #proceso .fn-tip i{flex:none;border-radius:50%} #proceso .fn-foot{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--mut)} #proceso .fn-cv{display:none} /* FLAT (default) -------------------------------------------------------------------------------------------- */ #proceso .fn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;padding-top:clamp(80px,10vw,120px);padding-bottom:clamp(80px,10vw,120px)} #proceso .fn-l,#proceso .fn-steps,#proceso .fn-r,#proceso .fn-fun{display:contents} #proceso .fn-l>.eb{grid-column:1/-1;grid-row:1;justify-self:start} #proceso .fn-title{grid-column:1/-1;grid-row:2;margin-top:22px;font-size:clamp(44px,6.4vw,64px)} #proceso .fn-intro{grid-column:1/-1;grid-row:3;margin-top:22px} /* the "illustrative" label sits above the cards in flat mode so it is read before the figures */ #proceso .fn-foot{grid-column:1/-1;grid-row:4;margin-top:36px} #proceso .fn-band:nth-child(1),#proceso .fn-step:nth-child(1){grid-column:1} #proceso .fn-band:nth-child(2),#proceso .fn-step:nth-child(2){grid-column:2} #proceso .fn-band:nth-child(3),#proceso .fn-step:nth-child(3){grid-column:1} #proceso .fn-band:nth-child(4),#proceso .fn-step:nth-child(4){grid-column:2} #proceso .fn-band:nth-child(-n+2){grid-row:5;margin-top:20px} #proceso .fn-step:nth-child(-n+2){grid-row:6} #proceso .fn-band:nth-child(n+3){grid-row:7;margin-top:16px} #proceso .fn-step:nth-child(n+3){grid-row:8} /* card top = the band */ #proceso .fn-band{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 0;border:1px solid var(--fog);border-bottom:0;border-radius:22px 22px 0 0;background:var(--fn-tint)} #proceso .fn-band-c{order:-1;display:flex;align-items:center;gap:10px} #proceso .fn-band-l{gap:10px} #proceso .fn-band-l em{width:26px;height:24px} #proceso .fn-band-v{margin-left:auto;font-size:clamp(32px,8vw,44px)} #proceso .fn-shape{position:relative;height:14px;width:calc(100% - var(--i,0) * 12%);border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden} #proceso .fn-fill{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transition:transform 1.3s var(--ease-snap) .15s} #proceso.fn-live:not(.is-pinned) .fn-band:not(.is-on) .fn-fill{transform:scaleX(0)} #proceso .fn-tip{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.06em;line-height:1.3;color:var(--mut)} #proceso .fn-tip i{width:6px;height:6px;background:var(--accent-2)} /* card bottom = the step */ #proceso .fn-step{position:relative;padding:0 22px 22px;border:1px solid var(--fog);border-top:0;border-radius:0 0 22px 22px;background:var(--fn-tint)} #proceso .fn-step-n{display:none} #proceso .fn-step-b{margin-top:14px;padding-top:14px;border-top:1px solid var(--fog)} /* PINNED (≥1200 px, JS, motion allowed) --------------------------------------------------------------------- */ #proceso.is-pinned .fn-pin{position:relative;height:320vh;height:320svh} #proceso.is-pinned .fn-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:clip} #proceso.is-pinned .fn-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:center;height:100%;padding-top:6vh;padding-bottom:6vh;padding-top:6svh;padding-bottom:6svh} #proceso.is-pinned .fn-l{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-height:0} #proceso.is-pinned .fn-l>*{margin-top:0} #proceso.is-pinned .fn-title{font-size:clamp(40px,4.6vw,68px)} #proceso.is-pinned .fn-steps{display:flex;flex-direction:column;align-self:stretch;margin-top:14px;border-top:1px solid var(--fog)} #proceso.is-pinned .fn-step{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border:0;border-bottom:1px solid var(--fog);border-radius:0;background:none;opacity:.35;transition:opacity .5s} #proceso.is-pinned .fn-step::before{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-snap)} #proceso.is-pinned .fn-step.is-act{opacity:1} #proceso.is-pinned .fn-step.is-done{opacity:.6} #proceso.is-pinned .fn-step.is-act::before{transform:none} #proceso.is-pinned .fn-step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:var(--font-m);font-size:11.5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent);transition:background .4s,box-shadow .4s} #proceso.is-pinned .fn-step.is-act .fn-step-n{background:var(--accent);box-shadow:none} #proceso.is-pinned .fn-step-b{margin:0;padding:0;border:0} #proceso.is-pinned .fn-r{display:flex;flex-direction:column;gap:16px;height:100%;max-height:760px;min-height:0;justify-content:center} #proceso.is-pinned .fn-fun{position:relative;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;max-height:640px} #proceso.is-pinned .fn-cv{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none} #proceso.is-pinned .fn-foot{justify-content:center;margin:0} /* bands: trapezoids narrowing 7 % per side per step (insets 0 / 7 / 14 / 21 / 27 %) */ #proceso.is-pinned .fn-band{display:block;flex:1;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;outline-offset:4px;cursor:default; --f:clamp(0,((var(--pin,0) - .04) / .86 * 4 - var(--i,0)) * 1.25,1)} #proceso.is-pinned .fn-shape{position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .5s} #proceso.is-pinned .fn-band:nth-child(1) .fn-shape{clip-path:polygon(0 0,100% 0,93% 100%,7% 100%)} #proceso.is-pinned .fn-band:nth-child(2) .fn-shape{clip-path:polygon(7% 0,93% 0,86% 100%,14% 100%)} #proceso.is-pinned .fn-band:nth-child(3) .fn-shape{clip-path:polygon(14% 0,86% 0,79% 100%,21% 100%)} #proceso.is-pinned .fn-band:nth-child(4) .fn-shape{clip-path:polygon(21% 0,79% 0,73% 100%,27% 100%)} #proceso.is-pinned .fn-band:hover .fn-shape{background:color-mix(in srgb,var(--ink) 10%,transparent)} #proceso.is-pinned .fn-fill{border-radius:0;transform:scaleX(var(--f));transition:background-color .6s} #proceso.is-pinned .fn-band.is-on:not(.is-act) .fn-fill{background:var(--fn-done)} #proceso.is-pinned .fn-band.is-act .fn-fill{background:linear-gradient(90deg,var(--accent) 0,var(--accent) calc(100% - 3px),var(--ink) calc(100% - 3px))} #proceso.is-pinned .fn-band-c{position:relative;z-index:2;flex-direction:column;justify-content:center;gap:6px;height:100%;text-align:center;pointer-events:none} #proceso.is-pinned .fn-band-l{gap:8px;padding:5px 11px 5px 6px;border-radius:999px;background:var(--bone)} #proceso.is-pinned .fn-band-l em{width:auto;min-width:22px;height:22px} #proceso.is-pinned .fn-band-v{margin:0;font-size:clamp(34px,3.4vw,56px)} #proceso.is-pinned .fn-tip{position:absolute;z-index:4;top:50%;display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--white);letter-spacing:.04em;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);pointer-events:none;opacity:0;translate:0 -30%;transition:opacity .3s,translate .45s var(--ease-pop)} #proceso.is-pinned .fn-tip i{width:7px;height:7px;background:var(--accent-2-dark)} #proceso.is-pinned .fn-band:nth-child(1) .fn-tip{right:calc(7% + 10px)} #proceso.is-pinned .fn-band:nth-child(2) .fn-tip{right:calc(14% + 10px)} #proceso.is-pinned .fn-band:nth-child(3) .fn-tip{right:calc(21% + 10px)} #proceso.is-pinned .fn-band:nth-child(4) .fn-tip{right:calc(27% + 10px)} #proceso.is-pinned .fn-band:is(:hover,:focus-visible) .fn-tip{opacity:1;translate:0 -50%} @media (max-height:760px){#proceso.is-pinned .fn-step p,#proceso.is-pinned .fn-intro{display:none}} /* Spanish step lines wrap to 2 lines in the narrow 1200–1299 px column: drop the intro on short screens so the column still fits inside the 100svh stage (12 svh padding) instead of running under the header */ @media (max-width:1299px) and (max-height:820px){#proceso.is-pinned .fn-intro{display:none}} /* tablet / phone ------------------------------------------------------------------------------------------------ */ @media (max-width:809px){ #proceso .fn-grid{grid-template-columns:minmax(0,1fr)} #proceso .fn-title{font-size:clamp(38px,10.6vw,52px)} #proceso .fn-intro{font-size:16px} #proceso .fn-band:nth-child(n){grid-column:1} #proceso .fn-step:nth-child(n){grid-column:1} #proceso .fn-band:nth-child(1){grid-row:5} #proceso .fn-step:nth-child(1){grid-row:6} #proceso .fn-band:nth-child(2){grid-row:7} #proceso .fn-step:nth-child(2){grid-row:8} #proceso .fn-band:nth-child(3){grid-row:9} #proceso .fn-step:nth-child(3){grid-row:10} #proceso .fn-band:nth-child(4){grid-row:11} #proceso .fn-step:nth-child(4){grid-row:12} #proceso .fn-foot{margin-top:32px} #proceso .fn-band:nth-child(n+2){margin-top:16px} } /* reduced motion: flat cards (data-sticky), final values, no pulse */ @media (prefers-reduced-motion:reduce){ #proceso .eb>i::before{animation:none;opacity:0} #proceso .fn-band .fn-fill{transform:none!important} } /* ==== home-07-reportes.css ==== */ /* 07 · REPORTES (#reportes) — reference 26_rwnm "The numbers" (lime sheet → Growco green #B5F47F) Green sheet overlapping the previous section (margin-top -32px, 32px top corners, z 12), flex head (eyebrow + H2 / intro), navy results card (top bar + 4 tiles: label, odometer, context pill, caption + drawn rule, source line) and the full-width ticker that closes the section (no bottom padding). Breakpoints = the component's: 2×2 tiles at 810–1099px (reference is-tab), 1 column ≤809px (is-ph). */ #reportes{margin-top:-32px;z-index:12;border-radius:32px 32px 0 0;padding:clamp(88px,9vw,136px) 0 0;overflow:hidden} /* head ------------------------------------------------------------------------------------------------ */ #reportes .nm__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(36px,4vw,56px)} #reportes .nm__hl{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0} #reportes .nm__eb>i{animation:nm-pulse 1.8s infinite} #reportes .nm__title{letter-spacing:-.045em} /* navy underline (reference .rwnm .rw-it::after: left 0, right .02em, bottom .02em of the word, .085em thick) */ #reportes .nm__title .hd-w.is-accw::after{left:.04em;right:.06em;bottom:.02em} #reportes .nm__hr{flex:none} #reportes .nm__intro{margin:0;width:36ch;max-width:100%;font-size:17px;line-height:1.5;color:color-mix(in srgb,var(--ink) 78%,transparent)} /* report card --------------------------------------------------------------------------------------------- */ #reportes .nm__dash{border-radius:24px;background:var(--ink);color:var(--white);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--ink) 60%,transparent);overflow:hidden} #reportes .nm__top{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid color-mix(in srgb,var(--white) 12%,transparent);font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.1em;line-height:normal;text-transform:uppercase} #reportes .nm__rep{display:inline-flex;align-items:center;gap:10px;margin:0;white-space:nowrap} #reportes .nm__rep b{font-weight:500;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent-2-dark) 22%,transparent);color:#A9C1FF} /* functional tabs: shown once the section script has wired them (independent of the html.js fail-safe) */ #reportes:not(.nm--ready) .nm__tabs{display:none} #reportes .nm__panel{border-radius:0 0 24px 24px} #reportes .nm__src{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding:14px 22px 16px;border-top:1px solid color-mix(in srgb,var(--white) 12%,transparent);font-family:var(--font-m);font-size:11px;font-weight:400;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:color-mix(in srgb,var(--white) 72%,transparent)} #reportes .nm__src-k{padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--white) 10%,transparent);color:var(--white)} #reportes .nm__panel:focus-visible{outline:2px solid var(--white);outline-offset:-4px;box-shadow:none} #reportes .nm__live{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-2-dark);animation:gc-blink 1.4s ease-in-out infinite} #reportes .nm__tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--white) 7%,transparent)} #reportes .nm__tab{margin:0;padding:6px 12px;border:0;border-radius:999px;background:none;color:color-mix(in srgb,var(--white) 60%,transparent);font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:normal;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease-out),color .35s} #reportes .nm__tab:hover{color:var(--white)} #reportes .nm__tab.is-active{background:var(--accent);color:var(--ink)} #reportes .nm__tab:focus-visible{outline:2px solid var(--white);outline-offset:2px;box-shadow:none} #reportes .nm__range{margin:0;white-space:nowrap;color:color-mix(in srgb,var(--white) 70%,transparent)} /* tiles */ #reportes .nm__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} #reportes .nm__tile{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,2.2vw,34px);border-left:1px solid color-mix(in srgb,var(--white) 12%,transparent);transition:background .4s} #reportes .nm__tile:first-child{border-left:0} #reportes .nm__tile:hover{background:color-mix(in srgb,var(--white) 4%,transparent)} #reportes .nm__lab{display:flex;align-items:center;gap:10px;margin:0;min-height:2.6em;font-family:var(--font-m);font-size:11.5px;font-weight:400;letter-spacing:.1em;line-height:normal;text-transform:uppercase;color:color-mix(in srgb,var(--white) 72%,transparent)} #reportes .nm__lab>span:first-child{flex:none;color:var(--accent)} #reportes .nm__num{margin:6px 0 0;font-family:var(--font-d);font-weight:600;font-size:clamp(56px,5.6vw,96px);line-height:.88;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap;min-height:1em} #reportes .nm__odo{display:inline-flex;align-items:flex-start} #reportes .nm__odo .odo__d{clip-path:inset(0)} /* Spanish unit words ("mil", "M") after the figure: smaller, sitting on the digits' baseline (no-JS markup + odometer) */ #reportes .nm__u{font-size:.42em;letter-spacing:-.02em} #reportes .nm__odo .nm__u{align-self:flex-end;margin-bottom:.16em;line-height:1;white-space:pre} #reportes .nm__delta{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0;padding:5px 10px 5px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-family:var(--font-m);font-size:11px;font-weight:400;letter-spacing:.08em;line-height:normal;text-transform:uppercase} #reportes .nm__delta b{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:8px;font-weight:600;line-height:1} #reportes .nm__sp{position:relative;margin-top:auto;padding-top:18px} /* rev1: caption + scroll-drawn rule (the case data has no monthly series, so no sparkline) */ #reportes .nm__cap{margin:0 0 12px;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--white) 70%,transparent);text-wrap:pretty} #reportes .nm__rule{display:block;width:100%;height:4px;overflow:visible} #reportes .nm__ln{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0} /* scroll-linked draw-in (reference: (sp − .2 − i·.035)·3.4 for the line, (sp − .3 − i·.035)·4 for the area) */ #reportes.nm--live .nm__ln{stroke-dashoffset:calc(1 - clamp(0, (var(--p,0) - .2 - var(--i) * .035) * 3.4, 1))} /* tab switch: redraw from 0 to the current scroll-linked state */ #reportes .nm__tile.is-draw .nm__ln{animation:nm-draw .9s var(--ease-snap) calc(var(--i) * 60ms) both} #reportes :is(.nm__lab-t,.nm__delta,.nm__cap,.nm__range,.nm__src>span+span){transition:opacity .18s ease} #reportes.nm--swap :is(.nm__lab-t,.nm__delta,.nm__cap,.nm__range,.nm__src>span+span){opacity:0} /* ticker (closes the sheet) -------------------------------------------------------------------------------- */ #reportes .nm__tick{margin-top:clamp(36px,4vw,56px);border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding:18px 0 20px;font-family:var(--font-m);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:normal;text-transform:uppercase;color:var(--ink)} #reportes .nm__tick li>i{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 2px var(--ink)} @keyframes nm-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 80%,transparent)}100%{box-shadow:0 0 0 8px transparent}} @keyframes nm-draw{from{stroke-dashoffset:1}} /* tablet (reference is-tab: 810–1099) ------------------------------------------------------------------------ */ @media (min-width:810px) and (max-width:1099px){ #reportes .nm__grid{grid-template-columns:repeat(2,minmax(0,1fr))} #reportes .nm__tile:nth-child(odd){border-left:0} #reportes .nm__tile:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--white) 12%,transparent)} } /* narrow tablets: the (functional) tabs move to their own row under label + range, hugging their four tabs (a zero-height full-width pseudo item forces the break) */ @media (max-width:1023px){ #reportes .nm__top{flex-wrap:wrap;row-gap:0} #reportes .nm__top::after{content:"";order:2;flex:0 0 100%;height:0} #reportes .nm__range{order:1} #reportes .nm__tabs{order:3;flex:0 1 auto;max-width:100%;margin-top:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} #reportes .nm__tabs::-webkit-scrollbar{display:none} #reportes .nm__tab{flex:none;scroll-snap-align:start} } /* phone (reference is-ph: ≤809) ---------------------------------------------------------------------------------- */ @media (max-width:809px){ #reportes{padding-top:72px;border-radius:24px 24px 0 0;margin-top:-24px} #reportes .nm__head{flex-direction:column;align-items:flex-start;gap:20px} #reportes .nm__br{display:none} /* rev3 (2026-10-12, client): the 4 stacked full-width tiles were ~1,300px tall on phones — compact 2×2 grid instead */ #reportes .nm__grid{grid-template-columns:repeat(2,minmax(0,1fr))} #reportes .nm__tile{border-left:0;padding:18px 14px 16px} #reportes .nm__tile:nth-child(even){border-left:1px solid color-mix(in srgb,var(--white) 12%,transparent)} #reportes .nm__tile:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--white) 12%,transparent)} #reportes .nm__num{font-size:clamp(34px,10vw,44px);margin-top:10px} #reportes .nm__delta{margin-top:10px} #reportes .nm__dt{font-size:9.5px;letter-spacing:.04em} #reportes .nm__sp{margin-top:12px} #reportes .nm__cap{font-size:12.5px;line-height:1.35} #reportes .nm__rule{display:none} #reportes .nm__lab{font-size:10.5px} #reportes .nm__src{display:none} #reportes .nm__lab{min-height:0} #reportes .nm__top{padding:14px 18px} #reportes .nm__title{font-size:clamp(40px,4.6vw,68px)} /* reference rwnm keeps its H2 clamp on phones (40px at 390) */ #reportes .nm__rep-x{display:none} /* "Clientes · Datos reales" fits one line like the reference bar */ #reportes .nm__rep{flex-wrap:wrap;row-gap:8px} #reportes .nm__range{display:none} /* Growco: the tabs are functional, so they stay on phones (own row, all four fit at 390; scroll strip below) — the reference hides them */ #reportes .nm__tabs{flex:1 0 100%;justify-content:space-between;gap:2px} #reportes .nm__tab{padding:6px 9px;font-size:10.5px;letter-spacing:.06em} } @media (prefers-reduced-motion:reduce){ #reportes .nm__ln{stroke-dashoffset:0!important;animation:none!important} #reportes .nm__eb>i,#reportes .nm__live{animation:none!important} } /* ==== home-08-contenido.css ==== */ /* 08 · CONTENIDO (#contenido) — reference 29_rwfd (night → navy), measured at 1440×900: section padding clamp(96,10vw,168) / clamp(80,8vw,128) · head .wrap grid 1.25fr/.75fr (gap 40/64, align end) · H2 4.6vw/.95/-.045em · sub 17/1.55 max 440 (white 74 %) · mono pills 11px .1em caps · wall full-bleed clamp(640,92vh,900) tall, padding 0 clamp(12,1.4vw,24), gap 14, mt clamp(56,6vw,88), fade mask 13 % / 15 % · columns top:50 % − 50 % + (p − .5)·2·dir·spd·T (T 190 / 150 phone) + skewY(--sk) · cards pine, radius 20, padding 6, media radius 15 · component breakpoints 1200 (tablet: head 1 col, 3 columns, wall 900) and 810 (phone: 2 columns, wall 720, gap 10, cards radius 16 / 12). Colours (DECISIONS §1): lime → --accent, pink like/ping → --accent-2-dark (blue on dark), pine → --pine. */ #contenido.fd{padding:clamp(96px,10vw,168px) 0 clamp(80px,8vw,128px);overflow:hidden;overflow:clip} /* head ------------------------------------------------------------------------------------------ */ #contenido .fd-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px 64px;align-items:end} #contenido .fd-hl{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0} #contenido .fd-h2{letter-spacing:-.045em} #contenido .eb>i{animation:fd-eb 1.8s var(--ease-ping) infinite} #contenido .fd-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0;padding-bottom:6px} #contenido .fd-sub{margin:0;max-width:440px;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--white) 74%,transparent);text-wrap:pretty} #contenido .fd-stats{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--font-m);font-size:11px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase} #contenido .fd-stats li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 16%,transparent);color:color-mix(in srgb,var(--white) 82%,transparent);white-space:nowrap} #contenido .fd-stats i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)} /* wall ------------------------------------------------------------------------------------------ */ #contenido .fd-wall{--T:190px;--gap:14px;--cols:5;position:relative;height:clamp(640px,92vh,900px);margin-top:clamp(56px,6vw,88px);padding:0 clamp(12px,1.4vw,24px);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:var(--gap);overflow:hidden;overflow:clip;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 85%,transparent 100%)} #contenido .fd-col{position:relative;top:50%;align-self:start;display:flex;flex-direction:column;gap:var(--gap);height:max-content;min-width:0; transform:translate3d(0,calc(-50% + var(--o,0%) + (var(--p,.5) - .5) * 2 * var(--dir,1) * var(--spd,1) * var(--T)),0) skewY(var(--sk,0deg));will-change:transform} /* keyboard: the column of a focused card leaves the parallax and centres that card in the wall (JS writes --kc) */ #contenido .fd-col.is-kbf{transform:translate3d(0,var(--kc,-50%),0)} #contenido .fd-wall.is-kb .fd-col{transition:transform .6s var(--ease-out)} /* card ------------------------------------------------------------------------------------------ */ #contenido .fd-card{position:relative;display:flex;flex-direction:column;width:100%;margin:0;padding:6px;border:0;border-radius:20px;background:var(--pine);color:var(--white);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 8%,transparent);transition:opacity .9s ease var(--d,0ms),translate 1.1s var(--ease-out) var(--d,0ms),box-shadow .4s;-webkit-tap-highlight-color:transparent} html.js #contenido:not(.is-on) .fd-card{opacity:0;translate:0 40px} #contenido .fd-media{position:relative;display:block;flex:none;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:15px;background:color-mix(in srgb,var(--white) 6%,transparent);isolation:isolate} /* rev1: the AI commercials are horizontal pieces, shown as 16:9 cards in the same columns */ #contenido .fd-media--wide{aspect-ratio:16/9} #contenido .fd-media img,#contenido .fd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:scale 1.1s var(--ease-out),opacity .45s ease} #contenido .fd-media video{z-index:1;opacity:0;pointer-events:none} #contenido .fd-media video.is-playing{opacity:1} #contenido .fd-reel,#contenido .fd-n{position:absolute;z-index:2;top:9px;display:inline-flex;align-items:center;border-radius:999px;background:color-mix(in srgb,var(--night) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-m);font-size:10.5px;line-height:1.35;letter-spacing:.04em;color:var(--white);font-variant-numeric:tabular-nums} #contenido .fd-reel{left:9px;gap:5px;padding:5px 9px 5px 7px} #contenido .fd-reel svg{width:11px;height:11px;fill:var(--accent)} #contenido .fd-n{right:9px;padding:4px 8px;text-transform:uppercase} #contenido .fd-meta{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:10px 6px 5px 4px;font-size:12.5px;line-height:1.3} #contenido .fd-av{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--av);color:var(--ink);font-family:var(--font-d);font-size:9.5px;font-style:normal;font-weight:700;letter-spacing:-.02em;box-shadow:0 0 0 2px var(--pine),0 0 0 3.5px color-mix(in srgb,var(--av) 60%,transparent)} #contenido .fd-av--g{--av:var(--accent)} #contenido .fd-av--b{--av:#8EA9FF} #contenido .fd-av--m{--av:var(--mist)} #contenido .fd-av--w{--av:var(--white)} #contenido .fd-hd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-m);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 88%,transparent)} #contenido .fd-like{display:inline-flex;flex:none;align-items:center;gap:5px;font-family:var(--font-m);font-size:11.5px;color:color-mix(in srgb,var(--white) 78%,transparent);transition:color .3s} #contenido .fd-heart{position:relative;display:grid;place-items:center;width:16px;height:16px} #contenido .fd-heart svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .25s,stroke .25s,scale .45s var(--ease-pop)} #contenido .fd-ring{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);opacity:0;pointer-events:none} #contenido .fd-roll{display:inline-flex;flex-direction:column;height:1.3em;line-height:1.3em;overflow:hidden;font-variant-numeric:tabular-nums;text-align:right} #contenido .fd-roll b{display:block;font-weight:inherit;transition:translate .5s var(--ease-snap)} #contenido .fd-roll b+b{text-transform:uppercase;letter-spacing:.06em} /* hover (fine pointer) + keyboard focus: green ring, poster zoom, play icon pops blue with a green ping, 9:16 → VER */ @media (hover:hover) and (pointer:fine){ #contenido .fd-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)} #contenido .fd-card:hover .fd-media :is(img,video){scale:1.05} #contenido .fd-card:hover .fd-heart svg{fill:var(--accent-2-dark);stroke:var(--accent-2-dark);animation:fd-pop .5s var(--ease-pop)} #contenido .fd-card:hover .fd-ring{animation:fd-ping .9s var(--ease-ping) .05s} #contenido .fd-card:hover .fd-roll b{translate:0 -100%} #contenido .fd-card:hover .fd-like{color:var(--white)} } #contenido .fd-card:focus-visible{outline:3px solid var(--white);outline-offset:2px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 2px var(--night)} #contenido .fd-card:focus-visible .fd-heart svg{fill:var(--accent-2-dark);stroke:var(--accent-2-dark)} #contenido .fd-card:focus-visible .fd-roll b{translate:0 -100%} #contenido .fd-card:active{transition:box-shadow .4s,scale .12s;scale:.985} @keyframes fd-pop{0%{scale:1}40%{scale:1.45}100%{scale:1}} @keyframes fd-ping{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}} @keyframes fd-eb{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 8px transparent}} /* tablet (810–1199): head in one column, 3 columns (columns 1–2 already hold all eight pieces used), wall 900 ---- */ @media (max-width:1199px){ #contenido .fd-top{grid-template-columns:minmax(0,1fr);align-items:start} #contenido .fd-wall{--cols:3;height:900px} #contenido .fd-col:nth-child(n+4){display:none} } /* phone (≤809) ------------------------------------------------------------------------------------- */ @media (max-width:809px){ #contenido.fd{padding:88px 0 64px} #contenido .fd-top{gap:26px} #contenido .fd-side{gap:18px} #contenido .fd-sub{font-size:16px} #contenido .fd-stats li{white-space:normal} /* decided DOM order; on phone the two short pills share the first row (2 rows instead of 3) */ #contenido .fd-stats li:nth-child(3){order:-1} #contenido .fd-stats li:nth-child(1){order:-2} #contenido .fd-wall{--cols:2;--T:150px;--gap:10px;height:720px;margin-top:40px;padding:0 10px} #contenido .fd-col:nth-child(n+3){display:none} #contenido .fd-card{padding:5px;border-radius:16px} #contenido .fd-media{border-radius:12px} #contenido .fd-meta{gap:6px;padding:8px 3px 3px 2px;font-size:11.5px} #contenido .fd-hd{font-size:10px;letter-spacing:.03em} /* phone: the format label needs the room (reference keeps its like count; ours would truncate "Cuidado personal") */ #contenido .fd-like{display:none} #contenido .fd-av{width:18px;height:18px;font-size:8px} #contenido .fd-reel,#contenido .fd-n{font-size:10px} } /* reduced motion: static centred columns, no skew, cards shown ------------------------------------- */ @media (prefers-reduced-motion:reduce){ #contenido .fd-col{transform:translate3d(0,calc(-50% + var(--o,0%)),0)!important} #contenido .fd-col.is-kbf{transform:translate3d(0,var(--kc,-50%),0)!important} html.js #contenido .fd-card{opacity:1;translate:none} #contenido .eb>i{animation:none} } /* ==== home-10-automatizacion.css ==== */ /* 10 · AUTOMATIZACIÓN (#automatizacion) — reference 35_rwrv (bone ground, tinted panel + phone lock screen) Panel: radius 32, padding clamp(40px,5vw,80px), grid minmax(0,1fr) | minmax(0,480px), gap 48 / clamp(40px,6vw,120px), fog 62% on bone + 1px ink 6% ring. Left: eyebrow (ring dot pulsing), score (big numeral + glyph row + mono caption), channel pills, H2 (+10px), sub, ghost button — column gap 26. Right: navy lock screen (radius 52, 6px bezel), notifications stacked by --r (written by home-10-automatizacion.js; inline in the HTML = final state): y = min(r,2)·gap + i·12px · scale 1 − i·.045 · opacity (1 − i·.28) (0 when i = 3), i = clamp(0, r − 2, 3); not-yet-shown notes wait at −70px, scale .9, opacity 0. Transform .95s soft spring, opacity .55s. Tiers follow the reference component: tablet ≤1099 (is-tab), phone ≤809 (is-ph). Standalone spacing: the reference block continues the (omitted) team section, so it takes the team rhythm (clamp(96px,10vw,160px) both ends). */ #automatizacion{--au-gap:168px;--au-nh:156px;padding:clamp(96px,10vw,160px) 0} /* panel --------------------------------------------------------------------------------------------------- */ #automatizacion .au-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:48px clamp(40px,6vw,120px);align-items:center;padding:clamp(40px,5vw,80px);border-radius:32px;background:color-mix(in srgb,var(--fog) 62%,var(--bone));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)} #automatizacion .au-left{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0} /* eyebrow: ink-ringed dot with a soft pulse (reference rwrv-eb) */ #automatizacion .eb>i{border:1px solid var(--ink);animation:au-eb 1.8s var(--ease-ping) infinite} @keyframes au-eb{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 35%,transparent)}100%{box-shadow:0 0 0 8px transparent}} /* score block (reference 4.9 + stars + count) → channel count + glyphs + caption */ #automatizacion .au-score{display:flex;align-items:flex-end;gap:22px} #automatizacion .au-big{margin:0;font-family:var(--font-d);font-size:clamp(96px,9vw,132px);font-weight:600;line-height:.8;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums} #automatizacion .au-of{display:flex;flex-direction:column;gap:10px;padding-bottom:4px} #automatizacion .au-glyphs{display:inline-flex;gap:5px;color:var(--ink)} #automatizacion .au-glyphs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #automatizacion .au-cnt{margin:0;font-family:var(--font-m);font-size:12px;font-weight:400;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} /* channel pills (reference platform badges) */ #automatizacion .au-chan{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--font-m);font-size:11.5px;font-weight:400;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} #automatizacion .au-chan li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--bone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)} #automatizacion .au-chan i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--ink)} #automatizacion .au-title{margin-top:10px} /* reference .rwrv .rw-it: word padding .08em, box inset .12em from the line top and .04em from the line bottom (the shared mask adds .12em below the line, hence .16em here) */ #automatizacion .au-title .hd-i.is-acc{padding:0 .08em;margin:0 -.02em} #automatizacion .au-title .hd-w.is-accw::before{left:.04em;right:.04em;top:.12em;bottom:.16em} #automatizacion .au-title:not(.is-split) mark::before{top:.12em;bottom:.04em} /* reference rwrv: both boxes wipe at a fixed .8s after the reveal, not at word delay + offset */ #automatizacion .au-title .hd-w.is-accw::before{transition-delay:.8s} #automatizacion .au-sub{margin:0;max-width:440px;font-size:17px;line-height:1.55;color:var(--mut)} #automatizacion .au-act{display:flex} /* lock screen ------------------------------------------------------------------------------------------- */ #automatizacion .au-lock{position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;justify-self:end;padding:14px 18px 16px;border-radius:52px;background:var(--night);color:var(--white);box-shadow:0 0 0 6px color-mix(in srgb,var(--ink) 88%,var(--stone)),0 50px 90px -40px color-mix(in srgb,var(--ink) 60%,transparent);overflow:hidden;isolation:isolate} #automatizacion .au-lock::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-30%;height:70%;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);filter:blur(10px);pointer-events:none} #automatizacion .au-glow{position:absolute;z-index:-1;left:50%;top:150px;width:0;height:0;pointer-events:none} #automatizacion .au-glow i{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 7%,transparent)} #automatizacion .au-glow i:nth-child(2){scale:.66} #automatizacion .au-glow i:nth-child(3){scale:1.4} #automatizacion .au-status{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 0;font-family:var(--font-m);font-size:13px;font-weight:600;line-height:1.2} #automatizacion .au-isl{width:96px;height:28px;border-radius:999px;background:#03060F} #automatizacion .au-bat{position:relative;width:24px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--white) 60%,transparent)} #automatizacion .au-bat i{position:absolute;left:3px;top:3px;bottom:3px;width:62%;border-radius:2px;background:var(--accent)} #automatizacion .au-time{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px;text-align:center} #automatizacion .au-lk{width:16px;height:16px;opacity:.85} #automatizacion .au-date{margin:8px 0 0;font-family:var(--font-m);font-size:13px;font-weight:400;line-height:1.3;letter-spacing:.04em;color:color-mix(in srgb,var(--white) 80%,transparent)} #automatizacion .au-clock{margin:2px 0 0;font-family:var(--font-d);font-size:clamp(76px,7vw,96px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} #automatizacion .au-new{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 4px 10px;font-family:var(--font-m);font-size:11px;font-weight:400;line-height:20px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 70%,transparent)} #automatizacion .au-new-c{display:inline-flex;align-items:center;gap:6px;min-width:0} #automatizacion .au-new b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent-2-dark);color:var(--white);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums} /* the stack */ #automatizacion .au-stack{position:relative;height:calc(var(--au-gap)*2 + 30px + var(--au-nh));margin:0;padding:0;list-style:none} #automatizacion .au-note{--i:clamp(0,calc(var(--r,0) - 2),3);position:absolute;left:0;right:0;top:0;z-index:calc(20 - var(--r,0));display:flex;flex-direction:column;gap:10px;min-height:150px;padding:14px 16px 15px;border-radius:24px;background:color-mix(in srgb,var(--white) 90%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 18px 40px -22px rgba(0,0,0,.7);transform-origin:50% 0; transform:translate3d(0,calc(min(var(--r,0),2)*var(--au-gap) + var(--i)*12px),0) scale(calc(1 - var(--i)*.045)); opacity:calc((1 - var(--i)*.28)*(1 - max(0,var(--i) - 2))); transition:transform .95s var(--ease-soft),opacity .55s ease,box-shadow .4s,background .3s;outline:none} #automatizacion .au-note:not(.is-in){z-index:20;transform:translate3d(0,-70px,0) scale(.9);opacity:0;pointer-events:none} #automatizacion .au-app{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:10.5px;font-weight:400;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 62%,transparent)} #automatizacion .au-ico{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--ink)} #automatizacion .au-ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #automatizacion .au-when{margin-left:auto;letter-spacing:.04em;text-transform:none} #automatizacion .au-who{display:flex;align-items:center;gap:10px} #automatizacion .au-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--accent)} #automatizacion .au-av svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #automatizacion .au-nm{display:flex;flex-direction:column;flex:1;min-width:0;margin:0;font-size:12.5px;line-height:1.3;color:var(--mut)} #automatizacion .au-nm b{font-family:var(--font-d);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)} #automatizacion .au-res{flex:none;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:var(--font-m);font-size:11px;font-weight:400;line-height:14px;letter-spacing:.02em;white-space:nowrap} #automatizacion .au-q{margin:0;font-size:14.5px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #automatizacion .au-note.is-new .au-ico{animation:au-ping 1.2s var(--ease-ping) .5s} @keyframes au-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 90%,transparent)}100%{box-shadow:0 0 0 12px transparent}} #automatizacion .au-note:is(:hover,:focus-visible){z-index:40;background:var(--white);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 2px var(--accent)} #automatizacion .au-note:focus-visible{box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 3px var(--accent),0 0 0 5px var(--night)} #automatizacion .au-note:is(:hover,:focus-visible) .au-q{-webkit-line-clamp:12;line-clamp:12} #automatizacion .au-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 4px} #automatizacion .au-foot i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--white) 12%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #automatizacion .au-foot svg{width:20px;height:20px} #automatizacion .au-home{align-self:flex-end;width:130px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--white) 80%,transparent)} /* tablet (reference is-tab: 810–1099) --------------------------------------------------------------------- */ @media (max-width:1099px){ #automatizacion .au-panel{grid-template-columns:1fr;padding:48px 40px} #automatizacion .au-lock{justify-self:center} } /* phone (reference is-ph: ≤809) ----------------------------------------------------------------------------- */ @media (max-width:809px){ #automatizacion{--au-gap:158px;--au-nh:150px;padding:72px 0 80px} #automatizacion .wrap{--pad:12px} #automatizacion .au-panel{padding:40px 16px 16px;border-radius:26px;gap:40px} #automatizacion .au-left{padding:0 6px} #automatizacion .au-big{font-size:96px} #automatizacion .au-sub{font-size:16px} #automatizacion .au-lock{padding:12px 12px 14px;border-radius:40px;box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 88%,var(--stone)),0 40px 70px -40px color-mix(in srgb,var(--ink) 60%,transparent)} #automatizacion .au-clock{font-size:78px} #automatizacion .au-note{padding:13px 13px 14px;border-radius:22px} #automatizacion .au-res{font-size:10.5px;padding:4px 8px} #automatizacion .au-q{font-size:14px} /* Spanish titles are longer than the reference names: on phones the status pill moves up into the app row (replacing the relative time) so every title stays on one line and the notes keep the 150px rhythm */ #automatizacion .au-res{position:absolute;top:12px;right:13px;line-height:14px} #automatizacion .au-when{display:none} #automatizacion .au-nm b{font-size:14px} } /* reduced motion: final stack, no pulses/pings (site.css already zeroes durations) ------------------------------ */ @media (prefers-reduced-motion:reduce){ #automatizacion .au-note{transition:none} #automatizacion .eb>i,#automatizacion .au-note.is-new .au-ico{animation:none} } /* ==== home-12-faq.css ==== */ /* 12 · FAQ (#faq) — reference 41_rwfq (bone, id="faq") Grid 5fr / 7fr. Left: sticky column (top 110px) with eyebrow, H2 and the ink help card. Right: single-open accordion (shared data-accordion) with a 2px progress rail filled green by scaleY(--f) and a 12px node per row that lights when the rail head passes it (--f / [data-hit] written by home-12-faq.js). Layout modes follow the reference component: tablet 810–1099 (1 column, card as a 2-column row, not sticky), phone ≤809 (number above the question, category pill hidden, full-width button). */ #faq{--fq-rail:var(--fog)} #faq .fq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start} /* left column -------------------------------------------------------------------------------- */ #faq .fq-side{align-self:stretch;min-width:0} #faq .fq-stick{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:24px} #faq .fq-title{letter-spacing:-.042em} /* help card (reference .rwfq-card: ink, radius 24, padding 28) */ #faq .fq-card{width:100%;max-width:440px;margin-top:22px;padding:28px;border-radius:24px;background:var(--ink);color:var(--white);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)} #faq .fq-card__l{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-m);font-size:11px;font-weight:400;line-height:normal;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 70%,transparent)} #faq .fq-ring{position:relative;flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent)} #faq .fq-ring::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);animation:fq-ping 1.8s var(--ease-ping) infinite} @keyframes fq-ping{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}} #faq .fq-card__t{margin:14px 0 0;font-family:var(--font-d);font-weight:700;font-size:clamp(24px,2vw,30px);line-height:1.05;letter-spacing:-.035em;color:var(--white);text-wrap:balance} #faq .fq-card__b{margin:10px 0 0;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--white) 72%,transparent)} #faq .fq-btn{margin-top:22px;--chipfg2:var(--accent)} #faq .fq-card__m{margin:18px 0 0;font-size:15px;line-height:normal;color:color-mix(in srgb,var(--white) 70%,transparent)} #faq .fq-card__m a{color:var(--white);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1.5px no-repeat;padding-bottom:2px;transition:color .35s,background-size .4s var(--ease-snap)} #faq .fq-card__m a:hover{color:var(--ink);background-size:100% 100%} #faq .fq-card__r{display:flex;align-items:center;gap:9px;margin:10px 0 0;font-family:var(--font-m);font-size:11px;font-weight:400;line-height:normal;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--white) 60%,transparent)} /* list + progress rail ------------------------------------------------------------------------- */ #faq .fq-list{--f:1;position:relative;min-width:0;padding-left:34px;border-top:1px solid var(--fq-rail)} html.js #faq:not(.is-set) .fq-list{--f:0} #faq .fq-rail{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--fq-rail);pointer-events:none} #faq .fq-rail b{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:top;transform:scaleY(var(--f));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent)} #faq .fq-rail b::after{content:"";position:absolute;left:50%;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--accent);translate:-50% 50%;transform:scaleY(calc(1 / max(var(--f),.01)));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)} /* rows */ #faq .fq-row{position:relative;border-bottom:1px solid var(--fq-rail)} #faq .fq-row::before{content:"";position:absolute;left:-34px;right:0;top:0;bottom:0;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);opacity:0;transition:opacity .35s;pointer-events:none} #faq .fq-dot{position:absolute;z-index:1;left:-39px;top:31px;width:12px;height:12px;border-radius:50%;background:var(--bone);box-shadow:inset 0 0 0 2px var(--fq-rail);transition:background .4s,box-shadow .4s,scale .5s var(--ease-pop)} #faq .fq-row[data-hit] .fq-dot,#faq.is-set .fq-dot,html:not(.js) #faq .fq-dot{background:var(--accent);box-shadow:inset 0 0 0 2px var(--ink);scale:1.15} #faq .fq-q{margin:0;font:inherit} #faq .fq-q button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;width:100%;margin:0;padding:24px 4px 24px 0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} #faq .fq-no{font-family:var(--font-m);font-size:12px;line-height:1.3;letter-spacing:.1em;color:var(--mut)} #faq .fq-qt{font-family:var(--font-d);font-weight:700;font-size:clamp(20px,1.7vw,25px);line-height:1.15;letter-spacing:-.03em;color:var(--fg);transition:translate .5s var(--ease-out)} #faq .fq-g{padding:5px 10px;border-radius:999px;font-family:var(--font-m);font-size:10.5px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--fq-rail);color:var(--mut)} #faq .fq-pl{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent);transition:background .4s,rotate .5s var(--ease-snap),box-shadow .4s} #faq .fq-pl i{position:absolute;width:14px;height:1.8px;border-radius:2px;background:currentColor} #faq .fq-pl i+i{rotate:90deg} #faq .fq-row.is-open .fq-pl{rotate:135deg;background:var(--accent);box-shadow:none} @media (hover:hover){ #faq .fq-row:hover::before{opacity:1} #faq .fq-row:hover .fq-qt{translate:6px 0} #faq .fq-row:not(.is-open):hover .fq-pl{box-shadow:inset 0 0 0 1px var(--ink)} } #faq .fq-q button:focus-visible{outline-offset:3px;border-radius:12px} /* without JS the triggers do nothing and every answer is shown: hide the non-functional +/× toggles */ html:not(.js) #faq .fq-pl{visibility:hidden} /* answers (grid-rows 0fr → 1fr from the shared accordion, .55s snap) */ #faq .fq-a>div{min-height:0;overflow:hidden} #faq .fq-a p{margin:0;padding:0 70px 28px 44px;max-width:720px;font-size:17px;line-height:1.55;color:color-mix(in srgb,var(--ink) 76%,var(--bone));opacity:0;translate:0 -6px;transition:opacity .4s,translate .5s} #faq .fq-row.is-open .fq-a p,html:not(.js) #faq .fq-a p{opacity:1;translate:0 0} #faq .fq-row.is-open .fq-a p{transition-delay:.12s} #faq .fq-a a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1.5px no-repeat;padding-bottom:1px} #faq .fq-a a:hover{background-size:100% 100%} /* tablet 810–1099 (reference is-tab) ------------------------------------------------------------- */ @media (max-width:1099px){ #faq .fq-in{grid-template-columns:minmax(0,1fr);gap:48px} #faq .fq-stick{position:relative;top:auto} #faq .fq-card{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center} #faq .fq-card>*{grid-column:1} #faq .fq-card .fq-btn{grid-column:2;grid-row:1/span 3;margin:0} } /* phone ≤809 (reference is-ph) --------------------------------------------------------------------- */ @media (max-width:809px){ #faq .fq-in{gap:40px} #faq .fq-card{display:block;padding:22px} #faq .fq-card .fq-btn{display:flex;width:100%;margin-top:22px} #faq .fq-card .fq-btn .btn__face{justify-content:space-between} #faq .fq-list{padding-left:24px} #faq .fq-dot{left:-29px;top:25px} #faq .fq-row::before{left:-24px} #faq .fq-q button{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:18px 0} #faq .fq-no{grid-column:1;grid-row:1} #faq .fq-g{display:none} #faq .fq-qt{grid-column:1;grid-row:2;font-size:19px} #faq .fq-pl{grid-column:2;grid-row:1/span 2;width:36px;height:36px} #faq .fq-a p{padding:0 8px 22px 0;font-size:16px} } /* reduced motion: rail full, nodes lit, no ping loop ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ #faq .fq-ring::after{animation:none!important;opacity:0} #faq .fq-list{--f:1!important} #faq .fq-dot{background:var(--accent)!important;box-shadow:inset 0 0 0 2px var(--ink)!important} #faq .fq-row:hover .fq-qt{translate:none} }