/* ============================================================================
   Lactando — native-zero frontend.  Own semantic CSS built from
   native-zero/spec/*.json.  No Elementor / Astra / Jetpack / WordPress CSS.
   ========================================================================= */

/* ---- fonts ---------------------------------------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}

/* ---- design tokens ------------------------------------------------------- */
:root{
  --pink:#e33d75;
  --purple:#3d30b4;
  --ink-purple:#3d30b4;
  --cream:#fffbf3;
  --pink-soft:#ff9bce;
  --peach:#ffdfc3;
  --lilac:#c3cdfe;
  --orange:#ff601d;
  --white:#fff;
  --page-bg:#fffffe;
  --panel:#f8f9ff;

  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-base:16px;
  --lh-base:1.65;

  --wrap:1160px;
  --wrap-pad:clamp(16px,4vw,24px);
  --header-h:86px;
  --radius-card:30px;
  --radius-pill:999px;
  --gap:20px;

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-base);
  color:var(--pink);
  background:var(--page-bg);
  padding-top:var(--header-h);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.3}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--wrap-pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;left:12px;top:8px;transform:translateY(-160%);z-index:2000;
  background:var(--purple);color:var(--cream);padding:10px 16px;border-radius:8px;transition:transform .18s var(--ease)}
.skip-link:focus{transform:none}

:focus-visible{outline:3px solid var(--purple);outline-offset:2px;border-radius:4px}

/* ---- buttons ---------------------------------------------------------- */
/* Golden CTAs: radius ~28-30, letter-spacing normal, drop shadow
   rgba(60,48,180,.35) 0 9px 33px -5px, height 56 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:0;border-radius:28px;padding:20px 30px;line-height:1;letter-spacing:normal;
  box-shadow:0 9px 33px -5px rgba(60,48,180,.35);
  font-weight:700;letter-spacing:.02em;text-align:center;transition:filter .2s var(--ease),background-color .2s var(--ease)}
.btn>span{display:inline-block}
.btn-pink{background:var(--pink);color:var(--white)}
.btn-pink:hover{background:var(--purple)}
.btn-purple{background:var(--purple);color:var(--cream)}
/* No :hover rule here on purpose — verified against the real source
   (.elementor-button:hover always targets this same indigo/cream pair,
   so an already-purple button shows no visible change on hover). The
   previous brightness(1.12) was invented, not present in the source. */

/* ============================================================================
   HEADER
   ========================================================================= */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);
  background:var(--cream);display:flex;align-items:center}
.header-inner{display:flex;align-items:center;gap:24px;width:100%}
/* EXACT VALUES copied from lactando5-release-staging (verified deployed
   source, img.astra-logo-svg computed box) — height is a flat 66px at every
   width tested; width is Astra/Elementor's own responsive-control output
   and is NOT monotonic (it's wider at 1024 than at both 1280 and 768), so
   it's reproduced as measured per breakpoint rather than a single fluid
   formula. Real breakpoints per the source's own @media rules (544/921/1024),
   not invented 767/900 tiers. */
.brand img{width:209px;height:66px}
@media (max-width:1024px){.brand img{width:270px}}
@media (max-width:921px){.brand img{width:196px}}
@media (max-width:544px){.brand img{width:179px}}
/* CONVERGENCE FIX: Golden's nav isn't centered between logo and CTA — it
   hugs the CTA button (measured: nav flush against the button, extra space
   left open next to the logo instead). margin-right:auto centered it here. */
.primary-nav{margin-left:auto}
.primary-nav ul{display:flex;align-items:center;gap:6px}
.primary-nav a{display:inline-block;padding:10px 18px;font-weight:400;color:var(--pink);border-radius:20px}
.primary-nav a:hover{color:var(--purple)}
.header-cta{padding:20px 30px;font-weight:500;color:var(--cream);border-radius:30px}
.menu-toggle{display:none;background:var(--pink);color:var(--cream);border-radius:12px;
  width:44px;height:44px;align-items:center;justify-content:center;margin-left:auto}

.site-header.is-stuck{box-shadow:0 6px 24px rgba(61,48,180,.10)}

/* EXACT breakpoint copied from lactando5-release-staging: nav is display:flex
   (visible) at viewport 1025px, hidden at 1024px — verified precisely, not
   the 900px this used to assume. */
@media (max-width:1024px){
  .primary-nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
  /* EXACT VALUE from source (elementor-element-f0453f3, the header's own boxed
     row): --width:82% at every tier (confirmed live, incl. the redundant
     768-1024 media rule) — this is NOT the site's shared .wrap (max 1160,
     clamp(16,4vw,24) padding), which measured too narrow here (976px content
     vs source's real 840px @1024, logo landing at x=102 not x=24). */
  .header-inner{max-width:none;width:82%;padding-inline:0}
  /* EXACT VALUE from source (elementor-element-c96d8d1): the logo's own
     boxed column carries an extra 10px left padding beyond the row above —
     measured logo x=102 (92 row-start + 10), not flush at the row edge. */
  .brand{padding-left:10px}
}

/* ============================================================================
   HERO
   ========================================================================= */
.hero{position:relative;overflow-x:clip}
.hero-viewport{overflow-x:clip}
.hero-track{display:flex;transition:transform .5s var(--ease);will-change:transform}
.hero-slide{flex:0 0 100%;min-height:700px;display:flex;align-items:center;justify-content:center;padding:clamp(16px,3vw,40px)}

/* SLIDE 1 — pink background; stadium white card (radius 311, ~10px pad, no
   shadow); the product photo overflows the card vertically (Golden: card
   1120x376, image ~520x421, object-fit:fill, square corners) */
.hero-slide--card{background:var(--pink-soft)}
.hero-card{position:relative;display:flex;align-items:center;gap:clamp(44px,5.4vw,75px);
  background:var(--white);border-radius:311px;min-height:376px;
  padding:10px 10px 10px 20px;max-width:1120px;width:100%}
.hero-card-img{flex:0 0 auto;width:clamp(320px,38vw,520px);height:auto;
  aspect-ratio:520/421;object-fit:fill;border-radius:0;align-self:center;
  margin-top:clamp(-78px,-5.4vw,-52px);margin-bottom:0}
.hero-card-copy{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  padding-right:clamp(60px,8vw,120px)}
.hero-card-copy h2{font-size:clamp(20px,2.4vw,30px);line-height:1.3;color:var(--pink);max-width:21ch}
.hero-card-copy p{font-size:16px;color:var(--pink);max-width:32ch}
.hero-slide--card .hero-card-copy .btn{border-radius:28px;margin-top:22px}

/* SLIDE 2 — reproduces the Golden's FLUID model, not px snapshots. The Golden
   photo layer (elementor doc 1294, .elementor-element-c24c8e0) is:
     >=1025  : min-height 75vh                       bg-position 50% 50%
     768-1024: min-height 720px (fixed)              bg-position -74px 0
     <=767   : renders ~86vh (55vh floor + layout)   bg-position 50% 50%
   and the banner graphic is flex-centred inside that layer (bottom-aligned
   <=767). Native mirrors it with a ::before of the same fluid height, clipped by
   the slide (overflow:hidden) so the hero box (700/600/630) is untouched. Behind
   the layer the Golden hero root is #ff9bce and shows through wherever the layer
   is shorter than the hero — hence background:var(--pink-soft) (Pass 2). */
.hero-slide--banner{background:var(--pink-soft);position:relative;overflow:hidden;
  align-items:flex-start;justify-content:flex-start;padding:0}
