/* Area pages v2 · Cavela-like structure in the fix machine palette.
   Notion rules: 3 colours (green 60 · white 30 · sage accent 10), 2 fonts (Newsreader titles, Archivo text and data),
   one loud thing per screen (the white "quote" button), big in front / small behind, one grid. */
/* The page colour follows the section in view, like the home: white ↔ fix machine green */
body.a2-body { --bg: #FFFFFF; --fg: #004040; --card: #F0F4F3; --panel: #DCE7E4; --acc: #3E7370; --line: rgba(0,64,64,.16); --dots: .22;
  background: var(--bg); color: var(--fg); transition: background-color .9s var(--fm-ease), color .9s var(--fm-ease); }
body.a2-body[data-theme="dark"] { --bg: #004040; --fg: #FFFFFF; --card: #0A4A4A; --panel: #0F5555; --acc: #A9C4BF; --line: rgba(255,255,255,.18); --dots: .5; }
.a2-stat, .a2-card, .a2-cat, .a2-panel, .a2-chips li, .a2-top, .a2-steps li::before { transition: background-color .9s var(--fm-ease), border-color .9s var(--fm-ease), color .9s var(--fm-ease); }
.a2-body a { color: inherit; }
.a2-body .tbd { background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); padding: 0 .2em; border-radius: 2px; }
.a2-top { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: calc(env(safe-area-inset-top,0px) + 14px) var(--fm-gr) 14px var(--fm-gl); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.a2-back { text-decoration: none; font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; gap: 10px; }
.a2-back i { font-style: normal; transition: transform .3s; } .a2-back:hover i { transform: translateX(-4px); }
.a2-logo { width: clamp(120px, 12vw, 170px); aspect-ratio: 912 / 127; display: block; } .a2-logo .wordmark { width: 100%; height: 100%; }
.a2-btn { display: inline-flex; gap: 12px; align-items: center; width: max-content; background: var(--fg); color: var(--bg) !important; text-decoration: none; padding: 15px 26px; font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; transition: transform .3s, box-shadow .3s; }
.a2-btn i { font-style: normal; transition: transform .3s; } .a2-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.7); } .a2-btn:hover i { transform: translateX(4px); }
.a2-btn-s { justify-self: end; padding: 11px 18px; }
.a2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(90px, 11vw, 160px); padding: clamp(40px, 5vw, 80px) var(--fm-gr) clamp(80px, 9vw, 130px) var(--fm-gl); overflow-x: clip; }
.a2-eyebrow { display: block; font: 500 11px var(--fm-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; }
.a2-h1 { margin: 0; font: 400 clamp(48px, 7.4vw, 124px)/.92 var(--fm-serif); letter-spacing: -.03em; }
.a2-h2 { margin: 0 0 clamp(24px, 3vw, 44px); font: 400 clamp(36px, 4.6vw, 72px)/.98 var(--fm-serif); letter-spacing: -.025em; }
.a2-big { font-size: clamp(44px, 6vw, 96px); }
.a2-sub { margin: 0; max-width: 40ch; font: 500 clamp(15px, 1.35vw, 19px)/1.5 var(--fm-sans); letter-spacing: .06em; text-transform: uppercase; }
/* hero: copy left, composition right */
.a2-hero, .a2-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 90px); align-items: center; min-height: min(78vh, 760px); }
.a2-hero-copy, .a2-feat-copy { display: grid; gap: 26px; align-content: center; }
.a2-comp { position: relative; aspect-ratio: 1 / .86; }
.a2-panel { position: absolute; left: 14%; top: 10%; right: 0; bottom: 6%; background: var(--panel); border-radius: 6px; }
.a2-img { position: absolute; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); border-radius: 3px; }
.a2-img1 { left: 0; top: 18%; width: 56%; height: 64%; z-index: 2; }
.a2-img2 { right: 4%; bottom: 0; width: 40%; height: 42%; z-index: 3; }
.a2-img3 { right: 8%; top: 0; width: 30%; height: 32%; z-index: 3; }
.a2-tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.a2-tag { position: absolute; display: grid; gap: 3px; font: 500 11px/1.35 var(--fm-sans); letter-spacing: .1em; color: var(--fg); max-width: 36%; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; transition-delay: calc(var(--i) * .18s + .3s); }
.a2-tag b { font-weight: 500; color: var(--acc); }
.a2-tag i { width: 7px; height: 7px; background: var(--fg); margin-bottom: 4px; animation: a2Blink 2.4s steps(1) infinite; animation-delay: calc(var(--i) * .6s); }
.a2-tag:nth-child(1) { left: 61%; top: 13%; } .a2-tag:nth-child(2) { left: 61%; top: 26%; } .a2-tag:nth-child(3) { left: 61%; top: 39%; } .a2-tag:nth-child(4) { left: 18%; top: 85%; }
.a2-comp-f .a2-tag:nth-child(1) { left: 61%; top: 13%; } .a2-comp-f .a2-tag:nth-child(2) { left: 61%; top: 26%; } .a2-comp-f .a2-tag:nth-child(3) { left: 61%; top: 39%; }
.a2-comp.in .a2-tag { opacity: 1; transform: none; }
@keyframes a2Blink { 50% { opacity: .2; } }
/* counters */
.a2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.a2-stat { background: var(--card); border-radius: 6px; padding: 28px 30px 34px; display: grid; gap: 22px; align-content: space-between; min-height: 200px; }
.a2-stat span { font: 500 11px/1.4 var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; }
.a2-stat b { font: 400 clamp(52px, 5.6vw, 92px)/.9 var(--fm-serif); letter-spacing: -.03em; font-weight: 400; color: var(--acc); }
/* service cards */
.a2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.a2-card { position: relative; background: var(--card); border-radius: 6px; padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 14px; align-content: start; overflow: hidden; transition: transform .45s var(--fm-ease), background-color .45s; }
.a2-card:hover { transform: translateY(-6px); }
.a2-card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
.a2-card:last-child:nth-child(odd) figure { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
.a2-n { font: 500 11px var(--fm-sans); letter-spacing: .16em; color: var(--acc); }
.a2-card h3, .a2-cat h3, .a2-ctry h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 38px)/1.05 var(--fm-serif); letter-spacing: -.015em; }
.a2-card p, .a2-cat p { margin: 0; font: 400 15.5px/1.55 var(--fm-sans); opacity: .86; max-width: 52ch; }
.a2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.a2-chips li { border: 1px solid var(--line); padding: 7px 10px; font: 500 10.5px/1 var(--fm-sans); letter-spacing: .12em; text-transform: uppercase; }
.a2-card figure, .a2-cat figure { margin: 10px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; }
.a2-card img, .a2-cat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--fm-ease); }
.a2-card:hover img, .a2-cat:hover img { transform: scale(1.06); }
/* product categories */
.a2-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.a2-cat { position: relative; background: var(--card); border-radius: 6px; padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 14px; align-content: start; text-decoration: none; overflow: hidden; transition: transform .45s var(--fm-ease); }
a.a2-cat:hover { transform: translateY(-6px); }
.a2-cat figure { aspect-ratio: 1 / 1; background: #FFFFFF; }
.a2-arrow { position: absolute; right: 26px; top: 26px; color: var(--acc); font-size: 20px; transition: transform .3s; } a.a2-cat:hover .a2-arrow { transform: translateX(5px); }
div.a2-cat .a2-arrow { display: none; }
/* network map */
.a2-map { position: relative; margin: 0 calc(var(--fm-gr) * -1) 0 calc(var(--fm-gl) * -1); padding: clamp(40px, 5vw, 80px) var(--fm-gr) clamp(30px, 4vw, 60px) var(--fm-gl); overflow: hidden; }
.a2-map-bg { position: absolute; left: 0; right: 0; top: clamp(40px, 5vw, 80px); }
.a2-map-svg { width: 100%; height: auto; display: block; }
.a2-map-svg image { opacity: var(--dots); transition: opacity .9s; }
.a2-route { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .8; stroke-dashoffset: 0; animation: a2Route 1.6s linear infinite; }
@keyframes a2Route { to { stroke-dashoffset: -18; } }
.a2-pin circle:last-child { fill: var(--fg); }
.a2-pulse { fill: none; stroke: var(--fg); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: a2Pulse 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * .35s); }
.a2-home circle:last-child { fill: var(--acc); }
@keyframes a2Pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.a2-map-head { position: relative; text-align: center; max-width: 900px; margin: 0 auto clamp(140px, 18vw, 260px); display: grid; justify-items: center; }
.a2-map-head p { margin: 0; font: 400 16px/1.5 var(--fm-sans); opacity: .86; }
.a2-ctrys { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.a2-ctry { scroll-snap-align: start; padding: 20px 22px 6px 0; display: grid; gap: 14px; align-content: start; border-top: 2px solid var(--fg); }
.a2-ctry + .a2-ctry { padding-left: 22px; border-left: 1px solid var(--line); }
.a2-code { font: 500 11px var(--fm-sans); letter-spacing: .16em; color: var(--acc); }
.a2-ctry h3 { font-size: clamp(30px, 2.8vw, 44px); }
.a2-kv { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.a2-kv b { font: 500 10.5px var(--fm-sans); letter-spacing: .14em; color: var(--acc); }
.a2-kv span { font: 400 15.5px/1.4 var(--fm-sans); }
.a2-note { position: relative; margin: 18px 0 0; font: 400 12.5px var(--fm-sans); opacity: .75; }
/* process */
.a2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 0; position: relative; }
.a2-steps::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--fm-ease); }
.a2-steps.in::before { transform: none; }
.a2-steps li { position: relative; padding: 28px 22px 0 0; display: grid; gap: 10px; align-content: start; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; transition-delay: calc(var(--d) * .14s + .3s); }
.a2-steps.in li { opacity: 1; transform: none; }
.a2-steps li::before { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); }
.a2-steps li span { font: 500 11px var(--fm-sans); letter-spacing: .16em; color: var(--acc); }
.a2-steps li h3 { margin: 0; font: 400 24px/1.1 var(--fm-serif); }
.a2-steps li p { margin: 0; font: 400 14.5px/1.5 var(--fm-sans); opacity: .86; }
/* end */
.a2-end { display: grid; grid-template-columns: 1fr auto; gap: 26px 40px; align-items: end; border-top: 1px solid var(--line); padding-top: 50px; }
.a2-end .a2-h2 { grid-column: 1 / -1; margin: 0; }
.a2-next { justify-self: end; text-decoration: none; display: grid; gap: 6px; text-align: right; }
.a2-next span { font: 500 10.5px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.a2-next b { font: 400 clamp(30px, 3.4vw, 52px)/1 var(--fm-serif); font-weight: 400; }
.a2-next i { font-style: normal; display: inline-block; transition: transform .4s; } .a2-next:hover i { transform: translateX(6px); }
.a2-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 26px var(--fm-gr) calc(env(safe-area-inset-bottom,0px) + 26px) var(--fm-gl); border-top: 1px solid var(--line); font: 400 12px var(--fm-sans); }
/* motion: reveal */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--fm-ease), transform .9s var(--fm-ease); transition-delay: calc(var(--d, 0) * .12s); }
[data-rv].in { opacity: 1; transform: none; }
.a2-hero .a2-img, .a2-hero .a2-panel { animation: a2In 1.2s var(--fm-ease) both; } .a2-hero .a2-img2 { animation-delay: .15s; } .a2-hero .a2-img3 { animation-delay: .3s; }
@keyframes a2In { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { [data-rv], .a2-tag, .a2-steps li { opacity: 1 !important; transform: none !important; transition: none !important; } .a2-route, .a2-pulse, .a2-tag i, .a2-hero .a2-img, .a2-hero .a2-panel { animation: none !important; } .a2-steps::before { transform: none; } }
@media (max-width: 960px) {
  .a2-hero, .a2-feat { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .a2-stats { grid-template-columns: 1fr 1fr; }
  .a2-cats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .a2-cats > * { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .a2-top { grid-template-columns: auto 1fr; } .a2-btn-s { display: none; } .a2-logo { justify-self: end; }
  .a2-back { font-size: 10px; }
  .a2-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .a2-cards > * { scroll-snap-align: start; }
  .a2-card:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .a2-card:last-child:nth-child(odd) figure { grid-column: auto; grid-row: auto; margin-top: 10px; }
  .a2-ctrys { grid-auto-columns: 74%; }
  .a2-steps { grid-auto-columns: 72%; overflow-x: auto; }
  .a2-stat { min-height: 150px; padding: 20px; }
  .a2-tag { font-size: 9.5px; max-width: 130px; }
  .a2-map-head { margin-bottom: 90px; }
  .a2-end { grid-template-columns: minmax(0, 1fr); } .a2-next { justify-self: start; text-align: left; }
}
.a2-ctry h3 { font-size: clamp(20px, 1.7vw, 28px); overflow-wrap: anywhere; }
.a2-stat b.a2-word { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.05; overflow-wrap: anywhere; }
/* Mobile: the process becomes a vertical timeline (no sideways scroll cutting the line and the dots) */
@media (max-width: 760px) {
  .a2-steps { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; padding-left: 30px; gap: 28px; }
  .a2-steps::before { left: 6px; top: 6px; bottom: 6px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .a2-steps.in::before { transform: none; }
  .a2-steps li { padding: 0; }
  .a2-steps li::before { box-sizing: border-box; left: -30px; top: 0; }
}

/* Category carousel (same feel as the Fixionary shelf): drag, wheel, arrows, progress */
.a2-carousel { position: relative; margin-right: calc(var(--fm-gr) * -1); }
.a2-carousel .a2-cats { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(260px, 28vw, 400px); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px var(--fm-gr) 4px 0; cursor: grab; }
.a2-carousel .a2-cats::-webkit-scrollbar { display: none; }
.a2-carousel .a2-cats > * { scroll-snap-align: start; }
.a2-carousel.is-dragging .a2-cats { cursor: grabbing; scroll-snap-type: none; }
.a2-carousel.is-dragging .a2-cat { pointer-events: none; }
.a2-carousel img { -webkit-user-drag: none; user-select: none; }
.a2-carctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; margin: 22px var(--fm-gr) 0 0; }
.a2-car-hint { font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.a2-car-bar { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.a2-car-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform .2s linear; }
.a2-car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg); font: 400 18px var(--fm-sans); cursor: pointer; transition: background-color .3s, color .3s, opacity .3s; }
.a2-car-btn:hover { background: var(--fg); color: var(--bg); }
.a2-carousel.at-start .a2-car-btn[data-dir="-1"], .a2-carousel.at-end .a2-car-btn[data-dir="1"] { opacity: .3; pointer-events: none; }
@media (max-width: 760px) {
  .a2-carousel .a2-cats { grid-auto-columns: 78%; }
  .a2-carctl { grid-template-columns: minmax(0, 1fr) auto auto; }
  .a2-car-hint { display: none; }
}
.a2-cat h3 { padding-right: 32px; }
.a2-carousel .a2-cats { touch-action: pan-x pan-y; }

/* Logistic map: global lanes + moving vehicles */
.a2-lane { fill: none; stroke: var(--fg); stroke-width: .9; stroke-dasharray: 2 5; opacity: .42; }
.a2-mover { fill: var(--fg); opacity: .95; }
.a2-hub { fill: var(--fg); opacity: .55; }
/* 2026-10-23 · Phones: the floating tags no longer sit on top of the photos; they go in a tidy 2-column legend under the composition */
@media (max-width: 760px) {
  .a2-comp { margin-bottom: 128px; }
  .a2-comp-f { margin-bottom: 96px; }
  .a2-tags { inset: auto 0 auto 0; top: calc(100% + 22px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .a2-tags .a2-tag, .a2-comp-f .a2-tags .a2-tag { position: static; left: auto; top: auto; max-width: none; font-size: 10px; grid-template-columns: 7px minmax(0, 1fr); column-gap: 8px; align-items: start; }
  .a2-tag i { grid-row: 1 / span 2; margin: 3px 0 0; }
  .a2-tag b, .a2-tag { overflow-wrap: anywhere; }
}
/* 2026-10-23 · Retail store plan in 3D (axonometric), same dotted language as the logistic world map */
.a2-sp-fd { fill: var(--fg); opacity: calc(var(--dots) * .42); }
.a2-sp-xd { fill: var(--fg); opacity: calc(var(--dots) * 1.5); }
.a2-sp-side { fill: var(--fg); fill-opacity: .035; stroke: var(--fg); stroke-opacity: .32; stroke-width: .7; stroke-linejoin: round; }
.a2-sp-top { stroke: var(--fg); stroke-opacity: .5; stroke-width: .7; }
.a2-sp-wall.a2-sp-side { fill-opacity: .05; }
.a2-sp-thin.a2-sp-side { fill-opacity: .07; }
.a2-sp-line { fill: none; stroke: var(--fg); stroke-width: 3; stroke-dasharray: 1.5 3.5; opacity: calc(var(--dots) * 1.2); }
.a2-sp-mq { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.a2-sp-mqh { fill: var(--fg); opacity: .55; }
.a2-sp-stem { stroke: var(--fg); stroke-width: .7; stroke-dasharray: 2 3; opacity: .55; }
.a2-sp-lbl { font: 500 9.5px var(--fm-sans); letter-spacing: .2em; fill: var(--fg); opacity: .85; }
.a2-sp-staffl { stroke: var(--acc); opacity: .6; }
.a2-sp-staff { fill: var(--acc); }
.a2-plan .a2-map-bg { top: clamp(230px, 20vw, 290px); display: flex; justify-content: center; }
.a2-plan .a2-map-svg { width: min(1180px, 90%); }
.a2-plan .a2-map-head { margin-bottom: clamp(400px, 42vw, 600px); }
@media (max-width: 760px) {
  .a2-plan .a2-map-bg { top: 268px; } .a2-plan .a2-map-svg { width: 108%; max-width: none; flex: none; }
  .a2-plan .a2-map-head { margin-bottom: 250px; }
  .a2-sp-lbl { font-size: 12.5px; letter-spacing: .12em; }
}
/* 2026-10-23 · Logistic: zone selector (Central Europe / Americas), same look as the site's buttons and chips */
.a2-zsel { position: relative; display: grid; gap: 14px; justify-items: center; margin: 0 0 28px; }
.a2-zlbl { font: 500 10.5px var(--fm-sans); letter-spacing: .16em; color: var(--acc); }
.a2-zrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.a2-zrow[hidden] { display: none; }
.a2-zbtn { appearance: none; background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 9px 14px; font: 500 10.5px/1 var(--fm-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.a2-zbtn:hover { border-color: var(--fg); }
.a2-zbtn.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.a2-zmain { padding: 14px 24px; font-size: 11px; letter-spacing: .16em; }
.a2-zgrp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a2-zgrp i { font: italic 400 17px var(--fm-serif); margin-right: 6px; opacity: .85; }
.a2-zpane[hidden] { display: none; }
.a2-zpane { position: relative; animation: a2ZIn .5s var(--fm-ease) both; }
@keyframes a2ZIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.a2-zsub { margin: 0 auto 26px; max-width: 760px; text-align: center; font: 400 16px/1.5 var(--fm-sans); opacity: .86; }
.a2-zsub b { font-weight: 600; }
.a2-zbuf b { font-weight: 500; letter-spacing: .14em; color: var(--acc); margin-right: 6px; }
.a2-zbuf { font-size: 14px; opacity: .9; }
.a2-zr { transition: opacity .5s; } .a2-zr.is-off { opacity: 0; pointer-events: none; }
.a2-zr.is-off * { animation-play-state: paused; }
[data-zones] .a2-map-head { margin-bottom: clamp(150px, 20vw, 290px); }
@media (max-width: 760px) {
  .a2-zrow { gap: 8px; } .a2-zgrp { justify-content: center; } .a2-zgrp i { width: 100%; text-align: center; margin: 6px 0 0; }
  .a2-zsub { font-size: 14.5px; text-align: left; }
  [data-zones] .a2-map-head { margin-bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) { .a2-zpane { animation: none; } }
/* 2026-10-23 · Service pages open with a full-screen video hero (option A). Placeholder film = three photos until each service has its clip. */
.a2-vhero { position: relative; isolation: isolate; overflow: hidden; height: 100vh; height: 100svh; min-height: 560px; color: #FFFFFF;
  margin: calc(-1 * (var(--a2-top-h, 54px) + clamp(40px, 5vw, 80px))) calc(var(--fm-gr) * -1) 0 calc(var(--fm-gl) * -1); }
.a2-vid { position: absolute; inset: 0; z-index: -2; background: #0B2E2E; }
.a2-vid img, .a2-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a2-vid img { opacity: 0; animation: a2Film 18s linear infinite; }
.a2-vid img:nth-child(2) { animation-delay: 6s; } .a2-vid img:nth-child(3) { animation-delay: 12s; }
@keyframes a2Film { 0% { opacity: 0; transform: scale(1.14) translate(1.5%, 0); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.02) translate(-1.5%, 0); } 100% { opacity: 0; } }
.a2-vhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,40,40,.6) 0%, rgba(0,40,40,.22) 30%, rgba(0,40,40,.45) 58%, rgba(0,40,40,.9) 100%); }
.a2-vcopy { position: absolute; left: var(--fm-gl); right: var(--fm-gr); bottom: clamp(96px, 12vh, 150px); display: grid; gap: 22px; max-width: 980px; }
.a2-vhero .a2-eyebrow, .a2-vhero .a2-sub { color: #FFFFFF; }
.a2-vhero .a2-sub { max-width: 48ch; opacity: .92; }
.a2-vh1 { color: #FFFFFF; font-size: clamp(54px, 8.2vw, 136px); line-height: .92; text-wrap: balance; }
.a2-vhero .a2-btn { background: #FFFFFF; color: #004040 !important; }
.a2-rec { display: inline-flex; align-items: center; gap: 10px; }
.a2-rec i { width: 7px; height: 7px; border-radius: 50%; background: #A9C4BF; animation: a2Blink 1.2s steps(1) infinite; }
.a2-vh1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.a2-vh1 .w > span { display: inline-block; animation: a2WordUp 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--k) * .09s); }
@keyframes a2WordUp { from { transform: translateY(105%); } to { transform: none; } }
.a2-vcopy .a2-sub, .a2-vcopy .a2-btn { animation: a2Rise .9s cubic-bezier(.2, .8, .2, 1) .75s both; } .a2-vcopy .a2-btn { animation-delay: .9s; }
@keyframes a2Rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.a2-cue { position: absolute; right: var(--fm-gr); bottom: clamp(96px, 12vh, 150px); display: grid; justify-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font: 500 10.5px var(--fm-sans); letter-spacing: .18em; text-transform: uppercase; }
.a2-cue i { width: 1px; height: 54px; background: currentColor; transform-origin: top; animation: a2Cue 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes a2Cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.a2-ticker { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,.3); padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px)); font: 500 11px var(--fm-sans); letter-spacing: .18em; text-transform: uppercase; }
.a2-ticker div { display: inline-block; animation: a2Tick 40s linear infinite; }
.a2-ticker span { opacity: .7; margin-right: 10px; } .a2-ticker b { font-weight: 500; } .a2-ticker i { font-style: normal; color: #A9C4BF; margin: 0 26px; }
@keyframes a2Tick { to { transform: translateX(-50%); } }
/* header floats transparent over the video */
body.a2-at-hero .a2-top { background: transparent; border-bottom-color: transparent; backdrop-filter: none; color: #FFFFFF; }
@media (max-width: 760px) {
  .a2-vcopy { bottom: 92px; gap: 16px; } .a2-vh1 { font-size: clamp(44px, 13vw, 64px); }
  .a2-cue { display: none; } .a2-ticker { padding-top: 14px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .a2-vid img, .a2-vh1 .w > span, .a2-vcopy .a2-sub, .a2-vcopy .a2-btn, .a2-ticker div, .a2-cue i, .a2-rec i { animation: none !important; } .a2-vid img:first-child { opacity: 1; } }
/* 2026-10-23 · Split block (sketch 3): copy + cycling counter | two columns of photos drifting up and down */
.a2-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; margin-right: calc(var(--fm-gr) * -1); }
.a2-split-copy { display: grid; gap: 26px; align-content: center; padding-block: 40px; }
.a2-counter { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 520px; }
.a2-cmode { font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.a2-cval { font: italic 400 clamp(40px, 4.6vw, 72px)/1.02 var(--fm-serif); letter-spacing: -.015em; min-height: 1.05em; overflow: hidden; }
.a2-cval span { display: block; animation: a2CRise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes a2CRise { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
.a2-cdots { display: flex; gap: 6px; margin-top: 6px; } .a2-cdots i { width: 26px; height: 2px; background: var(--line); transition: background-color .3s; } .a2-cdots i.on { background: var(--fg); }
.a2-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-right: 14px; background: var(--panel); overflow: hidden; height: clamp(560px, 86vh, 820px); align-self: center; }
.a2-col { display: grid; gap: 14px; align-content: start; animation: a2ColUp 34s linear infinite; }
.a2-col.a2-down { animation-name: a2ColDown; }
.a2-col img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
@keyframes a2ColUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes a2ColDown { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
@media (max-width: 760px) {
  .a2-split { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-right: 0; gap: 26px; }
  .a2-split-copy { padding-block: 0; }
  .a2-cols { min-height: 0; height: 340px; margin: 0 calc(var(--fm-gr) * -1) 0 calc(var(--fm-gl) * -1); padding: 0 14px; }
  .a2-cval { font-size: 40px; }
}
/* Horizontal rows must never catch the vertical scroll (they did: the page "stopped" over them) */
.a2-ctrys, .a2-cats, .a2-cards, .a2-carousel .a2-cats { overflow-y: hidden; }
/* Sections out of view pause their animations, so scrolling stays smooth */
.a2-off, .a2-off * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .a2-col, .a2-cval span { animation: none !important; } }
/* Service pages: room for the mobile navigation (assets/mnav.css) */
@media (max-width: 860px) {
  .a2-body { padding-bottom: 84px; }
  .a2-vcopy { bottom: 150px; }
  .a2-ticker { bottom: 76px; padding-bottom: 12px; }
}

/* 2026-10-25 · Figure cards with a glossy finish: same pale green, with a light gloss on top, a bright rim
   and a soft shine that sweeps across when the card comes into view (and on hover) */
.a2-stat { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 55%), var(--card);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -10px 24px -14px rgba(0, 64, 64, .18), 0 18px 34px -24px rgba(0, 40, 40, .45), 0 2px 6px -3px rgba(0, 40, 40, .12); }
.a2-stat::before { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0)); transform: skewX(-18deg) translateX(0); opacity: 0; }
.a2-stat.in::before { animation: statShine 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * .12s + .3s) 1 both; }
.a2-stat:hover::before { animation: statShine 1.1s cubic-bezier(.2, .7, .2, 1) 1 both; }
.a2-stat b { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
body[data-theme="dark"] .a2-stat { border-color: rgba(255, 255, 255, .22); background: linear-gradient(165deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%), var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 34px -24px rgba(0, 0, 0, .6); }
body[data-theme="dark"] .a2-stat b { text-shadow: none; }
@keyframes statShine { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
@media (prefers-reduced-motion: reduce) { .a2-stat::before { animation: none !important; } }
/* phones: word values ("Muchísimas") fit on one line instead of breaking mid-word */
@media (max-width: 760px) { .a2-stat b.a2-word { font-size: clamp(22px, 6.4vw, 28px); overflow-wrap: normal; hyphens: auto; } }
/* stats rows that lost cards to hide_unfinished (tools/build_i18n.py) keep the remaining cards full width */
@media (min-width: 961px) { .a2-stats:has(> .a2-stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .a2-stats:has(> .a2-stat:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }