/* Layout for the 4A Lab one-page site.
   All colour, type, spacing, radius, shadow and motion values come from the tokens
   in css/tokens/. Ported verbatim from the design kit (ui_kits/website/site.css);
   additions made during the port are marked "PORT:". */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg)}
.hdr{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);height:var(--header-h)}
/* border:0 because the base stylesheet underlines every anchor, and the logo
   became one when it stopped being a button — leaving a hairline ruled under
   the wordmark. */
.hdr__home{display:flex;align-items:center;flex:none;text-decoration:none;border:0}
/* PORT: the kit inlined 43px on the logo. A little more presence was asked for,
   and holding it here rather than on the tag is what lets it step down on a
   phone, where the bar has three things to fit instead of one. */
.hdr__home img{height:50px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-7)}
.nav a{display:block;text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);padding:6px 0;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-editorial),border-color var(--dur-fast) var(--ease-editorial)}
/* Hovering draws the rule in pale, so it previews the mark the current section
   wears rather than announcing itself in a second, unrelated way. */
.nav a:hover{color:var(--blue-deep);border-color:var(--blue-light)}
.nav a[aria-current=page]{color:var(--blue-deep);border-color:var(--blue-bright)}
.nav a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}

/* The menu button and the short CTA label are phone-only; the media query below
   is what turns them on. */
.hdr__menu{display:none;align-items:center;gap:var(--space-3);background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-deep)}
.hdr__menu__mark{font-size:.9em;transition:transform var(--dur-fast) var(--ease-editorial)}
.hdr__menu[aria-expanded=true] .hdr__menu__mark{transform:rotate(180deg)}
.hdr__menu:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.hdr__cta__short{display:none}
.sect{padding:var(--section-y-tight) 0}
.sect--tight{padding:var(--section-y) 0 var(--section-y-tight)}
.sect--deep{background:var(--surface-deep);color:var(--text-on-deep-muted)}
.sect--pale{background:var(--surface-soft)}
.sect--cream{background:var(--surface-warm)}
.hero{position:relative;padding:var(--space-10) 0 var(--space-11);overflow:hidden}
.hero .wrap{position:relative;z-index:1}
/* The text column is sized by the headline: its longest line has to hold
   "y estén listas para elegirte." unbroken, which the 7fr/5fr split the kit
   shipped is ~30px short of. The art column only anchors the animation —
   that runs wider than its column and bleeds anyway — so the width comes
   out of it rather than off the headline. */
.hero__grid{display:grid;grid-template-columns:8fr 4fr;gap:var(--space-9);align-items:center}
/* A grid item's floor is its content unless told otherwise, and the marquee track
   is deliberately wider than the page — without this it drags the whole column
   out to the track's length. */