.hero-slide--banner::before{content:"";position:absolute;left:0;top:0;width:100%;height:75vh;z-index:0;
  background:url("../images/hero-bg.webp") 50% 50%/cover no-repeat}
.hero-banner-inner{position:absolute;left:0;top:0;height:75vh;width:48vw;z-index:1;
  display:flex;align-items:center;justify-content:center}
.hero-banner-inner img{width:clamp(292px,28.6vw,391px);max-width:none;height:auto;border-radius:0}

/* Golden's slider has no visible arrows (data-nav="") — hide them entirely.
   Autoplay, mouse-drag and touch-swipe are bound to the track, not these
   buttons, so they keep working. Buttons stay in the DOM for assistive tech. */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--pink);
  align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(61,48,180,.18);
  display:none}
.hero-nav:focus-visible{display:flex;opacity:1}
.hero-prev{left:clamp(8px,2vw,28px)}
.hero-next{right:clamp(8px,2vw,28px)}

/* Golden's card vertical anchor drifts per breakpoint — pin it explicitly */
@media (min-width:1367px){
  .hero-slide--card .hero-card{margin-top:10px}
}
@media (min-width:1025px) and (max-width:1366px){
  .hero-slide--card{align-items:flex-start}
  .hero-slide--card .hero-card{margin-top:clamp(56px,7vw,80px)}
  /* Slide 2 uses no breakpoint here — 75vh is fluid across the whole >=1025 range
     (= 576 @h768, 675 @h900), exactly like the Golden. */
}
@media (max-width:1024px){
  /* EXACT VALUE from source (elementor-element-c24c8e0, slide 1's own outer
     wrapper): min-height stays 80vh at this tier too (614.4px @768) — this
     used a flat 600px guess. */
  .hero-slide{min-height:80vh;padding-bottom:15px;font-size:0.912rem}
  .hero-slide--card{align-items:flex-end}
  .hero-card{max-width:692px;min-height:350px;gap:clamp(36px,5vw,54px);padding:12px 12px 12px 18px}
  .hero-card-img{width:clamp(280px,40vw,340px);margin-top:clamp(-22px,-2vw,-10px)}
  .hero-card-copy{padding-right:clamp(20px,4vw,44px);gap:12px}
  .hero-card-copy h2{font-size:20px;max-width:18ch}
  .hero-card-copy p{font-size:13px;line-height:1.54}
  .hero-slide--card .hero-card-copy .btn{font-size:14.6px}
  .hero-slide--banner::before{height:720px;background-position:-74px 0}
  .hero-banner-inner{height:720px;width:54vw}
  .hero-banner-inner img{width:43.7vw}
}
@media (max-width:767px){
  /* Golden @390: card 355x650 r10 pad10, image ~214x173 at 57px from pad edge,
     116px gap to a 255px-wide copy block; content horizontally centred */
  .hero{overflow-y:visible}
  .hero-viewport{overflow-y:visible}
  .hero-slide{height:630px;min-height:0;align-items:flex-start;padding:38px 16px 0}
  .hero-card{flex-direction:column;align-items:center;justify-content:flex-start;
    border-radius:10px;text-align:center;gap:0;padding:10px;min-height:650px}
  .hero-card-img{width:214px;max-width:64%;aspect-ratio:520/421;margin:57px 0 0}
  .hero-card-copy{align-items:center;padding:0 16px;gap:14px;margin-top:116px}
  .hero-card-copy h2{font-size:20px;line-height:1.3;max-width:255px}
  .hero-card-copy p{font-size:13px;max-width:256px;line-height:1.54}
  .hero-slide--card .hero-card-copy .btn{margin-top:10px}
  .hero-slide--banner{padding:0}
  .hero-slide--banner::before{height:86vh;background-position:50% 50%}
  .hero-banner-inner{height:67vh;width:100%;align-items:flex-end}
  .hero-banner-inner img{width:clamp(312px,80vw,500px)}
}

/* ============================================================================
   ABOUT / QUIÉNES SOMOS + VIDEO
   ========================================================================= */
/* VIEWPORT-DRIVEN MODEL — copied directly from source's real wrapper
   (elementor-element-9285c7d): the SECTION itself is min-height:96vh /
   83vh (<=1024px) / 65vh (<=767px) — the three real Elementor breakpoints,
   confirmed live at SIX viewports including two same-width/different-height
   pairs (1440x900 -> 864px = 900*.96, 1440x700 -> 672px = 700*.96) that
   prove the height tracks vh, not width. display:flex + align-items:center +
   justify-content:center on the SECTION centres the whole title+video+cloud
   group inside it — no per-breakpoint margin-top/padding compensation. */
.about{position:relative;background:var(--pink-soft);
  display:flex;align-items:center;justify-content:center;min-height:96vh}
/* INNER WRAPPER (source's elementor-element-76d8c47): holds title+video as
   normal flow children and is the positioning root for the cloud — matching
   source, where the cloud is `position:absolute` inside this same row, not
   inside the video widget itself. max-width:1366px + centred margin mirrors
   the boxed container source renders it in above that width. */
.about-inner{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:21px;width:100%;max-width:1366px;margin-inline:auto}
.about h2{color:var(--cream);font-size:38px;line-height:1.3;text-align:center;padding-inline:var(--wrap-pad)}
.about-video{position:relative;width:861px;max-width:100%;aspect-ratio:861/484;background:#000;
  box-shadow:0 24px 60px rgba(61,48,180,.18)}
.about-video iframe{width:100%;height:100%;border:0;border-radius:30px}
/* EXACT VALUES measured live at three real heights (1117/900/700) with the
   same width — top/left are height-INDEPENDENT fixed px from the inner
   wrapper's own top-left (214.8px / 129.1px), confirming they're not
   vh-scaled; width is a fluid 10.46% of the wrapper, so it scales with the
   video itself. This is a single rule for the whole >1024px tier, not one
   per 1440/1728. */
.about-decor{position:absolute;z-index:2;top:214.8px;left:129.1px;width:10.46%;height:auto;opacity:.95}
@media (max-width:1024px){
  /* Same 76d8c47 row, its own min-height:55vh tier (default's 60vh doesn't
     apply here) plus the section's real 83vh — both copied from source,
     confirmed by sectionH==minHeight exactly at both 1024x768 and 768x1024
     live (637.44px = 768*.83, 849.92px = 1024*.83). */
  .about{min-height:83vh}
  .about-video{width:668px}
  /* EXACT VALUES measured live: ONE consistent value across the entire
     768-1024px width range (confirmed at both 1024x768 and 768x1024, ~144px/
     ~568px either way) — not two different numbers per exact pixel width. */
  .about-decor{top:144px;left:568px;width:10.46%}
}
@media (max-width:767px){
  .about{min-height:65vh}
  .about-video{width:390px;max-width:100%;aspect-ratio:390/219}
  .about-video iframe{border-radius:0}
  /* EXACT VALUES measured live from source at 390x844. */
  .about-decor{top:143px;left:251px;width:24.8%}
  .promise{min-height:0;justify-content:flex-start}
}

/* ============================================================================
   PROMESA / VISIÓN / FUNDADORES
   ========================================================================= */
/* Golden PROMESA (measured): section max-width 97.317% + 100px pad-top;
   gradient frame 1123 wide (669 @768, full-bleed @390) radius 30;
   grid 2x517 @desktop / 1x605 @768 / 1x360 @390, gap 20; pillar pad 0 50px
   (0 30px @390); icon 129/157/186; title 26px (30 @390); body 16px/1.65;
   button radius 28, ~133px below the card */
