already in the markup - two breaks, and the gap between ABOUT and ADEGA GAUCHA read as double line-height. The homepage keeps its second line inline (span.ag-about__title-em) and lets the
do the break, so the two lines sit at the 80px line-height. */ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title em{font-style:italic;display:inline} /* 6. Desktop labels either side of the title. Static text, not links. */ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__links{display:none} /* 7. Button: translucent cream fill behind cream type, per Figma mobile. */ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button{ position:relative;overflow:hidden;isolation:isolate; height:56px;width:100%; -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); } .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button::before{ content:'';position:absolute;inset:0;z-index:-1; background:#FA8722; clip-path:circle(0px at var(--x,50%) var(--y,50%)); transition:clip-path .4s ease-out; } .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button:hover::before{ clip-path:circle(150% at var(--x,50%) var(--y,50%)); } @media (max-width:360px){ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{font-size:40px;line-height:42px} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p{font-size:19px;line-height:22px;letter-spacing:.07em} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p{font-size:13px;line-height:19px} } @media (min-width:1024px){ .elementor-34148 .elementor-element.elementor-element-agabt001{padding:40px 0 !important;min-height:800px} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__head{width:602px;height:160px;position:relative} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__kicker{display:none} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{font-style:normal;white-space:nowrap} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title em{font-style:italic} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__links{ display:block;position:absolute;left:50%;top:68px;width:0;height:24px;z-index:3; } .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__link{ position:absolute;top:0;height:24px;white-space:nowrap; font-family:VOLTE,Figtree,sans-serif;font-size:12px;font-weight:500; line-height:24px;letter-spacing:.2em;text-transform:uppercase;color:#F6EBDD; } .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__link--l{right:260px;text-align:right} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__link--r{left:260px;text-align:left} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement{margin-top:160px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body{margin-top:136px !important} } /* Same structure as the main homepage: the poster sits behind the video as the section's own background, so the section is never bare while the video loads or when a mobile browser blocks autoplay. The homepage does this with --ag-about-poster on .ag-about; here it is Elementor's native background fallback plus the ink base. */ .elementor-34148 .elementor-element.elementor-element-agabt001{ background-color:#141414 !important; background-image:url(https://adegagaucha.com/wp-content/uploads/2026/09/About-adega-home-section.png) !important; background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important; } .elementor-34148 .elementor-element.elementor-element-agabt001 .elementor-background-video-container{z-index:0} /* ------------------------------------------------------------------ Type ladder aligned to the main homepage (post 14) and Figma. Elementor only offers one 'tablet' step, so the 768-1023 tier was missing and phone widths were inheriting desktop widths: title 48/48 <768 | 64/64 768-1023 | 80/80 1024+ statement 22/24 <768 | 25/29 768-1023 | 28/32 1024+ body 14/20 <768 | 16/24 768-1023 | 16/24 1024+ measure 343px <768 | none/600px | 675/686px button 100% (max 343) <768 | 320px 768+ ------------------------------------------------------------------ */ @media (max-width:767px){ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{font-size:48px !important;line-height:48px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement{width:auto !important;max-width:343px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p{font-size:22px !important;line-height:24px !important;letter-spacing:.1em !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement br{display:none !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body{width:auto !important;max-width:343px !important;min-height:120px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p{font-size:14px !important;line-height:20px !important;font-weight:500 !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn{width:100% !important;max-width:343px !important} } @media (min-width:768px) and (max-width:1023px){ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{font-size:64px !important;line-height:64px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement{width:auto !important;max-width:none !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p{font-size:25px !important;line-height:29px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body{width:auto !important;max-width:600px !important;min-height:0 !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p{font-size:16px !important;line-height:24px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn{width:320px !important;max-width:none !important} } @media (min-width:1024px){ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement br{display:inline !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p{font-size:28px !important;line-height:32px !important} .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p{font-size:16px !important;line-height:24px !important;font-weight:500 !important} } /* Figma desktop stack check (section 1440x800, node 1:27): 40 top padding + 160 title block (2 lines at 80/80) + 160 statement margin -> statement top 360, 96 tall (3 x 32) + 136 body margin -> body top 592, 72 tall (3 x 24) + 40 button margin -> button top 704, 56 tall + 40 bottom padding = 800. Matches Figma exactly. Figma mobile (node 1:668): head top 20 (kicker 12/24 + gap 4 + title 48/48 italic = 124), statement top 224 (gap 80), body top 408 (gap 64, 14/20, not uppercase), button gap 40. Also matches. */ .elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__head{position:relative} /* ------------------------------------------------------------------ The statement and the body are text-editor widgets, so their copy is wrapped in
. Astra gives every paragraph a bottom margin (1.5em),
which was adding ~33px under the statement and ~24px under the body.
That is the drift: in Figma the statement block is exactly 96px tall
(3 lines at 32) and the body exactly 72px (3 lines at 24), and the
80/64/40 gaps below them are measured from those heights. Zeroing the
paragraph margins puts every block back on the Figma stack.
------------------------------------------------------------------ */
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p,
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p{margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement p + p,
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body p + p{margin-top:0 !important}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__statement .elementor-widget-container,
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__body .elementor-widget-container{margin:0 !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{margin:0 !important}
/* Italic 'A' of ADEGA clipped on the left.
An italic capital's leading stroke leans out past its glyph box, and
the section clips (overflow) at its own edge, so the first letter of
the italic line lost its tip. The heading gets a small left padding
with an equal negative margin, which hands the glyph the room it needs
while leaving the text's position identical - the same trick the
rewards headline already uses for the italic 'J' of JOIN.
Applies at every width. */
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{
padding-left:.14em !important;
margin-left:-.14em !important;
}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title{overflow:visible !important}
/* The negative margin was the problem: it pulled the glyph straight back
out of the box the padding had just created, so the italic A still had
nowhere to lean. The padding stays and the compensating margin is
dropped - the line sits about 11px further right at 80px, which is the
cost of keeping the letter whole. overflow is opened on the head and
the heading so no ancestor can trim the overhang either. */
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__title .elementor-heading-title{
padding-left:.16em !important;
margin-left:0 !important;
overflow:visible !important;
}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__head{overflow:visible !important}
/* Statement paragraph: the Animation Addons text-reveal split it into
characters and scrubbed them against the scroll, which is what left
letters at mixed opacity mid-flight. It is gone. In its place is
Elementor's own fadeIn at the slow duration - one soft fade of the
whole block, no per-letter motion, identical on mobile and desktop.
Any split spans the plugin may still emit are pinned visible so a
half-resolved scrub can never leave the copy faded. */
/* ABOUT US button hover, brought in line with the rest of the site.
It was wiping to orange with the label left cream - every other
button here wipes to cream and turns its label ink. The wipe circle
is now #F6EBDD and the text goes #141414, matching the churrasco,
rewards, guest-list and reserve buttons. Geometry and the cursor
origin are unchanged. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button::before{background:#F6EBDD !important}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button:hover,
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button:focus-visible{color:#141414 !important}
}
/* ABOUT US - finished to match the hero, at every width.
Two problems remained. First, the wipe colour disagreed across
breakpoints: the base rule painted the circle #FA8722 while the
desktop block painted it #F6EBDD, so the button hovered orange on
phones and cream on desktop. It is cream everywhere now, since this
is a translucent-cream button with cream type - the same treatment as
the churrasco, rewards and guest-list buttons. Second, the hero adds
an inset cream ring on hover and drops its resting border; both are
applied here so the outline does not double up with the ring. The
clip-path timing and pointer origin are already the hero's. */
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button::before{background:#F6EBDD !important}
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button:hover,
.elementor-34148 .elementor-element.elementor-element-agabt001 .ag-about__btn .elementor-button:focus-visible{
color:#141414 !important;
box-shadow:0 0 0 1px rgba(246,235,221,.7) inset !important;
border-color:transparent !important;
}
/* Joint with the awards section.
The about video's scrim ends at rgba(20,20,20,.7) while the awards
section below is solid #141414, so there was a visible luminance step
right on the boundary - a dark band across the bottom of the video.
This fades the last 160px of the section from transparent to solid
#141414 so the video dissolves into the next section's colour. It
sits above the video but below the content (z-index 1, the copy is
z-index 2+), and is pointer-events:none so nothing becomes
unclickable. The existing ::before scrim is unchanged. */
.elementor-34148 .elementor-element.elementor-element-agabt001{position:relative}
.elementor-34148 .elementor-element.elementor-element-agabt001::after{
content:'';position:absolute;left:0;right:0;bottom:-2px;
height:162px;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.55) 45%,#141414 100%);
}
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agabt001::after{height:120px}
}
/* 2px solid extension at the very bottom edge.
The gradient resolves to #141414 at its last stop, but a sub-pixel
rounding gap can still leave a hairline where the two sections meet.
The fade now runs 2px past the section's bottom edge so the solid end
of the gradient covers that seam completely. */
.elementor-34148 .elementor-element.elementor-element-agabt001::after{bottom:-2px !important}
/* The bottom fade was painting UNDER the video.
Elementor's background-video container only had z-index:0 from 1024px
up, so below that it sat at its default and covered the section's
::after - which is why the seam survived the previous fix. The
container is pinned to z-index 0 at every width, and the fade raised
just above it, still below the copy (z-index 2+). */
.elementor-34148 .elementor-element.elementor-element-agabt001 .elementor-background-video-container,
.elementor-34148 .elementor-element.elementor-element-agabt001 .elementor-background-video-embed,
.elementor-34148 .elementor-element.elementor-element-agabt001 .elementor-background-video-hosted{z-index:0 !important}
.elementor-34148 .elementor-element.elementor-element-agabt001::after{z-index:1 !important}
/* THE BLANK SPACE - it is not the locations section at all.
The About section that follows carries --min-height:800px as a BASE
value, so it applies at every width. On mobile its content is far
shorter than 800, so the section reserved the difference as empty
background - the dark band you see under Dunwoody. It now sizes to
its content below 1024; desktop keeps the 800 exactly as before. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agabt001{--min-height:0px !important;min-height:0 !important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agawd001 *//* ============================================================
ADEGA GAUCHA - AWARDS (Home 3)
Ported from the approved build on the main homepage (post 14,
section 443fc1a). Entrance animations intentionally omitted;
everything is in its resting state.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agawd001{--kit-widget-spacing:0px;--ag-hair:rgba(246,235,221,.1);--ag-badge-overlap-l:45.5px;--ag-badge-overlap-r:46.2px}
.elementor-34148 .elementor-element.elementor-element-agawd001{padding:48px 16px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__inner{position:relative;max-width:346px;margin:0 auto;width:100%}
/* full-bleed */
.elementor-34148 .elementor-element.elementor-element-agawd001{width:100vw !important;margin-left:calc(-50vw + 50%) !important;overflow-x:clip !important}
/* glow */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{
position:absolute;left:50%;top:190px;transform:translate(-50%,-50%);
pointer-events:none;z-index:0;max-width:none;display:block;filter:blur(40px);
-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 75%);
mask-image:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 75%);
}
/* head */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__head{position:relative;z-index:1;height:40px;display:flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:12px !important;width:auto !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__head > .elementor-element{width:auto !important;max-width:none !important;flex:0 0 auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__laurel img{display:block;width:26px;height:40px;object-fit:contain}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{white-space:nowrap;padding-left:.5em}
/* badges - three overlapping marks */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{
position:relative;z-index:1;margin-top:12px !important;
display:flex !important;flex-direction:row !important;align-items:center;justify-content:center;
gap:0 !important;transform:scale(.85);transform-origin:center;width:auto !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge{position:relative;flex:0 0 auto !important;width:auto !important;margin:0}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge img{display:block;object-fit:contain}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--left{z-index:1;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--left img{width:651.84px;height:285.52px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--center{z-index:2}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--center img{width:172px;height:172px;border-radius:400px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--right{z-index:1;margin-left:calc(var(--ag-badge-overlap-r) * -1) !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--right img{width:198px;height:206px}
/* caption */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__caption{position:relative;z-index:1;margin:32px auto 0 !important;max-width:343px !important}
/* cards */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__cards{position:relative;z-index:1;margin:32px auto 0 !important;max-width:343px;display:flex !important;flex-direction:column !important;width:100% !important;gap:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__card{position:relative;height:80px;min-height:80px;border-radius:6px;box-shadow:inset 0 0 0 .5px var(--ag-hair),0 0 0 .5px var(--ag-hair)}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__card--rating{display:flex !important;flex-direction:column !important;align-items:center;gap:21px !important;padding:20px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__card--cta{
background-image:
linear-gradient(100.555deg,rgba(246,235,221,0) 44.92%,rgba(246,235,221,.0175) 61.99%,rgba(246,235,221,0) 79.05%),
linear-gradient(113.835deg,rgba(246,235,221,0) 20.48%,rgba(246,235,221,.035) 31.88%,rgba(246,235,221,0) 43.27%);
display:flex !important;flex-direction:column !important;align-items:flex-start;justify-content:center;gap:12px !important;padding:12px !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating{align-self:stretch;height:40px;display:flex !important;flex-direction:row !important;align-items:center;gap:12px !important;transform:translateX(-7px);width:auto !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating > .elementor-element{margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__gblock{flex:0 0 72px !important;width:72px !important;height:38px;display:flex !important;flex-direction:column !important;align-items:center;justify-content:center;gap:4px !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__gblock > .elementor-element{width:auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__google{display:block;width:72px;height:24px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars{display:flex;flex-direction:row;align-items:center;gap:2px;width:58px;height:10px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars svg{display:block;width:10px;height:10px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rule{flex:0 0 1px !important;width:1px !important;min-width:1px;align-self:stretch;background:var(--ag-hair);padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score{flex:1 1 auto !important;min-width:0;height:40px;display:flex !important;flex-direction:row !important;align-items:center;gap:10px !important;width:auto !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score > .elementor-element{width:auto !important;margin:0 !important;flex:0 0 auto !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score-txt{flex:1 1 auto !important;min-width:0;display:flex !important;flex-direction:column !important;align-items:flex-start;justify-content:center;width:auto !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score-txt > .elementor-element{width:auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score-n .elementor-heading-title,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l1 .elementor-heading-title,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l2 .elementor-heading-title{white-space:nowrap;margin:0 !important}
/* cta button */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn{align-self:stretch;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button{
height:56px;width:100%;position:relative;overflow:hidden;isolation:isolate;
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
box-shadow:inset 0 0 0 1px rgba(246,235,221,.4);
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button::before{
content:'';position:absolute;inset:0;z-index:-1;background:#F6EBDD;
clip-path:circle(0px at var(--x,50%) var(--y,50%));transition:clip-path .4s ease-out;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:hover::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:hover{box-shadow:inset 0 0 0 1px rgba(246,235,221,.7)}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{transform:translate(-50%,-50%) scaleX(1.5) scaleY(.95) !important;width:100vw !important;max-width:500px !important;height:auto !important;opacity:.85}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__card--rating{padding:20px 12px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating{gap:8px !important;justify-content:center}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score{gap:8px !important}
}
@media (max-width:360px){
.elementor-34148 .elementor-element.elementor-element-agawd001{padding:40px 12px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{font-size:11px;letter-spacing:.3em;padding-left:.3em}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{transform:scale(.75)}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__caption p{font-size:12px;letter-spacing:.08em}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l1 .elementor-heading-title{font-size:9px;letter-spacing:.01em}
}
@media (min-width:768px){
.elementor-34148 .elementor-element.elementor-element-agawd001{padding:72px 24px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__inner{max-width:911px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{top:194px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{margin-top:16px !important;transform:scale(1)}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__caption{max-width:686px !important;margin-top:40px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__cards{max-width:686px;margin-top:40px !important;flex-direction:row !important;align-items:center}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__card{flex:0 0 343px !important;width:343px !important}
}
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agawd001{padding:96px 0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__inner{width:911px;max-width:none}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{top:251px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{margin-top:16px !important;height:443.52px;--ag-badge-overlap-l:74.6px;--ag-badge-overlap-r:76.9px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--left img{width:1065.14px;height:443.52px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--center img{width:280px;height:280px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badge--right img{width:324px;height:320px}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating{width:303px;align-self:auto}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l1 .elementor-heading-title{font-size:11px;letter-spacing:.04em}
}
/* ------------------------------------------------------------
CTA hover, matching the main homepage exactly: the button box
is transparent, ::after carries the translucent cream fill and
::before is the wipe that grows from the cursor. A native
background-color would have painted over ::after and left the
hover looking flat.
------------------------------------------------------------ */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button{
background:transparent !important;
position:relative !important;overflow:hidden !important;z-index:1 !important;
transition:color .4s ease, box-shadow .3s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button::after{
content:'';position:absolute;inset:0;z-index:-2;
background:rgba(246,235,221,.25);
transition:background .3s ease;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button::before{
content:'';position:absolute;
top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;
background:#F6EBDD;
clip-path:none;
transition:width .4s ease-out, height .4s ease-out, top .1s, left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:hover::before,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:focus-visible::before{
width:800px;height:800px;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:hover,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__btn .elementor-button:focus-visible{
color:#141414 !important;
box-shadow:inset 0 0 0 1px rgba(246,235,221,.7) !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__js{display:none !important}
/* ------------------------------------------------------------
MOBILE: Elementor sets --flex-wrap-mobile:wrap on every
container, which broke the three badges onto separate lines and
split the rating card's Google block from its score. Every row in
this section must stay on one line at all sizes.
------------------------------------------------------------ */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__head,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__gblock,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars{
flex-wrap:nowrap !important;
--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges > .elementor-element{flex-shrink:0 !important}
@media (max-width:767px){
/* natural row is 470px wide; scale it to sit inside the 343 column
instead of being cropped by the section's overflow */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{transform:scale(.72);transform-origin:center;margin-top:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__rating{transform:none;gap:8px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score-n .elementor-heading-title{font-size:34px !important;line-height:36px !important}
}
@media (max-width:360px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__badges{transform:scale(.60)}
}
/* ------------------------------------------------------------
SCROLL JITTER
The glow is a large image carrying filter:blur(40px) and a mask,
positioned with a percentage transform. On scroll the browser
re-rasterised it every frame and the heading sitting above it
shimmered. Promoting it to its own compositor layer (translate3d
+ will-change + backface-visibility) means it is painted once and
only moved thereafter. The head is given a fixed box so nothing
above it can reflow either.
------------------------------------------------------------ */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{
transform:translate3d(-50%,-50%,0) !important;
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
contain:paint;
}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{
transform:translate3d(-50%,-50%,0) scaleX(1.5) scaleY(.95) !important;
}
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__head{
height:40px;min-height:40px;
transform:translateZ(0);
backface-visibility:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
transform:translateZ(0);
-webkit-font-smoothing:antialiased;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__laurel img{transform:translateZ(0)}
/* viewport-entry stagger for the 5 stars. Runs only when .ag-awd-run is
added by the section script, so the static state is unchanged. The star
boxes stay 10x10 inside the fixed 58x10 row, so nothing can reflow. */
@keyframes agStarPop{0%{opacity:0;transform:scale(.35) rotate(-30deg)}62%{opacity:1;transform:scale(1.2) rotate(0deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg{opacity:0;transform-origin:50% 50%;animation:agStarPop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg:nth-child(1){animation-delay:.05s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg:nth-child(2){animation-delay:.17s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg:nth-child(3){animation-delay:.29s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg:nth-child(4){animation-delay:.41s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__stars.ag-awd-run svg:nth-child(5){animation-delay:.53s}
/* Three values corrected against Figma node 1:58.
1. Caption. Figma sets it at 40% cream (rgba(246,235,221,0.4)) so the
award list reads as secondary to the badges above it. It was
inheriting full-strength cream and competing with the headline.
2. Review-count line. Figma: 12px/16px, 0.050em. The desktop override
had it at 11px/0.04em.
Sizes, colours and spacing of everything else in the section are
already exact and are not touched. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__caption,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__caption p{color:rgba(246,235,221,.4) !important}
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l1 .elementor-heading-title{font-size:12px !important;line-height:16px !important;letter-spacing:.05em !important}
}
/* MOBILE (Figma 1:668). The mobile frame uses the SAME type as desktop
for these three, so the mobile-only shrinks were wrong:
review count 12/16, 0.050em (was 10/14, 0.04em)
score 4.9 40/40 (was 34)
The 40% cream caption colour applies at every width, which the earlier
fix already set. Nothing below 361px is touched - that narrow-phone
step stays as a safety valve. */
@media (min-width:361px) and (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__l1 .elementor-heading-title{font-size:12px !important;line-height:16px !important;letter-spacing:.05em !important}
}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__score-n .elementor-heading-title{font-size:40px !important;line-height:40px !important}
}
/* ==================================================================
AWARD TRIO - replaces the single GIF with the three award logos and
the animation set from your snippet. Only the badge block changed:
the kicker, laurels, caption, rating card and CTA are untouched.
Sizes are the snippet's, plus 20%: centre 240 -> 288, sides 160 ->
192. On phones the three stay on ONE line (the snippet stacked them);
they scale with the viewport instead, so the row always fits.
================================================================== */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio{
display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:center !important;
flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
gap:0 !important;width:100% !important;max-width:none !important;
min-height:0 !important;padding:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo{
position:relative !important;flex:0 0 auto !important;
margin:0 clamp(2px,1.2vw,15px) !important;padding:0 !important;
opacity:0;transform:scale(1.8);filter:blur(5px);
cursor:pointer;
transition:transform .4s cubic-bezier(.175,.885,.32,1.275),filter .4s ease,opacity .4s ease;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo img{
display:block;width:100%;height:auto;
object-fit:contain;border-radius:50%;
box-shadow:0 15px 35px rgba(0,0,0,.5);
background:transparent;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{width:clamp(84px,21vw,192px) !important;z-index:2}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{width:clamp(118px,31vw,288px) !important;z-index:3;margin:0 clamp(2px,0.8vw,10px) !important}
@keyframes ag-awZoomSettle{to{opacity:1;transform:scale(1);filter:blur(0)}}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio.is-active .ag-awtrio__logo--center{animation:ag-awZoomSettle 1s cubic-bezier(.2,.8,.2,1) 0s forwards}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio.is-active .ag-awtrio__logo--left{animation:ag-awZoomSettle 1s cubic-bezier(.2,.8,.2,1) .3s forwards}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio.is-active .ag-awtrio__logo--right{animation:ag-awZoomSettle 1s cubic-bezier(.2,.8,.2,1) .4s forwards}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo:hover{
transform:scale(1.12) rotate(6deg) translateY(-10px) !important;z-index:20 !important;
filter:drop-shadow(0 25px 25px rgba(0,0,0,.7)) brightness(1.1) !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center:hover{transform:scale(1.06) rotate(-4deg) translateY(-10px) !important}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
}
/* The three badges overlap, as in your reference: each side logo tucks
its inner edge under the centre one instead of sitting apart from it.
The overlap is a clamp so it tracks the logo scale - about 32px at
full size, easing down to 10px on a small phone, which is roughly the
same proportion of the badge in both cases. The centre keeps the
highest z-index so it always reads as the front layer, and the sides
sit behind it. Hover raises whichever badge you are on above the rest.
Sizes, entrance animation and hover are unchanged. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo{margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left{margin-right:clamp(-32px,-3vw,-10px) !important;z-index:2}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{margin-left:clamp(-32px,-3vw,-10px) !important;z-index:2}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{margin:0 !important;z-index:5}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo:hover{z-index:20 !important}
/* Edges touching, not overlapping. The negative margins are dropped to
zero so each side badge meets the centre badge exactly at its border -
the circles are inscribed in square boxes, so adjacent boxes put the
circles in contact at their widest point and nothing is covered.
Sizes, entrance and hover stay as they are. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left{margin-right:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{margin-left:0 !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{margin:0 !important}
/* Right badge nudged 5px toward the centre. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{margin-left:-5px !important}
/* Left badge nudged 10px toward the centre. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left{margin-right:-10px !important}
/* The light hairline at the joint with the about section.
It is the background video's bottom edge: the video is scaled and
centre-translated, so its last row lands on a fractional pixel and the
browser blends that row - and because the footage is bright there, the
blend reads LIGHTER than either section. Chasing the sub-pixel is not
reliable across zoom levels and DPRs, so this section simply covers
it: 4px of negative top margin pulls its solid #141414 over the seam,
and it is given a stacking context so it paints above the video edge.
padding-top gains the same 4px, so nothing inside moves - the kicker,
glow and badges keep their exact positions. Desktop and mobile. */
.elementor-34148 .elementor-element.elementor-element-agawd001{
position:relative;z-index:2;
margin-top:-4px !important;
padding-top:100px !important;
}
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agawd001{padding-top:68px !important}
}
/* MOBILE award trio: 330 x 150 block, plus a soft light behind it.
The row was full-width with the badges scaled 1.8x, which is why they
sat larger than the block you asked for. The row is now a fixed
330x150 centred box; the badges drop the 1.8x scale and are sized as a
share of that width (28% side, 38% centre) so all three fit inside 150
tall with their existing overlap. The glow is a radial cream-into-warm
wash on the row's ::before, sitting behind the logos (z-index 0 vs the
images' 1) and pointer-events:none. Hover keeps working. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__row{
width:330px !important;max-width:330px !important;height:150px !important;
margin:0 auto !important;
position:relative !important;
display:flex !important;align-items:center !important;justify-content:center !important;
overflow:visible !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__row::before{
content:'';position:absolute;left:50%;top:50%;
width:330px;height:150px;
transform:translate(-50%,-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(246,235,221,.20) 0%,rgba(250,135,34,.10) 45%,rgba(20,20,20,0) 100%);
filter:blur(18px);
z-index:0;pointer-events:none;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo{
transform:none !important;
z-index:1 !important;
margin:0 -6px !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{width:92px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{width:150px !important;margin:0 -14px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo:hover{transform:scale(1.06) translateY(-6px) !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center:hover{transform:scale(1.04) translateY(-6px) !important}
}
/* The badges must FILL the 330x150 box, not sit inside it.
The centre badge is now 150 - exactly the box height - and the two
sides 116, with -14px overlaps: 116+150+116-56 = 326, so the trio
spans the full 330 with no dead space around it. The glow is capped to
the same box. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{width:116px !important;margin:0 -14px !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{width:150px !important;margin:0 -14px !important}
}
/* Brightness matched to the Figma frame.
Two things were dulling the badges on mobile: each image carried a
heavy 0 15px 35px rgba(0,0,0,.5) drop shadow that darkened the ring
around it, and the glow I added mixed orange in, which tinted them
warm. Figma has a clean neutral lift behind the trio and no dark
halo - so the shadow is softened, the glow is cream-only, and the
images get a small brightness lift. Filters stay on the IMG so the
entrance blur on the wrapper is untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo img{
box-shadow:0 8px 18px rgba(0,0,0,.32) !important;
filter:brightness(1.06) saturate(1.04) !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__row::before{
background:radial-gradient(50% 50% at 50% 50%,rgba(246,235,221,.17) 0%,rgba(246,235,221,.07) 52%,rgba(20,20,20,0) 100%) !important;
filter:blur(24px) !important;
}
}
/* Stacking and spread, per the Figma frame.
In the design the CENTRE badge sits on top of both side badges - it is
the largest and it overlaps them. On the page the right badge was
painting over the centre, because all three shared one z-index and the
right one comes last in the DOM. The centre is raised above both
sides, and the overlap is eased from 14px to 8px so the trio reads as
spread out the way the file has it: 100 + 150 + 100 - 32 = 318 inside
the 330 box. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--left,
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--right{
width:100px !important;margin:0 -8px !important;z-index:1 !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__logo--center{
width:150px !important;margin:0 -8px !important;z-index:3 !important;
}
}
/* The soft light, matched to the Figma frame.
Mine was a small wash confined to the 330x150 badge box, so it read
as a faint patch. In the file the light is a broad diffuse lift -
wider than the badges and considerably taller, brightening the
background above and below them. The wash is enlarged to 560x460 and
centred on the trio (the row is overflow:visible so it can exceed the
box), given a stronger centre and a 46px blur, and the section's own
glow image is brought to full opacity. Still z-index 0 behind the
badges and pointer-events:none. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__row::before{
width:560px !important;height:460px !important;
background:radial-gradient(50% 50% at 50% 50%,rgba(246,235,221,.24) 0%,rgba(246,235,221,.13) 38%,rgba(246,235,221,.05) 66%,rgba(20,20,20,0) 100%) !important;
filter:blur(46px) !important;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__glow{opacity:1 !important}
}
/* Light spread further upward.
Height goes 460 -> 620 and the wash is shifted so more of it sits
above the badges: the centre moves to 62% of the box, which pushes
the falloff up past the 'PROUD WINNERS OF' line while keeping the
bottom edge roughly where it was. Blur widened to match the larger
area. Width and colour are unchanged. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awtrio__row::before{
height:620px !important;
top:38% !important;
background:radial-gradient(52% 50% at 50% 62%,rgba(246,235,221,.24) 0%,rgba(246,235,221,.14) 34%,rgba(246,235,221,.06) 62%,rgba(20,20,20,0) 100%) !important;
filter:blur(54px) !important;
}
}
/* 'PROUD WINNERS OF' - smoother 8s zoom, with a light sweeping across
the letters at the peak.
Smoothness: the ramp now runs over ~2.2s of the 8s cycle with a soft
cubic-bezier and no hard hold, so it eases in and out rather than
snapping. Weight crosses to 700 only while it is scaled, which hides
the step a font-weight change always makes.
The shine is a cream highlight moving through a background gradient
clipped to the glyphs. At rest both stops are the text's own #F6EBDD,
so the type looks exactly as it does now. It is wrapped in @supports
and the colour is only made transparent inside that block, so a
browser without background-clip:text keeps solid text rather than
invisible text. The plugin's word animation still owns the spans. */
@keyframes ag-awk-pulse{
0%,70%{transform:scale(1);font-weight:500;background-position:120% 50%}
82%{transform:scale(1.028);font-weight:700;background-position:60% 50%}
88%{transform:scale(1.05);font-weight:700;background-position:32% 50%}
94%{transform:scale(1.022);font-weight:700;background-position:-10% 50%}
100%{transform:scale(1);font-weight:500;background-position:-60% 50%}
}
@keyframes ag-awk-pulse-m{
0%,70%{transform:scale(1);font-weight:500;background-position:120% 50%}
82%{transform:scale(1.02);font-weight:700;background-position:60% 50%}
88%{transform:scale(1.035);font-weight:700;background-position:32% 50%}
94%{transform:scale(1.015);font-weight:700;background-position:-10% 50%}
100%{transform:scale(1);font-weight:500;background-position:-60% 50%}
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
animation:ag-awk-pulse 8s cubic-bezier(.33,0,.25,1) infinite;
transform-origin:50% 50%;
will-change:transform,background-position;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
background-image:linear-gradient(100deg,#F6EBDD 0%,#F6EBDD 38%,#FFFFFF 47%,#FFF7EA 52%,#F6EBDD 62%,#F6EBDD 100%);
background-size:260% 100%;
background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{animation-name:ag-awk-pulse-m}
}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
animation:none !important;
-webkit-text-fill-color:#F6EBDD !important;color:#F6EBDD !important;background-image:none !important;
}
}
/* KICKER: character-by-character bold sweep, left to right.
Two problems with what was there. (1) The whole line was scaled and its
font-weight animated as one block, so nothing read as per-character.
(2) The shine used background-clip:text with -webkit-text-fill-color:
transparent - if the gradient's background-position is mid-sweep, or the
clip is unsupported, the text renders INVISIBLE. That is almost
certainly the 'not showing anything' you saw, so the whole clip trick is
removed and the ink is pinned back to solid.
The sweep now runs on the individual characters. GSAP SplitText already
creates them - the plugin always splits 'chars, words', even when the
animation targets words - so .char elements are in the DOM and no new
markup or script is needed.
Weight is faked with text-shadow rather than animating font-weight:
font-weight re-flows the line every frame and would shift the letters
(and the ribbon beside them); a shadow paints only, so the geometry is
frozen. Each character lights ~55ms after the one before it, giving a
left-to-right ripple that settles back to normal, once every 8s. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
animation:none !important;
transform:none !important;
background:none !important;
-webkit-background-clip:border-box !important;background-clip:border-box !important;
-webkit-text-fill-color:currentColor !important;
color:#F6EBDD !important;
}
@keyframes ag-awk-bold{
0%{text-shadow:0 0 0 transparent}
3%{text-shadow:0 0 .75px currentColor,0 0 .75px currentColor}
9%{text-shadow:0 0 0 transparent}
100%{text-shadow:0 0 0 transparent}
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char{
display:inline-block;
animation:ag-awk-bold 8s linear infinite;
will-change:text-shadow;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(1){animation-delay:0.000s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(2){animation-delay:0.055s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(3){animation-delay:0.110s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(4){animation-delay:0.165s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(5){animation-delay:0.220s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(6){animation-delay:0.275s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(7){animation-delay:0.330s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(8){animation-delay:0.385s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(9){animation-delay:0.440s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(10){animation-delay:0.495s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(11){animation-delay:0.550s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(12){animation-delay:0.605s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(13){animation-delay:0.660s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(14){animation-delay:0.715s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(15){animation-delay:0.770s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(16){animation-delay:0.825s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(17){animation-delay:0.880s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(18){animation-delay:0.935s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(19){animation-delay:0.990s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(20){animation-delay:1.045s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(21){animation-delay:1.100s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char:nth-of-type(22){animation-delay:1.155s}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title .char{animation:none !important;text-shadow:none !important}
}
/* KICKER SWEEP v2 - deterministic, 10s.
Why nothing was visible: the plugin tweens its split characters FROM
autoAlpha:0. If that ScrollTrigger has not fired - or fires and is then
restarted - the letters sit at opacity 0, so there was no text to
animate. It also splits client-side, so the .char elements only exist
after fonts.ready, and their class name is GSAP's default rather than
anything guaranteed.
Both dependencies are now gone: the characters are real spans in the
heading markup (.ag-ch), server-rendered and always opaque, and the
plugin's text animation is switched off on this widget alone.
The sweep is one 10s cycle: each letter thickens over ~250ms and eases
back over ~550ms, 70ms apart, so the bold travels left to right and
settles. Weight is faked with text-shadow so the letters never re-flow
and the ribbon beside them cannot move. */
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .elementor-heading-title{
animation:none !important;transform:none !important;background:none !important;
-webkit-background-clip:border-box !important;background-clip:border-box !important;
-webkit-text-fill-color:#F6EBDD !important;color:#F6EBDD !important;
}
@keyframes ag-awk-sweep{
0%{text-shadow:0 0 0 rgba(246,235,221,0)}
2.5%{text-shadow:0 0 .85px currentColor,0 0 .85px currentColor}
8%{text-shadow:0 0 0 rgba(246,235,221,0)}
100%{text-shadow:0 0 0 rgba(246,235,221,0)}
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch{
display:inline-block;
opacity:1 !important;visibility:visible !important;
animation:ag-awk-sweep 10s cubic-bezier(.4,0,.2,1) infinite;
will-change:text-shadow;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(1){animation-delay:0.000s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(2){animation-delay:0.070s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(3){animation-delay:0.140s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(4){animation-delay:0.210s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(5){animation-delay:0.280s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(6){animation-delay:0.350s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(7){animation-delay:0.420s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(8){animation-delay:0.490s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(9){animation-delay:0.560s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(10){animation-delay:0.630s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(11){animation-delay:0.700s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(12){animation-delay:0.770s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(13){animation-delay:0.840s}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(14){animation-delay:0.910s}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch{animation:none !important;text-shadow:none !important}
}
/* KICKER WAVE - the visible version.
The faux-bold shadow was the right idea but far too quiet: at 13px with
.4em tracking, an 0.85px shadow is invisible in practice. What reads at
this size is movement plus light, so each character now lifts 2px,
grows 14% and takes a warm glow before settling - a wave travelling
left to right, once every 10s.
Only transform and text-shadow animate. Both are composited by the GPU
and neither affects layout, so the line never re-flows, the letters keep
their exact positions and the ribbon beside them cannot move. */
@keyframes ag-awk-wave{
0%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(250,135,34,0)}
3%{transform:translateY(-2px) scale(1.14);text-shadow:0 0 10px rgba(250,135,34,.55),0 0 2px rgba(246,235,221,.9)}
10%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(250,135,34,0)}
100%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(250,135,34,0)}
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch{
display:inline-block;
opacity:1 !important;visibility:visible !important;
animation:ag-awk-wave 10s cubic-bezier(.34,0,.2,1) infinite !important;
transform-origin:50% 100%;
will-change:transform,text-shadow;
}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(1){animation-delay:0.000s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(2){animation-delay:0.075s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(3){animation-delay:0.150s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(4){animation-delay:0.225s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(5){animation-delay:0.300s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(6){animation-delay:0.375s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(7){animation-delay:0.450s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(8){animation-delay:0.525s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(9){animation-delay:0.600s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(10){animation-delay:0.675s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(11){animation-delay:0.750s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(12){animation-delay:0.825s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(13){animation-delay:0.900s !important}
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch:nth-of-type(14){animation-delay:0.975s !important}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agawd001 .ag-awards__kicker .ag-ch{animation:none !important;transform:none !important;text-shadow:none !important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agevt001 *//* ============================================================
ADEGA GAUCHA - EVENTS (Home 3)
Ported from the main homepage (post 14, section 66f5c0c).
Reveal/parallax animation omitted; resting state only.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agevt001{--kit-widget-spacing:0px;--ag-hair:rgba(246,235,221,.1)}
.elementor-34148 .elementor-element.elementor-element-agevt001{
width:100vw !important;margin-left:calc(-50vw + 50%) !important;
overflow:hidden !important;border-top:1px solid var(--ag-hair) !important;
padding:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__container{width:100% !important;max-width:1440px !important;margin:0 auto !important}
/* head */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__head{
padding:40px 16px 0 !important;
display:flex !important;flex-direction:column !important;align-items:flex-start !important;
gap:4px !important;width:100% !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__head > .elementor-element{width:100% !important;margin:0 !important}
/* columns */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__columns{display:flex !important;flex-direction:column !important;width:100% !important;gap:0 !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__img-wrapper{width:100% !important;height:400px !important;margin-top:40px !important;position:relative !important;overflow:hidden !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__img--dining-wrapper{position:relative !important;overflow:hidden !important;width:100% !important;height:320px !important;display:none !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__parallax-wrapper{position:absolute !important;inset:0 !important;z-index:0 !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__reveal-bg{width:100% !important;height:100% !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;padding:0 !important}
/* copy */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__copy{
padding:40px 16px 60px !important;
display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:24px !important;
width:100% !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__copy > .elementor-element{margin:0 !important}
/* button - transparent box, orange fill behind, cream wipe from the cursor */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn{align-self:stretch !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn .elementor-button{
height:56px;width:100%;
position:relative !important;overflow:hidden !important;z-index:1 !important;
background:transparent !important;
transition:color .4s ease, border-color .3s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn .elementor-button::after{
content:'';position:absolute;inset:0;z-index:-2;background:#FA8722;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);
transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;z-index:-1;
background:#F6EBDD;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn .elementor-button:hover{color:#141414 !important;border-color:rgba(246,235,221,.7) !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__js{display:none !important}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__title .elementor-heading-title{font-size:40px !important;line-height:40px !important;letter-spacing:.04em !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__body p{font-size:15px !important;line-height:24px !important}
}
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agevt001{padding:80px 0 120px !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__head{
padding:0 40px !important;max-width:869px !important;gap:12px !important;
margin-left:calc(0px - max(0px,(100vw - 1440px) / 2)) !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__title .elementor-heading-title{width:789px;max-width:100%}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__columns{flex-direction:row !important;align-items:stretch !important;height:680px !important;margin-top:40px !important}
/* Figma: the bleed image ends at x=828 and the right column's copy starts
at x=956 on the 1440 canvas - a fixed 128px gutter. 57.5% made that
gutter shrink with the viewport (only ~6px at 1152), so the left column
is now sized from the right edge instead: 484px column + 128px gutter,
plus the overhang the right column is pulled out by above 1440. */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__col-left{
flex:0 0 calc(100% - 612px + max(0px,(100vw - 1440px) / 2)) !important;
width:calc(100% - 612px + max(0px,(100vw - 1440px) / 2)) !important;
position:relative !important;padding:0 !important;
}
/* The bleed image is pinned to the VIEWPORT's left edge (not the 1440
container's), so it always touches the left border; its right edge is
the column edge, which keeps the 128px gutter. Any extra viewport width
above 1440 goes into the image on the left and into the right column's
outer margin on the right. */
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__img-wrapper{
position:absolute !important;top:0 !important;right:0 !important;
left:calc(0px - max(0px,(100vw - 1440px) / 2)) !important;
width:auto !important;height:100% !important;margin-top:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__col-right{
flex:0 0 484px !important;max-width:484px !important;width:484px !important;margin-left:auto !important;
display:flex !important;flex-direction:column !important;justify-content:space-between !important;
padding:35px 40px 0 0 !important;
margin-right:calc(0px - max(0px,(100vw - 1440px) / 2)) !important;
}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__copy{padding:0 !important;max-width:330px !important;gap:40px !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__body{width:330px !important;max-width:330px !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__body p{font-size:16px !important;line-height:25px !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__btn{align-self:flex-start !important;width:260px !important}
.elementor-34148 .elementor-element.elementor-element-agevt001 .ag-ev__img--dining-wrapper{display:block !important;height:auto !important;aspect-ratio:444/320 !important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agrdz001 *//* ============================================================
ADEGA GAUCHA - SIGNATURE CUTS (Home 3)
Ported from the main homepage (post 14, section c0fc10e).
Entrance animation omitted; the tab switcher is kept because it
is functionality, not motion.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agrdz001{--kit-widget-spacing:0px;--cream:#F6EBDD;--orange:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrdz001{width:100vw !important;margin-left:calc(-50vw + 50%) !important;overflow:hidden !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature{position:relative;width:100%;overflow:hidden;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature__bg{
position:absolute !important;inset:0 !important;z-index:0 !important;padding:0 !important;
background:linear-gradient(180deg,rgba(20,20,20,.8) 0%,rgba(20,20,20,.4) 100%),
url('https://adegagaucha.com/wp-content/uploads/2026/09/signature-cuts-bg-1.jpg') center/cover no-repeat !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-signature__bg{
background:url('https://adegagaucha.com/wp-content/uploads/2026/09/signature-cuts-a-la-carte.png') center/cover no-repeat !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-inner{position:relative;max-width:1440px;margin:0 auto;height:840px;width:100% !important;padding:0 !important}
/* two copies of the heading and body, one per tab */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .sig-lacarte{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .sig-lacarte{display:block !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .sig-churrasco{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title{position:absolute;left:2.78%;top:40px;width:41%;padding-top:32px !important;margin-top:-32px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{font-style:normal !important;font-weight:400 !important;color:#F6EBDD !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title em{font-family:'Instrument Serif',ui-serif,Georgia,serif !important;font-style:italic !important;font-weight:400 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-nowrap{white-space:nowrap !important;display:inline-block !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy{position:absolute;left:66.4%;top:234px;width:350px;max-width:28%}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy p{margin:0}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn{position:absolute;left:66.4%;top:374px;width:200px}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-copy{left:2.78%;top:284px}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-btn{left:2.78%;top:424px}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-img-2{visibility:hidden}
/* imagery - the photo lives on ::before so it can be over-scanned */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{
position:absolute;left:2.78%;top:339px;width:30.9%;height:385px;
overflow:hidden !important;box-shadow:0 0 240px 0 rgba(246,235,221,.12) !important;padding:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{display:none;overflow:hidden !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img::before,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2::before{
content:'';position:absolute;inset:0;
background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img::before{background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/Adega-chef-1536x864-1.png')}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2::before{background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/e4078f9f198ee73b2a8eb55b250e225a39ed427a.jpg')}
/* tabs */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tabs{
position:absolute;left:34.5%;top:764px;width:446px;max-width:38%;height:56px;
background:rgba(20,20,20,.4) !important;
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
box-shadow:inset 0 0 0 1px rgba(246,235,221,.05) !important;
display:flex !important;align-items:center !important;padding:4px !important;gap:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tab{
flex:1 1 0;height:48px;border-radius:2px;
display:flex;align-items:center;justify-content:center;gap:10px;
padding:21px 8px 19px !important;background:transparent;border:0;cursor:pointer;
font-family:VOLTE,Figtree,sans-serif;font-weight:500;font-size:18px;line-height:24px;
letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#F6EBDD;
transition:background .25s,color .25s;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tab.is-active{background-color:rgba(246,235,221,.16) !important}
/* Figma defines no hover state on the tabs, so the orange label and the\n .08 wash are gone. The inactive label keeps its rgba(246,235,221,.8)\n and the pointer stays a pointer. */\n.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tab:hover:not(.is-active){background-color:transparent !important}
/* button - orange fill, cream wipe from the cursor */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn .elementor-button{
height:56px;width:100%;position:relative !important;overflow:hidden !important;z-index:1 !important;
background:transparent !important;box-shadow:inset 0 0 0 1px rgba(246,235,221,.4) !important;
transition:color .25s ease, box-shadow .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn .elementor-button::after{content:'';position:absolute;inset:0;z-index:-2;background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;background:#F6EBDD;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn .elementor-button:hover{color:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-js{display:none !important}
@media (max-width:1180px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{font-size:64px !important;line-height:64px !important}
}
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-inner{height:auto !important;padding:26px 0 46px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tabs{position:static !important;width:auto !important;max-width:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title{margin:0 16px !important;padding-top:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{font-size:clamp(30px,9.5vw,48px) !important;line-height:1.05 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy{margin:34px 16px 0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy p{font-size:15px !important;line-height:24px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track{
display:flex !important;gap:12px !important;margin:24px 0 0 !important;padding:0 16px !important;
overflow-x:auto !important;scrollbar-width:none !important;-webkit-overflow-scrolling:touch !important;
--ag-peek:52px;--ag-card-w:min(calc(100vw - 32px - var(--ag-peek)),385px);
scroll-snap-type:x mandatory !important;scroll-padding-left:16px !important;
flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track::-webkit-scrollbar{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{
position:static !important;display:block !important;box-shadow:none !important;
scroll-snap-align:start !important;height:var(--ag-card-w) !important;overflow:hidden !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{flex:0 0 var(--ag-card-w) !important;width:var(--ag-card-w) !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{flex:0 0 280px !important;width:280px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img::before{background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/Adega-chef-1536x864-1.png')}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn{display:flex !important;margin:34px 16px 0 !important;width:calc(100% - 32px) !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tabs{margin:18px 16px 0 !important;height:56px !important;width:auto !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-signature__bg{
background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.60) 35%,rgba(20,20,20,.78) 70%,rgba(20,20,20,.88) 100%),
url('https://adegagaucha.com/wp-content/uploads/2026/09/La-carte-img-1.png') center/cover no-repeat !important;
}
}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track{display:contents !important}
}
/* ------------------------------------------------------------
Background states scoped with :not(.is-lacarte), matching the
main homepage. Relying on specificity alone let the default
layer stay in play behind the A La Carte one.
------------------------------------------------------------ */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature:not(.is-lacarte) .ag-signature__bg{
background:linear-gradient(180deg,rgba(20,20,20,.8) 0%,rgba(20,20,20,.4) 100%),
url('https://adegagaucha.com/wp-content/uploads/2026/09/signature-cuts-bg-1.jpg') center/cover no-repeat !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-signature__bg{
background:url('https://adegagaucha.com/wp-content/uploads/2026/09/signature-cuts-a-la-carte.png') center/cover no-repeat !important;
}
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-signature__bg{
background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.60) 35%,rgba(20,20,20,.78) 70%,rgba(20,20,20,.88) 100%),
url('https://adegagaucha.com/wp-content/uploads/2026/09/La-carte-img-1.png') center/cover no-repeat !important;
}
}
/* the swap must not flash while the 2MB PNG decodes */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature__bg{transition:none !important;background-color:#141414 !important}
/* ============================================================
mobile corrections (Figma Mobile 1:668), 375-wide frame:
title 343x96 at 16/26 -> Instrument Serif 48/48, .05em
copy 343x96 at 16/146 -> gap above copy is 24, not 34
tabs 343x56 at 16/724 -> inactive label sits at 80% cream
============================================================ */
@media (max-width:1023px){
/* Back to the main homepage's own mobile values. */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{font-size:clamp(30px, 9.5vw, 48px) !important;line-height:1.05 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy{margin:34px 16px 0 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tab:not(.is-active){color:rgba(246,235,221,.8) !important}
}
/* Mobile signature background, same as the main homepage: the churrasco
state drops the photo and uses the flat two-layer gradient, so the
title and the horizontally scrolling image pair read cleanly. Desktop
keeps the photo. The a-la-carte mobile background already matches. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature:not(.is-lacarte) .ag-signature__bg{
background:
linear-gradient(to right,rgba(20,20,20,.8) 0%,rgba(20,20,20,.4) 100%),
linear-gradient(to right,#141414 0%,#8D807A 100%) !important;
}
}
/* Mobile image pair, matched to the main homepage exactly:
track gap 12, padding 0 16, --ag-peek 52,
--ag-card-w min(100vw - 32 - 52, 385),
card 1 = card-w wide, card 2 = 280 wide, both card-w tall,
snap-align start, no box-shadow, photo painted by ::before. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{background:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn{position:static !important;max-width:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-tabs{height:56px !important;margin:18px 16px 0 !important}
}
/* ==================================================================
SEPARATE BUTTON PER TAB
The two tabs already have their own heading and their own copy
(.sig-churrasco / .sig-lacarte); the call to action was the single
shared widget, so editing it changed both states. There are now two
button widgets - agsigbt for Churrasco, agsigb2 for A la carte - and
each can be given its own label and link without touching the other.
The show/hide has to be stated for the buttons specifically: the
<=1023 rule sets .ag-sig-btn{display:flex !important}, which would
otherwise beat the generic .sig-lacarte{display:none} and reveal both
at once on phones. These rules are last, so they settle it.
================================================================== */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-btn.sig-lacarte{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-btn.sig-lacarte{display:flex !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-btn.sig-churrasco{display:none !important}
/* A LA CARTE type sizes: heading 64, description 15 (desktop).
Churrasco keeps its own sizes; mobile is unchanged (its copy is
already 15 and its title scales with the viewport). */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title.sig-lacarte .elementor-heading-title{font-size:64px !important;line-height:64px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy.sig-lacarte p{font-size:15px !important;line-height:24px !important}
}
/* ==================================================================
CHURRASCO IMAGE PAIR - MOBILE (single authoritative block)
Everything I had layered on for this pair has been removed and
replaced by this one block, because two dozen competing rules were
what made each fix unpredictable.
What was actually wrong, in order of discovery:
- Elementor containers wrap on mobile (--flex-wrap), so the second
card was breaking onto a hidden second line.
- The photos were painted on ::before, which Elementor reserves for
its own background-overlay layer; its content is unset on these
cards, so the pseudo never rendered and card 1 came out empty.
- The chef source is a 1536x864 landscape 8-bit indexed PNG - the
only asset on the page in that format, and the one that would not
display. It is now a plain JPEG of the same full frame.
================================================================== */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track{
display:flex !important;flex-direction:row !important;
flex-wrap:nowrap !important;--flex-wrap:nowrap;--flex-wrap-mobile:nowrap;
align-items:flex-start !important;
gap:12px !important;margin:24px 0 0 !important;padding:0 0 0 16px !important;
width:100% !important;max-width:100% !important;
overflow-x:auto !important;overflow-y:hidden !important;
-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;
scroll-snap-type:x mandatory !important;scroll-padding-left:16px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track::-webkit-scrollbar{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track::after{content:'' !important;flex:0 0 16px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{
position:relative !important;display:block !important;
flex:0 0 87% !important;width:87% !important;--width:87%;
min-width:0 !important;max-width:none !important;
height:360px !important;min-height:360px !important;
margin:0 !important;padding:0 !important;
overflow:hidden !important;box-shadow:none !important;
background-repeat:no-repeat !important;background-color:#3C3836 !important;
scroll-snap-align:start !important;scroll-snap-stop:always !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{order:1 !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{order:2 !important}
/* the pseudo layer is dead weight on mobile - switch it off so it can
never sit on top of the real background. */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img::before,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2::before{display:none !important;content:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{
background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/ag-chef-full.jpg') !important;
background-size:contain !important;background-position:center center !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{
background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/e4078f9f198ee73b2a8eb55b250e225a39ed427a.jpg') !important;
background-size:cover !important;background-position:center 40% !important;
}
}
/* Card 1 pulled from the mobile strip for now, as requested. The chef
photo is hidden and the remaining photo becomes a single full-width
card inside the 16px gutters. The strip keeps its scroll setup so the
second card can simply be un-hidden when we add it back - nothing else
has to change. Desktop still shows both images. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{
flex:0 0 calc(100% - 32px) !important;width:calc(100% - 32px) !important;
height:360px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track{padding:0 16px !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track::after{display:none !important}
}
/* A LA CARTE HEADING - both clipped edges.
The 'M' of MAKE was cut off on the left because the widget carried a
-30px left margin in its Advanced tab, which pushed the glyph outside
the section's overflow:hidden box. That margin is now 0.
'FAVORITE,' was cut off on the right because the title box is 41% of
the section and both lines are set nowrap - at 64px the first line
needs about 605px, which 41% only provides on a very wide window. The
box now sizes to its content instead of to a percentage, so the line
is never truncated at any desktop width. Type, size and position are
unchanged; only the box that holds them. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title.sig-lacarte{
width:max-content !important;max-width:none !important;
}
}
/* Desktop geometry re-squared against Figma (section at 0,4460 in node
1:27, so all values below are relative to the section top):
copy left 956 -> 66.4%, top 234 (was 244)
button left 956 -> 66.4%, top 374 (was 384)
photo left 40 -> 2.78%, top 364, 445x360 -> 30.9% x 360
The photo frame had been extended 25px upward - same bottom edge at
724, but a taller box - which pushed its top above Figma's. Width,
left edge and the 240px cream glow are unchanged. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{top:364px !important;height:360px !important}
}
/* MOBILE churrasco, squared to Figma 1:668 (375 frame):
title 343x96 at top 26 -> 48px / 48px, .05em
copy 343x96 at top 146 -> 15/24, so the gap above it is 24, not 34
The title was on clamp(30px,9.5vw,48px): at 375px that resolves to
35.6px, well under Figma's 48, and line-height 1.05 instead of 48px.
Both are pinned now. Below 361px the clamp is kept so very narrow
phones still shrink rather than overflow. */
@media (min-width:361px) and (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{font-size:48px !important;line-height:48px !important;letter-spacing:.05em !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy{margin:24px 16px 0 !important}
}
/* ==================================================================
CHURRASCO PAIR ON MOBILE - final, single-source block.
Why the earlier attempts failed: they styled the two cards but left
them as ordinary block children, so the strip had no scroller of its
own, and a later rule hid card 1 outright. Both cards live inside a
dedicated container - .ag-sig-track (agsigtr) - so THAT is made the
horizontal snap scroller here, exactly as the main homepage does it,
and the pair is sized against it.
Geometry: card = min(100vw - 32 - 44, 385) wide by 360 tall, gap 12,
16px gutters, snap-align start. The 44px reserve is what lets the
second photo peek at the right edge so the swipe is discoverable.
Both photos use cover at 360 tall: the chef frame is landscape, so
full height stays visible and only the sides crop - which is what cut
his head off when this box was square.
Desktop is untouched; every rule is inside max-width:1023.
================================================================== */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track{
display:flex !important;flex-direction:row !important;
flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
align-items:flex-start !important;
gap:12px !important;padding:0 16px !important;margin:24px 0 0 !important;
width:100% !important;max-width:none !important;
overflow-x:auto !important;overflow-y:hidden !important;
scroll-snap-type:x mandatory !important;scroll-padding-left:16px !important;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
--ag-card-w:min(calc(100vw - 32px - 44px),385px);
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track::-webkit-scrollbar{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{
display:block !important;position:relative !important;visibility:visible !important;
flex:0 0 var(--ag-card-w) !important;width:var(--ag-card-w) !important;
min-width:0 !important;max-width:none !important;
height:360px !important;
order:0 !important;margin:0 !important;padding:0 !important;
box-shadow:none !important;overflow:hidden !important;
scroll-snap-align:start !important;
background-size:cover !important;background-position:center !important;
background-repeat:no-repeat !important;background-color:transparent !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img{background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/ag-chef-full.jpg') !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2{background-image:url('https://adegagaucha.com/wp-content/uploads/2026/09/e4078f9f198ee73b2a8eb55b250e225a39ed427a.jpg') !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img::before,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-img-2::before{display:none !important;content:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-img-2{visibility:visible !important}
}
/* The pair now scrolls correctly, but card 1 was still picking up an
older background-size:contain from a rule with the same .elementor-34148 .elementor-element.elementor-element-agrdz001, so
the landscape chef frame was letterboxed inside the 299x360 box - dark
above, a thin strip of photo at the bottom. Rather than add another
competing longhand, both cards are repainted here with the background
SHORTHAND (which resets size, position and repeat in one go) on a
.elementor-34148 .elementor-element.elementor-element-agrdz001 that includes the track, putting it above every earlier rule
in specificity. Brightness profiling of ag-chef-full.jpg puts the
subject across the middle 27-73% of the frame, so a centred cover crop
lands on the chef and the guest, not on the dark interior. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img{
background:url('https://adegagaucha.com/wp-content/uploads/2026/09/ag-chef-full.jpg') center center / cover no-repeat !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img-2{
background:url('https://adegagaucha.com/wp-content/uploads/2026/09/e4078f9f198ee73b2a8eb55b250e225a39ed427a.jpg') center center / cover no-repeat !important;
}
}
/* Card 1 now uses the purpose-made mobile crop, painted with the same
background shorthand and the same cover/centre as card 2 so the two
behave identically in the 299x360 box. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img{
background:url('https://adegagaucha.com/wp-content/uploads/2026/09/Untitled-design.jpg') center center / cover no-repeat !important;
}
}
/* ==================================================================
CARD PHOTOS AS REAL IMAGES ON MOBILE.
Three rounds of background-image fixes kept losing to something in the
cascade, so the photos are no longer backgrounds on mobile at all:
each card now holds an Elementor image widget (.ag-sig-photo) that
fills the card with object-fit:cover. An cannot be defeated by a
competing background shorthand, a stale background-attachment or a
cached combined stylesheet - if the file loads, the photo shows.
The card's own background is switched off on mobile so nothing can
paint over or under it, and both widgets are hidden from 1024 up so
the desktop layout - which paints through ::before - is untouched.
================================================================== */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img-2{background:none !important;position:relative !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo{
position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;
margin:0 !important;padding:0 !important;z-index:1 !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo .elementor-widget-container,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo figure,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo a{width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;display:block !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo img{
width:100% !important;height:100% !important;
object-fit:cover !important;object-position:center center !important;
display:block !important;max-width:none !important;
}
}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-photo{display:none !important}
}
/* ==================================================================
THE ACTUAL BUG - found by measuring the rendered boxes, not by reading
the cascade. Card 1 was in the track, the right size, with its photo
loaded and object-fit working. It was simply 339px LOWER than the
track: measured y = 389 against the track's y = 50.
339px is the desktop offset - .ag-sig-img carries top:339px and
left:2.78% for the absolute desktop placement. The mobile block reset
position to relative but never reset those offsets, and a RELATIVE box
still honours top/left - so the card was shifted down and left out of
view, leaving the empty box and the sliver of photo at the bottom.
Zeroing the offsets is the fix.
================================================================== */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-track .ag-sig-img-2{
top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
inset:auto !important;
transform:none !important;
}
}
/* A LA CARTE, mobile: the pair is hidden but its box is kept.
visibility:hidden rather than display:none on purpose - the track
stays in the flow at its full height, so nothing below it moves and
the a-la-carte layout is byte-for-byte what it was. This is the same
mechanism desktop already uses for this state. pointer-events are
dropped too so the invisible strip cannot be swiped by accident.
An earlier mobile rule forced these visible in both states; the
is-lacarte .elementor-34148 .elementor-element.elementor-element-agrdz001s here are more specific, so they win. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-track{visibility:hidden !important;pointer-events:none !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-track .ag-sig-img,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-track .ag-sig-img-2,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-track .ag-sig-photo,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-track .ag-sig-photo img{visibility:hidden !important}
}
/* A LA CARTE title and copy were running off the right edge on phones.
Two desktop-only devices were still active at mobile width: the
.ag-nowrap spans inside the title (added so 'FAVORITE,' would not break
on desktop) and the max-content sizing on the a-la-carte title. At
375px a nowrap 48px line cannot fit, so it pushed the block wider than
the screen and the section's overflow:hidden cropped both the heading
and the paragraph below it. Below 1024 the lines are allowed to wrap
and the block is held inside the 16px gutters. Desktop keeps nowrap
and max-content exactly as they are. */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .ag-nowrap,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy .ag-nowrap{white-space:normal !important;display:inline !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title.sig-lacarte{
width:auto !important;max-width:calc(100% - 32px) !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title{white-space:normal !important;overflow-wrap:break-word}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy.sig-lacarte{max-width:calc(100% - 32px) !important}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy p{white-space:normal !important}
}
/* A LA CARTE heading alignment (desktop only).
The copy and the button sit on left:2.78%; the heading was starting
further right. Rather than guess a pixel nudge, every property that
could push the text off that reference is neutralised on the heading
and on its two inner spans: margin, padding, text-indent, transform.
The heading's own left is re-stated at 2.78% so it shares one origin
with the copy and the button. Nothing else about the heading changes -
64px Instrument Serif, .05em, the italic second line and the
max-content width that keeps 'FAVORITE,' from clipping all stay. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-title{
left:2.78% !important;margin-left:0 !important;padding-left:0 !important;
text-indent:0 !important;transform:none !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-title .elementor-heading-title{
margin-left:0 !important;padding-left:0 !important;text-indent:0 !important;text-align:left !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-signature.is-lacarte .ag-sig-title .ag-nowrap{margin-left:0 !important;padding-left:0 !important;text-indent:0 !important}
}
/* CHURRASCO heading, desktop: Instrument Serif 80px as the Figma panel
shows (Mixed weight, 80 - the mix being the upright first line and the
italic 'UNLIMITED'), on a 589x160 hug box, i.e. two lines at an 80px
line-height with the box sized to its content.
It was dropping to 64px between 1024 and 1180 through an older step;
that step is overridden for this heading only. The a-la-carte heading
keeps its own sizing, and mobile is untouched. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title.sig-churrasco .elementor-heading-title{
font-size:80px !important;line-height:80px !important;letter-spacing:.05em !important;
}
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title.sig-churrasco{
width:max-content !important;max-width:none !important;
}
}
/* Tab-replay smoothness: the split characters get their own compositor
layer while they move, so a 40-character heading does not repaint on
every frame. backface-visibility stops sub-pixel shimmer on WebKit. */
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-title .elementor-heading-title span,
.elementor-34148 .elementor-element.elementor-element-agrdz001 .ag-sig-copy span{will-change:transform,opacity;backface-visibility:hidden}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agrng001 *//* ============================================================
ADEGA GAUCHA - OUR RANGE (Home 3)
Ported from the main homepage (post 14, section c0fc10e,
second half). Entrance animation omitted.
Note: the source ships two copies of the stats - one for desktop
columns, one for mobile rows. Built here as a SINGLE set restyled
per breakpoint, so each figure is edited in one place.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agrng001{--kit-widget-spacing:0px;--cream:#F6EBDD;--orange:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrng001{width:100vw !important;margin-left:calc(-50vw + 50%) !important;overflow:hidden !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range{background-color:#141414 !important;padding:0 !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-inner{
max-width:1360px;margin:0 auto;padding:120px 40px !important;
display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:space-between !important;
gap:40px !important;flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;width:100% !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{
display:flex !important;flex-direction:column !important;gap:40px !important;
align-items:flex-start !important;width:320px !important;flex:0 0 320px !important;padding:0 !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{
font-family:'Instrument Serif',ui-serif,Georgia,serif !important;font-weight:400 !important;
font-size:64px !important;line-height:64px !important;text-transform:uppercase !important;
color:#F6EBDD !important;text-align:left !important;white-space:pre-line !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-divider{flex:none !important;line-height:0}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-divider svg{display:block;width:12px;height:240px;fill:rgba(246,235,221,.3)}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat{
display:flex !important;flex-direction:column !important;align-items:flex-start !important;
gap:80px !important;padding:0 !important;height:208px;min-width:75px;width:auto !important;flex:none !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat > .elementor-element{width:auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-value .elementor-heading-title{
font-family:'Instrument Serif',ui-serif,Georgia,serif !important;font-weight:400 !important;
font-size:88px !important;line-height:88px !important;color:#FA8722 !important;white-space:nowrap !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-label .elementor-heading-title{
font-family:VOLTE,Figtree,sans-serif !important;font-weight:400 !important;
font-size:26px !important;line-height:40px !important;letter-spacing:.15em !important;
text-transform:uppercase !important;color:#F6EBDD !important;
}
/* button - desktop only, orange fill with the cream wipe */
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn{display:none !important;width:200px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn .elementor-button{
width:200px;height:56px;position:relative !important;overflow:hidden !important;z-index:1 !important;
background:transparent !important;
transition:color .25s ease, border-color .3s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn .elementor-button::after{content:'';position:absolute;inset:0;z-index:-2;background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;background:#F6EBDD;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn .elementor-button:hover{color:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-js{display:none !important}
@media (min-width:1024px){ .elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-btn{display:flex !important} }
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-inner{gap:24px !important;padding:96px 24px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{width:240px !important;flex-basis:240px !important;gap:32px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{font-size:44px !important;line-height:44px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-value .elementor-heading-title{font-size:56px !important;line-height:56px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-label .elementor-heading-title{font-size:18px !important;line-height:28px !important;letter-spacing:.12em !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat{gap:40px !important;height:auto}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-divider svg{height:160px;width:8px}
}
/* below 900 the columns become full-width rows with hairlines */
@media (max-width:900px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-inner{display:block !important;padding:64px 16px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{width:auto !important;flex-basis:auto !important;align-items:center !important;gap:32px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{
font-size:48px !important;line-height:48px !important;text-align:center !important;
letter-spacing:.05em !important;white-space:normal !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-divider{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat{
display:flex !important;flex-direction:row !important;
justify-content:space-between !important;align-items:flex-end !important;
padding:24px 16px !important;gap:0 !important;height:auto !important;width:auto !important;
border-bottom:1px solid rgba(246,235,221,.1) !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat:first-of-type{margin-top:40px !important;border-top:1px solid rgba(246,235,221,.1) !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-value .elementor-heading-title{font-size:80px !important;line-height:88px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-label .elementor-heading-title{font-size:22px !important;line-height:40px !important}
}
/* The old opacity/visibility pin that used to live here has been removed.
It was added when this heading once rendered invisible, and it forced
opacity:1, visibility:visible and transform:none onto the heading AND
every child - which cancelled the character animation outright. The
page-wide no-flash guard now protects against invisible text with a
2.6s hard fallback, so the pin is no longer needed. Alignment,
size and the two-line format above are untouched. */
/* Figma (range block, node 1:27): the head is a column with
align-items:flex-start and gap 40 - the title's left edge lines up with
the 'Reserve a table' button, same as the main homepage. The heading
widget was also self-centring inside the 320px column, and the <=900px
block was centring it; both are corrected here. */
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title{align-self:flex-start !important;margin-left:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{text-align:left !important}
@media (max-width:900px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{align-items:flex-start !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title{align-self:flex-start !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{text-align:left !important}
}
/* COUNTER: no wobble while counting.
Instrument Serif has proportional figures, so every digit the counter
wrote changed the text's width and the number visibly jittered. Two
things stop it: tabular figures where the face provides them, and the
script reserving the final rendered width as a min-width before the
count starts, so the box never resizes mid-animation. Left aligned per
Figma (node 1:492: column, align-items flex-start), so the digits grow
rightwards and the left edge stays pinned to the label's. */
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-value .elementor-heading-title{
font-variant-numeric:tabular-nums !important;
font-feature-settings:'tnum' 1 !important;
display:inline-block !important;
text-align:left !important;
white-space:nowrap !important;
}
/* The gap between each bracket and its number.
The row was justify-content:space-between across seven items - head,
then divider/stat, divider/stat, divider/stat - so the leftover width
was shared EQUALLY by all six gaps, including the ones inside each
pair. That is what left ~110px of dead space between a bracket and the
number it belongs to.
Now the bracket and its number are treated as one unit: 20px between
them, 96px between the three groups, and the head takes the remaining
space with an auto margin so the cluster still sits against the
right-hand side of the 1360 container exactly as before. Type, sizes,
colours, the 12x240 brackets and the counters are untouched. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-inner{justify-content:flex-end !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{margin-right:auto !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-divider{margin-right:20px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat{margin-right:96px !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-stat:last-of-type{margin-right:0 !important}
}
/* 'RANGE' must never break mid-word.
The title held a literal newline, which HTML collapses to a space - so
the two lines were only happening because the 320px column forced a
wrap, and a narrower column could split RANGE itself. An explicit
now sets the break, and each word is kept whole. Size, alignment and
the character animation are untouched. */
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{overflow-wrap:normal !important;word-break:keep-all !important;hyphens:none !important}
/* Mobile 'OUR RANGE' - one centred line, per Figma node 1:884:
343 x 48, Instrument Serif 400, 48/48, .050em, text-align:center.
The
added for the desktop two-line format is suppressed below
1025 so the words sit on a single line, and the desktop left-align
rules are overridden back to centre for this range only. Desktop is
untouched. */
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title{align-self:center !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title{
text-align:center !important;
font-size:48px !important;line-height:48px !important;letter-spacing:.05em !important;
max-width:343px !important;margin-left:auto !important;margin-right:auto !important;
white-space:nowrap !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-head{align-items:center !important}
}
/* 'OUR RANGE' ran together on mobile.
The single-line rule hides the
that separates the two words -
and a
carries no space, so the words butted up as OURRANGE. A
thin space is restored in its place with a ::before on the br, which
leaves the desktop two-line format untouched. */
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br{
display:inline !important;content:'' !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br::before{
content:'\00a0';
}
}
/* OUR RANGE on mobile - one line, with a real space.
The br::before trick did not hold: a hidden br cannot carry a space
reliably. The markup now has an explicit space span next to the br,
so on mobile the br collapses to nothing and the span supplies the
gap - giving 'OUR RANGE' on a single line. On desktop the br still
breaks the line and the span is removed, so the two-line format is
exactly as before. */
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br,
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br.ag-range-br{
display:none !important;content:normal !important;
}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .elementor-heading-title br::before{content:none !important}
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .ag-range-sp{display:inline !important;white-space:pre !important}
}
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrng001 .ag-range-title .ag-range-sp{display:none !important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agnht001 *//* ============================================================
ADEGA GAUCHA - A NIGHT AT ADEGA (Home 3)
Ported from the main homepage (post 14, section b81a1b4).
Reveal/parallax omitted; the slider itself is kept.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agnht001{--kit-widget-spacing:0px;--ag-container:1440px;--ag-pad:40px}
.elementor-34148 .elementor-element.elementor-element-agnht001{
width:100vw !important;margin-left:calc(-50vw + 50%) !important;
padding:80px 0 100px !important;overflow:hidden !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__inner{max-width:var(--ag-container) !important;margin:0 auto !important;padding:0 var(--ag-pad) !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__header{
display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;
gap:60px !important;margin-bottom:48px !important;flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;width:100% !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__header > .elementor-element{width:auto !important;flex:0 0 auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__eyebrow-mobile{display:none !important}
/* slider */
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slider-container{width:100% !important;margin-bottom:40px !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slider{
display:flex !important;flex-direction:row !important;gap:12px !important;
overflow-x:auto !important;scroll-snap-type:x mandatory !important;scrollbar-width:none !important;
margin-left:var(--ag-pad) !important;width:calc(100% - var(--ag-pad)) !important;
padding-right:var(--ag-pad) !important;flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slider::-webkit-scrollbar{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slide{
position:relative !important;overflow:hidden !important;
flex:0 0 626px !important;max-width:calc(100vw - var(--ag-pad) - 24px) !important;
height:480px !important;scroll-snap-align:start !important;padding:0 !important;
background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;
}
/* footer */
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__footer-wrapper{width:100% !important;padding:0 var(--ag-pad) !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__footer{
display:flex !important;flex-direction:row !important;align-items:center !important;
justify-content:space-between !important;width:100% !important;flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__nav{display:flex !important;flex-direction:row !important;gap:12px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn{
width:80px;height:56px;border:1px solid rgba(246,235,221,.4);border-radius:2px;background:transparent;
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
position:relative;overflow:hidden;z-index:1;transition:border-color .3s ease;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;background:#F6EBDD;border-radius:50%;z-index:-1;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
/* Figma defines no hover on the two nav arrows - they are plain outlined
80x56 boxes. The cream wipe, the brightened border and the ink stroke
are removed; the arrow keeps its cream stroke and the pointer cursor.
The orange SEE FULL MENU button is untouched. */
/* Nav arrows: orange hover. The wipe circle is now the brand orange, so
hovering fills the 80x56 box with #FA8722 and the arrow flips to ink,
matching the orange the rest of the page hovers to. */
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn::before{background:#FA8722 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn:hover::before{width:800px !important;height:800px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn:hover{border-color:#FA8722 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn svg{width:13.33px;height:10px;stroke:#F6EBDD;stroke-width:1.5;fill:none;display:block;position:relative;z-index:2;transition:stroke .4s ease}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn:hover svg{stroke:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta{width:200px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button{
width:200px;height:56px;position:relative !important;overflow:hidden !important;z-index:1 !important;
background:transparent !important;box-shadow:inset 0 0 0 1px rgba(246,235,221,.4) !important;
transition:color .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button::after{content:'';position:absolute;inset:0;z-index:-2;background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;background:#F6EBDD;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button:hover{color:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__js{display:none !important}
@media (max-width:1180px){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slide{height:400px !important;flex-basis:522px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__title .elementor-heading-title{font-size:52px !important;line-height:52px !important}
}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agnht001{--ag-pad:16px;padding:56px 0 64px !important}
/* MOBILE header, squared to Figma 1:884: the header block is 343x68 with
a 4px gap between the eyebrow and the title, and the cards start at 108
- so 40px below it, not 32. */
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__header{flex-direction:column !important;gap:4px !important;margin-bottom:40px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__eyebrow-left,
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__eyebrow-right{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__eyebrow-mobile{display:block !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__title .elementor-heading-title{font-size:40px !important;line-height:40px !important;letter-spacing:.04em !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slider{gap:8px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slide{flex:0 0 calc(100vw - 32px) !important;max-width:calc(100vw - 32px) !important;height:440px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slider-container{margin-bottom:24px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__footer{flex-direction:column !important;align-items:stretch !important;gap:16px !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__nav{width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn{width:100% !important;height:40px !important;flex:1 !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta,
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__cta .elementor-button{width:100% !important;height:56px !important}
}
@media (max-width:380px){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__title .elementor-heading-title{font-size:38px !important;line-height:38px !important}
}
/* ==================================================================
NIGHT AT ADEGA - per-image parallax, done safely.
Previously the parallax sat on the slides themselves. Each slide is a
flex item inside the horizontally scrolling track AND is
overflow:hidden, so translating it vertically fought the scroller and
the three lag values pulled them out of alignment - the judder.
Each slide now holds a photo layer that carries the image. The layer
is 340px taller than the slide, top and bottom, so the plugin can move
it +-38px and no edge is ever exposed. The slide itself is never
transformed, so horizontal scroll, snap and the arrows are untouched.
The slide keeps its own background as a fallback for the moment before
the layer paints.
================================================================== */
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__photo{
position:absolute !important;
left:0 !important;right:0 !important;
top:-170px !important;bottom:-170px !important;
width:auto !important;height:auto !important;
min-height:0 !important;
z-index:0;pointer-events:none;
will-change:transform;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__slide > .elementor-element:not(.ag-night__photo){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__photo{top:0 !important;bottom:0 !important;transform:none !important}
}
/* MOBILE nav arrows matched to the Upcoming & Seasonal pair.
The two sections were close but not equal: this one had no gap on
mobile, and its arrow glyph was still inheriting the desktop 13.33x10
at stroke 1.5, so it looked smaller and thinner than the seasonal
one. Both are now the same: row with a 12px gap, buttons sharing the
width equally at 40px tall with a 2px radius, and a 20x20 glyph at
stroke 2. Desktop is untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__nav{
display:flex !important;flex-direction:row !important;
gap:12px !important;width:100% !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn{
flex:1 1 0 !important;width:100% !important;
height:40px !important;min-height:40px !important;
border-radius:2px !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn svg{
width:20px !important;height:20px !important;stroke-width:2 !important;
}
}
/* MOBILE nav arrows: 165 x 40 each.
They were sharing the row equally (flex:1), so their width followed
the screen. Each is now a fixed 165 x 40 and cannot grow or shrink;
with the 12px gap that is 342 total, so the pair sits inside the 343
content width and stays centred. Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__nav{
justify-content:center !important;gap:12px !important;
}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn{
flex:0 0 165.5px !important;
width:165.5px !important;max-width:165.5px !important;min-width:165.5px !important;
height:40px !important;min-height:40px !important;max-height:40px !important;
}
}
/* Nav arrows: width FILL, height 40 (mobile).
165.5 is what fill resolves to at 375 - two buttons plus the 12px gap
across a 343 content width. Pinning that number made them fixed, so
on any other phone width they no longer reached the edges. Width goes
back to fill (each takes an equal share of whatever is available) and
only the 40px height stays fixed - so it is 165.5 at 375 and still
edge to edge at 360, 390, 412. Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__nav{width:100% !important;gap:12px !important;justify-content:space-between !important}
.elementor-34148 .elementor-element.elementor-element-agnht001 .ag-night__btn{
flex:1 1 0 !important;
width:auto !important;min-width:0 !important;max-width:none !important;
height:40px !important;min-height:40px !important;max-height:40px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agrwd001 *//* ============================================================
ADEGA GAUCHA - REWARDS (Home 3)
Ported from the main homepage (post 14, section 5fa76a9).
Reveal/parallax omitted; the member counter is kept.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agrwd001{--kit-widget-spacing:0px}
.elementor-34148 .elementor-element.elementor-element-agrwd001{padding:0 0 54px !important;overflow-x:clip !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__hero{
position:relative !important;overflow:hidden !important;width:100% !important;
min-height:840px !important;padding:364px 0 40px !important;
display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__hero::after{
content:'';position:absolute;top:4px;right:4px;bottom:4px;left:4px;
border:1px solid rgba(246,235,221,.4);z-index:2;pointer-events:none;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reveal-bg{
position:absolute !important;inset:0 !important;z-index:0 !important;padding:0 !important;
background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__scrim{
position:absolute !important;inset:0 !important;z-index:1 !important;pointer-events:none !important;padding:0 !important;
background:linear-gradient(180deg,rgba(20,20,20,.1) 0%,rgba(20,20,20,.8) 100%) !important;
}
/* corner ribbon */
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-w{position:absolute !important;left:0 !important;top:0 !important;width:172px !important;height:112px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;z-index:3 !important;pointer-events:none !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-w > .elementor-widget-container{position:static !important;width:100% !important;height:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge{position:absolute;left:0;top:0;z-index:3;width:172px;height:112px;overflow:hidden;pointer-events:none}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-ribbon{
position:absolute;left:0;top:0;width:389.781px;height:42px;
transform:matrix(0.839,-0.545,0.545,0.839,-114,135.290);transform-origin:0 0;border-radius:2px;
background:linear-gradient(96.150deg,rgba(246,235,221,.4) 0%,rgba(246,235,221,.9) 55%,rgba(246,235,221,.4) 100%);
display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;padding:5px 10px 5px 8px;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-text{
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:125px;height:32px;flex:0 0 auto;
font-family:VOLTE,Figtree,sans-serif;font-size:14px;font-weight:600;line-height:16px;
letter-spacing:.05em;text-align:center;text-transform:uppercase;color:#86411A;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-text span{white-space:nowrap}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-count{font-variant-numeric:tabular-nums;display:inline-block;min-width:4.2em;text-align:right}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__body{position:relative;z-index:2;display:flex !important;flex-direction:column !important;align-items:center !important;padding:0 !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title .elementor-heading-title{text-shadow:0 4px 26px rgba(0,0,0,.55)}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title em{font-style:italic !important;font-family:'Instrument Serif',serif !important;font-weight:400 !important;display:inline-block !important;white-space:nowrap !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__sub{margin:40px auto 0 !important;max-width:446px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{
margin:60px auto 0 !important;display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:center !important;gap:40px !important;width:auto !important;
flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk{display:flex !important;flex-direction:row !important;align-items:center !important;gap:16px !important;width:auto !important;padding:0 !important;flex:0 0 auto !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk > .elementor-element{width:auto !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico img{width:34px !important;height:34px !important;display:block !important;object-fit:contain !important;padding:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text{max-width:200px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text p{margin:0}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text strong{font-weight:700 !important;font-family:inherit !important;letter-spacing:inherit !important;color:inherit !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__actions{
margin:40px auto 0 !important;display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:center !important;gap:24px !important;width:100% !important;
flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn{width:200px !important;flex:0 0 200px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button{
height:56px;width:200px;position:relative !important;overflow:hidden !important;z-index:1 !important;isolation:isolate !important;
background:transparent !important;box-shadow:inset 0 0 0 1px rgba(246,235,221,.4) !important;
transition:color .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--join .elementor-button::after{content:'';position:absolute;inset:0;z-index:-2;background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--join .elementor-button::before{background:#F6EBDD}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--join .elementor-button:hover{color:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--ghost .elementor-button::after{content:'';position:absolute;inset:0;z-index:-2;background:rgba(246,235,221,.25);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--ghost .elementor-button::before{background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--ghost .elementor-button:hover{color:#F6EBDD !important}
/* orange reserve bar */
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{
width:100% !important;max-width:902px !important;min-height:124px !important;
margin:78px auto 0 !important;padding:32px !important;background:linear-gradient(96.267deg,rgba(246,235,221,0) 44.75%,rgba(246,235,221,.08) 61.91%,rgba(246,235,221,0) 79.07%),linear-gradient(104.595deg,rgba(246,235,221,0) 19.20%,rgba(246,235,221,.09) 30.04%,rgba(246,235,221,0) 40.88%),#EC6E1A !important;border-radius:2px !important;
display:flex !important;flex-direction:row !important;align-items:center !important;
justify-content:space-between !important;gap:72px !important;flex-wrap:nowrap !important;--flex-wrap-mobile:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-txt{width:auto !important;flex:1 1 auto !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-sub{margin-top:4px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn{flex:0 0 240px !important;width:240px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button{
width:240px;height:56px;position:relative !important;overflow:hidden !important;z-index:1 !important;isolation:isolate !important;
background:transparent !important;box-shadow:inset 0 0 0 1px #F6EBDD !important;transition:color .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;border-radius:50%;z-index:-1;background:#F6EBDD;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button:hover{color:#141414 !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__js{display:none !important}
@media (max-width:1180px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__hero{min-height:700px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title .elementor-heading-title{font-size:48px !important;line-height:56px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{gap:36px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text p{font-size:14px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{margin-top:56px !important;padding:24px !important;gap:32px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-title .elementor-heading-title{font-size:22px !important;line-height:26px !important}
}
@media (max-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{flex-wrap:wrap !important;gap:24px 32px !important;max-width:620px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{flex-direction:column !important;align-items:flex-start !important;gap:18px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button{width:100% !important;flex:none !important}
}
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001{padding-bottom:26px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__hero{min-height:auto !important;padding:48px 16px 40px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__scrim{background:linear-gradient(180deg,rgba(20,20,20,.8) 10%,rgba(20,20,20,0) 50%,rgba(20,20,20,.8) 75%) !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__body{align-items:stretch !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title .elementor-heading-title{font-size:40px !important;line-height:40px !important;letter-spacing:.05em !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title .ag-rw__title-alt{display:inline !important;font-style:italic !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__sub{margin:20px auto 0 !important;max-width:343px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{margin:268px auto 0 !important;flex-direction:column !important;align-items:center !important;width:fit-content !important;gap:16px !important;max-width:none !important;flex-wrap:nowrap !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text,.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text p{font-size:16px !important;line-height:20px !important;font-weight:500 !important;letter-spacing:.15em !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__actions{margin:40px auto 0 !important;flex-direction:column !important;align-items:stretch !important;gap:12px !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button{width:100% !important;flex:none !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{
width:auto !important;max-width:none !important;min-height:172px !important;
margin:32px 16px 0 !important;padding:16px !important;
flex-direction:column !important;align-items:center !important;justify-content:center !important;
text-align:center !important;gap:16px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-title .elementor-heading-title{font-size:20px !important;line-height:24px !important;text-align:center !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-sub p{font-size:13px !important;line-height:20px !important;text-align:center !important}
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__preload{display:none !important}
/* Ribbon text nudged 2px down-left along the ribbon's own axis.
The ribbon is rotated by matrix(0.839,-0.545,0.545,0.839,...), so its
local +X points up-right; the arrow in the reference points the other
way, which is local -X. Translating the text block rather than the
ribbon keeps the ribbon itself exactly where Figma puts it. */
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__badge-text{transform:translateX(-2px)}
/* Third title line, restored and scoped properly this time.
Figma's MOBILE frame (1:884) sets this title on three lines -
JOIN THE / REWARDS PROGRAM / ADEGA GAUCHA, 343x120 at 40/40 - while the
desktop frame uses only the first two. The line existed but its
display:none was written unscoped, so it was hidden at every width and
read as dead markup; I deleted it on that basis, which was wrong.
It now shows below 1024 and is hidden from 1024 up. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__title .ag-rw__title-alt{display:none !important}
}
/* HOW IT WORKS on touch devices.
:hover sticks after a tap on touch, so the cream cursor-wipe filled
the button and stayed filled - leaving a near-white bar with the label
washed out. The wipe and its colour change are now gated behind
(hover: hover) and (pointer: fine), so only real pointers get them.
On touch the button keeps its resting glass fill and cream label, and
:active gives a brief press state instead. Desktop is unchanged. */
@media (hover: none), (pointer: coarse){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button::before,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button::before{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button:hover,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn .elementor-button:focus,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-btn .elementor-button:hover{
color:#F6EBDD !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__btn--ghost .elementor-button:active{background-color:rgba(246,235,221,.4) !important}
}
/* Rewards reserve strip: 902 x 124 on desktop, matching the other
reserve bar further down the page. Height is pinned with all three
properties and the vertical padding zeroed, since padding on top of
the 56px button was what pushed the other one past 124; the row is
centred so the title, sub and button keep their positions. max-width
guards narrow desktop windows. Tablet and mobile untouched. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{
width:902px !important;max-width:calc(100% - 48px) !important;
margin-left:auto !important;margin-right:auto !important;
height:124px !important;min-height:124px !important;max-height:124px !important;
padding-top:0 !important;padding-bottom:0 !important;
align-items:center !important;
}
}
/* Reserve bar, squared to Figma node 1:549:
902 x 124, radius 2, padding 32 on ALL FOUR sides, row, gap 72,
align-items:center, text block 526x60.
I had zeroed the vertical padding to force the height, which is not
what the file says - with box-sizing:border-box the 32px top and
bottom padding fits inside 124 and leaves exactly the 60px content
box the design uses. Padding is restored and the gap set to 72. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve{
padding:32px !important;
gap:72px !important;
box-sizing:border-box !important;
border-radius:2px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__reserve-txt{height:60px !important;gap:4px !important}
}
/* MOBILE perks: left-aligned icon + text rows, per your reference.
The column was centred and only as wide as its content, so each row
started at a different x and the icons did not line up. The list is
now a fixed 311-wide block (the same width the cards use) with every
row starting at the same left edge: icon box first at a fixed 34px so
it never shrinks, text beside it, 16px between them. Rows align to
the TOP rather than centre, so a wrapping line ('early access to
events & tastings') keeps its icon level with the first line instead
of drifting to the middle. Type, colours and icon size are unchanged;
this is alignment only. Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{
width:311px !important;max-width:311px !important;
margin-left:auto !important;margin-right:auto !important;
align-items:flex-start !important;
gap:20px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk{
width:100% !important;
display:flex !important;flex-direction:row !important;
align-items:flex-start !important;justify-content:flex-start !important;
text-align:left !important;
gap:16px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico{flex:0 0 34px !important;width:34px !important;max-width:34px !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text p{text-align:left !important;margin:0 !important}
}
/* MOBILE perks - exact transcription of Figma nodes 1:884 (the list)
and 1:1058 (one row). Three of my previous values were wrong and are
corrected here: the block is 343 wide, not 311; the row gap is 16,
not 20; and rows align CENTRE, not top - the file centres the icon
against the text, including on the wrapping third row.
list 343 wide, column, gap 16, align-items centre
row 343 x 34, row, gap 16, align-items centre
icon 34 x 34 box, padding 6, 135deg cream gradient
.4 -> 1 at 55% -> .4, glyph 22 wide, never shrinks
text flex-grow 1, Volte 500, 16/20, .150em, rgb(246,235,221),
uppercase, left-aligned
Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{
width:343px !important;max-width:343px !important;
margin-left:auto !important;margin-right:auto !important;
display:flex !important;flex-direction:column !important;
align-items:center !important;justify-content:center !important;
gap:16px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk{
width:343px !important;max-width:343px !important;
min-height:34px !important;
display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:flex-start !important;
gap:16px !important;text-align:left !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico{
flex:0 0 34px !important;width:34px !important;max-width:34px !important;
height:34px !important;min-height:34px !important;
align-self:stretch !important;
box-sizing:border-box !important;padding:6px !important;
display:flex !important;align-items:center !important;justify-content:center !important;
background:linear-gradient(135deg,rgba(246,235,221,.4) 0%,rgb(246,235,221) 55%,rgba(246,235,221,.4) 100%) !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico img,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico svg{width:22px !important;height:22px !important;display:block !important}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-text p{
flex:1 1 auto !important;margin:0 !important;text-align:left !important;
font-size:16px !important;line-height:20px !important;font-weight:500 !important;
letter-spacing:.15em !important;color:#F6EBDD !important;text-transform:uppercase !important;
}
}
/* Perk lines breaking early.
Figma's frame is 375 wide with 16px sides, so the row gets exactly
343 - and 'ON SIGNUP' / 'SIMPLE REWARDS' fit on one line with nothing
to spare. Real phones are often a few px narrower (372, 360), so the
row fell 2-4px short and the last words wrapped, leaving the blank
space you circled. The block reclaims 4px of the hero's side padding
with a small negative margin - it stays centred and nothing else
moves - and the first two rows are held to one line. The third row
still wraps after 'EVENTS &', exactly as the file has it. Below 360px
wrapping is allowed again so nothing can overflow the screen. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perks{
width:auto !important;max-width:343px !important;
margin-left:-4px !important;margin-right:-4px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk{width:100% !important;max-width:none !important}
}
@media (min-width:361px) and (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk:nth-child(1) .ag-rw__perk-text,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk:nth-child(1) .ag-rw__perk-text p,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk:nth-child(2) .ag-rw__perk-text,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk:nth-child(2) .ag-rw__perk-text p{white-space:nowrap !important}
}
/* 'EVENTS &' pulled up onto the first line.
The words are one text run, so the browser broke wherever the width
ran out. 'Early access to events &' is now wrapped in a nowrap span,
which forces the break to fall before TASTINGS - the same two lines
the Figma frame has. Below 360px the span is allowed to wrap again so
it cannot overflow a small screen. */
@media (min-width:361px) and (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__nb{white-space:nowrap !important}
}
@media (max-width:360px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__nb{white-space:normal !important}
}
/* Perk icons at 34x34.
The glyph was being drawn at 22px inside the 34px box, because that
is the size Figma gives the icon SYMBOL - but these three images are
the whole 34px frame (background included), not the bare glyph, so
they must fill the box edge to edge. The 6px padding is dropped for
the same reason, and the gradient behind them is turned off since
each SVG already carries it. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico{
width:34px !important;max-width:34px !important;height:34px !important;
min-width:34px !important;min-height:34px !important;
flex:0 0 34px !important;padding:0 !important;background:none !important;
}
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico img,
.elementor-34148 .elementor-element.elementor-element-agrwd001 .ag-rw__perk-ico svg{
width:34px !important;height:34px !important;max-width:34px !important;
display:block !important;object-fit:contain !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agsea001 *//* ============================================================
ADEGA GAUCHA — UPCOMING & SEASONAL
Figma desktop: frame 1:414, 1360x584 — four 331x480 cards,
gap 12; title 64/64 .05em centred with the kicker split left /
right. Figma mobile (1:884): one kicker line, 36/40 title,
horizontally snapped 331-wide track.
Card internals are FLEX, not absolute: a three-line title pushes
the tags and copy down instead of overlapping them.
date 20px chip, rgba(246,235,221,.25) blur 20
title Instrument Serif 32/40 (38 desktop) .05em uppercase
tags #EC6E1A / #FA8722, 12/16 .2em uppercase
copy Volte 500 15/20 .1em uppercase rgba(246,235,221,.9)
link Volte 600 14/16 .3em uppercase, hairline rule above
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agsea001{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(-50vw + 50%) !important;
margin-right:0 !important;
padding:40px 16px 48px !important;
background-color:#141414 !important;
position:relative;
overflow:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 > .elementor-element{position:relative;z-index:1}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-band{margin:0 !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-wrap{width:100%}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-head{
display:flex;
flex-direction:column;
align-items:stretch;
gap:4px;
text-align:center;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-l,.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-r{display:none}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-m{color:#FFFFFF}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick{
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:12px;font-weight:500;line-height:24px;
letter-spacing:.2em;text-transform:uppercase;
color:#F6EBDD;
white-space:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-title{
margin:0;
font-family:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
font-size:36px;font-weight:400;line-height:40px;
letter-spacing:.04em;text-transform:uppercase;
color:#F6EBDD;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-track{
margin-top:40px;
display:flex;
flex-direction:row;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-track::-webkit-scrollbar{display:none}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card{
position:relative;
flex:0 0 331px;
width:331px;
max-width:calc(100vw - 44px);
min-height:480px;
display:flex;
flex-direction:column;
align-items:flex-start;
padding:49px 16px 28px;
box-sizing:border-box;
overflow:hidden;
scroll-snap-align:center;
background-color:#252221;
background-position:center,center;
background-size:cover,cover;
background-repeat:no-repeat,no-repeat;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card::after{
content:'';
position:absolute;
left:4px;top:4px;right:4px;bottom:4px;
border:1px solid rgba(246,235,221,.4);
pointer-events:none;
z-index:2;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card > *{position:relative;z-index:3}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-date{
position:absolute;
left:4px;top:17px;
height:20px;
padding:4px 12px;
box-sizing:border-box;
display:flex;align-items:center;
background:rgba(246,235,221,.25);
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:12px;font-weight:600;line-height:16px;
letter-spacing:.2em;text-transform:uppercase;
color:#F6EBDD;
white-space:nowrap;
z-index:4;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-ttl{
margin:0;
font-family:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
font-size:32px;font-weight:400;line-height:40px;
letter-spacing:.05em;text-transform:uppercase;
color:#F6EBDD;
text-wrap:pretty;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-spacer{flex:1 1 auto;min-height:24px;width:100%}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-tags{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
margin:0 0 24px -12px;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-tag{
padding:4px 12px;
box-sizing:border-box;
display:flex;align-items:center;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:12px;font-weight:600;line-height:16px;
letter-spacing:.2em;text-transform:uppercase;
color:#F6EBDD;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-tag--dark{background:#EC6E1A}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-tag--light{background:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-tag--two{font-weight:500;align-items:flex-start}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-copy{
margin:0;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:15px;font-weight:500;line-height:20px;
letter-spacing:.1em;text-transform:uppercase;
color:rgba(246,235,221,.9);
text-wrap:pretty;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-rule{
display:block;
width:calc(100% + 24px);
margin:24px -12px 0;
height:1px;
background:rgba(246,235,221,.4);
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link{
margin-top:24px;
width:100%;
height:16px;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:14px;font-weight:600;line-height:16px;
letter-spacing:.3em;text-transform:uppercase;
color:#F6EBDD;
text-decoration:none;
transition:color .3s ease;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link:hover{color:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link svg{
width:14px;height:14px;flex:0 0 14px;
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-nav{display:none}
.elementor-34148 .elementor-element.elementor-element-agsea001.is-scrollable .us-nav{
display:flex;
flex-direction:row;
gap:12px;
align-items:center;
margin:40px auto 0;
width:100%;
max-width:1360px;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow{
flex:1 1 0;
height:40px;
border:1px solid rgba(246,235,221,.4);
border-radius:2px;
background:transparent;
display:flex;align-items:center;justify-content:center;
color:#F6EBDD;
cursor:pointer;
transition:background-color .3s ease,border-color .3s ease;
-webkit-appearance:none;appearance:none;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:hover{background:rgba(246,235,221,.12);border-color:rgba(246,235,221,.55)}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow svg{
width:20px;height:20px;
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
@media (min-width:768px){
.elementor-34148 .elementor-element.elementor-element-agsea001{padding:64px 32px 72px !important}
.elementor-34148 .elementor-element.elementor-element-agsea001
.elementor-34148 .elementor-element.elementor-element-agsea001
}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agsea001{padding:80px 24px 96px !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-head{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
column-gap:0;
width:100%;
max-width:1360px;
margin:0 auto;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-m{display:none}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-l,.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-r{display:block}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-l{grid-area:1 / 1 / 2 / 2;justify-self:center;align-self:center}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-title{grid-area:1 / 2 / 2 / 3;margin:0;font-size:64px;line-height:64px;letter-spacing:.05em;white-space:nowrap}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-r{grid-area:1 / 3 / 2 / 4;justify-self:center;align-self:center}
.elementor-34148 .elementor-element.elementor-element-agsea001
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-track{width:100%;max-width:1360px;margin:40px auto 0}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-ttl{font-size:38px}
}
@media (min-width:1440px){
.elementor-34148 .elementor-element.elementor-element-agsea001{padding-left:40px !important;padding-right:40px !important}
}
.elementor-34148 .elementor-element.elementor-element-agsea001.ag-armed .ag-fade{opacity:0;transform:translateY(16px);will-change:transform,opacity;
transition:opacity .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s),transform .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s)}
.elementor-34148 .elementor-element.elementor-element-agsea001.ag-armed.ag-played .ag-fade{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agsea001.ag-armed .ag-fade{opacity:1 !important;transform:none !important;transition:none !important}
}
/* card 4 zoom: that photo is landscape 16:9 in a portrait 331x480
card, so cover crops the sides hard. The image is height-
constrained, so dropping it to 94% height scales it down a
touch and reveals a little more of the frame. The ~3% strips
top and bottom fall where the card gradient is already 90%
dark, so they do not read as gaps. Gradient layer stays cover. */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-of-type(4){background-size:cover,auto 94% !important;background-position:center,center !important}
/* Mobile-only prev/next pair under the track, matching the pair in the
'A Night at Adega' section: full-width 40px bars, 1px cream keyline,
2px radius, transparent, small 13.33x10 arrow, cream wipe on hover.
Desktop keeps the arrows exactly as they were. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-nav{display:flex !important;flex-direction:row !important;gap:12px !important;width:100% !important;max-width:none !important;margin:40px auto 0 !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow{
flex:1 1 0 !important;width:100% !important;height:40px !important;
border:1px solid rgba(246,235,221,.4) !important;border-radius:2px !important;background:transparent !important;
display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;
position:relative !important;overflow:hidden !important;z-index:1 !important;
transition:border-color .3s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow::before{
content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);transform:translate(-50%,-50%);
width:0;height:0;background:#F6EBDD;border-radius:50%;z-index:-1;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:hover::before{width:800px;height:800px}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:hover{border-color:rgba(246,235,221,.6) !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow svg{
width:13.33px !important;height:10px !important;stroke:#F6EBDD;stroke-width:1.5;fill:none;
display:block;position:relative;z-index:2;transition:stroke .4s ease;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:hover svg{stroke:#141414}
}
/* Whole card clickable. Each card already ends in its own link (VIEW
SPECIALS, SEE FULL MENU...), so rather than add a script the link is
given a transparent overlay that fills the card. Clicking anywhere on
the card follows that same href, and the card's hover colour change
now fires from anywhere on the card too.
z-index 4 puts the overlay above the card's content (z-index 3) but the
1px keyline on ::after keeps pointer-events:none, so nothing is lost.
Drag-scrolling the carousel still works - a drag is not a click. */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card{cursor:pointer}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link::after{
content:'';position:absolute;left:0;top:0;right:0;bottom:0;
z-index:4;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:hover .us-link{color:#FA8722}
/* Matched to Figma exactly: the file has only a 375 and a 1440 frame, so
the intermediate 768 steps were invented. Title goes 36/40 (mobile,
node 1:884) up to 1023 and 64/64 (desktop, node 1:415) from 1024; the
card track gap goes 8 to 12 at the same boundary. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-track{gap:12px !important}
}
/* ==================================================================
SEASONAL CARDS - reveal + hover animation set.
Ported from the reference snippet and re-pointed at this section's
own class names. The reference had separate reveal-bg / overlay
divs per card; here the photo is a background layer on .us-card, so
the dark overlay uses ::before (::after is already the 4px keyline)
and the photo is revealed by fading that overlay off. Every value -
easing, durations, the 0.15s stagger, the clip-path figures - is
taken from the snippet unchanged.
================================================================== */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card{
opacity:0;
transform:translateX(-150px) translateY(50px) rotate(-15deg);
transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1);
will-change:opacity,transform;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(1){--stagger:0s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(2){--stagger:.15s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(3){--stagger:.3s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(4){--stagger:.45s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(5){--stagger:.6s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card:nth-child(6){--stagger:.75s}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card.is-visible{
opacity:1;transform:translateX(0) translateY(0) rotate(0deg);
transition-delay:var(--stagger,0s);
}
/* dark plate that lifts off the photo */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:#141414;opacity:1;
transition:opacity .8s cubic-bezier(.25,1,.5,1);
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card.is-visible::before{opacity:0;transition-delay:var(--stagger,0s)}
/* card headline wipes up behind a clip */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-ttl{
transform:translateY(100%);opacity:0;clip-path:inset(0 0 100% 0);
transition:transform .8s cubic-bezier(.25,1,.5,1),opacity .8s cubic-bezier(.25,1,.5,1),clip-path .8s cubic-bezier(.25,1,.5,1);
transition-delay:.15s;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card.is-visible .us-ttl{
transform:translateY(0);opacity:1;clip-path:inset(-20% -20% -20% -20%);
transition-delay:calc(var(--stagger,0s) + .15s);
}
/* link hover: colour shift plus the arrow nudging right */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link{transition:color .4s ease}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link:hover,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link:focus-visible{color:#FA8722}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link svg{transition:transform .4s cubic-bezier(.25,1,.5,1)}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link:hover svg,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-link:focus-visible svg{transform:translateX(4px)}
/* word-by-word masked reveal for the head */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-word-i{
display:inline-block;transform:translateY(100%);filter:blur(10px);opacity:0;
will-change:transform,filter,opacity;
transition:transform .8s cubic-bezier(.25,1,.5,1),filter .8s ease-out,opacity .8s ease-out;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .is-text-visible .us-word-i{transform:translateY(0);filter:blur(0);opacity:1}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-ttl,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-word-i{transform:none !important;opacity:1 !important;filter:none !important;clip-path:none !important;transition:none !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card::before{opacity:0 !important;transition:none !important}
}
/* The two side labels stay at 12px on desktop. A step was lifting them
to 14px from 1024 up; the mobile kicker was already 12. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-l,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-kick-r{font-size:12px !important;line-height:24px !important;letter-spacing:.2em !important}
}
/* Scroll lag fix: the word reveal was animating filter:blur on every
word span, which forces a full repaint each frame. Transform and
opacity are GPU-composited, blur is not. The blur is dropped and
will-change narrowed to transform/opacity; the reveal itself is
unchanged in timing and movement. */
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-word-i{filter:none !important;will-change:transform,opacity !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .is-text-visible .us-word-i{filter:none !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card{will-change:auto !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-card.is-visible{will-change:auto !important}
/* Mobile prev/next pair, squared to Figma node 1:884:
row 343x40, gap 12, two equal buttons (flex-grow:1), each h40,
radius 2, inset 1px rgba(246,235,221,.4), icon 20x20.
The icon was rendering 13.33x10 with a 1.5 stroke - noticeably
smaller and lighter than the file - so it is set to 20x20 with the
same stroke-width 2 the desktop pair uses. The cream cursor-wipe is
also removed on touch: :hover sticks after a tap there, which left a
filled button with a dark arrow. A brief :active press replaces it. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow svg{
width:20px !important;height:20px !important;
stroke-width:2 !important;
}
}
@media (hover: none), (pointer: coarse){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow::before{display:none !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:hover svg,
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:focus svg{stroke:#F6EBDD !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow:active{background:rgba(246,235,221,.12) !important}
}
/* MOBILE nav arrows: 165 x 40 each, same as the night section.
They were flex:1 1 0, so each took half of whatever the screen gave.
Both are now fixed at 165 x 40 with the 12px gap - 342 total, inside
the 343 content width - and the row is centred. Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-nav{
justify-content:center !important;gap:12px !important;
}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow{
flex:0 0 165.5px !important;
width:165.5px !important;max-width:165.5px !important;min-width:165.5px !important;
height:40px !important;min-height:40px !important;max-height:40px !important;
}
}
/* Nav arrows: width FILL, height 40 (mobile).
165.5 is what fill resolves to at 375 - two buttons plus the 12px gap
across a 343 content width. Pinning that number made them fixed, so
on any other phone width they no longer reached the edges. Width goes
back to fill (each takes an equal share of whatever is available) and
only the 40px height stays fixed - so it is 165.5 at 375 and still
edge to edge at 360, 390, 412. Desktop untouched. */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-nav{width:100% !important;gap:12px !important;justify-content:space-between !important}
.elementor-34148 .elementor-element.elementor-element-agsea001 .us-arrow{
flex:1 1 0 !important;
width:auto !important;min-width:0 !important;max-width:none !important;
height:40px !important;min-height:40px !important;max-height:40px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agmom001 *//* ============================================================
ADEGA GAUCHA — INSTAGRAM / MOMENTS
Figma desktop 1:549, mobile 1:884.
Full-bleed rgba(60,56,54,.5) panel. Mobile: one centred
eyebrow line, serif title, orange handle, sub-copy, then a
240x343 card strip. Desktop: the eyebrow splits to left /
right of the centred title; cards become 280x400.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agmom001{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(-50vw + 50%) !important;
margin-right:0 !important;
padding:0 !important;
background-color:#141414 !important;
position:relative;
overflow:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 > .elementor-element{position:relative;z-index:1}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-band{margin:0 !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-wrap{
position:relative;
width:100%;
padding:40px 0 72px;
box-sizing:border-box;
background:rgba(60,56,54,.5);
overflow:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-glow{
position:absolute;
left:50%;top:40px;
width:400px;height:400px;
transform:translateX(-50%);
border-radius:50%;
background:rgb(80,78,78);
filter:blur(70px);
opacity:.5;
pointer-events:none;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-head{
position:relative;z-index:2;
display:grid;
grid-template-columns:auto auto;
justify-content:center;
align-items:baseline;
column-gap:.35em;
padding:0 24px;
text-align:center;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eyebrow{
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:12px;font-weight:500;line-height:24px;
letter-spacing:.2em;text-transform:uppercase;
color:#F6EBDD;
white-space:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{
grid-column:1 / -1;
margin:4px 0 0;
font-family:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
font-size:34px;font-weight:400;line-height:40px;
letter-spacing:.04em;
text-transform:uppercase;
color:#F6EBDD;
text-wrap:balance;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title em{
display:block;
font-style:italic;
text-transform:none;
color:#FA8722;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-sub{
grid-column:1 / -1;
justify-self:center;
margin:24px 0 0;
max-width:674px;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:13px;font-weight:500;line-height:20px;
letter-spacing:.05em;
color:#F6EBDD;
text-wrap:pretty;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-strip{
position:relative;z-index:2;
margin-top:40px;
width:100%;
overflow:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-track{
display:flex;
gap:40px;
width:max-content;
animation:ag-ig-marquee 48s linear infinite;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-strip:hover .ig-track,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-strip:focus-within .ig-track{animation-play-state:paused}
@keyframes ag-ig-marquee{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - 20px),0,0)}
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card{
position:relative;
flex:0 0 auto;
width:240px;height:343px;
display:block;
overflow:hidden;
text-decoration:none;
background:#3C3836;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
display:block;
transition:transform .8s cubic-bezier(.25,1,.5,1);
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card:hover img{transform:scale(1.04)}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-bar{
position:absolute;left:0;top:0;right:0;
height:32px;
display:flex;align-items:flex-start;justify-content:space-between;
gap:8px;
padding:4px 4px 12px;
box-sizing:border-box;
background:linear-gradient(180deg,rgba(20,20,20,.4) 0%,rgba(20,20,20,0) 100%);
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-tag{
font-family:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
font-style:italic;font-weight:400;
font-size:12px;line-height:16px;
color:#F6EBDD;
white-space:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-ico{width:16px;height:16px;flex:0 0 16px;color:#F6EBDD;display:block}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-play{
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
width:32px;height:32px;
border-radius:40px;
background:rgba(20,20,20,.2);
-webkit-backdrop-filter:blur(40px);
backdrop-filter:blur(40px);
display:flex;align-items:center;justify-content:center;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-play svg{width:12px;height:12px;display:block}
@media (min-width:768px){
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-wrap{padding:40px 0 96px}
.elementor-34148 .elementor-element.elementor-element-agmom001
.elementor-34148 .elementor-element.elementor-element-agmom001
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card{width:260px;height:372px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-glow{width:440px;height:440px}
}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-wrap{padding:40px 0 120px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-head{
grid-template-columns:1fr auto 1fr;
grid-template-rows:auto auto;
align-items:center;
column-gap:0;
padding:0 32px;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-l{grid-area:1 / 1 / 2 / 2;justify-self:center;align-self:center}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{grid-area:1 / 2 / 2 / 3;margin:0;font-size:52px;line-height:56px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-r{grid-area:1 / 3 / 2 / 4;justify-self:center;align-self:center}
.elementor-34148 .elementor-element.elementor-element-agmom001
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-sub{grid-area:2 / 1 / 3 / 4;margin-top:24px;font-size:16px;line-height:25px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-strip{margin-top:40px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card{width:280px;height:400px}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-glow{width:480px;height:480px;top:200px}
}
.elementor-34148 .elementor-element.elementor-element-agmom001.ag-armed .ag-fade{opacity:0;transform:translateY(16px);will-change:transform,opacity;
transition:opacity .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s),transform .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s)}
.elementor-34148 .elementor-element.elementor-element-agmom001.ag-armed .ig-strip.ag-fade{--ag-d:.15s}
.elementor-34148 .elementor-element.elementor-element-agmom001.ag-armed.ag-played .ag-fade{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agmom001.ag-armed .ag-fade{opacity:1 !important;transform:none !important;transition:none !important}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-track{animation:none !important}
}
/* The eyebrow pair shared the head's two auto columns with the title and
the 674px sub-copy. A grid item that spans both columns still feeds
their sizing, so each column grew to roughly half the title width and
the two eyebrows were pushed apart. They now sit in their own centred
flex row; at 1024+ the wrapper becomes display:contents so the existing
left/right grid placement is completely unchanged. */
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-row{grid-column:1 / -1;display:flex;flex-direction:row;justify-content:center;align-items:baseline;gap:.35em}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-row{display:contents}
}
/* ==================================================================
HEAD ENTRANCE
The HTML widget carries an Elementor entrance animation, so Elementor
swaps .elementor-invisible for .animated when the section scrolls into
view. The three inner animations below sit paused until that class
lands, which is what stages them without any script of their own.
We value slide from the left + fade, 2s
your impressions same, 350ms later
Tag us on Instagram fade only, 700ms later
================================================================== */
@keyframes ag-ig-in-left{
from{opacity:0;transform:translateX(-48px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes ag-ig-in-fade{
from{opacity:0}
to{opacity:1}
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-l,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-r,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{
animation-duration:2s;
animation-timing-function:cubic-bezier(.22,1,.36,1);
animation-fill-mode:both;
animation-play-state:paused;
}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-l{animation-name:ag-ig-in-left;animation-delay:0s}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-r{animation-name:ag-ig-in-left;animation-delay:.35s}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{animation-name:ag-ig-in-fade;animation-delay:.7s}
.elementor-34148 .elementor-element.elementor-element-agmom001 .animated .ig-eb-l,
.elementor-34148 .elementor-element.elementor-element-agmom001 .animated .ig-eb-r,
.elementor-34148 .elementor-element.elementor-element-agmom001 .animated .ig-title{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-l,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-r,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{animation:none !important;opacity:1 !important;transform:none !important}
}
/* Matched to Figma: the file carries only a 375 and a 1440 frame, so the
768 interpolations were invented. Title holds 34/40 .04em (mobile node
1:884) to 1023, sub holds 13/20 .05em; both take their desktop values
from 1024. */
/* Desktop type, set to the values you gave:
'Tag us on Instagram / #AdegaGaucha' 48px on a 52px line
'WE VALUE' and 'YOUR IMPRESSIONS' 12px
The title had been on 52/56 - a size that appears nowhere in the Figma
file - and the two eyebrows were being stepped up to 14px from 1024.
Mobile keeps 34/40 and 12px, untouched. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-title{font-size:48px !important;line-height:52px !important}
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eyebrow,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-l,
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-eb-r{font-size:12px !important;line-height:24px !important;letter-spacing:.2em !important}
}
/* Instagram cards fixed at 280x400 on every device.
Desktop was already 280x400; the smaller breakpoints were scaled down
(240x343 base, 260x372 tablet). 280 still clears the gutters on a
375px phone, so the card is the same size everywhere and the images
keep their object-fit:cover crop. */
.elementor-34148 .elementor-element.elementor-element-agmom001 .ig-card{width:280px !important;height:400px !important}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agrsv001 *//* Reserve bar — Figma node 1:549: 902x124 bar, radius 2, fill EC6E1A,
padding 32, gap 72 (Elementor uses space-between, same result at 902),
title 28/32 w500 .05em uppercase, sub 15/24 w500 .05em, button 240x56
radius 2 with a 1px cream keyline. Everything above is native Elementor;
only the three things Elementor cannot express live here. */
/* 1. the bar overlaps the Instagram panel above by 40px (Figma: panel
bottom 760, bar top 720), so it hangs 84px below the panel edge. */
.elementor-34148 .elementor-element.elementor-element-agrsv001{position:relative;z-index:2;margin-top:-40px}
/* 2. centre the fixed 902px bar in the full-width section. */
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar{margin-left:auto;margin-right:auto}
/* 3. Figma's two diagonal sheen passes over the orange — more colour
stops than an Elementor gradient background allows. */
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar::before{
content:'';position:absolute;inset:0;border-radius:2px;pointer-events:none;
background:
linear-gradient(96.267deg,rgba(246,235,221,0) 44.75%,rgba(246,235,221,.08) 61.91%,rgba(246,235,221,0) 79.07%),
linear-gradient(104.595deg,rgba(246,235,221,0) 19.20%,rgba(246,235,221,.09) 30.04%,rgba(246,235,221,0) 40.88%);
}
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar > *{position:relative;z-index:1}
/* 4. The section must NOT paint its own background. Figma has the bar
overlapping the grey Instagram panel, so the 40px of overlap has to
show grey either side of the orange. With #141414 on the section that
band was painted dark, which read as the bar sitting below the panel
instead of hanging into it. Transparent restores the Figma reading. */
.elementor-34148 .elementor-element.elementor-element-agrsv001{background-color:transparent !important;background-image:none !important}
/* 5. Section background #141414, but painted from 40px down only: the top
40px is the band where the bar hangs into the grey Instagram panel,
and that band has to stay grey (Figma node 1:549). The fill sits on a
pseudo-element at z-index 0 so the bar, at z-index 1, stays above it. */
.elementor-34148 .elementor-element.elementor-element-agrsv001::after{
content:'';position:absolute;left:0;right:0;top:40px;bottom:0;
background:#141414;z-index:0;pointer-events:none;
}
.elementor-34148 .elementor-element.elementor-element-agrsv001 > .elementor-element{position:relative;z-index:1}
/* 6. Figma frame 1:549 is 1560x844 and the bar's bottom edge IS the frame's
bottom edge (720 + 124 = 844): there is no strip of section below the
bar. The 40px bottom padding was adding one, which read as the bar
floating in a dark band instead of sitting on the section's edge.
Mobile 1:884 is the same: bar 645 + 172 = 817, nothing after it. */
.elementor-34148 .elementor-element.elementor-element-agrsv001{padding-bottom:0 !important}
/* 7. The overlap is set natively (Advanced > Margin, top -40) so Elementor
emits --margin-top:-40px. A CSS margin-top alone was losing to
Elementor's own margin-block-start:var(--margin-top) on .e-con, which
is why the 40px band above the bar rendered as the section's ink
instead of the grey panel hanging behind it. */
.elementor-34148 .elementor-element.elementor-element-agrsv001{--margin-top:-40px;margin-block-start:-40px !important;margin-top:-40px !important}
/* 8. Seam at the bottom joint. The #141414 fill on ::after ended exactly
at the section's bottom edge, and that edge sits on a fractional
pixel (the section is pulled up 40px from a fractional panel
bottom). At some scroll offsets neither this fill nor the guest
section below painted that row, which showed as a faint line either
side of the bar. Bleeding the fill 1px past the edge closes it; the
section has no overflow clip, and the guest section paints over it. */
.elementor-34148 .elementor-element.elementor-element-agrsv001::after{bottom:-1px !important}
/* RESERVE A TABLE - same cursor wipe as the signature buttons.
Elementor's own hover (solid cream fill, instant swap) is replaced by
the wipe: a cream circle on ::before grows from the pointer and the
label turns ink. There is no ::after fill here because the bar behind
the button is already orange - on the signature buttons that layer
supplies the orange, which this button does not need. */
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button{
position:relative !important;overflow:hidden !important;isolation:isolate;
background-color:transparent !important;
transition:color .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button::before{
content:'' !important;position:absolute !important;
top:var(--y,50%) !important;left:var(--x,50%) !important;
transform:translate(-50%,-50%) !important;
width:0 !important;height:0 !important;border-radius:50% !important;
background:#F6EBDD !important;z-index:-1 !important;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s !important;
}
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button:hover::before,
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button:focus-visible::before{width:800px !important;height:800px !important}
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button:hover,
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__btn .elementor-button:focus-visible{
color:#141414 !important;background-color:transparent !important;
border-color:rgba(246,235,221,.4) !important;
}
/* Reserve bar: exactly 124px tall on desktop.
min-height was already 124, but the 32px top and bottom padding sat
on top of the 56px button, so the bar grew past it. On desktop the
height is fixed at 124 and the vertical padding removed - the row is
centred, so the title, sub and button sit where they did, just inside
a bar that no longer stretches. Horizontal padding is untouched, and
this applies from 1025 up only, so tablet and mobile keep their own
stacking. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar{
height:124px !important;min-height:124px !important;max-height:124px !important;
padding-top:0 !important;padding-bottom:0 !important;
align-items:center !important;
}
}
/* Reserve bar: 902 x 124 on desktop.
The bar was filling the section width; it is now a fixed 902px, still
centred, with the height pinned at 124 (the vertical padding stays at
0 from the earlier fix, and the row is centred, so the title, sub and
button keep their positions inside it). max-width guards narrow
desktop windows so 902 can never overflow the gutters. Tablet and
mobile are untouched. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar{
width:902px !important;max-width:calc(100% - 48px) !important;
margin-left:auto !important;margin-right:auto !important;
height:124px !important;min-height:124px !important;max-height:124px !important;
}
}
/* Reserve bar, squared to Figma node 1:549:
902 x 124, radius 2, padding 32 on ALL FOUR sides, row, gap 72,
align-items:center, text block 526x60.
I had zeroed the vertical padding to force the height, which is not
what the file says - with box-sizing:border-box the 32px top and
bottom padding fits inside 124 and leaves exactly the 60px content
box the design uses. Padding is restored and the gap set to 72. */
@media (min-width:1025px){
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__bar{
padding:32px !important;
gap:72px !important;
box-sizing:border-box !important;
border-radius:2px !important;
}
.elementor-34148 .elementor-element.elementor-element-agrsv001 .ag-rsv__tx{height:60px !important;gap:4px !important}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agglt001 *//* ============================================================
ADEGA GAUCHA — STAY ON THE GUEST LIST
Figma desktop: band 1360x560 at (40,9381), photo under a
rgb(20,20,20) -> transparent 35.33% top gradient; card 900x232
at (229,248), bg rgb(60,56,54) blur 40, inner inset 8px hairline.
Figma mobile: band 375x720, card 343x524 at (16,156), radius 4,
inner inset 4px; stamp above a centred 44/48 title.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agglt001{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(-50vw + 50%) !important;
margin-right:0 !important;
padding:0 !important;
background-color:#141414 !important;
position:relative;
overflow:hidden;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 > .elementor-element{position:relative;z-index:1}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-wrap{margin:0 !important;width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-band{
position:relative;
width:100%;
padding:156px 16px 40px;
box-sizing:border-box;
background-color:#3C3836;
background-image:
linear-gradient(180deg,rgb(20,20,20) 0%,rgba(20,20,20,0) 35.33%),
url(https://adegagaucha.com/wp-content/uploads/2026/09/ag-guest-bg-mobile.jpg);
background-position:center top,49.3% 100%;
background-size:auto,cover;
background-repeat:no-repeat;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-card{
position:relative;
width:100%;
max-width:343px;
margin:0 auto;
padding:4px;
box-sizing:border-box;
border-radius:4px;
background:rgb(60,56,54);
/* backdrop-filter removed: the background above is opaque so the
blur was invisible, but it forced a full-card re-raster every
frame while ScrollSmoother translates the page - that was the
scroll vibration. */
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-inner{
position:relative;
padding:44px 20px;
box-sizing:border-box;
box-shadow:inset 0 0 0 1px rgba(246,235,221,.8);
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-head{
display:flex;
flex-direction:column;
align-items:center;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-stamp{
position:relative;
z-index:2;
display:block;
width:96px;height:auto;
margin:0;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-title{
position:relative;
z-index:1;
margin:-12px 0 0;
font-family:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
font-size:44px;font-weight:400;line-height:48px;
letter-spacing:.05em;
text-transform:uppercase;
text-align:center;
color:#F6EBDD;
text-wrap:balance;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-form{
display:flex;
flex-direction:column;
gap:24px;
margin-top:48px;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field{
display:flex;
flex-direction:column;
gap:4px;
height:56px;
padding:0 0 12px;
box-sizing:border-box;
border-bottom:1px solid rgba(255,255,255,.16);
cursor:text;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-label{
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:10px;font-weight:400;line-height:16px;
letter-spacing:.2em;text-transform:uppercase;
color:#FFFFFF;
white-space:nowrap;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field input{
width:100%;
margin:0;padding:0;
border:0;outline:0;
background:transparent;
box-shadow:none;
border-radius:0;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:20px;font-weight:400;line-height:24px;
letter-spacing:-.02em;
color:#F6EBDD;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field input::placeholder{color:rgba(255,255,255,.4);opacity:1}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field:focus-within{border-bottom-color:rgba(250,135,34,.8)}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn{
width:100%;
height:56px;
border:0;
border-radius:2px;
background:#FA8722;
box-shadow:inset 0 0 0 1px rgba(246,235,221,.4);
padding:21px 8px 19px;
box-sizing:border-box;
display:flex;align-items:center;justify-content:center;
font-family:Volte,Figtree,'Helvetica Neue',Arial,sans-serif;
font-size:14px;font-weight:600;line-height:16px;
letter-spacing:.3em;text-transform:uppercase;
color:#F6EBDD;
white-space:nowrap;
cursor:pointer;
transition:background-color .3s ease,box-shadow .3s ease;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn:hover{background:#EC6E1A;box-shadow:inset 0 0 0 1px rgba(246,235,221,.8)}
@media (min-width:768px){
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-band{padding:200px 32px 64px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-card{max-width:704px;padding:8px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-inner{padding:40px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-head{display:block}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-stamp{position:absolute;right:0;top:0;width:96px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-title{margin:0;text-align:left;max-width:calc(100% - 120px)}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:24px;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn{grid-column:1 / -1;max-width:200px}
}
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-band{
max-width:1360px;
margin:0 auto;
padding:248px 0 80px;
background-image:
linear-gradient(180deg,rgb(20,20,20) 0%,rgba(20,20,20,0) 35.33%),
url(https://adegagaucha.com/wp-content/uploads/2026/09/bg-guest-list.png);
background-position:center top,center;
background-size:auto,cover;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-card{max-width:900px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-inner{padding:48px;min-height:216px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-stamp{right:24px;top:24px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-title{font-size:48px;line-height:56px;max-width:578px}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-form{
display:flex;
flex-direction:row;
align-items:flex-end;
gap:24px;
margin-top:24px;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field{flex:1 1 0;min-width:0}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn{flex:0 0 200px;width:200px;max-width:none}
}
@media (min-width:1440px){
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-band{padding-left:0;padding-right:0}
}
.elementor-34148 .elementor-element.elementor-element-agglt001.ag-armed .ag-fade{opacity:0;transform:translateY(16px);will-change:transform,opacity;
transition:opacity .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s),transform .8s cubic-bezier(.25,1,.5,1) var(--ag-d,0s)}
.elementor-34148 .elementor-element.elementor-element-agglt001.ag-armed.ag-played .ag-fade{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.elementor-34148 .elementor-element.elementor-element-agglt001.ag-armed .ag-fade{opacity:1 !important;transform:none !important;transition:none !important}
}
/* scroll-stability: own layer, no sub-pixel resampling as the
smoother moves the page. */
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-card{transform:translateZ(0) !important;backface-visibility:hidden !important;-webkit-backface-visibility:hidden !important}
/* Desktop side gaps, Figma frame 1:27 (1440 wide): the guest-list band
sits at left 40, width 1360, so the gap is exactly 40px on the left and
40px on the right. Held as a percentage measure so it stays 40 / 40 at
every desktop width instead of growing with the window the way a fixed
1360 max-width did. Desktop only. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-band{max-width:calc(100% - 80px) !important;margin:0 auto !important}
}
/* Breathing space above the flame band, as in the reference: the orange
reserve bar closes, then a run of section ink before the band starts.
80px, which is the spacing step this page already uses between blocks
(40 / 80 / 120). It goes on the SECTION, not the band, so the band's
own top gradient and its 248px inset above the card are untouched.
Desktop only. */
@media (min-width:1024px){
.elementor-34148 .elementor-element.elementor-element-agglt001{padding-top:80px !important}
}
/* JOIN NOW button - restored to the treatment used everywhere else.
Home 3 was doing a flat colour swap on hover (FA8722 -> EC6E1A). The
main homepage's guest button, and every other button on this page,
uses the cursor wipe: the orange sits on ::after, a cream circle on
::before grows from the pointer, and the label turns ink. Values are
copied from the homepage rule. Size, radius and type are untouched. */
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn{
position:relative !important;overflow:hidden !important;isolation:isolate;
background:transparent !important;
box-shadow:inset 0 0 0 1px rgba(246,235,221,.4) !important;
transition:color .4s ease !important;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn::after{
content:'' !important;position:absolute !important;inset:0 !important;
background:#FA8722 !important;z-index:-2 !important;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn::before{
content:'' !important;position:absolute !important;
top:var(--y,50%) !important;left:var(--x,50%) !important;
transform:translate(-50%,-50%) !important;
width:0 !important;height:0 !important;border-radius:50% !important;
background:#F6EBDD !important;z-index:-1 !important;
transition:width .4s ease-out,height .4s ease-out,top .1s,left .1s !important;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn:hover::before,
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn:focus-visible::before{width:800px !important;height:800px !important}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn:hover,
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-btn:focus-visible{color:#141414 !important;background:transparent !important}
/* The 768 step set this title to 40/44 - smaller than BOTH the mobile
44/48 (Figma 1:884) and the desktop 48/56 (node 1:27), so the headline
shrank on tablets before growing again. Figma draws no 768 frame, so
the size step is dropped: 44/48 holds to 1023, 48/56 from 1024. The
left alignment and the 120px logo allowance stay. */
/* Fields are an underline, not a box. The .fig extraction reported a
stroke on all four sides of the field frame, but the design is a
single rule under each input - the box version has been removed and
the 12px side padding with it, so the label and value sit flush left
again exactly as before. */
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field{
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.16) !important;
padding:0 0 12px !important;
}
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-field:focus-within{border-bottom-color:rgba(250,135,34,.8) !important}
/* New high-resolution stamp (1225x1115). The rendered size is unchanged
at 96px wide - the point of the swap is pixel density, not scale - and
height stays auto so the new 1.099 aspect ratio is respected rather
than the old 112x102. */
.elementor-34148 .elementor-element.elementor-element-agglt001 .gl-stamp{width:96px !important;height:auto !important}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-agfaq001 *//* ============================================================
ADEGA GAUCHA - FAQ (Home 3)
Spacing model copied from the shipped homepage (post 14,
d246fbc): the ITEM carries no padding; the question carries
16/20 and the answer 12/20/16. Type and geometry from Figma
Final-version 1:27 and Mobile 1:884.
Everything structural is stated here with !important and a
section-scoped .elementor-34148 .elementor-element.elementor-element-agfaq001, because the header template ships a
site-wide rule that zeroes container padding and gaps - that is
what was collapsing the rows to 32px.
============================================================ */
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__in{display:flex !important;flex-direction:column !important;align-items:center !important;gap:34px !important;width:902px !important;max-width:100% !important;margin:0 auto !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__title{width:100% !important;margin:0 !important;padding:0 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__title .elementor-heading-title{margin:0 !important;white-space:pre-line !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__list{display:flex !important;flex-direction:column !important;gap:8px !important;width:100% !important;margin:0 !important;padding:0 !important}
/* item: no padding of its own (homepage model) */
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item{position:relative !important;display:flex !important;flex-direction:column !important;gap:0 !important;padding:0 !important;margin:0 !important;border-radius:4px !important;background-color:#252221 !important;border:1px solid rgba(246,235,221,.10) !important;cursor:pointer !important;overflow:hidden !important;transition:background-color .3s ease,border-color .3s ease !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item::before,.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item::after{content:none !important;display:none !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item:hover{background-color:rgba(246,235,221,.11) !important;border-color:rgba(246,235,221,.20) !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open{background-color:rgba(246,235,221,.09) !important;border-color:rgba(246,235,221,.20) !important}
/* question: 16/20 padding, 56px closed row, icon pinned inside it */
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q{position:relative !important;display:block !important;box-sizing:border-box !important;width:100% !important;min-height:56px !important;margin:0 !important;padding:16px 20px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q .elementor-widget-container{padding:0 !important;margin:0 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q h3{margin:0 !important;padding:0 44px 0 0 !important;text-wrap:pretty}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q::before{content:'';position:absolute;right:20px;top:16px;width:24px;height:24px;border-radius:2px;background-color:rgba(246,235,221,.12);transition:background-color .3s ease;pointer-events:none;z-index:1}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q::after{content:'';position:absolute;right:20px;top:16px;width:24px;height:24px;background-image:linear-gradient(#F6EBDD,#F6EBDD),linear-gradient(#F6EBDD,#F6EBDD);background-size:10px 1.5px,1.5px 10px;background-position:center,center;background-repeat:no-repeat;transition:transform .3s ease,background-image .3s ease;pointer-events:none;z-index:2}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open .ag-faq__q::before{background-color:#F6EBDD !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open .ag-faq__q::after{background-image:linear-gradient(#141414,#141414),linear-gradient(#141414,#141414);transform:rotate(45deg)}
/* answer: padding appears with the open state so the closed row
stays exactly 56px. grid-rows means a long answer never clips. */
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a{display:grid !important;grid-template-rows:0fr !important;box-sizing:border-box !important;width:100% !important;overflow:hidden !important;opacity:0 !important;margin:0 !important;padding:0 20px !important;transition:grid-template-rows .35s ease,opacity .3s ease,padding .35s ease !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a .elementor-widget-container{padding:0 !important;margin:0 !important;min-height:0 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a > *{min-height:0 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a p{margin:0 !important;padding-right:44px !important;text-wrap:pretty}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open .ag-faq__a{grid-template-rows:1fr !important;opacity:1 !important;padding:0 20px 16px !important;transition-delay:.1s !important}
@supports not (grid-template-rows:1fr){
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a{display:block !important;max-height:0 !important;transition:max-height .35s ease,opacity .3s ease,padding .35s ease !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open .ag-faq__a{max-height:800px !important}
}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__js{display:none !important}
/* ---- section padding: homepage ladder ---- */
@media (min-width:1024px){.elementor-34148 .elementor-element.elementor-element-agfaq001{padding:78px 0 90px !important}}
@media (min-width:768px) and (max-width:1023px){.elementor-34148 .elementor-element.elementor-element-agfaq001{padding:68px 32px 64px !important}}
@media (max-width:767px){.elementor-34148 .elementor-element.elementor-element-agfaq001{padding:57px 16px 40px !important}}
/* ---- tablet and below: answer 15/24 (homepage + Figma mobile) ---- */
@media (max-width:1023px){
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__in{width:100% !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a,.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a p{font-size:15px !important;line-height:24px !important}
}
/* ---- mobile ---- */
@media (max-width:767px){
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__in{width:343px !important;max-width:100% !important;gap:24px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__title .elementor-heading-title{font-size:min(32px, calc((100vw - 44px) / 11)) !important;line-height:1 !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q{padding:16px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q h3{padding-right:40px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q::before,.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__q::after{right:16px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a{padding:0 16px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__item.is-open .ag-faq__a{padding:0 16px 16px !important}
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a p{padding-right:0 !important}
}
/* FAQ answers sit at 70% cream in Figma (desktop node 1:27 and mobile
1:884 both give rgba(246,235,221,0.7)), so the answer reads a step
quieter than its question. They were inheriting full-strength cream.
Sizes and tracking are already exact and untouched: question 15/24 at
.15em, answer 16/25 at .05em desktop and 15/24 mobile. */
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a,
.elementor-34148 .elementor-element.elementor-element-agfaq001 .ag-faq__a p{color:rgba(246,235,221,.7) !important}/* End custom CSS */
/* Start custom CSS *//* ag-is-face */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/ag-fonts/InstrumentSerif-italic-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/ag-fonts/InstrumentSerif-normal-400.woff2') format('woff2');}
/* /ag-is-face */
/* ag-volte-face */
/* Another font emitter on this site declares Volte as .eot files and lands
last in the document: weight 400 resolved to Volte-Medium.eot and 500/600
were not declared at all. These rules restate the licensed woff2 weights so
400 is Regular, 500 Medium, 600 Semibold - matching Home 3. */
@font-face{font-family:'VOLTE';font-style:normal;font-weight:300;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff') format('woff');}
@font-face{font-family:'Volte';font-style:normal;font-weight:300;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:normal;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff') format('woff');}
@font-face{font-family:'Volte';font-style:normal;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:normal;font-weight:500;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff') format('woff');}
@font-face{font-family:'Volte';font-style:normal;font-weight:500;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:normal;font-weight:600;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff') format('woff');}
@font-face{font-family:'Volte';font-style:normal;font-weight:600;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:normal;font-weight:700;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff') format('woff');}
@font-face{font-family:'Volte';font-style:normal;font-weight:700;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:italic;font-weight:300;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff') format('woff');}
@font-face{font-family:'Volte';font-style:italic;font-weight:300;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:italic;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff') format('woff');}
@font-face{font-family:'Volte';font-style:italic;font-weight:400;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:italic;font-weight:500;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff') format('woff');}
@font-face{font-family:'Volte';font-style:italic;font-weight:500;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:italic;font-weight:600;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff') format('woff');}
@font-face{font-family:'Volte';font-style:italic;font-weight:600;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff') format('woff');}
@font-face{font-family:'VOLTE';font-style:italic;font-weight:700;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff') format('woff');}
@font-face{font-family:'Volte';font-style:italic;font-weight:700;font-display:swap;src:url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff2') format('woff2'),url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff') format('woff');}
/* /ag-volte-face */
1&display=swap');
1&display=swap');
/* ag-joint-fix -- Home 3 only.
The Customizer sets html,body{background-color:#030303!important} site
wide, while every section on this page is #141414. Section heights and
the 100vw break-outs land on fractional pixels, and the transformed /
will-change children put most sections on their own compositor layer,
so at some scroll offsets one row at a joint is painted by neither
section - and #030303 showed through as a thin dark line.
Matching the canvas to the sections removes the line: the gap can still
round, but there is nothing different behind it to see.
Colour only. No layout, no other page. */
body.elementor-page-2228{background-color:#141414 !important}
/* NO-FLASH for every Animation Addons split-text widget on the page.
The plugin waits for document.fonts.ready before it splits a heading
or paragraph, so the finished text paints first and then jumps back to
its start state - that is the flash, and it affects all 28 widgets
using char / word / text_* animations, not just the hero. Each is
hidden until its split has landed. The reveal is class-driven and a
hard 2.6s fallback in the hero script adds the class regardless, so no
script or font failure can leave text invisible. Reduced-motion users
see everything immediately. */
.elementor-2228 [class*='wcf-t-animation-char'] > .elementor-widget-container,
.elementor-2228 [class*='wcf-t-animation-word'] > .elementor-widget-container,
.elementor-2228 [class*='wcf-t-animation-text_'] > .elementor-widget-container,
/* the three Starter Animation widgets were still flashing: the guard only
covered the text-split classes. Reveal / Slide are gated the same way. */
.elementor-2228 [class*='wcf-starter-animations-reveal'] > .elementor-widget-container,
.elementor-2228 [class*='wcf-starter-animations-slide'] > .elementor-widget-container{visibility:hidden}
.elementor-2228 .ag-split-ready > .elementor-widget-container{visibility:visible !important}
@media (prefers-reduced-motion:reduce){
.elementor-2228 [class*='wcf-t-animation-'] > .elementor-widget-container{visibility:visible !important}
}
/* ag-loc-align */
/* The section CSS staggers alternate cards with
.ag-loc__item:nth-child(odd){margin-top:80px}. The list's first child is the
glow layer, so the odd children are Kissimmee and Dunwoody and those two drop
80px. Reference shows all four cards sharing one top edge, so the offset is
removed on desktop only - the mobile rules below 1024px are untouched. */
@media (min-width:1025px){
body.elementor-page-34148 .ag-loc__list .ag-loc__item:nth-child(odd){margin-top:0 !important;}
body.elementor-page-34148 .ag-loc__list{align-items:flex-start !important;}
body.elementor-page-34148 .ag-loc__list .ag-loc__item:not(.is-open){height:448px !important;}
}
/* /ag-loc-align */
/* ag-loc-chrome */
/* Open location card: drop the Hours button border, the tick before the time,
and the Order Delivery button border. Menu and Book keep their own borders. */
body.elementor-page-34148 .ag-loc__alltime .elementor-button,
body.elementor-page-34148 .ag-loc__alltime a,
body.elementor-page-34148 .ag-loc__delivery .elementor-button,
body.elementor-page-34148 .ag-loc__delivery a{
border:0 !important;border-width:0 !important;border-style:none !important;
box-shadow:none !important;outline:none !important;
}
body.elementor-page-34148 .ag-loc__alltime .elementor-button::before,
body.elementor-page-34148 .ag-loc__alltime .elementor-button::after,
body.elementor-page-34148 .ag-loc__delivery .elementor-button::before,
body.elementor-page-34148 .ag-loc__delivery .elementor-button::after{
border:0 !important;box-shadow:none !important;
}
body.elementor-page-34148 .ag-loc__tick{display:none !important;}
/* /ag-loc-chrome */
/* ag-laurel-nudge */
/* Lift both award laurels 5px. Applied to the img rather than the widget so it
does not disturb the 40px flex row or the kicker centring. */
body.elementor-page-34148 .ag-awards__laurel img{
position:relative;top:-5px;
}
/* /ag-laurel-nudge */
/* ag-btn-speed */
/* The cursor wipe on the primary buttons ran at .4s, which reads as a snap on a
wide button. Doubled to .8s so the fill travels at a pace you can follow.
Timing only - colours, sizes and the wipe geometry are untouched. */
body.elementor-page-34148 .ag-ev__btn .elementor-button::before{transition:width .8s ease-out,height .8s ease-out !important}
body.elementor-page-34148 .ag-ev__btn .elementor-button{transition:color .8s ease,border-color .6s ease !important}
body.elementor-page-34148 .ag-about__btn .elementor-button::before{transition:clip-path .8s ease-out !important}
body.elementor-page-34148 .ag-about__btn .elementor-button{transition:color .8s ease,border-color .6s ease !important}
body.elementor-page-34148 .ag-rsv__btn .elementor-button::before{transition:width .8s ease-out,height .8s ease-out !important}
body.elementor-page-34148 .ag-rsv__btn .elementor-button{transition:color .8s ease,border-color .6s ease !important}
/* /ag-btn-speed */
/* ag-native-anim */
/* Elementor's own animations stylesheet is not enqueued on this page, so the
native entrance animations had no keyframes and no .animated-slow duration -
the widgets simply appeared, or ran at another plugin's default speed.
These are Elementor's own values: 1.25s normal, 2s slow, 0.8s fast. */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
body.elementor-page-34148 .animated{animation-duration:1.25s;animation-fill-mode:both}
body.elementor-page-34148 .animated.animated-slow{animation-duration:2s !important}
body.elementor-page-34148 .animated.animated-fast{animation-duration:800ms !important}
body.elementor-page-34148 .animated.fadeIn{animation-name:fadeIn}
body.elementor-page-34148 .animated.fadeInUp{animation-name:fadeInUp}
body.elementor-page-34148 .animated.fadeInDown{animation-name:fadeInDown}
body.elementor-page-34148 .animated.fadeInLeft{animation-name:fadeInLeft}
body.elementor-page-34148 .animated.fadeInRight{animation-name:fadeInRight}
body.elementor-page-34148 .elementor-invisible{visibility:hidden}
@media (prefers-reduced-motion:reduce){body.elementor-page-34148 .animated{animation:none !important;visibility:visible !important}}
/* /ag-native-anim */
/* ag-laurel-render */
/* Both laurels are the same bone artwork, so they must render identically.
The pair is composited on its own layer and the image is never allowed to
inherit a partial opacity once its entrance has finished. */
body.elementor-page-34148 .ag-awards__laurel img{
opacity:1;
transform:translateZ(0);
image-rendering:auto;
}
/* /ag-laurel-render */
/* ag-parallax-perf */
/* Parallax layers are promoted to their own compositor layer so scrolling moves
an existing texture instead of repainting a large photograph each frame. */
body.elementor-page-34148 .elementor-element-agevbg,
body.elementor-page-34148 .elementor-element-agevb2,
body.elementor-page-34148 .elementor-element-agsigbg,
body.elementor-page-34148 .elementor-element-agawdgw,
body.elementor-page-34148 .elementor-element-agawdi1,
body.elementor-page-34148 .elementor-element-agnhtp1,
body.elementor-page-34148 .elementor-element-agnhtp2,
body.elementor-page-34148 .elementor-element-agnhtp3{
will-change:transform;backface-visibility:hidden;
}
/* The rewards backdrop travels +/-6% of its own height. Sized to its container
it would pull away from the top or bottom edge and show the section behind,
so it is given 16% of extra height, centred, and the hero clips it. */
body.elementor-page-34148 .elementor-element-agrwd001 .ag-rw__hero{overflow:hidden !important}
/* /ag-parallax-perf */
/* ag-focus-ring */
/* Coming back from another tab leaves the last clicked control focused, and the
browser paints its own blue ring over the design. The ring stays - removing it
would break keyboard navigation - but is drawn in the brand orange.
Outline only: no fill, border, shadow, size or animation is altered, and
:focus-visible means it shows for keyboard use, not on every mouse click. */
body.elementor-page-34148 a:focus-visible,
body.elementor-page-34148 button:focus-visible,
body.elementor-page-34148 .elementor-button:focus-visible,
body.elementor-page-34148 [role="button"]:focus-visible,
body.elementor-page-34148 input:focus-visible,
body.elementor-page-34148 textarea:focus-visible,
body.elementor-page-34148 select:focus-visible{
outline:2px solid #FA8722 !important;
outline-offset:2px !important;
}
/* a pointer click should not leave a ring sitting on the button */
body.elementor-page-34148 a:focus:not(:focus-visible),
body.elementor-page-34148 button:focus:not(:focus-visible),
body.elementor-page-34148 .elementor-button:focus:not(:focus-visible){
outline:none !important;
}
/* /ag-focus-ring */
/* ag-mobile-scroll */
/* Phones have a fraction of the GPU memory a laptop does. With parallax off
below 1024px these layers no longer need their own compositor layer, and
holding them there was costing scroll performance in the hero.
Appearance is unchanged - this only releases the promotion. */
@media (max-width:1024px){
body.elementor-page-34148 .elementor-element-agevbg,
body.elementor-page-34148 .elementor-element-agevb2,
body.elementor-page-34148 .elementor-element-agsigbg,
body.elementor-page-34148 .elementor-element-agawdgw,
body.elementor-page-34148 .elementor-element-agawdi1,
body.elementor-page-34148 .elementor-element-agnhtp1,
body.elementor-page-34148 .elementor-element-agnhtp2,
body.elementor-page-34148 .elementor-element-agnhtp3{
will-change:auto !important;
}
body.elementor-page-34148 .elementor-element-aghero01{
contain:paint;
}
}
/* /ag-mobile-scroll */
/* ag-badge-hit */
/* The birthday pill should be clickable across its whole face, not just on the
icon and the words. The linked row is stretched to fill the pill so the
background counts as part of the target, while the close button stays above
it and keeps working. Layout and appearance are unchanged. */
body.elementor-page-34148 .elementor-element-agnud05{
align-self:stretch !important;
flex:1 1 auto !important;
cursor:pointer !important;
}
body.elementor-page-34148 .elementor-element-agnud05 > a,
body.elementor-page-34148 a.elementor-element-agnud05{
display:flex !important;width:100% !important;height:100% !important;
}
body.elementor-page-34148 .elementor-element-agnud04{
position:relative !important;z-index:5 !important;
}
/* /ag-badge-hit */
/* ag-ios-perf */
/* Safari on iOS re-syncs momentum scrolling whenever the compositor is busy.
Below 1024px, with parallax already off, nothing on this page needs to sit
on its own GPU layer, so the promotions are released. Backdrop blur is left
exactly as designed - it is only reduced where the design already uses it. */
@media (max-width:1024px){
body.elementor-page-34148 *{will-change:auto !important}
body.elementor-page-34148 .elementor-element{background-attachment:scroll !important}
}
/* /ag-ios-perf */
/* ag-laurel-mobile */
/* The laurels carry no entrance animation on touch, so they must never be left
part-way through one. Desktop keeps its fade from scale untouched. */
@media (max-width:1024px){
body.elementor-page-34148 .ag-awards__laurel,
body.elementor-page-34148 .ag-awards__laurel img{
opacity:1 !important;transform:none !important;visibility:visible !important;
}
body.elementor-page-34148 .ag-awards__laurel img{position:relative;top:-5px}
}
/* /ag-laurel-mobile */
/* ag-badge-icon */
/* The icon only needs protecting from being squeezed - the whole-badge click
target stretches the linked row and changes the flex context. Home 3 sizes
it 28px ONLY inside @media (max-width:1024px); on desktop it keeps the
authored 32px of the SVG and the widget width setting. A previous version of
this block applied 28px at every width, which shrank the desktop icon. */
body.elementor-page-34148 .agn .agn__ico{align-self:center !important;flex:0 0 32px !important;width:32px !important;max-width:32px !important}
body.elementor-page-34148 .agn .agn__ico .elementor-widget-container,
body.elementor-page-34148 .agn .agn__ico .elementor-image,
body.elementor-page-34148 .agn .agn__ico figure{width:32px !important;height:32px !important;margin:0 !important;line-height:0 !important}
body.elementor-page-34148 .agn .agn__ico img{width:32px !important;height:32px !important;max-width:32px !important;min-width:32px !important;object-fit:contain !important;display:block !important;transform:none !important}
@media (max-width:1024px){
body.elementor-page-34148 .agn .agn__ico{flex:0 0 28px !important;width:28px !important;max-width:28px !important}
body.elementor-page-34148 .agn .agn__ico .elementor-widget-container,
body.elementor-page-34148 .agn .agn__ico .elementor-image,
body.elementor-page-34148 .agn .agn__ico figure{width:28px !important;height:28px !important}
body.elementor-page-34148 .agn .agn__ico img{width:28px !important;height:28px !important;max-width:28px !important;min-width:28px !important}
}
/* /ag-badge-icon */
/* ag-badge-desktop */
/* Exactly two lines on desktop.
Home 3 only declares white-space:normal and the visible
inside
@media (max-width:1024px). On desktop it depends on the pill being wide
enough that 'BIRTHDAY COMING UP?' never wraps on its own. The whole-badge
click target sets the linked row to flex:1 1 auto, which competes with the
32px icon for space and squeezed the label until the first line broke,
producing a third line. Above 1024px the label now hugs its content and
each line is held intact, so the only break is the authored
.
Mobile is left exactly as Home 3 authors it. */
@media (min-width:1025px){
body.elementor-page-34148 .agn{width:auto !important;max-width:none !important;flex-wrap:nowrap !important}
body.elementor-page-34148 .agn .agn__text{flex:0 1 auto !important;min-width:0 !important}
body.elementor-page-34148 .agn .agn__text .elementor-widget-container{width:auto !important}
body.elementor-page-34148 .agn .agn__text .elementor-heading-title,
body.elementor-page-34148 .agn .agn__text .elementor-heading-title a{
display:block !important;text-align:left !important;
white-space:nowrap !important;
}
body.elementor-page-34148 .agn .agn__text br{display:block !important}
body.elementor-page-34148 .elementor-element-agnud05{flex:0 1 auto !important}
}
/* /ag-badge-desktop */
/* ag-seam */
/* The dark strip under the orange reserve CTA is agrwd001's 54px bottom
padding, sitting between the CTA and the seasonal section. Closed here so
the orange band meets the next section directly, at every breakpoint.
agrsv001 is also the only section on the page with no background colour,
so it is given the same #141414 as its neighbours - a transparent section
lets the page ground show through as a hairline seam on fractional
heights, which is the other way this line can appear. Only the gap and
that missing background are touched; no spacing inside either section. */
body.elementor-page-34148 .elementor-element-agrwd001{
padding-bottom:0 !important;
}
body.elementor-page-34148 .elementor-element-agrsv001{
background-color:#141414 !important;
}
/* no hairline between any two stacked bands */
body.elementor-page-34148 .elementor-element-agrwd001,
body.elementor-page-34148 .elementor-element-agsea001,
body.elementor-page-34148 .elementor-element-agmom001,
body.elementor-page-34148 .elementor-element-agglt001{
margin-top:0 !important;
margin-bottom:0 !important;
}
/* /ag-seam */
/* ag-seam2 */
/* The line only shows WHILE scrolling, which identifies it as a sub-pixel
seam rather than a gap. ScrollSmoother moves the content by fractional
pixels, so two stacked sections briefly land on a half pixel and a
hairline of whatever sits behind them shows between the two fills.
Two defences, neither of which affects layout:
1. the page ground is painted #141414, so any hairline that does appear
is the same colour as the bands and cannot be seen
2. every band carries a 1px box-shadow ring in its own colour, which
paints one pixel beyond its box and covers the seam outright
box-shadow is used rather than a negative margin so nothing shifts. */
html.elementor-page-34148 ,
body.elementor-page-34148,
body.elementor-page-34148 #smooth-wrapper,
body.elementor-page-34148 #smooth-content,
body.elementor-page-34148 .elementor-34148{
background-color:#141414 !important;
}
body.elementor-page-34148 .elementor-element-aghero01,
body.elementor-page-34148 .elementor-element-agloc001,
body.elementor-page-34148 .elementor-element-agabt001,
body.elementor-page-34148 .elementor-element-agawd001,
body.elementor-page-34148 .elementor-element-agevt001,
body.elementor-page-34148 .elementor-element-agrdz001,
body.elementor-page-34148 .elementor-element-agrng001,
body.elementor-page-34148 .elementor-element-agnht001,
body.elementor-page-34148 .elementor-element-agrwd001,
body.elementor-page-34148 .elementor-element-agsea001,
body.elementor-page-34148 .elementor-element-agmom001,
body.elementor-page-34148 .elementor-element-agrsv001,
body.elementor-page-34148 .elementor-element-agglt001,
body.elementor-page-34148 .elementor-element-agfaq001{
box-shadow:0 0 0 1px #141414 !important;
}
/* the reserve band is transparent by design where it overlaps, so it must
not get the ring - it would draw a line across the section above it */
body.elementor-page-34148 .elementor-element-agrsv001{
box-shadow:none !important;
}
/* /ag-seam2 */
/* ag-smooth-bands */
/* Rewards and A Night At Adega carry the heaviest parallax on the page -
one large photograph and three stacked layers respectively. Each moving
layer is promoted to its own compositor layer and told what will change,
so scrolling moves an existing texture instead of re-rasterising a
full-width image every frame. contain:paint stops the browser checking
the rest of the band for repaints while a layer moves inside it. */
body.elementor-page-34148 .elementor-element-agnhtp1,
body.elementor-page-34148 .elementor-element-agnhtp2,
body.elementor-page-34148 .elementor-element-agnhtp3{
will-change:transform !important;
transform:translate3d(0,0,0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
body.elementor-page-34148 .elementor-element-agnht001{
contain:paint;
}
@media (max-width:1024px){
body.elementor-page-34148 .elementor-element-agnhtp1,
body.elementor-page-34148 .elementor-element-agnhtp2,
body.elementor-page-34148 .elementor-element-agnhtp3{
will-change:auto !important;
}
}
/* /ag-smooth-bands */
/* ag-rw-stack */
/* Paint order, not the gradient. Every authored rule is delivering correctly:
the scrim element is in the markup, its gradient reaches the browser, and
the hero rules are intact. The photograph simply paints on top of the
scrim, so the dimming is invisible.
Animation Addons emits will-change:transform on that layer because the
design sets wcf_enable_scroll_smoother on it. will-change promotes the
element to its own compositing layer, and a promoted layer can paint above
a sibling with a higher z-index. The hint is pointless here now that this
layer no longer moves, so it is switched off and the authored stacking
(photo 0, scrim 1, hairline frame 2) is restored. The gradient itself is
untouched. */
body.elementor-page-34148 .ag-rw__reveal-bg,
body.elementor-page-34148 .elementor-element-agrwbg{
will-change:auto !important;
transform:none !important;
z-index:0 !important;
isolation:auto !important;
}
body.elementor-page-34148 .ag-rw__scrim,
body.elementor-page-34148 .elementor-element-agrwsm{
z-index:1 !important;
will-change:auto !important;
}
/* /ag-rw-stack */
/* ag-cards-focus */
/* The seasonal and Instagram links style :focus-visible colour but never set
outline, so ctrl+click left the browser's default blue ring. Replaced with
the brand accent. Keyboard focus stays clearly visible. */
body.elementor-page-34148 .ag-seasonal a:focus,
body.elementor-page-34148 .ag-seasonal a:focus-visible,
body.elementor-page-34148 .us-link:focus,
body.elementor-page-34148 .us-link:focus-visible,
body.elementor-page-34148 .us-card:focus,
body.elementor-page-34148 .us-card:focus-visible,
body.elementor-page-34148 .ag-moments a:focus,
body.elementor-page-34148 .ag-moments a:focus-visible,
body.elementor-page-34148 .ig-band a:focus,
body.elementor-page-34148 .ig-band a:focus-visible,
body.elementor-page-34148 .ig-card:focus,
body.elementor-page-34148 .ig-card:focus-visible{
outline:2px solid #FA8722 !important;
outline-offset:3px !important;
border-color:#FA8722 !important;
box-shadow:none !important;
-webkit-tap-highlight-color:rgba(250,135,34,.25) !important;
}
body.elementor-page-34148 .ag-seasonal a:focus:not(:focus-visible),
body.elementor-page-34148 .us-link:focus:not(:focus-visible),
body.elementor-page-34148 .ag-moments a:focus:not(:focus-visible),
body.elementor-page-34148 .ig-band a:focus:not(:focus-visible){
outline:none !important;
}
/* /ag-cards-focus *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'VOLTE';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: italic;
font-weight: 300;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: italic;
font-weight: 400;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: italic;
font-weight: 500;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: italic;
font-weight: 600;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff') format('woff');
}
@font-face {
font-family: 'VOLTE';
font-style: italic;
font-weight: 700;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff') format('woff');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Volte';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Light.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Regular.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Medium.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Semibold.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-Bold.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: italic;
font-weight: 300;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-LightItalic.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: italic;
font-weight: 400;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-RegularItalic.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: italic;
font-weight: 500;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-MediumItalic.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: italic;
font-weight: 600;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-SemiboldItalic.woff') format('woff');
}
@font-face {
font-family: 'Volte';
font-style: italic;
font-weight: 700;
font-display: auto;
src: url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff2') format('woff2'),
url('https://adegagaucha.com/wp-content/uploads/2026/09/Volte-BoldItalic.woff') format('woff');
}
/* End Custom Fonts CSS */