.hero__grid>*{min-width:0}
.hero__lede{font-size:var(--fs-body);line-height:var(--lh-body);max-width:52ch;color:var(--text-body)}
.microcopy{font-family:var(--font-sans);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
/* The one thing in the hero that keeps moving once the entrance is over, so the
   copy stops sitting dead still beside a sticker that never stops drifting. Slow
   enough — a full pass takes most of a minute — to read as a current rather than
   a ticker. fourA-marquee shipped with the kit and had never been wired to
   anything; it slides the track half its length, which is a whole number of
   copies, so the loop has no seam. */
.microcopy--stream{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 60px),transparent)}
.microcopy__track{display:flex;width:max-content;animation:fourA-marquee 40s linear infinite}
.microcopy__track>span{white-space:nowrap}
.microcopy__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.fitlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.fitlist li{display:flex;gap:var(--space-4);align-items:flex-start;font-size:var(--fs-body);line-height:var(--lh-body)}
.fitlist li>span:last-child{flex:1}
.fitlist .lab-icon{flex:none;width:1em;height:1em}
.fitlist li>:first-child{color:var(--blue-bright);margin-top:.3em}
.hero__acts{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.hero__art{position:relative;height:440px}
.hero__art .lab-sticker{position:absolute}
/* The loop's own frame is mostly empty field to the left of the figure, and the
   keyed canvas keeps that emptiness as transparent pixels. So the element is
   sized by where the figure has to land, not by the figure itself: it runs wide,
   hangs off the right edge (the hero clips it), and the dead half lies over the
   text column doing nothing. pointer-events keeps it from swallowing clicks. */
.hero__media{
  /* Sized off the art column rather than in pixels, so the figure keeps its
     distance from the copy at every width — pinned to a fixed height it stayed
     put while the column narrowed and ended up sitting on the second button. */
  --frame:302%;                  /* the clip's whole frame, incl. its empty half */
  width:var(--frame);
  aspect-ratio:1280/720;
  /* Reach past the viewport edge, not past the column: once the container caps
     at --container-max the gutter keeps growing while the column does not, so a
     plain percentage stops short on wide screens. .hero clips the overshoot. */
  right:calc(-1 * (var(--gutter-lg) + 20px) - max(0px, (100vw - var(--container-max)) / 2));
  top:50%;
  /* The figure sits at 0.476 of the frame's height, so centring the figure means
     pulling up by that much of it: 0.476 × the 0.5625 the ratio gives back. */
  margin-top:calc(var(--frame) * -0.243);   /* nudged down, off "elegirte" */
  pointer-events:none;
  /* The die cut is white on a white page, so the shadow is what gives the
     sticker its shape — it has to be here rather than left to .lab-sticker,
     whose --shadow-sticker carries a spread value that drop-shadow() has no
     slot for and quietly discards the whole filter over. Two passes: a wide
     soft one for the lift, a tight one to seat the edge. */
  filter:drop-shadow(0 18px 26px rgba(3,55,142,.20))
         drop-shadow(0 2px 3px rgba(3,55,142,.12));
}
.hero__media>canvas{display:block;width:100%;height:100%}
.hero__media>video{display:none}
/* Stacked, the art drops into a row of its own below the copy. There is no
   longer an edge beside it to hang off, and at full size it swallowed the row
   and the line of services under the buttons — so it comes down to the row's
   own height and centres in it. */
/* Desktop only. Stacked under the copy the figure lost the edge it was built to
   hang off and read as clutter, so below this width the hero goes back to the
   single column it shipped as. js/site.js watches the same width and leaves the
   file undownloaded under it.
   The cut was at 1280px and that turned out to be too high: a laptop browsing in
   a window that is not maximised sits just under it, so the owner of the site
   could not see her own hero. 1100px still excludes every phone and tablet. */
@media (max-width:1099px){
  .hero__art{display:none}
}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-10);align-items:start}
.split--rev{grid-template-columns:7fr 5fr}
.lede{font-size:var(--fs-body);line-height:var(--lh-body);max-width:52ch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9)}
.stack{display:flex;flex-direction:column;gap:var(--space-6)}
.stack--lg{gap:var(--space-9)}
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5);border-top:1px solid var(--border-hairline);padding-top:var(--space-7)}
.funnel__n{font-family:var(--font-display);font-size:var(--fs-heading-l);font-weight:var(--fw-bold);color:var(--blue-peri);line-height:1}
.funnel h4{margin:var(--space-4) 0 var(--space-3);font-family:var(--font-display);font-size:var(--fs-heading-m);font-weight:var(--fw-bold);color:var(--blue-deep)}
.funnel p{font:var(--type-body-s);color:var(--text-body)}
.funnel--6{grid-template-columns:repeat(6,1fr)}
.cap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.cap__i{border-top:2px solid var(--blue-bright);padding-top:var(--space-5)}
.cap__i span{font-family:var(--font-sans);font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.cap__i h5{margin:var(--space-3) 0 0;font-family:var(--font-display);font-size:var(--fs-heading-s);font-weight:var(--fw-bold);color:var(--blue-deep)}
.tbl{width:100%;border-collapse:collapse;font:var(--type-body-s)}
.tbl th,.tbl td{text-align:left;padding:var(--space-5) var(--space-4);border-bottom:1px solid var(--border-hairline)}
.tbl thead th{font-family:var(--font-sans);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-deep)}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:center;width:15%}
.tbl .yes{color:var(--blue-bright);font-weight:var(--fw-medium)}
.tbl .no{color:var(--text-muted);opacity:.5}
.ftr{background:var(--surface-deep);color:var(--text-on-deep-muted);padding:var(--space-9) 0 var(--space-7)}
/* Held in from the page's own measure. At full width the three columns ended up
   with more air between them than inside them, and the last one trailed off into
   empty blue. */
.ftr .wrap{max-width:1040px}
.ftr__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-9);align-items:start}
/* The badge is a sticker, so it behaves like the others: tilted, drifting, and
   lifted off the page. Its shadow cannot come from --shadow-sticker — that one is
   blue, tuned for the pale sections, and blue on this blue is nothing. */
.ftr__badge{--tilt:-5deg;display:inline-block;line-height:0;transform:rotate(var(--tilt));
  filter:drop-shadow(0 16px 26px rgba(0,20,56,.45)) drop-shadow(0 2px 4px rgba(0,20,56,.30));
  animation:fourA-drift var(--dur-drift) var(--ease-float) infinite}
.ftr__badge>img{height:120px;width:auto}
.ftr a{color:var(--cream);border-bottom-color:transparent;font-size:var(--fs-body-s)}
.ftr a:hover{border-bottom-color:currentColor}
.ftr__links{display:flex;flex-direction:column;gap:var(--space-4)}
.ftr__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-on-deep);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase}
/* The privacy link was removed rather than left pointing at nothing; there is no
   policy to point it at yet. */