.promise{background:var(--white);display:flex;flex-direction:column;align-items:center;
  max-width:97.317%;margin-inline:auto;padding:110px 0 62px}
.promise .wrap{display:flex;flex-direction:column;align-items:center;gap:175px;
  max-width:1123px;width:100%;padding-inline:0}
.promise-card{background:linear-gradient(50deg,var(--lilac) 0%,var(--purple) 100%);
  border-radius:30px;padding:25px 0 0;width:1123px;max-width:100%;
  display:flex;flex-direction:column;align-items:center}
.promise-grid{display:grid;grid-template-columns:517px 517px;gap:20px;padding-block:8px;margin-bottom:-42px;
  width:1054px;max-width:100%;justify-content:center;align-items:stretch}
/* Golden pillar: icon absolutely positioned top-left, title beside it,
   paragraph full-width below (body is not squeezed by the icon) */
.pillar{position:relative;background:var(--white);border-radius:30px;padding:0 50px;
  min-height:341px;display:flex;flex-direction:column;
  box-shadow:0 9px 33px -5px rgba(60,48,180,.35)}
.pillar-icon{position:absolute;left:50px;top:30px;width:129px;height:129px}
.pillar-body{display:flex;flex-direction:column;gap:0;padding:78px 0 34px;width:375px;max-width:100%}
.pillar-title{display:flex;align-items:center;gap:12px;color:var(--ink-purple);
  font-size:26px;line-height:1.3;margin:0 0 47px 141px}
.pillar-title img{flex:0 0 auto;width:auto;height:clamp(30px,3vw,44px)}
.pillar-body p{color:var(--ink-purple);font-size:16px;line-height:1.65}
.promise-cta{align-self:center;border-radius:28px}

@media (min-width:1025px){
  .pillar:nth-child(1),.pillar:nth-child(2){min-height:341px}
  .pillar:nth-child(3),.pillar:nth-child(4){min-height:364px}
}
@media (max-width:1024px){
  /* Golden: section min-height 100vh (measured 1024@768 / 900@800 / 800@900-960 /
     768@1024 = innerHeight); the 4 stacked pillars overflow it. */
  .promise{min-height:100vh;justify-content:center;padding:100px 0 84px}
  .promise .wrap{gap:clamp(140px,calc(140px + (1024px - 100vw) * 0.1),168px)}
  .promise-grid{padding-block:18px}
  .promise-card{width:669px;padding:0}
  .promise-grid{grid-template-columns:605px;width:605px}
  .pillar{min-height:40vh;padding:0 50px}
  .pillar-icon{width:157px;height:157px}
  /* EXACT VALUE from source (elementor-element-c5e2a89, the text wrapper):
     at this tier the pillar column is 605px (not desktop's 517px), so the
     desktop-measured fixed width:375px on .pillar-body left the paragraph
     too narrow (485px real text width in source vs 375px here), wrapping
     2 extra lines and inflating card height. width:auto lets it stretch to
     the pillar's own padded content box (flex-direction:column default
     stretch), matching source's fluid behavior at this tier. */
  .pillar-body{padding:92px 0 40px;width:auto}
  /* EXACT VALUE from source: measured live across all 4 pillars, the gap
     between the title row's bottom and the paragraph's top is a constant
     71px at this tier (not 50px) — confirmed identical on cards 1/2/3/4
     despite their differing text lengths. */
  .pillar-title{margin:0 0 71px 175px}
  .promise-cta{font-size:14.592px}
}
@media (max-width:767px){
  .promise{max-width:none;padding:0 0 70px}
  .promise .wrap{gap:119px}
  .promise-card{width:100%;max-width:none;border-radius:0;padding:0 15px}
  .promise-grid{grid-template-columns:360px;width:360px;max-width:100%}
  /* CONVERGENCE FIX: Golden stays left-aligned at mobile too (icon+title+
     body all hug the card's left padding, same as desktop) — it does not
     switch to centered. */
  .pillar{align-items:flex-start;text-align:left;padding:0 30px;min-height:591px;border-radius:30px}
  .pillar-icon{position:static;left:auto;top:auto;width:186px;height:auto;margin:36px 0 0}
  .pillar-body{align-items:flex-start;padding:20px 0 36px}
  .pillar-title{justify-content:flex-start;font-size:30px;min-height:0;padding-left:0;margin:0 0 24px}
  .pillar-body p{font-size:14px}
}

/* ============================================================================
   RED LACTANDO — native logo carousel
   ========================================================================= */
/* EXACT VALUE from source (elementor-element-a2930d5): min-height:44vh with
   justify-content:center — the section's real height is viewport-relative,
   not a fixed vertical padding; content is vertically centered inside it. */
.network{background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,32px);min-height:44vh;padding:24px 0}
.network h2{color:var(--ink-purple);font-size:clamp(25px,3.4vw,32px);line-height:1.3;text-align:center;padding-inline:var(--wrap-pad)}
/* CONVERGENCE FIX: re-measured live against Golden — container 1366px, 5
   slides x 273px, 0 gap (not 6 as the old comment here claimed). Two bugs:
   (1) site.js's perView() already returns 5 for >1024px, but flex-basis was
   16.6667% (1/6) — one slot narrower than perView() assumed, so a 6th logo
   always bled in partially instead of 5 full logos filling the row;
   (2) .logo-item is a <figure> — its UA-default margin (1em 40px) was never
   reset, adding ~80px of unwanted horizontal gap between items that Golden
   doesn't have (its slides sit edge-to-edge, 0 gap). */
.logo-carousel{width:100%;max-width:1440px;overflow:hidden}
.logo-track{display:flex;align-items:center;transition:transform .55s var(--ease);will-change:transform}
.logo-item{flex:0 0 20%;margin:0;display:flex;align-items:center;justify-content:center;padding:12px 6px;min-height:132px}
.logo-item img{width:100%;max-width:273px;max-height:128px;height:auto;object-fit:contain}
@media (max-width:1024px){.logo-item{flex-basis:33.3333%}}
@media (max-width:767px){.logo-item{flex-basis:50%;min-height:100px}.logo-item img{max-height:88px}}

/* ============================================================================
   BENEFICIOS
   ========================================================================= */
.benefits{background:var(--cream);display:flex;flex-direction:column;align-items:center;
  padding:clamp(28px,5vw,48px) var(--wrap-pad) clamp(56px,9vw,110px)}
.benefits-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;width:100%;max-width:1092px}
.benefits-copy{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:474px;padding:10px}
.benefits-copy h2{color:var(--pink);font-size:50px;line-height:1.3}
.benefits-copy p{color:var(--pink);font-size:16px;max-width:46ch}
.benefits-decor{height:auto;flex:0 0 auto}
/* EXACT VALUES measured live from the source at 1440px: the left blob (id
   b22c549) sits ~12px below the row's own top edge, rotated -13deg; the
   right blob (id edc43b7) is position:absolute in the source, floating
   ~138px ABOVE the row (over the Red Lactando section above it) and inset
   ~8.6% from the row's right edge, rotated 17deg — not inline with the text. */
/* EXACT VALUE from source: the right-side container (elementor-element-
   1f35c14) reserves the SAME flex width as the left cloud's container
   (elementor-element-5b82e6e) — both 60% — even though its own content is
   absolutely positioned and doesn't need the space. That symmetry is what
   keeps the text centred on the ROW, not on a "cloud+text" group. */
