/* 04-heroes.css - 4 of 6 - The signature heroes: cube, staircase, funnel, corridor, blueprint, brand sequence; the WhatsApp disc. Order matters: these six files are one stylesheet cut at section boundaries, and every page links them in numeric order. A rule in a later file overrides an earlier one exactly as it did in the single file. Do not reorder the links, and do not add a seventh without updating check.js, which enforces the manifest. */ /* --- Solution cube (soluciones hero) --- */ .cube-stage{--cube:236px;position:relative;width:min(424px,100%);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;perspective:1150px} .cube-bloom{position:absolute;width:var(--cube);height:var(--cube);border-radius:999px;background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 66%);filter:blur(34px)} .cube{position:relative;width:var(--cube);height:var(--cube);transform-style:preserve-3d;transform:translateY(-9px) rotateX(-24deg) rotateY(-40deg);animation:cubeFloat 11s cubic-bezier(.37,0,.63,1) infinite} @keyframes cubeFloat{ 0%,100%{transform:translateY(-9px) rotateX(-24deg) rotateY(-40deg)} 50%{transform:translateY(9px) rotateX(-18deg) rotateY(-26deg)} } .cube-face{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(var(--accent-rgb),.24);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.03));padding:16px;display:grid;grid-template-rows:auto 1fr;gap:13px;overflow:hidden} .cube-face--front{transform:translateZ(calc(var(--cube)/2))} .cube-face--right{transform:rotateY(90deg) translateZ(calc(var(--cube)/2))} .cube-face--top{transform:rotateX(90deg) translateZ(calc(var(--cube)/2))} .cube-face--back{transform:rotateY(180deg) translateZ(calc(var(--cube)/2))} .cube-face--left{transform:rotateY(-90deg) translateZ(calc(var(--cube)/2))} .cube-face--bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube)/2))} .cube-face--back,.cube-face--left,.cube-face--bottom{background:rgba(255,255,255,.03);border-color:var(--line)} .cube-shadow{position:absolute;bottom:9%;width:56%;height:22px;border-radius:999px;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 68%);filter:blur(11px);animation:cubeShadow 11s cubic-bezier(.37,0,.63,1) infinite} @keyframes cubeShadow{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.06);opacity:.85}} .cube-mark{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cw{display:grid;gap:8px;align-content:start} .cw-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.15)} .cw-bar.head{height:12px;width:86%;background:rgba(var(--accent-rgb),.5)} .cw-bar.w70{width:70%}.cw-bar.w45{width:45%} .cw-field{height:22px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)} .cw-cta{height:19px;width:52%;border-radius:999px;background:var(--accent)} .cw-nav{height:17px;border-radius:8px;background:rgba(255,255,255,.09);display:flex;align-items:center;gap:5px;padding:0 7px} .cw-nav i{display:block;width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)} .cw-nav i:first-child{width:21px;background:rgba(var(--accent-rgb),.6)} .cw-root{height:25px;border-radius:9px;border:1px solid rgba(var(--accent-rgb),.34);background:rgba(var(--accent-rgb),.1)} .cw-stem{width:1px;height:11px;background:rgba(255,255,255,.2);justify-self:center} .cw-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .cw-cell{height:31px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045)} .cw-cell.tall{height:42px} .cw-cart{height:23px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:flex-end;padding:0 5px} .cw-cart i{display:block;width:38%;height:12px;border-radius:999px;background:var(--accent)} .cube-visual .visual-float{width:186px} .cube-visual .visual-float.f1{left:-46px;bottom:26px} .cube-visual .visual-float.f2{right:-46px;bottom:6px} .cube-visual .visual-float.f3{right:-30px;top:-10px} @media(max-width:1080px){.cube-stage{--cube:212px}} @media(max-width:720px){.cube-stage{--cube:178px}} @media(prefers-reduced-motion:reduce){ .cube,.cube-shadow{animation:none} .cube{transform:rotateX(-22deg) rotateY(-33deg)} } /* --- Methodology staircase (metodologia hero) --- */ .stair{display:grid;gap:5px} .stair-step{--a:calc(.10 + var(--i) * .042);--b:calc(.18 + var(--i) * .038);position:relative;display:grid;grid-template-columns:58px 1fr;align-items:center;gap:15px;padding:5px 9px 5px 6px;border-radius:14px;margin-left:calc(var(--i) * 13px);transition:background-color .26s ease} .stair-slab{position:relative;width:56px;height:30px;border-radius:9px;display:grid;place-items:center;transform:skewY(-15deg);border:1px solid rgba(var(--accent-rgb),var(--b));background:linear-gradient(145deg,rgba(var(--accent-rgb),var(--a)),rgba(var(--accent-deep-rgb),calc(var(--a) * .6)));transition:transform .26s cubic-bezier(.2,.8,.2,1),background .26s ease,border-color .26s ease,box-shadow .26s ease} .stair-slab:after{content:"";position:absolute;left:-1px;right:-1px;top:100%;height:14px;border-radius:0 0 9px 9px;background:linear-gradient(180deg,rgba(4,8,22,.55),rgba(4,8,22,.82));border:1px solid rgba(var(--accent-rgb),calc(var(--b) * .5));border-top:0} .stair-slab i{position:relative;z-index:1;transform:skewY(15deg);font-family:var(--font-mono);font-size:12px;font-weight:700;font-style:normal;color:var(--accent)} .stair-text b{display:block;font-size:13px;color:#fff} .stair-text>span{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5} .stair-step:hover,.stair-step:focus-within{background-color:rgba(255,255,255,.05)} .stair-step:hover .stair-slab,.stair-step:focus-within .stair-slab{transform:skewY(-15deg) translateY(-3px);border-color:rgba(var(--accent-rgb),.6);background:linear-gradient(145deg,rgba(var(--accent-rgb),calc(var(--a) + .2)),rgba(var(--accent-deep-rgb),calc(var(--a) + .1)));box-shadow:0 12px 26px rgba(0,0,0,.4)} .stair-step:hover .stair-slab i,.stair-step:focus-within .stair-slab i{color:#fff} /* treads arrive one after another once the block scrolls in: each settles in from the right with a soft edge, ~130ms apart, so the flight builds downward */ @keyframes stairIn{from{opacity:0;transform:translate3d(16px,0,0);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}} /* gated on the intro being dismissed: the reveal observer fires at t=0, so an ungated cascade would finish at 1.3s behind an overlay that lifts at 2.15s */ body:has(#siteIntro.hide) .page-visual.visible .stair-step{animation:stairIn .42s cubic-bezier(.22,.85,.28,1) both;animation-delay:calc(300ms + var(--i) * 130ms)} /* --- Conversion funnel (landing-pages hero) --- */ .funnel{position:relative;display:grid;justify-items:center;padding:2px 0 0} .fn-tier{--a:calc(.12 + var(--i) * .055);position:relative;width:calc(100% - var(--i) * 11%);height:46px;margin-bottom:-14px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),calc(.2 + var(--i) * .07));background:linear-gradient(180deg,rgba(var(--accent-rgb),var(--a)),rgba(var(--accent-deep-rgb),calc(var(--a) * .7)));display:grid;place-items:center;transition:background .26s ease,border-color .26s ease,box-shadow .26s ease} .fn-tier span{padding:0 16px;font-size:11px;font-weight:800;line-height:1.2;text-align:center;color:#eaf1ff} .fn-tier:hover{border-color:rgba(var(--accent-rgb),.6);background:linear-gradient(180deg,rgba(var(--accent-rgb),calc(var(--a) + .16)),rgba(var(--accent-deep-rgb),calc(var(--a) + .06)));box-shadow:0 12px 26px rgba(0,0,0,.34)} .fn-tier:hover span{color:#fff} .fn-stem{width:1px;height:26px;margin-top:20px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.55),transparent)} /* tiers settle in from the wide end down, 90ms apart, on the same intro gate as the staircase: the reveal observer fires at t=0, behind a 2.15s overlay */ @keyframes funnelIn{from{opacity:0;transform:translateY(-8px) scaleX(.94)}to{opacity:1;transform:none}} body:has(#siteIntro.hide) .page-visual.visible .fn-tier{animation:funnelIn .44s cubic-bezier(.22,.85,.28,1) both;animation-delay:calc(300ms + var(--i) * 90ms)} /* --- Template corridor (landing-pages hero) -------------------------------- Two rails of cards ride from behind the screen toward the viewer. Perspective does the work: as z grows a card gets bigger AND sweeps outward, because the projection scales position and size together. Ported from a React component; keyframes are precomputed so no JS is needed. Three properties that each fix a specific artefact: 1. depth is authored as apparent SIZE, geometrically - even z-spacing tears the near cards apart from each other 2. the rails open hard then hold (fan 3.3) - parallel rails project to a straight cone with no bend 3. railBirth is NEGATIVE (-8.5, retuned from the source default -11 against this container: swept 0..-16 and only -8..-9 seal it), so a card is born across the axis and sweeps back through centre, keeping the throat covered at all times Every length is cqw, a percentage of the container width, so the corridor keeps its proportions at any size. --------------------------------------- */ @keyframes corridorR{0.00%{transform:translate3d(-8.50cqw,0,-258.46cqw) rotateY(-6.00deg)}4.17%{transform:translate3d(-1.62cqw,0,-225.92cqw) rotateY(-6.92deg)}8.33%{transform:translate3d(4.60cqw,0,-197.04cqw) rotateY(-7.83deg)}12.50%{transform:translate3d(10.21cqw,0,-171.43cqw) rotateY(-8.75deg)}16.67%{transform:translate3d(15.24cqw,0,-148.70cqw) rotateY(-9.67deg)}20.83%{transform:translate3d(19.71cqw,0,-128.54cqw) rotateY(-10.58deg)}25.00%{transform:translate3d(23.68cqw,0,-110.65cqw) rotateY(-11.50deg)}29.17%{transform:translate3d(27.18cqw,0,-94.78cqw) rotateY(-12.42deg)}33.33%{transform:translate3d(30.23cqw,0,-80.70cqw) rotateY(-13.33deg)}37.50%{transform:translate3d(32.87cqw,0,-68.21cqw) rotateY(-14.25deg)}41.67%{transform:translate3d(35.13cqw,0,-57.13cqw) rotateY(-15.17deg)}45.83%{transform:translate3d(37.06cqw,0,-47.30cqw) rotateY(-16.08deg)}50.00%{transform:translate3d(38.67cqw,0,-38.58cqw) rotateY(-17.00deg)}54.17%{transform:translate3d(40.00cqw,0,-30.84cqw) rotateY(-17.92deg)}58.33%{transform:translate3d(41.08cqw,0,-23.98cqw) rotateY(-18.83deg)}62.50%{transform:translate3d(41.94cqw,0,-17.89cqw) rotateY(-19.75deg)}66.67%{transform:translate3d(42.60cqw,0,-12.48cqw) rotateY(-20.67deg)}70.83%{transform:translate3d(43.10cqw,0,-7.69cqw) rotateY(-21.58deg)}75.00%{transform:translate3d(43.46cqw,0,-3.44cqw) rotateY(-22.50deg)}79.17%{transform:translate3d(43.70cqw,0,0.33cqw) rotateY(-23.42deg)}83.33%{transform:translate3d(43.86cqw,0,3.68cqw) rotateY(-24.33deg)}87.50%{transform:translate3d(43.95cqw,0,6.65cqw) rotateY(-25.25deg)}91.67%{transform:translate3d(43.99cqw,0,9.28cqw) rotateY(-26.17deg)}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}} @keyframes corridorL{0.00%{transform:translate3d(8.50cqw,0,-258.46cqw) rotateY(6.00deg)}4.17%{transform:translate3d(1.62cqw,0,-225.92cqw) rotateY(6.92deg)}8.33%{transform:translate3d(-4.60cqw,0,-197.04cqw) rotateY(7.83deg)}12.50%{transform:translate3d(-10.21cqw,0,-171.43cqw) rotateY(8.75deg)}16.67%{transform:translate3d(-15.24cqw,0,-148.70cqw) rotateY(9.67deg)}20.83%{transform:translate3d(-19.71cqw,0,-128.54cqw) rotateY(10.58deg)}25.00%{transform:translate3d(-23.68cqw,0,-110.65cqw) rotateY(11.50deg)}29.17%{transform:translate3d(-27.18cqw,0,-94.78cqw) rotateY(12.42deg)}33.33%{transform:translate3d(-30.23cqw,0,-80.70cqw) rotateY(13.33deg)}37.50%{transform:translate3d(-32.87cqw,0,-68.21cqw) rotateY(14.25deg)}41.67%{transform:translate3d(-35.13cqw,0,-57.13cqw) rotateY(15.17deg)}45.83%{transform:translate3d(-37.06cqw,0,-47.30cqw) rotateY(16.08deg)}50.00%{transform:translate3d(-38.67cqw,0,-38.58cqw) rotateY(17.00deg)}54.17%{transform:translate3d(-40.00cqw,0,-30.84cqw) rotateY(17.92deg)}58.33%{transform:translate3d(-41.08cqw,0,-23.98cqw) rotateY(18.83deg)}62.50%{transform:translate3d(-41.94cqw,0,-17.89cqw) rotateY(19.75deg)}66.67%{transform:translate3d(-42.60cqw,0,-12.48cqw) rotateY(20.67deg)}70.83%{transform:translate3d(-43.10cqw,0,-7.69cqw) rotateY(21.58deg)}75.00%{transform:translate3d(-43.46cqw,0,-3.44cqw) rotateY(22.50deg)}79.17%{transform:translate3d(-43.70cqw,0,0.33cqw) rotateY(23.42deg)}83.33%{transform:translate3d(-43.86cqw,0,3.68cqw) rotateY(24.33deg)}87.50%{transform:translate3d(-43.95cqw,0,6.65cqw) rotateY(25.25deg)}91.67%{transform:translate3d(-43.99cqw,0,9.28cqw) rotateY(26.17deg)}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}} .corridor{position:relative;overflow:hidden;container-type:inline-size;min-height:560px;display:grid;padding:0} .corridor-stage{position:absolute;inset:0;pointer-events:none;perspective:30cqw;perspective-origin:50% 55%} .corridor-rails{position:absolute;inset:0;transform-style:preserve-3d} .corridor-card{position:absolute;left:50%;top:55%;width:18cqw;height:25cqw;margin-left:-9.00cqw;margin-top:-12.50cqw;border-radius:0.4cqw;overflow:hidden;backface-visibility:hidden;background:var(--lienzo,#f4f8ff);box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.45);animation-duration:18s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(var(--i) * -2.000s)} .corridor-card.r{animation-name:corridorR} .corridor-card.l{animation-name:corridorL} .corridor-card img{width:100%;height:100%;object-fit:cover;display:block} /* stand-in until the real template exports land: the site's own light mockup language, so the corridor is testable and each card swaps to an alone */ .corridor-chrome{height:14%;background:var(--dark);display:flex;align-items:center;gap:.35cqw;padding:0 .8cqw} .corridor-chrome i{width:.55cqw;height:.55cqw;border-radius:999px;background:rgba(255,255,255,.34)} .corridor-shot{height:86%;padding:1.1cqw;display:grid;gap:.7cqw;align-content:start;background:linear-gradient(180deg,#f4f8ff,#e9f0fa)} .corridor-shot b{display:block;height:1.6cqw;width:74%;border-radius:.3cqw;background:var(--accent-deep)} .corridor-shot i{display:block;height:.75cqw;border-radius:.3cqw;background:#c3d1e4} .corridor-shot i.s{width:52%} .corridor-shot u{display:block;height:1.4cqw;width:38%;border-radius:999px;background:var(--accent-mid);margin-top:.4cqw} .corridor-copy{position:relative;z-index:2;display:grid;align-content:center;justify-items:start;padding:72px 0} .corridor-copy>*{max-width:660px} /* the corridor is atmosphere; it must never outweigh the copy on top of it */ .corridor:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,8,22,.94) 0%,rgba(4,8,22,.82) 38%,rgba(4,8,22,.35) 72%,rgba(4,8,22,.6) 100%)} @media(max-width:1080px){.corridor{min-height:500px}.corridor:before{background:linear-gradient(180deg,rgba(4,8,22,.72) 0%,rgba(4,8,22,.88) 60%,rgba(4,8,22,.94) 100%)}} /* Below 720 the corridor used to be display:none under Decoration Drops First. That rule is for ornament, and this is not ornament - it is the only thing on the landing-pages hero that shows what a landing page IS, so a phone got the page's argument with the argument missing. It is re-laid rather than merely re-shown. On desktop the cards fly behind copy that sits to the left, so they clear it horizontally. A phone has no horizontal room to clear anything, so the corridor is given the top of the frame and the copy the bottom: the vanishing point moves up, the cards are anchored to it, and the scrim turns into a hard floor under the headline instead of a wash across the whole hero. Nothing is scaled down - every length is already cqw. */ @media(max-width:720px){ .corridor{min-height:452px} /* Anchor and scrim are in PIXELS, not percentages. The desktop rule can use % because the copy sits beside the cards; stacked, the section's height is set by how long the copy runs, so a % anchor and a % gradient stop both drift when the text reflows - and they drift by different amounts, which is how cards ended up ghosting through the headline. Pixels tie the flight band and the scrim to each other and to nothing else. */ .corridor-stage{perspective-origin:50% 232px} .corridor-card{top:232px} .corridor:before{background:linear-gradient(180deg, rgba(4,8,22,.08) 0px,rgba(4,8,22,.18) 150px,rgba(4,8,22,.55) 250px, rgba(4,8,22,.93) 330px,rgba(4,8,22,.98) 400px,rgba(4,8,22,.98) 100%)} .corridor-copy{padding:420px 0 30px} } @media(prefers-reduced-motion:reduce){ /* paused, not disabled: every card is already mid-flight from its negative delay, so it freezes as a finished still instead of collapsing to the axis */ .corridor-card{animation-play-state:paused!important;animation-duration:18s!important} } /* --- Institutional blueprint (websites hero) ------------------------------------ An institutional building assembling itself in isometric wireframe, one stage at a time: grid, foundation, columns, floor plate, glazing, upper volume, roof. Deliberately NO fills and no glass anywhere - it is a blueprint, so every mass is described by its edges. Colour is the brand ramp rather than the reference's cyan/white, with alpha carrying depth per the Alpha Channel Rule: the grid sits at .08 and the roof, arriving last, is the only element at full accent. Each path carries pathLength="1", so one dashoffset animation draws lines of any real length at the same rate. Stage index --s is set on the group and inherits down. Plays once and holds - a finished institution, not a loop. */ .bp{display:block;width:100%;height:auto;overflow:visible} .bp path{stroke-dasharray:1;stroke-dashoffset:0} @keyframes bpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes bpNode{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}} .bp circle{transform-box:fill-box;transform-origin:center} /* same intro gate as the staircase and funnel: the reveal observer fires at t=0, behind an overlay that does not lift until 2.15s */ body:has(#siteIntro.hide) .page-visual.visible .bp path{animation:bpDraw .85s ease-out both;animation-delay:calc(300ms + var(--s) * 550ms)} body:has(#siteIntro.hide) .page-visual.visible .bp circle{animation:bpNode .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(760ms + var(--s) * 550ms)} .bp-stage{display:grid;place-items:center;width:100%;padding:6px 0} @media(max-width:720px){.bp-stage{padding:0}} @media(prefers-reduced-motion:reduce){ /* the finished building, immediately - never withhold content behind motion */ body:has(#siteIntro.hide) .page-visual.visible .bp path, body:has(#siteIntro.hide) .page-visual.visible .bp circle{animation:none} } /* --- SVP brand sequence (nosotros hero) ----------------------------------------- Two beats from the owner's brand film, ending on the split and holding there: 1 the SVP monogram, rule and strapline 0.35 - 2.45s 2 it splits into S / V / P, one per pilar 2.05s -> held The display face is Bodoni Moda, matched to the film: a true Didone with extreme stroke contrast and flat unbracketed hairline serifs. That is a deliberate, owner-requested departure from DESIGN.md's One Family Rule, which admits only Chivo; the serif is confined to these letterforms and must not spread to headings or prose. Labels and descriptors stay in Chivo. The film's accents are blue - here every rule, tick and dot is the accent ramp. Its grid backdrop is omitted: HANDOFF records .intro-grid as deliberately the only grid on the site. Beat 2 is the resting state, so its text is real content, not decoration. */ .svp-anim{position:relative;width:100%;min-height:380px;display:grid;place-items:center} .svp-beat{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center} .svp-glow{position:absolute;width:60%;aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,rgba(var(--accent-rgb),.14),transparent 68%);filter:blur(30px);pointer-events:none} .svp-mark{opacity:0} .svp-word{display:block;font-family:var(--font-serif);font-size:clamp(78px,14vw,140px);font-weight:500;letter-spacing:-.045em;line-height:.9;color:#fff} .svp-rule{display:block;width:210px;height:1px;margin:22px auto 13px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9),transparent)} .svp-strap{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .svp-cols{grid-template-columns:repeat(3,1fr);gap:12px;align-items:start;width:100%} .svp-col{display:grid;justify-items:center} .svp-col b{display:block;font-family:var(--font-serif);font-size:clamp(56px,10vw,96px);font-weight:500;letter-spacing:-.03em;line-height:.9;color:#fff} .svp-col i{display:block;width:1px;height:38px;margin:14px 0 8px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.9),rgba(var(--accent-rgb),.2));position:relative} .svp-col i:after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)} .svp-col em{display:block;font-style:normal;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:7px} .svp-col>span{display:block;font-size:11px;line-height:1.5;color:var(--muted);max-width:16ch} @keyframes svpMark{ 0%{opacity:0;letter-spacing:.34em;transform:translateY(12px) scale(.95);filter:blur(7px)} 20%{opacity:1;letter-spacing:-.045em;transform:none;filter:blur(0)} 78%{opacity:1;letter-spacing:-.045em;transform:none;filter:blur(0)} 100%{opacity:0;transform:scale(1.08);filter:blur(6px)} } @keyframes svpTrim{0%{opacity:0;transform:scaleX(.2)}22%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0}} @keyframes svpColIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes svpSplit{from{transform:translateX(calc((1 - var(--c)) * 128px)) scale(1.45)}to{transform:none}} @keyframes svpGlow{0%{opacity:0}30%{opacity:1}100%{opacity:.55}} /* same intro gate as the other heroes: the reveal observer fires at t=0, behind an overlay that does not lift until 2.15s */ body:has(#siteIntro.hide) .page-visual.visible .svp-mark{animation:svpMark 2.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.35s} body:has(#siteIntro.hide) .page-visual.visible .svp-rule, body:has(#siteIntro.hide) .page-visual.visible .svp-strap{animation:svpTrim 2.1s ease both;animation-delay:.45s} body:has(#siteIntro.hide) .page-visual.visible .svp-cols{animation:svpColIn .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:2.05s} body:has(#siteIntro.hide) .page-visual.visible .svp-col b{animation:svpSplit .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:2.05s} body:has(#siteIntro.hide) .page-visual.visible .svp-glow{animation:svpGlow 3s ease both;animation-delay:.35s} @media(max-width:720px){ .svp-anim{min-height:300px} .svp-col>span{font-size:10px;max-width:13ch} .svp-col em{font-size:11px;letter-spacing:.08em} .svp-rule{width:150px} } @media(prefers-reduced-motion:reduce){ /* the split state, immediately - it is the resting state and carries content */ body:has(#siteIntro.hide) .page-visual.visible .svp-mark, body:has(#siteIntro.hide) .page-visual.visible .svp-rule, body:has(#siteIntro.hide) .page-visual.visible .svp-strap, body:has(#siteIntro.hide) .page-visual.visible .svp-glow{animation:none;opacity:0} body:has(#siteIntro.hide) .page-visual.visible .svp-cols, body:has(#siteIntro.hide) .page-visual.visible .svp-col b{animation:none} } /* --- WhatsApp thumb button --- */ .wa-fab{position:fixed;right:16px;bottom:16px;z-index:95;display:inline-flex;align-items:center;justify-content:center;padding:18px;border-radius:999px;border:3px solid #fff;background:linear-gradient(135deg,var(--accent-mid),var(--accent));color:#05111d;box-shadow:0 14px 34px rgba(0,0,0,.42);transition:transform .22s ease,box-shadow .22s ease} .wa-fab svg{width:28px;height:28px;flex:0 0 28px;fill:#05111d} .wa-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.5)} body.menu-open .wa-fab{opacity:0;visibility:hidden} /* the auditoria form already composes a qualified WhatsApp message; a floating shortcut to the same channel would overlap its submit and open an empty chat */ body[data-page="auditoria"] .wa-fab{display:none} @media(max-width:720px){ .stair-step{margin-left:calc(var(--i) * 7px)} .fn-tier{height:42px;margin-bottom:-12px} .wa-fab{right:12px;bottom:12px} /* "body footer" on purpose: the footer section is later in the file, so a bare "footer" selector here loses on source order and the clearance never lands */ body footer{padding-bottom:104px} } @media(prefers-reduced-motion:reduce){ .wa-fab:hover{transform:none} .stair-step:hover .stair-slab,.stair-step:focus-within .stair-slab{transform:skewY(-15deg)} /* animation:none, not a shorter duration: the global rule clamps duration but not delay, which would otherwise hold the last tread invisible for ~900ms */ body:has(#siteIntro.hide) .page-visual.visible .stair-step, body:has(#siteIntro.hide) .page-visual.visible .fn-tier{animation:none} }