.reveal{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
/* In the hero the block no longer arrives in one piece. The headline is already
   cut into lines by the markup — the kit built that structure and never animated
   it — so each line rises after the one above, and the paragraph, the buttons and
   the service line follow. Same keyframe throughout; only the delays differ. */
.hero .reveal,.hero .reveal .lab-head{animation:none}
.hero .reveal>*,.hero .lab-head__line{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
.hero .lab-head__line:nth-child(1){animation-delay:80ms}
.hero .lab-head__line:nth-child(2){animation-delay:160ms}
.hero .lab-head__line:nth-child(3){animation-delay:240ms}
.hero .lab-head__line:nth-child(4){animation-delay:320ms}
.hero .reveal>:nth-child(3){animation-delay:440ms}
.hero .reveal>:nth-child(4){animation-delay:540ms}
.hero .reveal>:nth-child(5){animation-delay:640ms}
/* Every section below the hero arrives the same way: its top-level blocks rise
   in sequence as the section comes into view. The hidden state is only ever set
   by js/site.js — with the script gone, or with reduced motion asked for, the
   attribute is never written and the page simply renders. */
.sect[data-reveal=pending]>.wrap>*{opacity:0}
.sect[data-reveal=in]>.wrap>*{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
.sect[data-reveal=in]>.wrap>:nth-child(2){animation-delay:90ms}
.sect[data-reveal=in]>.wrap>:nth-child(3){animation-delay:180ms}
.sect[data-reveal=in]>.wrap>:nth-child(4){animation-delay:270ms}
.sect[data-reveal=in]>.wrap>:nth-child(n+5){animation-delay:360ms}

/* The global reduced-motion rule collapses durations but leaves delays alone,
   which would hold the hero blank in steps for two thirds of a second and then
   snap each piece in. Nothing waits, and nothing loops. */
@media (prefers-reduced-motion:reduce){
  .hero .reveal>*,.hero .lab-head__line{animation-delay:0ms!important}
  .sect[data-reveal=in]>.wrap>*{animation-delay:0ms!important}
  .microcopy__track{animation:none}
}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* ---------------------------------------------------------------- Soluciones 4A
   Layered plan cards: the three cards sit shoulder to shoulder with the featured
   one lifted, wider and overlapping its neighbours. Shape and rhythm only — every
   colour, string and typeface is the one the design system already sets. */
#servicios{--plan-radius:28px}

/* Three cards of one size. The middle one used to be wider, taller, overlapping
   its neighbours and filled with colour, all at once — four kinds of emphasis on
   the card that, listing only what the other two already said, carried the least
   new information. It leads now on a hairline and a badge, and the row reads as
   one family. */
#servicios .grid-3{
  align-items:stretch;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-6);
}
#servicios .lab-service{
  position:relative;
  z-index:1;
  border:0;
  border-radius:var(--plan-radius);
  padding:var(--space-9) var(--space-8) var(--space-8);
  gap:var(--space-5);
  /* Borderless like the reference, so the card has to read on the white page by
     depth alone — the resting shadow steps up one level to carry that. */
  box-shadow:var(--shadow-card-hover);
}
/* The shared rule centres each list in its card, which is invisible on a list of
   twelve and very visible on a list of two. This one starts at the top instead,
   so its first line sits on the same baseline as its neighbours' and the spare
   room falls below, where it belongs. */
#servicios .lab-service--lead .lab-service__list{justify-content:flex-start}

/* The whole distinction: a rule across the top, and the badge in accent. */
#servicios .lab-service--lead::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  border-radius:var(--plan-radius) var(--plan-radius) 0 0;
  background:var(--blue-bright);
}

/* Header block: badge, then the plan name as the display element, both centred. */
#servicios .lab-service>span:first-child{align-self:center}
#servicios .lab-service__name{
  font-size:clamp(26px,2.6vw,var(--fs-display-s));
  overflow-wrap:anywhere;
  text-align:center;
}
#servicios .lab-service__claim{text-align:center;text-wrap:pretty}

/* Air between the header block and the list, as in the reference. Rows stay
   left-aligned; the block itself is centred so it doesn't hang off to one side
   in the wider featured card. */
#servicios .lab-service__list{
  margin-top:var(--space-6);
  /* Flush to the card's own left edge, not centred on the width of its longest
     row. Centring a fit-content block indents each list by a different amount —
     70px, 59px and 105px for lists of twelve, eleven and two — so the shortest
     one read as centred while the others read as left-aligned. The rule existed
     to keep the block off-centre in the old wider featured card, which is gone. */
  width:100%;
  margin-inline:0;
  gap:var(--space-3);                       /* tightened: these lists run long */
  /* Now that the shorter cards stretch to the shared height, their spare space
     goes to the list and centres inside it — header stays up, CTA stays down,
     and no card ends in a void above its button. */
  flex:1 1 auto;
  justify-content:center;
}

/* Checks become filled discs: the span is the disc, its ::before is the same
   check glyph knocked out of it, masked from the --lab-icon-url already on it. */
#servicios .lab-service__item .lab-icon{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-top:0;
  border-radius:var(--radius-circle);
  background:var(--blue-bright);
  -webkit-mask:none;
  mask:none;
}
#servicios .lab-service__item .lab-icon::before{
  content:"";
  width:12px;
  height:12px;
  background:var(--white);
  -webkit-mask:var(--lab-icon-url) center/contain no-repeat;
  mask:var(--lab-icon-url) center/contain no-repeat;
}