.benefits-spacer{width:clamp(90px,12vw,161px);flex:0 0 auto}
.benefits-decor--l{width:clamp(90px,12vw,161px);align-self:flex-start;margin-top:12px;transform:rotate(-13deg)}
.benefits-decor--r{width:clamp(75px,9vw,115px);position:absolute;right:8.6%;top:-138px;transform:rotate(17deg)}
/* EXACT VALUE from source (elementor-element-37b158d): a SEPARATE small
   diamond glyph from the same custom icon font as Sectores, right of the
   subtitle text, near the row's bottom-right — distinct from the big
   rotated blob above. */
.ben-deco{position:absolute;left:83.7%;top:138px;font-family:'lactando-icons';
  font-style:normal;font-size:21px;line-height:1;color:var(--pink);pointer-events:none}
.ben-deco::before{content:"\63"}

/* the four image + accordion blocks (Golden: 407px image + 590px white card,
   sides alternate; card stretches to the image height with the accordion
   centred; per-block accent colour on titles, body copy always pink).
   EXACT VALUES from source: the vertical rhythm is NOT a fixed/width-tracked
   gap — each block's own wrapper (elementor-element-90e99c2/c1b318a/d29d850/
   f6f53eb) is min-height:48vh/62vh/48vh/48vh + padding-top:50px, vertically
   centring the pair inside it. Since min-height is viewport-HEIGHT-relative,
   the gaps genuinely change with viewport height, not width — that system is
   replicated with .benefit-slot below instead of tuning each gap by hand. */
/* EXACT VALUES from source: each block is actually TWO nested min-height
   containers (an outer section 73vh/61vh/73vh/73vh + an inner row 48vh/62vh/
   48vh/48vh) — folded into one .benefit-slot min-height per block since the
   outer figure is what actually governs the visible gap (it exceeds the
   inner content in every case). Block 4 also carries a real padding-bottom:
   100px from its own outer wrapper. */
.benefits-blocks{display:flex;flex-direction:column;width:100%;max-width:1093px;margin-top:0}
.benefit-slot{display:flex;align-items:center;justify-content:center;min-height:73vh}
.benefit-slot:nth-child(2){min-height:61vh}
.benefit-slot:nth-child(4){padding-bottom:100px}
.benefit-block{position:relative;isolation:isolate;display:flex;align-items:stretch;justify-content:center;gap:20px}
.benefit-slot:nth-child(even) .benefit-block{flex-direction:row-reverse}
/* Golden: a gradient rounded card sits behind each block, offset ~+46px down,
   radius 30 — peach → the block's accent colour */
.benefit-block::before{content:"";position:absolute;z-index:-1;
  inset:46px 0 -46px 0;border-radius:30px}