/* Footer: note and pill CTA centred at the foot of the card. */
#servicios .lab-service__foot{margin-top:0;align-items:center;text-align:center}
#servicios .lab-service__foot>div{max-width:38ch}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.sticker-card{position:relative;background:#fff;padding:34px 32px 40px;border-radius:20px;clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%);filter:drop-shadow(0 14px 22px rgba(3,55,142,.16))}
.sticker-card::before{content:"";position:absolute;inset:11px;border:1.5px solid var(--blue-light);border-radius:12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);pointer-events:none}
.sticker-card::after{content:"";position:absolute;right:0;bottom:0;width:36px;height:36px;background:linear-gradient(135deg,#e6eef8 0%,#fff 62%);border-top-left-radius:10px;box-shadow:-2px -2px 7px rgba(3,55,142,.14)}
.sticker-card>*{position:relative;z-index:1}

/* ------------------------------------------------- Nuestro mundo · entrance
   The section holds one top-level block, so the shared rule brought the whole
   thing — headline, paragraph and fourteen tags — up as a single slab. Here the
   pieces arrive in reading order instead, and the tags, which are fourteen
   separate objects and the one place on the page where a stagger is literally
   what the content is, come in one at a time. Entrance only: nothing here keeps
   moving afterwards, so it never competes with the hero. */
#especializacion[data-reveal=pending]>.wrap>*{opacity:1}
#especializacion[data-reveal=in]>.wrap>*{animation:none}

#especializacion[data-reveal=pending] .lab-seclabel,
#especializacion[data-reveal=pending] .lab-head__line,
#especializacion[data-reveal=pending] .lede,
#especializacion[data-reveal=pending] .chips>*,
#especializacion[data-reveal=pending] .lab-notice{opacity:0}

#especializacion[data-reveal=in] .lab-seclabel,
#especializacion[data-reveal=in] .lab-head__line,
#especializacion[data-reveal=in] .lede,
#especializacion[data-reveal=in] .chips>*,
#especializacion[data-reveal=in] .lab-notice{
  animation:fourA-rise var(--dur-slow) var(--ease-editorial) both;
}
#especializacion[data-reveal=in] .lab-head__line:nth-child(1){animation-delay:80ms}
#especializacion[data-reveal=in] .lab-head__line:nth-child(2){animation-delay:160ms}
#especializacion[data-reveal=in] .lab-head__line:nth-child(3){animation-delay:240ms}
#especializacion[data-reveal=in] .lede{animation-delay:360ms}
#especializacion[data-reveal=in] .chips>:nth-child(1){animation-delay:440ms}
#especializacion[data-reveal=in] .chips>:nth-child(2){animation-delay:480ms}
#especializacion[data-reveal=in] .chips>:nth-child(3){animation-delay:520ms}
#especializacion[data-reveal=in] .chips>:nth-child(4){animation-delay:560ms}
#especializacion[data-reveal=in] .chips>:nth-child(5){animation-delay:600ms}
#especializacion[data-reveal=in] .chips>:nth-child(6){animation-delay:640ms}
#especializacion[data-reveal=in] .chips>:nth-child(7){animation-delay:680ms}
#especializacion[data-reveal=in] .chips>:nth-child(8){animation-delay:720ms}
#especializacion[data-reveal=in] .chips>:nth-child(9){animation-delay:760ms}
#especializacion[data-reveal=in] .chips>:nth-child(10){animation-delay:800ms}
#especializacion[data-reveal=in] .chips>:nth-child(11){animation-delay:840ms}
#especializacion[data-reveal=in] .chips>:nth-child(12){animation-delay:880ms}
#especializacion[data-reveal=in] .chips>:nth-child(13){animation-delay:920ms}
#especializacion[data-reveal=in] .chips>:nth-child(14){animation-delay:960ms}
#especializacion[data-reveal=in] .lab-notice{animation-delay:1040ms}

@media (prefers-reduced-motion:reduce){
  #especializacion[data-reveal=in] .lab-seclabel,
  #especializacion[data-reveal=in] .lab-head__line,
  #especializacion[data-reveal=in] .lede,
  #especializacion[data-reveal=in] .chips>*,
  #especializacion[data-reveal=in] .lab-notice{animation-delay:0ms!important}
}

/* --------------------------------------------------------------- Contacto
   The card started level with the section label, which left it floating above
   the headline it belongs to. Dropped by the height of that label plus the
   stack's own gap, its top edge meets the first line of the headline. */
#contacto .contacto__cta{margin-top:calc(var(--space-9) + 17px)}

/* --------------------------------------------------------- Buen fit · arte y
   contraste
   The sticker fills the band between the headline and the list, which measured
   190px of empty column. Its own file is square with the plant narrow and
   centred, so the box is sized off the plant rather than the file: at this width
   the visible stem lands clear of the longest headline line and short of the
   list.

   The "no" block was built as a tinted panel and given --cream, which is the
   exact colour of the section it sits in — a card painted the colour of the
   table. It gets a surface of its own and a rule down its edge, so the section's
   two halves, what we are and what we are not, stop weighing the same. */
#fit .wrap{position:relative}
#fit .fit__art{
  position:absolute;
  left:22.6%;   /* as far left as the headline's second line allows */
  /* Stood on the section's edge instead of hanging in the middle of it: the wrap
     stops one --section-y-tight short of that edge, so the sticker is pushed back
     down by exactly that much and its stem lands on the line where the cream
     ends. Anything else and a plant appears to be growing out of nothing. */
  top:auto;
  bottom:calc(var(--section-y-tight) * -1 - 6px);   /* the file's own bottom margin */
  width:26%;
  pointer-events:none;
  z-index:0;
}
/* Tighter rows: the list is four short lines and was spaced as if it were prose,
   which is most of why the section ran long. */
#fit .fitlist{gap:var(--space-4)}
/* The list and the caveat under it were a full section-gap apart, as if they
   were two subjects. They are the two halves of one answer. */
#fit .split>.stack--lg{gap:var(--space-7)}
/* Mirrored so the leaves lean into the page rather than away from it. The flip
   lives on the image, not on the sticker: the wrapper's transform is spoken
   for by the tilt and the drift, and a second one there would cancel them. */
#fit .fit__art>img{display:block;width:100%;height:auto;transform:scaleX(-1)}
/* The sticker is a direct child of .wrap, so the section's own entrance rule was
   claiming it and overriding the placing animation the sticker component brings.
   Handed back, it lands like the other four and drifts afterwards. */
#fit[data-reveal=pending]>.wrap>.fit__art{opacity:1}
/* Restated at this weight rather than switched off: the section's rule sits
   above the component's, so simply cancelling it left the sticker with no
   animation at all. The placing plays while data-enter is on it, and the drift
   takes over the moment js/site.js clears the attribute. */
#fit[data-reveal=in]>.wrap>.fit__art{
  animation:fourA-drift var(--dur-drift) var(--ease-float) infinite;
}
#fit[data-reveal=in]>.wrap>.fit__art[data-enter=in]{
  animation:fourA-place var(--dur-place) var(--ease-place) both;
}
#fit .split>.stack{position:relative;z-index:1}

#fit .lab-notice{
  background:var(--white);
  border-left:3px solid var(--blue-peri);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--space-6) var(--space-7);
}
#fit .lab-notice__title{color:var(--blue-peri)}

/* The four conditions arrive one after another. */
#fit[data-reveal=pending] .fitlist li{opacity:0}
#fit[data-reveal=in] .fitlist li{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
#fit[data-reveal=in] .fitlist li:nth-child(1){animation-delay:120ms}
#fit[data-reveal=in] .fitlist li:nth-child(2){animation-delay:220ms}
#fit[data-reveal=in] .fitlist li:nth-child(3){animation-delay:320ms}
#fit[data-reveal=in] .fitlist li:nth-child(4){animation-delay:420ms}

@media (prefers-reduced-motion:reduce){
  #fit[data-reveal=in] .fitlist li{animation-delay:0ms!important}
}

/* Stacked, the two columns share one measure and there is no band left for the
   plant to stand in. */
@media (max-width:900px){
  #fit .fit__art{display:none}
}

/* ------------------------------------------------- Experiencia 4A · entrance
   The four were numbered 01-04, which claimed an order the content does not
   have: clarity, organisation, communication and optimisation run at the same
   time, they are not stages you pass through. The numbers were also the third
   numbered list in as many sections, right where the page should be closing.
   Gone, the rules and the titles order the reading on their own — and with no
   number above it, the title comes straight off its rule. */
#experiencia .cap__i>h5{margin-top:0}

#experiencia[data-reveal=pending] .cap__i{opacity:0}
#experiencia[data-reveal=in] .cap__i{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
#experiencia[data-reveal=in] .cap__i:nth-child(1){animation-delay:120ms}
#experiencia[data-reveal=in] .cap__i:nth-child(2){animation-delay:220ms}
#experiencia[data-reveal=in] .cap__i:nth-child(3){animation-delay:320ms}
#experiencia[data-reveal=in] .cap__i:nth-child(4){animation-delay:420ms}

@media (prefers-reduced-motion:reduce){
  #experiencia[data-reveal=in] .cap__i{animation-delay:0ms!important}
}

/* ------------------------------------------------ Nuestra metodología · 4A
   Analizar, Alinear, Activar, Acelerar. The method is named after the initials
   of its own four steps and nothing on the page said so — the only mention was
   "MÉTODO 4A™" in small type across the column, unattached to the list it names.
   Colouring the four initials makes the run of A's read down the column, and the
   trademark line stops needing an explanation.

   The steps are also a sequence, so a rule threads their markers the way the one
   in "Nuestra visión" threads its nodes: one device for process, used twice,
   rather than a different answer in each section. */
#metodo .metodo__pasos{position:relative}
#metodo .metodo__pasos::before{
  content:"";
  position:absolute;
  left:30px;                                /* the marker's centre: 60px / 2 */
  top:30px;
  bottom:30px;
  width:2px;
  margin-left:-1px;
  background:var(--border-on-deep);
}
/* The markers sit on the page's own ground so the rule passes behind them. */
#metodo .lab-step__key{position:relative;background:#03378E}
#metodo .lab-step{position:relative}
#metodo .lab-step__a{color:var(--blue-light)}

/* Arriving in order, so the four are read as steps rather than as a list. */
#metodo[data-reveal=pending] .lab-step{opacity:0}
#metodo[data-reveal=in] .lab-step{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
#metodo[data-reveal=in] .lab-step:nth-child(1){animation-delay:120ms}
#metodo[data-reveal=in] .lab-step:nth-child(2){animation-delay:240ms}
#metodo[data-reveal=in] .lab-step:nth-child(3){animation-delay:360ms}
#metodo[data-reveal=in] .lab-step:nth-child(4){animation-delay:480ms}