.benefit-slot:nth-child(1) .benefit-block::before{background:linear-gradient(64deg,#ffdfc3 16%,#f2295b 100%)}
.benefit-slot:nth-child(2) .benefit-block::before{background:linear-gradient(-64deg,#ffdfc3 16%,#3d30b4 100%)}
.benefit-slot:nth-child(3) .benefit-block::before{background:linear-gradient(64deg,#ffdfc3 16%,#ff601d 100%)}
.benefit-slot:nth-child(4) .benefit-block::before{background:linear-gradient(-64deg,#ffdfc3 16%,#396dff 100%)}
.benefit-img{flex:0 0 auto;align-self:center;width:407px;max-width:40%;height:auto;
  aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;border-radius:20px}
.benefit-accordion{flex:0 1 590px;align-self:stretch;justify-content:center;
  min-height:407px;background:var(--white);border-radius:20px;
  display:flex;flex-direction:column;gap:20px;min-width:0;
  padding:28px clamp(30px,3vw,44px)}
.benefit-item{border:0}
.benefit-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;cursor:pointer;padding:7px 0;color:var(--pink);font-weight:700;font-size:16px;line-height:1.65}
.benefit-item summary::-webkit-details-marker{display:none}
.benefit-chev{flex:0 0 auto;transition:transform .3s ease}
.benefit-item[open] .benefit-chev{transform:rotate(180deg)}
.benefit-item-body{padding:2px 13px 13px;color:var(--pink);font-size:16px;line-height:1.65}
.benefit-item-body p{margin:0}
/* CONVERGENCE FIX: Golden themes the expanded body text per block too
   (matching its card gradient/title), not just the title+chevron — body
   was hardcoded pink on every block, so blocks 2-4 read wrong once opened. */
.benefit-slot:nth-child(1) .benefit-block .benefit-item summary{color:var(--pink)}
.benefit-slot:nth-child(2) .benefit-block .benefit-item summary{color:var(--ink-purple)}
.benefit-slot:nth-child(3) .benefit-block .benefit-item summary{color:var(--orange)}
.benefit-slot:nth-child(4) .benefit-block .benefit-item summary{color:#396dff}
.benefit-slot:nth-child(1) .benefit-block .benefit-item-body{color:var(--pink)}
.benefit-slot:nth-child(2) .benefit-block .benefit-item-body{color:var(--ink-purple)}
.benefit-slot:nth-child(3) .benefit-block .benefit-item-body{color:var(--orange)}
.benefit-slot:nth-child(4) .benefit-block .benefit-item-body{color:#396dff}

/* TABLET (768-1024) — Golden stacks image over card; the four blocks stack with
   only the ::before card-offset for separation (~0 real gap), each block ≈784px
   (image ≈460 square + card ≈300). Native's big margin/gap/min-height here were
   inflating the section by ~1000px. */
@media (max-width:1024px){
  /* Golden 768-1024: each block (elementor-element-7e3c790 / 1753b78) is
     min-height:98vh (measured: 1004@768 / 882@800 / 784@900-960 / 753@1024 =
     0.98·innerHeight); blocks stack with 0 gap (the ::before offset separates
     them); image + accordion are centred inside. Section ≈ 323 + 4·98vh. */
  .benefits{padding-bottom:24px}
  .benefits-blocks{gap:0;margin-top:16px}
  /* EXACT VALUE from source: the OUTER section (elementor-element-7e3c790/
     1753b78/63883a4/1b9f251) is the real min-height:98vh box — confirmed
     live, all 4 sit perfectly contiguous (753/753/753/753px at 1024x768,
     zero gap, zero overlap between THEM). It's their own inner content
     wrapper (elementor-element-e14fa31/87148b0/32a8f80/b7700f2) that carries
     margin-top:-117px (confirmed identical on all 4 blocks) — that's what
     visually pulls each block's image+accordion up so it overlaps the tail
     of the block above (accordion items 4-5 render behind the next block's
     opaque card). Both halves of the mechanism are needed together: the
     rigid outer boundary is what makes the pull-up read as overlap instead
     of just less padding. */
  .benefit-slot{min-height:98vh;padding-top:0}
  .benefit-block,.benefit-slot:nth-child(even) .benefit-block{flex-direction:column;align-items:center;justify-content:center;
    gap:24px;width:min(614px,100%);max-width:614px;margin-inline:auto;margin-top:-117px}
  .benefit-img{width:49vw;max-width:88%;align-self:center}
  .benefit-accordion{flex:0 0 auto;width:100%;max-width:559px;align-self:auto;min-height:0;
    justify-content:flex-start;gap:4px;padding:16px clamp(20px,3vw,30px)}
  .benefit-item summary{padding:4px 0}
  .benefit-item-body{font-size:14.4px;line-height:1.5;padding:2px 12px 6px}
}
/* MOBILE — Golden: full-bleed block, image + card inset 20px (≈351px wide),
   ≈173px between blocks, accordion titles 18px, card ≈481px tall */
@media (max-width:767px){
  .benefits{padding-left:20px;padding-right:20px;padding-bottom:120px}
  .benefits-inner{flex-direction:column-reverse}
  /* Below 767px the row-based desktop positioning (edge-pinned, floating
     above the row) doesn't apply — the source itself stacks these narrow;
     reset to simple centered flow so the flex-start/absolute desktop rules
     don't misplace them in the column layout. */
  .benefits-decor--l{align-self:center;margin-top:0}
  .benefits-spacer{width:auto}
  .benefits-decor--r{position:static;top:auto;right:auto;margin-top:0}
  .ben-deco{display:none}
  .benefits-copy p{font-size:14px}
  /* EXACT VALUE from source: all four block wrappers use min-height:100vh at
     this tier (uniform, unlike desktop's 48/62vh split) — replaces the old
     fixed clamp(128px,44vw,182px) per-card gap hack. */
  .benefits-blocks{gap:0;margin-top:0}
  .benefit-slot{min-height:100vh;padding-top:0}
  .benefit-block,.benefit-slot:nth-child(even) .benefit-block{max-width:none;gap:20px}
  .benefit-block::before{inset:42px calc(50% - 50vw) -42px calc(50% - 50vw);border-radius:0}
  .benefit-img{width:351px;max-width:100%}
  .benefit-accordion{width:351px;max-width:100%;padding:34px 22px;gap:20px;min-height:462px}
  .benefit-item summary{font-size:18px;line-height:1.65}
  .benefit-item-body{font-size:14.6px}
}
@media (max-width:600px){
  .benefits-copy h2{font-size:37px}
}

/* ============================================================================
   SECTORES
   ========================================================================= */
.sectors{background:var(--white);padding:clamp(40px,7vw,90px) 0 clamp(48px,9vw,110px)}
.sectors-card{position:relative;background:linear-gradient(50deg,var(--lilac) 0%,var(--pink-soft) 100%);
  border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,34px);
  padding:clamp(28px,4vw,44px) clamp(18px,3.5vw,40px) 0;max-width:1123px;margin-inline:auto}
.sectors-card h2{color:var(--ink-purple);font-size:clamp(24px,3.1vw,30px);line-height:1.3;text-align:center;max-width:34ch}
/* EXACT VALUES: two ornamental glyphs from the source's real icon font
   (untitled-font-1 — content \61 = flower, \63 = diamond), positioned at the
   measured percentages of the card box, both in --purple. Native had no
   decoration here at all. */
@font-face{font-family:'lactando-icons';src:url('../fonts/lactando-icons.woff') format('woff');font-weight:normal;font-style:normal}
.sectors-card .deco{position:absolute;font-family:'lactando-icons';font-style:normal;font-size:21px;line-height:1;color:var(--purple);pointer-events:none}
.sectors-card .deco--flower{left:16.6%;top:17.5%}
.sectors-card .deco--flower::before{content:"\61"}
.sectors-card .deco--diamond{left:84.1%;top:10.4%}
.sectors-card .deco--diamond::before{content:"\63"}
/* Golden: the bottom row of cards overflows below the gradient wrapper (like PROMESA) */
.sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:1054px;margin-bottom:-42px}
/* Golden card: radius 20, pad 50/0/65, icon 90 */
.sector{background:var(--white);border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:44px 14px 54px}
.sector img{width:90px;height:90px;object-fit:contain}
.sector h3{color:var(--ink-purple);font-size:18px;line-height:1.3;text-align:center;max-width:20ch}
/* 768-1024: the Golden collapses the GRID COLUMN to one ~500px card, but the
   gradient wrapper itself stays wide — EXACT VALUE from source (elementor-
   element-cdc6306/a53e750): card --width:92%, grid --content-width:500px.
   Native previously capped .sectors-card at max-width:560/.sectors-grid at
   520, squeezing the whole gradient card down to the column's width instead
   of leaving it full-width with just the column narrowed inside it. */
@media (max-width:1024px){
  .sectors-grid{grid-template-columns:minmax(0,500px);justify-content:center;gap:18px;max-width:none}
  .sectors-card{gap:30px;padding:44px clamp(20px,4vw,40px) 52px;width:92%;max-width:none}
  /* EXACT VALUE from source (elementor-element-1475578): real rendered text
     width is 739px at 1024x768, not the 24ch (~469px) this used — too narrow
     a cap was wrapping the headline to 3 lines instead of 2. */
  .sectors-card h2{max-width:38ch}
  .sector{padding:50px 22px 64px;gap:18px}
  .sector img{width:90px;height:90px}
  .sector h3{font-size:22px;max-width:none}
  /* EXACT VALUE from source (elementor-element-3d3de33/7c392de): measured
     live at 1024x768 relative to the card box — not the desktop percentages
     above, which land the glyphs inside the card instead of at its corners. */
  .sectors-card .deco--flower{left:6.6%;top:12.2%}
  .sectors-card .deco--diamond{left:86.6%;top:1.3%}
}
@media (max-width:767px){
  .sectors{padding:clamp(44px,9vw,100px) 0 clamp(52px,11vw,120px)}
  .sectors-grid{max-width:none;grid-template-columns:1fr}
  .sectors-card{gap:30px;padding:44px 16px 56px}
  .sector{padding:54px 20px 64px;gap:18px}
  .sector img{width:90px;height:90px}
  .sector h3{font-size:19px}
}

/* ============================================================================
   TESTIMONIOS  (Swiper standalone)
   ========================================================================= */
/* Golden: peach->pink gradient section; white cards with a pink avatar badge
   top-left, a big faded quote-mark top-right, dark body copy, then author name
   (pink) + role, a divider, and the org (pink). */
/* VIEWPORT-DRIVEN MODEL — copied from source's real wrapper
   (elementor-element-01661cf): min-height:100vh (default) / 79vh (<=1024px)
   / 100vh (<=767px, +padding-bottom:54px) with display:flex;flex-direction:
   column;align-items:center;justify-content:center — confirmed live by
   rendered height == computed min-height at 1440x1117/900 (100vh) and at
   1024x768 (606.72px = 768*.79) and 768x1024 (808.96px = 1024*.79). Gradient
   (elementor-element-01661cf too): 208deg, peach 17% -> pink-soft 100%. */
.testimonials{background:linear-gradient(208deg,var(--peach) 17%,var(--pink-soft) 100%);
  display:flex;align-items:center;justify-content:center;min-height:100vh}
/* INNER WRAPPER (source's elementor-element-51cb608): 0vh by default (no
   effect at desktop — the OUTER's min-height alone governs there), 60vh at
   <=1024px, 65vh at <=767px — its own centring is what keeps header+cards
   grouped as a unit inside the outer box at narrower tiers. */
.testimonials-inner{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:24px;width:100%}
.testimonials h2{position:relative;color:var(--pink);font-size:clamp(25px,3.2vw,32px);line-height:1.3;text-align:center;padding-inline:var(--wrap-pad)}
/* EXACT VALUES measured live from source: diamond+flower glyphs from the
   same custom icon font as Sectores/Beneficios, flanking the heading. */
.tst-deco{position:absolute;top:-27px;font-family:'lactando-icons';font-style:normal;
  font-size:21px;line-height:1;color:var(--pink);pointer-events:none}
.tst-deco--diamond{left:-187px}
.tst-deco--diamond::before{content:"\63"}
.tst-deco--flower{right:-225px;top:-42px}
.tst-deco--flower::before{content:"\61"}
/* At narrow widths the heading is nowhere near wide enough to give these
   their real -187px/-225px offsets without pushing the whole page into
   horizontal overflow (which broke the mobile menu button entirely, since
   the fixed header then stretches to match). Source hides them here too. */
/* Between 768-1024px the source positions these relative to the ROW, not
   the heading (their left offset barely moves as h2 recentres, unlike at
   390px) — a different formula than the h2-relative one above. Hidden in
   that range for now to avoid the horizontal-overflow bug the h2-relative
   offsets caused there previously; restored with source's real h2-relative
   values at the real mobile tier (<=767px, verified non-overflowing). */
@media (min-width:768px) and (max-width:1024px){
  .tst-deco{display:none}
}
@media (max-width:767px){
  /* EXACT VALUES measured live from source at 390x844. */
  .tst-deco--diamond{left:10px;top:-51.75px}
  .tst-deco--flower{left:288px;right:auto;top:61.5px}
}
/* REGRESSION FIX (forensic pass): the Golden carousel viewport is actually
   overflow:hidden — verified against live computed styles (container 1243px,
   3 slides x 414px, 0 gap, no meaningful peek). The prior "overflow:visible"
   here exposed every loop-duplicated clone across the full section width.
   Swiper's own .swiper{overflow:hidden} default (swiper.min.css) is correct
   as-is; no override needed. */
.testimonials-swiper{width:min(100%,1200px);padding-inline:var(--wrap-pad)}
/* CONVERGENCE FIX: Golden's visible cards are equal-height per row (short
   quotes leave blank space above the author block, which sits pinned to the
   bottom via .tst-author's margin-top:auto below). height:auto here capped
   each slide at its own content height instead, defeating that and making
   every card only as tall as its own text. height:100% restores Swiper's
   own default (it sizes .swiper-wrapper to the tallest slide already;
   this only lets each slide fill that row height, matching .tst-card's
   flex:1). */
.testimonials-swiper .swiper-slide{height:100%;display:flex}
/* Golden card: radius 15, no shadow, pad 24; a ~100px SQUARE org logo (not a
   circular badge) sits at the top; big faded quote-mark; divider; author block */
/* EXACT VALUE: real card height measured on the source at 1440px is 544px
   (was 600px, an estimate). */
.tst-card{margin:0;position:relative;display:flex;flex-direction:column;gap:16px;flex:1;min-height:544px;
  background:var(--white);color:var(--ink-purple);border-radius:15px;overflow:hidden;
  padding:148px 24px 24px;box-shadow:none}
@media (max-width:1024px){
  .testimonials{min-height:79vh}
  .testimonials-inner{min-height:60vh}
  /* EXACT VALUE measured live from source at both 1024x768 and 768x1024:
     the single-card carousel viewport is ~67.4% of the viewport width at
     this tier (690px@1024, 517px@768) — not the min(100%,1200px) desktop
     rule, which stretched the card edge-to-edge instead. */
  .testimonials-swiper{width:67.4vw}
  /* EXACT VALUE from source: no min-height is ever declared on the card
     itself at any tier — its height is purely content-driven (Swiper sizes
     the row to the tallest visible slide, and only 1 card shows below
     1025px). The previous fixed 640px was a guess; auto reproduces
     source's real mechanism instead. */
  .tst-card{min-height:0}
}
@media (max-width:767px){
  .testimonials{min-height:100vh;padding-bottom:54px}
  .testimonials-inner{min-height:65vh}
  /* EXACT VALUE from source at 390x844: the card viewport goes back to
     full-bleed (390px = 100% of viewport, 0 side padding), unlike the
     67.4vw-with-padding tablet tier. */
  .testimonials-swiper{width:100%;padding-inline:0}
  .tst-card{min-height:0;padding:150px 22px 24px}
}
/* EXACT VALUE from source (elementor-element-9db0f20): a real Font Awesome
   "quote-right" solid glyph (not a Georgia typographic quote character),
   68px, color #FFF7FB — not var(--pink-soft) at 45% opacity. */
.tst-quote{position:absolute;top:20px;right:24px;z-index:0;width:68px;height:68px;
  fill:#fff7fb;pointer-events:none}
/* EXACT VALUE copied from lactando5-release-staging: the quote paragraph
   sits in its own rounded, tinted box (elementor-element-574c8b3: bg
   #FFF7FB, radius 15px, padding 20px) — native had plain text, no box. */
.tst-card>p{position:relative;z-index:1;color:var(--pink);font-size:14px;line-height:1.65;
  background:#fff7fb;border-radius:15px;padding:20px}
.tst-author{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto;
  padding-top:18px;border-top:1px solid rgba(227,61,117,.28);font-style:normal}
.tst-author img{position:absolute;top:24px;left:24px;
  width:96px;height:96px;border-radius:50%;background:var(--pink);padding:16px;
  box-shadow:0 6px 16px rgba(61,48,180,.18);object-fit:contain}
.tst-name{font-weight:700;color:var(--pink);font-size:15px}
/* EXACT VALUE measured live from source: role and org are the SAME pink as
   the name (not purple/faded) and the same 15px size, not 12px. */
.tst-role{font-size:15px;color:var(--pink);opacity:1;padding-bottom:12px}
.tst-org{font-size:15px;font-weight:700;color:var(--pink)}

/* ============================================================================
   FAQ + CONTACTO
   ========================================================================= */
/* VIEWPORT-DRIVEN MODEL — source's real outer wrapper (elementor-element-
   b61744c) is min-height:100vh at EVERY breakpoint (not just mobile), with
   display:flex;align-items:center;justify-content:center — confirmed live:
   rendered height == viewport height whenever content is shorter (1440x1117
   -> 1117px), and content forces it taller only when it doesn't fit (both
   1440x900 and 1440x700 settle at the SAME 1024.6px, i.e. content's own
   natural height, not the differing min-heights). Replaces the previous
   fixed padding:clamp(24px,8vw,100px). */
.faq-contact{background:var(--white);display:flex;align-items:center;justify-content:center;min-height:100vh}
/* Golden: gradient frame -> white inner card -> FAQ (left) + contact form (right) */
.faq-card{background:linear-gradient(50deg,var(--lilac) 23%,var(--orange) 99%);
  border-radius:var(--radius-card);padding:clamp(20px,3vw,40px);
  max-width:1123px;margin-inline:auto}
/* EXACT VALUE from source (elementor-element-09b4ccf/5be132e): the FAQ
   column is vertically CENTERED against the form column, not top-aligned. */
.faq-inner{background:var(--white);border-radius:20px;
  padding:clamp(18px,2.2vw,30px) clamp(22px,3.4vw,44px);
  display:flex;gap:clamp(24px,4vw,52px);align-items:center}

.faq-list{flex:1 1 480px;display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:10px}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel);border-radius:10px;padding:15px 18px;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{color:var(--ink-purple);font-size:18px;font-weight:700;line-height:1.35}
.faq-chev{flex:0 0 auto;color:var(--ink-purple);display:inline-flex;transition:transform .3s var(--ease)}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:14px 19px 4px}
.faq-a p{color:var(--ink-purple);font-size:16px}

.contact{position:relative;flex:1 1 400px;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.contact-decor{position:absolute;top:-46px;right:-6px;width:clamp(64px,8vw,104px);height:auto}
.contact-title{color:var(--ink-purple);font-size:clamp(23px,3vw,30px);line-height:1.3}
.contact-lead{color:var(--ink-purple);font-size:16px}
.contact-form{display:flex;flex-direction:column;gap:11px;width:100%;text-align:left}
.contact-form .field{display:flex;flex-direction:column;gap:6px;margin:0}
.contact-form label{font-size:13px;font-weight:500;color:var(--ink-purple)}
/* Golden inputs sit on the same very-light lavender panel as the FAQ summaries */
.contact-form input,.contact-form textarea{
  font:inherit;color:var(--ink-purple);background:var(--panel);
  border:0;border-radius:14px;padding:13px 15px;width:100%;
  box-shadow:none}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(61,48,180,.15)}
.contact-form textarea{resize:vertical;min-height:78px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-submit{margin-top:6px;align-self:stretch}
.form-note{min-height:1.2em;font-size:13px;font-weight:500;text-align:center}
.form-note.is-error{color:#b3123b}
.form-note.is-ok{color:#1c7a3e}

@media (min-width:901px) and (max-width:1024px){
  /* Golden tablet contact block ≈1210px (min-height 100vh + content) — keep the
     form/frame roomier than the trimmed desktop values */
  .faq-inner{padding:clamp(42px,4.8vw,58px) clamp(26px,3.6vw,46px)}
  .contact{gap:16px}
  .contact-form input,.contact-form textarea{padding:15px}
  .contact-form textarea{min-height:132px}
  .contact-form{gap:16px}
  .contact-decor{position:static;width:96px}
}
/* EXACT breakpoint copied from lactando5-release-staging: Contáctanos sits
   ABOVE the FAQ list (single stacked column) starting at 1024px, not 900px
   — verified directly (contact/faq share the same X at ≤1024, side-by-side
   at ≥1025). */
@media (max-width:1024px){
  /* EXACT VALUE from source: below 1024px BOTH the gradient frame
     (elementor-element-b624e62) and the white panel (5be132e) also become
     min-height:100vh (confirmed live: computed min-height == viewport
     height at 1024x768, 768x1024 and 390x844) — not just the outer
     section. */
  .faq-card{min-height:100vh;display:flex;align-items:center;justify-content:center}
  .faq-inner{flex-direction:column-reverse;align-items:stretch;min-height:100vh;justify-content:center}
  /* EXACT VALUE from source (elementor-element-dcac7aa): at this tier the
     contact block is LEFT-aligned and stretches to the SAME width as the
     FAQ list above it (707px measured, i.e. full faq-inner content width),
     not a centered 460px-capped column — confirmed live, the decorative
     cloud is the only centered/absolute element, the heading/copy/form all
     hug the left edge like the FAQ summaries do. */
  .contact{max-width:none;align-self:stretch;width:auto;align-items:flex-start;text-align:left}
  .faq-list{flex-basis:auto}
}
@media (max-width:767px){
  .faq-q{font-size:16px}
  .faq-a p{font-size:15px}
  .contact-lead{font-size:14px}
  /* MOBILE FAQ/CONTACT MODEL — verified live at 390x844 against the real
     source (not approximated). The gradient "frame" everyone sees at
     desktop/tablet never disappears in the CSS/DOM at this tier: it's still
     painted (elementor-element-b624e62 keeps its gradient background-image
     unconditionally). What actually happens is the white inner panel
     (5be132e) and its own child row (09b4ccf) lose ALL their padding/radius
     at ≤767 and become byte-for-byte the same box as the gradient frame
     (confirmed live: both measured x=10/y=11841/w=370/h=1260, identically),
     so the white panel sits perfectly flush on top of the gradient and hides
     it completely — no gradient is ever visible on a real mobile viewport.
     Reproduced here by zeroing .faq-card's own padding/radius (the frame)
     so .faq-inner (white, opaque) covers it edge-to-edge. */
  /* EXACT VALUE from source: the section's own side inset here is 10px
     (b624e62 measured x=10 of a 390px viewport), not the shared .wrap's
     16px (4vw clamped) — scoped to just this section so no other ≤767
     section's padding is touched. */
  .faq-contact .wrap{padding-inline:10px}
  .faq-card{padding:0;border-radius:0}
  /* EXACT VALUE from source: .faq-inner here is standing in for TWO nested
     source boxes — 5be132e (the opaque white panel, full 100% width of the
     gradient frame, padding:40px 0) wrapping its own child 09b4ccf (the
     actual FAQ+contact row, only 93% width, padding:60px 0). Collapsing
     them into one element means .faq-inner must STAY 100% wide (otherwise
     the gradient frame peeks out at the sides — the white panel's whole job
     is to fully cover it) and take 09b4ccf's 93%-width inset as left/right
     PADDING instead: (370-344)/2 = 13px measured live. Vertical padding is
     the sum of both levels' own padding (40+60=100px) — that combined
     100px top/bottom is the "bastante espacio vertical" the user saw above
     the content; it's real, not a bug, just not reproduced before. */
  .faq-inner{border-radius:0;padding:100px 13px;width:100%}
  /* EXACT VALUE from source (elementor-element-eb17c39): position:absolute
     with both left:209.64px AND right:65.66px set (relative to the contact
     block, 344px wide there) — i.e. NOT centered on the block, sitting
     roughly center-right, floating mostly above the "Contáctanos" heading
     (top:-81px) rather than pinned to the block's top-right corner like the
     desktop/tablet rule above. Width 87px (not the 64-104 desktop clamp). */
  .contact-decor{position:absolute;top:-81px;left:209.64px;right:auto;width:87px}
}

/* ============================================================================
   FOOTER
   ========================================================================= */
/* EXACT VALUE from source (elementor-element-9c01520, the outer footer
   section): NOT viewport-height-driven at all — plain auto height,
   padding-bottom:50px only (no padding-top). */
.site-footer{background:var(--white);padding:0 0 50px}
/* EXACT VALUE from source (elementor-element-6004fd3, the gradient card):
   padding-top/bottom:30px, no side padding of its own (horizontal inset
   comes from the inner content-width, not card padding). */
.footer-bar{background:linear-gradient(90deg,var(--peach) 9%,var(--pink-soft) 83%);
  border-radius:var(--radius-card);padding:30px clamp(24px,4vw,44px);
  display:flex;gap:34px 40px;align-items:flex-end;flex-wrap:wrap;max-width:1123px;margin-inline:auto}
/* EXACT VALUE from source (elementor-element-f9277d5): the brand column has
   its OWN real min-height:20vh with justify-content:flex-end — the "extra
   breathing room above the logo" isn't card padding at all, it's empty
   space inside this column, above the bottom-aligned logo+text, that the
   previous padding-top hack was approximating from the wrong element. */
.footer-brand{display:flex;flex-direction:column;justify-content:flex-end;min-height:20vh;
  gap:16px;flex:1 1 320px;max-width:430px}
.footer-brand img{width:238px;height:auto}
.footer-brand p{color:var(--pink);font-size:16px}
/* EXACT VALUE from source (elementor-element-a373e4a): nav + social/legal
   are NOT direct siblings of brand — they're grouped in their own row,
   nested one level in. That row stays flex-direction:row all the way down
   to 767px (only the OUTER brand-vs-this-group split collapses at 1024px);
   the previous flat structure collapsed all four groups into one column at
   1024px, which doesn't match source (nav and social/legal stay side by
   side there). */
.footer-links{display:flex;align-items:flex-end;gap:34px 40px}
.footer-nav ul{display:flex;flex-direction:column;gap:2px}
.footer-nav a{display:inline-block;padding:3px 20px;color:var(--pink);font-size:16px}
.footer-nav a:hover{color:var(--purple)}
.footer-right{display:flex;flex-direction:column;gap:16px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:50px;height:50px;border-radius:50%;background:var(--pink);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s var(--ease)}
.footer-social a:hover{background:var(--purple)}
.footer-social svg{width:25px;height:25px}
.footer-legal{display:flex;flex-direction:column;gap:4px}
.footer-legal a{color:var(--pink);font-size:16px}
.footer-legal a:hover{color:var(--purple)}
/* EXACT VALUE measured live from source (walking up from the text node to
   the actual coloured element, not its inner text wrapper): the pill is a
   wide capsule at ~80% of the gradient block's width, centered — not the
   ~50%-wide pill an earlier, wrong measurement produced. */
.copyright{flex:0 0 100%;display:flex;justify-content:center;margin:30px 0 0}
.copyright span{width:80%;background:var(--pink);color:var(--white);
  border-radius:100px;padding:9px 22px;font-weight:600;font-size:14.5px;text-align:center}
/* AUTHORIZED DEVIATION (not part of the source): "Desarrollado por Lexatek"
   credit appended inline to the existing copyright text — same wrapper, no
   new row/column, inherits the copyright's own font/size/weight/color. */
.credit-lexatek{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);
  text-underline-offset:2px;transition:text-decoration-color .2s var(--ease)}
.credit-lexatek:hover,.credit-lexatek:focus-visible{text-decoration-color:currentColor}

/* EXACT VALUE from source (elementor-element-bb1940c): below 1024px this
   boxed wrapper is min-height:58vh — confirmed live at 1024x768/768x1024/
   390x844 (rendered minH == 58% of viewport height in all three). The
   gradient card's own padding also changes for real (elementor-element-
   6004fd3): padding-top:50px / padding-bottom:20px, not a fluid clamp. */
@media (max-width:1024px){
  /* width:100% on the .wrap fixes a flex-item shrink-to-fit bug: making
     .site-footer a row flex container (to vertically center via
     align-items) turns its single .wrap child into a flex item that
     defaults to content-width instead of filling the row, collapsing the
     whole footer-bar down to ~618px with huge phantom side margins. */
  .site-footer{min-height:58vh;display:flex;align-items:center;padding:0}
  .site-footer .wrap{width:100%}
  /* EXACT VALUE from source (eab72b2): no align-items override at this
     tier — it stays the default flex-end, which (since brand/footer-links
     both stretch close to the full row width) reads as left-aligned
     content, not the centered/text-align:center block this had before. */
  .footer-bar{flex-direction:column;align-items:stretch;text-align:left;
    gap:clamp(24px,calc(24px + (1024px - 100vw) * 0.11),52px);
    padding:50px clamp(24px,4vw,44px) 20px}
  .footer-brand{align-items:flex-start;gap:18px;flex-basis:auto}
  /* EXACT VALUE from source (elementor-element-a373e4a): nav and
     social/legal stay SIDE BY SIDE (row) all the way down to 767px — only
     brand-vs-this-group collapses to a column at 1024px, this inner pair
     doesn't. */
  .footer-links{width:100%;justify-content:space-between;align-items:flex-start}
  .footer-nav ul{gap:6px}
  .footer-right{align-items:flex-end;gap:12px}
  .footer-legal{align-items:flex-end;gap:6px}
  /* EXACT VALUE from source at 768-1024 (tablet): still an inset rounded
     pill (radius exceeds half its own height, so it caps into a full
     capsule) but now spanning nearly the whole card width, not ~50%. */
  .copyright{margin-top:28px;align-self:stretch}
  .copyright span{width:100%}
}
@media (max-width:767px){
  /* EXACT VALUE from source: card padding-top:55px, padding-bottom:0 at
     this tier (elementor-element-6004fd3), not a symmetric 26/26. */
  /* EXACT VALUE from source: below 767px brand/copy AND the nav+social/
     legal group go back to centered (unlike the left-aligned 768-1024
     tier). */
  .footer-bar{gap:24px;padding:55px 20px 0;align-items:center;text-align:center}
  .footer-brand{align-items:center;gap:14px}
  .footer-brand img{width:190px}
  /* EXACT VALUE from source: the footer-nav column carries elementor-hidden-
     mobile — it's not shown at all below 767px, only brand + social + legal. */
  .footer-nav{display:none}
  /* EXACT VALUE from source (a373e4a at <=767px): the row finally collapses
     to a column here too. */
  .footer-links{flex-direction:column;justify-content:center;align-items:center;width:auto}
  .footer-right{align-items:center}
  .footer-legal{align-items:center}
  /* EXACT VALUES from source: below 767px the footer gradient goes
     full-bleed edge-to-edge (no rounded floating card, no side inset) and
     the copyright bar is a flush, square-cornered strip — unlike tablet's
     inset capsule or desktop's ~50%-wide centered pill. */
  .site-footer .wrap{padding-inline:0;max-width:none}
  .footer-bar{border-radius:0;width:100%;max-width:none}
  .copyright{margin:28px -20px 0;align-self:stretch;background:var(--pink);
    padding:10px 20px;border-radius:0}
  .copyright span{background:none;padding:0;border-radius:0;width:auto}
}

/* ============================================================================
   MOBILE MENU  (dialog / popup — breakpoint móvil)
   ========================================================================= */
.mobile-menu{position:fixed;inset:0;z-index:9999;display:none}
.mobile-menu[data-open]{display:block}
.mobile-menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.mobile-menu-panel{position:absolute;inset:0;overflow:auto;
  background:linear-gradient(var(--peach) 0%,var(--pink-soft) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:64px 24px}
.mobile-menu-close{position:absolute;top:16px;right:16px;background:transparent;color:var(--purple);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.mobile-menu-logo{width:min(60%,248px);height:auto}
.mobile-menu-panel nav ul{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,360px)}
.mobile-menu-panel nav a{display:block;width:100%;text-align:center;padding:13px 20px;color:var(--cream);font-size:19px}
.mobile-menu-panel nav a:hover{color:var(--purple)}
.mobile-menu-social{display:flex;gap:12px;margin-top:4px}
.mobile-menu-social a{width:44px;height:44px;border-radius:50%;background:var(--pink);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center}

body.menu-open{overflow:hidden}

/* ============================================================================
   SCROLL REVEALS
   ========================================================================= */
/* EXACT VALUES copied from the source: every scroll-triggered fadeIn/
   fadeInUp/fadeInLeft/fadeInRight element (hero widget, promise pillars,
   etc.) measures animation-duration:1.25s, timing-function:ease — not the
   0.7s/cubic-bezier this used. */
.reveal{opacity:0;transition:opacity 1.25s ease,transform 1.25s ease}
/* EXACT VALUES: the source's real @keyframes fadeInUp/fadeInLeft/fadeInRight
   (animate.css, via Elementor) start from translate3d(0,100%,0) / (-100%,0,0)
   / (100%,0,0) — 100% of the ELEMENT'S OWN size, not a small fixed nudge. */
.reveal-up{transform:translateY(100%)}
.reveal-left{transform:translateX(-100%)}
.reveal-right{transform:translateX(100%)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .hero-track,.logo-track{transition:none}
}

/* ============================================================================
   STATIC MASTER PHASE — entrance reveals temporarily forced to final state.
   Do NOT delete the .reveal rules above or the scrollReveals() JS in site.js:
   this override just makes every .reveal element render already-visible,
   already-in-place, regardless of scroll position, so static visual QA isn't
   broken by scroll-triggered opacity/transform (e.g. the white gap that used
   to appear between HERO and the video section before it scrolled into view).
   Remove ONLY this block to re-enable entrance animations in the motion
   phase — everything needed to do so is left intact above.
   ========================================================================= */
.reveal,.reveal-up,.reveal-left,.reveal-right{opacity:1 !important;transform:none !important;transition:none !important}