@media (prefers-reduced-motion:reduce){
  #metodo[data-reveal=in] .lab-step{animation-delay:0ms!important}
}

/* --------------------------------------------- Nuestra visión · el recorrido
   The six steps describe a path a person walks — discover, understand, decide,
   come back — and were drawn as six equal columns with no direction in them.
   They could have been shuffled and looked the same. The class was already
   called funnel; this is the shape catching up with the name.

   A rule runs through the six, each step sits on a node, and the numbers ride
   above the line with the labels below. It ends flat on the last node.

   The numbers were #A3D0FB on cream — 1.4:1, under any threshold for being
   visible at all. They take the accent blue the rest of the page uses. */
#vision .funnel{
  --track:2px;
  --node:13px;
  --lane:calc(100% / 6);        /* one column, gaps removed so the maths is clean */
  --num-h:40px;                 /* the band the number rides in, above the rule */
  --rule-y:calc(var(--num-h) + 14px);
  position:relative;
  gap:0;
  border-top:0;
  padding-top:0;
}
#vision .funnel>div{
  position:relative;
  padding:calc(var(--rule-y) + 26px) var(--space-5) 0 0;
}

/* The rule, ending on the last node rather than running out to the margin. */
#vision .funnel::before{
  content:"";
  position:absolute;
  left:calc(var(--node) / 2);
  width:calc(var(--lane) * 5);
  top:var(--rule-y);
  height:var(--track);
  background:linear-gradient(90deg,var(--blue-light),var(--blue-peri));
}

/* One node per step, sitting on the rule. The ring is the page's own ground, so
   the rule appears to pass behind each node rather than through it. */
#vision .funnel>div::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(var(--rule-y) - (var(--node) - var(--track)) / 2);
  width:var(--node);
  height:var(--node);
  border-radius:var(--radius-circle);
  background:var(--blue-peri);
  box-shadow:0 0 0 5px #F2EEE4;
}
#vision .funnel__n{position:absolute;top:0;left:0;margin:0;height:var(--num-h)}
#vision .funnel h4{margin:0}

/* Arriving in order, so the eye is walked along the rule the first time. */
#vision[data-reveal=pending] .funnel>div{opacity:0}
#vision[data-reveal=in] .funnel>div{animation:fourA-rise var(--dur-slow) var(--ease-editorial) both}
#vision[data-reveal=in] .funnel>:nth-child(1){animation-delay:200ms}
#vision[data-reveal=in] .funnel>:nth-child(2){animation-delay:300ms}
#vision[data-reveal=in] .funnel>:nth-child(3){animation-delay:400ms}
#vision[data-reveal=in] .funnel>:nth-child(4){animation-delay:500ms}
#vision[data-reveal=in] .funnel>:nth-child(5){animation-delay:600ms}
#vision[data-reveal=in] .funnel>:nth-child(6){animation-delay:700ms}

@media (prefers-reduced-motion:reduce){
  #vision[data-reveal=in] .funnel>div{animation-delay:0ms!important}
}

/* Stacked, the rule turns on its side and runs down the left of the column. The
   return curl is dropped: there is no line for it to fold back under. */
@media (max-width:900px){
  #vision .funnel{padding-top:0;row-gap:var(--space-7)}
  #vision .funnel>div{padding:0 0 0 var(--space-8)}
  #vision .funnel::before{
    left:calc(var(--node) / 2 - var(--track) / 2);
    top:0;
    bottom:var(--space-8);
    width:var(--track);
    height:auto;
    background:linear-gradient(180deg,var(--blue-light),var(--blue-peri));
  }
  #vision .funnel>div::before{top:6px;left:0}
  #vision .funnel__n{position:static;font-size:var(--fs-heading-m)}
}

/* ------------------------------------------------ El problema · entrance
   Only the top half is treated here: the headline arrives line by line like its
   neighbours', and the collage below keeps the block-level rise it already had,
   since the stickers carry their own entrance. */
#problema[data-reveal=pending]>.wrap>:first-child{opacity:1}
#problema[data-reveal=in]>.wrap>:first-child{animation:none}

#problema[data-reveal=pending] .split .lab-seclabel,
#problema[data-reveal=pending] .split .lab-head__line,
#problema[data-reveal=pending] .split .lede{opacity:0}

#problema[data-reveal=in] .split .lab-seclabel,
#problema[data-reveal=in] .split .lab-head__line,
#problema[data-reveal=in] .split .lede{
  animation:fourA-rise var(--dur-slow) var(--ease-editorial) both;
}
#problema[data-reveal=in] .split .lab-head__line:nth-child(1){animation-delay:80ms}
#problema[data-reveal=in] .split .lab-head__line:nth-child(2){animation-delay:160ms}
#problema[data-reveal=in] .split .lab-head__line:nth-child(3){animation-delay:240ms}
#problema[data-reveal=in] .split .lede{animation-delay:360ms}

@media (prefers-reduced-motion:reduce){
  #problema[data-reveal=in] .split .lab-seclabel,
  #problema[data-reveal=in] .split .lab-head__line,
  #problema[data-reveal=in] .split .lede{animation-delay:0ms!important}
}

/* ------------------------------------------- Puede que te esté pasando si…
   Colour-blocked collage: four tilted cards, the right column riding lower so
   the group reads as placed by hand rather than set in a grid. Copy and type
   are untouched; the die-cut peel treatment is what goes. */
#problema .grid-2{
  /* Pulled in from the full container width so the four sit as one cluster
     rather than drifting to opposite margins. */
  max-width:60rem;
  margin-inline:auto;
  column-gap:var(--space-5);
  row-gap:0;                                /* the pull below sets the real one */
  align-items:start;
}

#problema .sticker-card{
  clip-path:none;                           /* the peel belonged to the old look */
  border-radius:20px;
  padding:var(--space-7) var(--space-7) var(--space-8);
  filter:drop-shadow(0 14px 26px rgba(3,55,142,.2));
  transform:rotate(var(--tilt,0deg));
  transition:transform var(--dur-base) var(--ease-editorial);
}
/* The right-hand cards reach back over the gutter so neighbours overlap at the
   corners, and each card stacks above the one before it. */
#problema .grid-2>:nth-child(even){margin-left:calc(var(--space-8) * -1)}
#problema .sticker-card:nth-child(1){z-index:1}
#problema .sticker-card:nth-child(2){z-index:2}
#problema .sticker-card:nth-child(3){z-index:3}
#problema .sticker-card:nth-child(4){z-index:4}
#problema .sticker-card::before,
#problema .sticker-card::after{content:none}
#problema .sticker-card:hover{transform:rotate(0deg)}

#problema .sticker-card h4{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-heading-m);
  font-weight:var(--fw-bold);
  line-height:1.15;
  letter-spacing:var(--ls-heading);
  color:inherit;
}
#problema .sticker-card h4::after{        /* the rule under the title */
  content:"";
  display:block;
  height:2px;
  margin-top:var(--space-5);
  background:currentColor;
  opacity:.5;
}
#problema .sticker-card p{margin:var(--space-5) 0 0;font:var(--type-body-s);color:inherit}

/* Four cards, four blues. The two light grounds keep the deep-blue ink; the two
   dark ones take white, which is what the system already puts on deep surfaces. */
#problema .sticker-card:nth-child(1){--tilt:-2deg;background:var(--blue-light);color:var(--blue-deep)}
#problema .sticker-card:nth-child(2){--tilt:1.5deg;background:var(--blue-peri);color:var(--white)}
#problema .sticker-card:nth-child(3){--tilt:2deg;background:var(--blue-bright);color:var(--white)}
#problema .sticker-card:nth-child(4){--tilt:-1.5deg;background:var(--blue-pale);color:var(--blue-deep)}

/* The stagger: the right-hand column sits lower than the left. The second row is
   pulled up under it, closing a gap that read as two separate pairs rather than
   one cluster — the columns already overlap sideways, so the rows should meet
   too. Each offset is written out because they compound. */
#problema .grid-2>:nth-child(2){margin-top:var(--space-9)}
#problema .grid-2>:nth-child(3){margin-top:calc(var(--space-7) * -1)}
#problema .grid-2>:nth-child(4){margin-top:calc(var(--space-9) - var(--space-7))}

/* Sticker art, one per card, placed to overhang an edge so the collage reads as
   layered rather than framed. Each subject answers its card: a knot for the
   service that takes explaining, a chrysalis for content that informs without
   converting, a dandelion scattering seed for growth left to word of mouth, a
   compass for marketing run without direction. */
/* The four used to land at the same instant, which wastes what the animation is
   imitating: fourA-place is the gesture of pressing a sticker onto paper, and
   four hands pressing at once reads as a slide transition. Spaced out, it reads
   as someone placing them. */
#problema .grid-2>:nth-child(1) .lab-sticker{animation-delay:60ms}
#problema .grid-2>:nth-child(2) .lab-sticker{animation-delay:200ms}
#problema .grid-2>:nth-child(3) .lab-sticker{animation-delay:340ms}
#problema .grid-2>:nth-child(4) .lab-sticker{animation-delay:480ms}

#problema .sticker-card{isolation:isolate}   /* keep art over its own card only */
#problema .sticker-card__art{
  position:absolute;
  z-index:2;
  pointer-events:none;                        /* never block the card's text */
}
/* Held well clear of the right edge: the next card overlaps this one by 24px and
   stacks above it, so anything closer has its tail swallowed. */
#problema .sticker-card__art--knot{--tilt:-5deg;width:190px;right:64px;bottom:-42px}
#problema .sticker-card__art--chrysalis{--tilt:6deg;width:172px;right:-46px;top:-56px}
/* The dandelion reads best large, with the bloom resting on the left edge beside
   the title and the seed trail rising over the card's top-left corner. The left
   offset is what keeps the bloom clear of the title's text — loosen it and the
   seeds land on the words. */
#problema .sticker-card__art--dandelion{--tilt:-4deg;width:235px;left:-122px;top:-52px}
/* That 104px of clearance only exists once the viewport is wide enough for the
   60rem collage to float inside the gutters. Below 1280px it would hang off the
   page, so the dandelion comes in and down a size. */
@media (max-width:1279px){
  #problema .sticker-card__art--dandelion{width:144px;left:-50px;top:-33px}
  /* Same squeeze on the right: the chrysalis is rotated, so its box reaches
     further than its offset suggests and clips the page edge. */
  #problema .sticker-card__art--chrysalis{right:-16px}
  #problema .sticker-card__art--compass{right:-12px}
}
#problema .sticker-card__art--compass{--tilt:8deg;width:122px;right:-34px;bottom:-30px}
.lab-sticker[hidden]{display:none}
.lab-service__claim{font-size:14px;font-style:normal;color:#03378E}
.lab-service--featured .lab-service__claim{color:#E7F6FE}
.lab-service--featured .lab-tag--light{background-color:#FFFFFF}
.lab-service--featured .lab-service__name{color:#FFFFFF}
.lab-step--on-deep .lab-step__key{color:#FFFFFF;border:1px solid #FFFFFF}
.lab-step--on-deep .lab-step__title{color:#FFFFFF}
.lab-step--on-deep .lab-step__text{color:#FFFFFF}
.lab-step--on-deep .lab-tag--light{background-color:#FFFFFF}
#metodo .lab-head--on-deep .lab-head__w{color:#FFFFFF}
#metodo .lab-head--on-deep .lab-head__w--soft{color:#A3D0FB;background-color:transparent;font-style:italic}
.lab-service--featured .lab-service__item,.lab-service--featured .lab-service__foot>div{color:#FFFFFF}
.formgrid .full{grid-column:1 / -1}

/* PORT: the prototype mounted the confirmation dialog only while open. The static page
   keeps it in the DOM and toggles [hidden], so the scrim's display:grid needs overriding. */
.lab-dialog__scrim[hidden]{display:none}

/* PORT: keyboard skip link — the prototype had no equivalent. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-overlay) + 1);padding:12px 18px;background:var(--blue-deep);color:var(--cream);font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;border-bottom:0}
.skiplink:focus{left:var(--gutter-lg)}

@media (max-width:900px){.hero__grid,.split,.split--rev,.grid-3,.grid-4,.grid-2,.funnel,.funnel--6,.cap,.ftr__top,.formgrid,#servicios .grid-3{grid-template-columns:1fr}.hero__art{height:280px}}

/* PORT: the design was drawn on a 1280px artboard and several headline lines carry a
   fixed px width/height measured there. Below the desktop breakpoint those widths set
   the grid column's min-content size and push the whole page into horizontal scroll,
   so they are released here. Desktop rendering is untouched. */
@media (max-width:900px){
  .lab-head__line,.lab-head__w{width:auto!important;height:auto!important}
  .split>*,.grid-2>*,.grid-3>*,.grid-4>*,.cap>*,.funnel>*,.ftr__top>*{min-width:0}
  .wrap{padding:0 var(--gutter)}
}

/* Stacked, the plan cards stop overlapping and the collage stops staggering. */
@media (max-width:900px){
  /* Stacked in one column there is no second row to pull up under a first, and
     leaving the offsets on made the third card climb over the second. */
  #problema .grid-2>:nth-child(2),
  #problema .grid-2>:nth-child(3),
  #problema .grid-2>:nth-child(4){margin-top:0}
  #problema .grid-2>:nth-child(even){margin-left:0}
  #problema .grid-2{row-gap:var(--space-6);max-width:none}
  /* Stacked, the cards run nearly edge to edge and overhanging art would push
     the page sideways, so it stands down. */
  #problema .sticker-card__art{display:none}
  #servicios .grid-3{gap:var(--space-6)}
}

/* PORT: the kit defines no mobile header (no drawer, no hamburger), and inventing one
   would be a new design. Below 700px the header keeps the logo and the nav, and drops
   the CTA — the identical button sits in the hero and the footer links to #contacto. */
/* PORT: the kit defined no mobile header, and the CTA was simply dropped below
   700px — which left a phone reader with no way to reach contact without
   travelling to the footer, since the nav carries no contact entry either. The
   button stays now and shortens instead, and the three links move into a panel
   so that all three fit. */
@media (max-width:700px){
  .hdr__in{gap:var(--space-5)}
  .hdr__home img{height:40px}
  .hdr__menu{display:inline-flex}
  .hdr__cta__full{display:none}
  .hdr__cta__short{display:inline}
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-3) var(--gutter) var(--space-5);
    background:var(--white);
    border-bottom:1px solid var(--border-soft);
    box-shadow:var(--shadow-card);
  }
  .hdr[data-menu=open] .nav{display:flex}
  /* Laid out down the page the underline would read as a divider between rows,
     so the current mark moves to the leading edge. */
  .nav a{padding:var(--space-4) 0 var(--space-4) var(--space-4);border-bottom:0;border-left:2px solid transparent}
  .nav a:hover{border-color:var(--blue-light)}
  .nav a[aria-current=page]{border-color:var(--blue-bright)}
}
@media (max-width:420px){
  /* The links no longer sit in the bar, so nothing there has to shrink or scroll
     sideways — only the two controls beside the logo need to give a little. */
  .hdr__menu,.hdr__cta{font-size:var(--fs-micro);letter-spacing:var(--ls-micro)}
  .hdr__cta{padding-inline:14px}
}