/* Website UI — layout + component styles, built on colors_and_type.css vars */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}

/* ---- Buttons ---- */
.btn{font-family:var(--font-sans);font-weight:500;font-size:14px;letter-spacing:.02em;border-radius:2px;padding:14px 22px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all 200ms var(--ease-out);text-transform:none;}
.btn .arr{transition:transform 200ms var(--ease-out);}
.btn:hover{transform:translateY(-1px);}
.btn:hover .arr{transform:translateX(3px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ai-blue);color:#fff;}
.btn-primary:hover{background:var(--ai-blue-600);}
.btn-outline-dark{background:transparent;color:#111;border-color:#111;}
.btn-outline-dark:hover{background:#111;color:#fff;}
.btn-outline-white{background:transparent;color:#fff;border-color:#fff;}
.btn-outline-white:hover{background:#fff;color:#0D1B2A;}
.btn-ghost{background:transparent;color:var(--accent);border:0;padding:14px 0;}
.btn-ghost .u{border-bottom:1px solid currentColor;padding-bottom:2px;}
.btn-ghost:hover{color:var(--accent-hover);}

/* ---- Lang toggle ---- */
.lang-toggle{display:inline-flex;border:1px solid rgba(245,245,243,.4);border-radius:999px;overflow:hidden;}
.lang-toggle span{padding:5px 12px;font-size:11px;letter-spacing:.12em;font-weight:500;color:#F5F5F3;cursor:pointer;text-transform:uppercase;}
.lang-toggle span.on{background:#F5F5F3;color:#0D1B2A;}

/* ---- Nav ---- */
.ai-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background 280ms var(--ease-out),border-color 280ms;background:transparent;border-bottom:1px solid transparent;}
.ai-nav--solid{background:rgba(13,27,42,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(30,43,58,.8);}
.ai-nav__inner{max-width:var(--container);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:40px;padding:0 32px;}
.ai-nav__logo{cursor:pointer;flex:0 0 auto;}
.ai-nav__logo img{width:auto;max-width:none;display:block;aspect-ratio:1055/467;object-fit:contain;}
.ai-nav__links{display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:nowrap;}
.ai-nav__links li{white-space:nowrap;}
.ai-nav__link{color:#F5F5F3;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:10px 16px 6px;position:relative;transition:color 180ms var(--ease-out);white-space:nowrap;display:inline-block;}
.ai-nav__link::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:#FFFFFF;transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-out);}
.ai-nav__link:hover{color:#FFFFFF;}
.ai-nav__link:hover::after,
.ai-nav__link.is-active::after{transform:scaleX(1);}
.ai-nav__link.is-active{color:#FFFFFF;}
.ai-nav__right{display:flex;align-items:center;gap:16px;}
.ai-nav__burger{display:none;background:none;border:0;padding:6px;}
.ai-nav__overlay{position:fixed;inset:0;background:#0D1B2A;z-index:60;padding:26px 32px;display:flex;flex-direction:column;}
.ai-nav__overlay-top{display:flex;justify-content:space-between;align-items:center;}
.ai-nav__close{background:none;border:0;color:#F5F5F3;}
.ai-nav__overlay-links{list-style:none;margin:60px 0 0;padding:0;display:flex;flex-direction:column;gap:24px;}
.ai-nav__overlay-links a{color:#F5F5F3;font-family:var(--font-display);font-weight:500;font-size:44px;cursor:pointer;}
/* Inline sector list under the Proyectos entry in the mobile overlay.
   Indented + smaller than the top-level entries so the hierarchy reads. */
.ai-nav__overlay-sub > ul{list-style:none;margin:14px 0 0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:14px;border-left:1px solid rgba(245,245,243,.22);}
.ai-nav__overlay-sub a{color:rgba(245,245,243,.78);font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-0.005em;cursor:pointer;display:block;}
.ai-nav__overlay-sub a:hover{color:#F5F5F3;}

/* ---- Nav dropdown (Proyectos → 6 sectors) ----
   The trigger `li` gets `.ai-nav__has-menu`. The panel opens on hover or
   keyboard-focus — driven by THREE conditions in OR so any one is enough:
     1. JS state via `.is-open` (added by Nav.jsx on mouseenter / focus)
     2. CSS `:hover` on the trigger li (pure CSS, no JS required)
     3. CSS `:focus-within` on the trigger li (keyboard tabbing into the panel)
   The pure-CSS routes (#2 + #3) are belt-and-suspenders: if React state ever
   races or stalls, hover still works.
   The panel itself is anchored below the trigger and slides down a hair under
   the nav bar, with a transparent hover bridge (`padding-top`) so the cursor
   can travel from the trigger into the panel without the dropdown closing. */
.ai-nav__has-menu{position:relative;}

.ai-nav__menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  /* Size to widest label (+ panel padding) rather than a hardcoded
     300px floor. Keeps the Talento dropdown tight (just fits "Life
     at Aguilera") and the Proyectos dropdown still gets enough
     room because its longest sector label drives the intrinsic
     width. min-width acts as a safety net for very short labels. */
  width:max-content;
  min-width:180px;
  padding-top:18px;                 /* hover bridge — covers the gap between
                                       the anchor's bottom padding and the
                                       panel's actual content, so the cursor
                                       can travel down without triggering
                                       mouseleave. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  z-index:55;
}
.ai-nav__has-menu.is-open .ai-nav__menu,
.ai-nav__has-menu:hover .ai-nav__menu,
.ai-nav__has-menu:focus-within .ai-nav__menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}
/* Dropdown panel — minimalist editorial (F+P cadence). No header separator,
   no per-item arrow reveal, no hover background tint. The parent entry and
   the sector entries share the same typography so the panel reads as a
   single coherent list rather than a banner-plus-menu. */
.ai-nav__menu-inner{
  background:rgba(13,27,42,.98);
  backdrop-filter:blur(10px);
  border:1px solid rgba(245,245,243,.12);
  padding:14px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
/* Dropdown parent entry — typographically identical to the sector list below.
   Slightly brighter (full white) and bolder so it still reads as the parent,
   but with the same font/size/padding so the visual rhythm is uniform. */
.ai-nav__menu-all{
  display:block;
  padding:8px 22px;
  color:#FFFFFF;
  font-family:var(--font-display);font-weight:600;font-size:15px;
  line-height:1.35;letter-spacing:-0.005em;
  cursor:pointer;text-transform:none;
  transition:color 160ms var(--ease-out);
}
.ai-nav__menu-all:hover{color:var(--ai-blue-300);}
.ai-nav__menu-list{list-style:none;margin:0;padding:0;}
.ai-nav__menu-list a{
  display:block;
  padding:8px 22px;
  color:rgba(245,245,243,.78);
  font-family:var(--font-display);font-weight:500;font-size:15px;
  line-height:1.35;letter-spacing:-0.005em;
  cursor:pointer;text-transform:none;
  transition:color 160ms var(--ease-out);
}
.ai-nav__menu-list a:hover{color:#FFFFFF;}
/* Primary item in the dropdown — bolder + brighter so it reads as
   the main destination. Used for "Opportunities" in the Talento
   subnav; opt-in via the `primary: true` flag on the i18n entry. */
.ai-nav__menu-list .is-primary a{color:#FFFFFF;font-weight:700;}
/* Label/arrow spans kept in markup for backward-compat; arrow now hidden. */
.ai-nav__menu-label{display:inline;}
.ai-nav__menu-arrow{display:none;}

@media (max-width:900px){
  .ai-nav__links{display:none;}
  .ai-nav__right .lang-toggle{display:none;}
  .ai-nav__burger{display:inline-flex;}
  /* The desktop dropdown panel never renders below 900px — the overlay's
     inline list takes over. Belt-and-suspenders: hide it explicitly. */
  .ai-nav__menu{display:none;}
}

/* ---- Hero ---- */
/* Background uses the same deep navy as the rest of the site so the brief
   instant between page-load and video first-frame doesn't flash a black
   box — instead the area reads as a continuation of the dark surface. */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#0a1623;}
/* Slides are stacked at inset:0 — opacity hides them but the DOM stays
   intact, so without pointer-events:none the LAST slide in DOM order
   captures every click on top of the visible one (which routed every
   "View projects" CTA to the final slide's sector, no matter what was
   on screen). Restoring pointer-events:auto only on the active slide
   fixes the routing. */
.hero__slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity 1000ms var(--ease-out);
}
.hero__slide.is-active{opacity:1;pointer-events:auto;}
.hero__img{width:100%;height:100%;object-fit:cover;}
/* Static poster — sits underneath the <video> on slides that have one,
   so it can take over when the video is hidden (non-16:9-ish aspect
   ratios; see media query below). No Ken-Burns, no transform — fully
   static, no awkward crop on weird viewports. */
.hero__img--poster{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
}
/* Video carousel slide — same full-bleed cover treatment as the still img.
   muted + playsInline + autoPlay covers the browsers' silent-autoplay rules. */
.hero__video{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;}
/* Non-16:9 viewports — hide the video, the static poster image shows
   through instead. Avoids the awkward squash/crop when the viewport
   ratio is far from the source video's ~16:9.
   Window:  3/2 (1.5) ≤ ratio ≤ 2/1 (2.0)  → video plays.
   Outside (mobile portrait, tablet, ultrawide) → static poster. */
@media (max-aspect-ratio: 3/2), (min-aspect-ratio: 2/1){
  .hero__video{display:none;}
}
/* Multi-stop gradient — heavier at bottom so the eyebrow + headline + CTA
   stack reads regardless of which slide is up. The 60→100% sweep ramps from
   transparent to a deep navy across the lower 40% of the hero, so even bright
   exterior shots (like the Calatrava sunset) don't wash out the headline. */
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(13,27,42,.55) 0%,
    rgba(13,27,42,.18) 22%,
    rgba(13,27,42,0)   45%,
    rgba(13,27,42,.40) 65%,
    rgba(13,27,42,.85) 90%,
    rgba(13,27,42,.92) 100%);
}
/* Inner — just a positioned container that centers a max-width column,
   identical to the stage hero's outer wrapper. Layout itself is delegated
   to .hero__content below (which is pinned absolutely to the bottom-left).
   No flex on this element so child anchor positioning is unambiguous. */
.hero__inner{
  position:absolute;inset:0;
  max-width:var(--container);margin:0 auto;
  padding:0 32px;
  color:#F5F5F3;
  pointer-events:none;   /* arrows + dots underneath stay clickable */
}
/* Eyebrow — bumped to match the stage hero's category badge size so the home
   slide reads with the same editorial cadence as the sector pages. */
.hero .eyebrow{font-size:13px;letter-spacing:.18em;}
/* Content stack — absolutely pinned to the bottom-left of .hero__inner.
   This matches the .shero--stage cadence: the stack hugs the bottom corner
   with a fixed clearance above the dot strip (~32 px). Uniform 14 px gap
   between every direct child, so eyebrow → headline → CTA reads as a single
   tight cluster instead of three drifting elements. */
.hero__content{
  position:absolute;
  left:32px;right:32px;bottom:60px;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;
  pointer-events:auto;   /* anchored to bottom; restore clicks inside the stack */
  max-width:760px;
}
/* Headline — clamp dropped from the original 56–88 px to match
   `.shero__stage-h1` (30–52 px). Margin zeroed because spacing is now
   driven entirely by the `.hero__content` gap above. */
.hero__headline{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(30px, 3.6vw, 52px);
  line-height:1.06;letter-spacing:-0.02em;
  max-width:760px;margin:0;
  color:#F5F5F3;
  text-wrap:balance;
}
/* Tiny extra nudge above the CTA so the visual gap between headline → button
   matches the eyebrow → headline gap above. The headline's bottom half-leading
   eats a few px of the flex gap, so an extra 8px restores symmetry. */
.hero__cta{display:flex;gap:12px;margin-top:8px;}
/* Mobile tuning — parallels the .shero--stage breakpoints so the home and
   sector stages collapse identically on phones. */
@media (max-width:900px){
  .hero__content{bottom:54px;gap:12px;}
  .hero__headline{font-size:30px;line-height:1.08;margin:0;}
  .hero .eyebrow{font-size:12px;letter-spacing:.16em;}
}
@media (max-width:600px){
  .hero{min-height:520px;}
  .hero__inner{padding-left:24px;padding-right:24px;}
  .hero__content{left:24px;right:24px;bottom:48px;gap:10px;max-width:none;}
  .hero__headline{font-size:24px;line-height:1.1;letter-spacing:-0.015em;margin:0;max-width:none;}
  .hero .eyebrow{font-size:11px;letter-spacing:.14em;}
}
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);background:transparent;color:rgba(255,255,255,.75);border:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color 200ms var(--ease-out), transform 200ms var(--ease-out);padding:0;}
.hero__arrow:hover{color:#fff;}
.hero__arrow--l:hover{transform:translate(-3px,-50%);}
.hero__arrow--r:hover{transform:translate(3px,-50%);}
/* Pin the arrows just outside the container edge so they keep a constant gap
   from the headline text. Falls back to a 12px minimum when the viewport is
   narrower than the container plus the gap. */
.hero__arrow--l{left:max(12px, calc((100vw - var(--container)) / 2 - 96px));}
.hero__arrow--r{right:max(12px, calc((100vw - var(--container)) / 2 - 96px));}
@media (max-width:1200px){.hero__arrow{display:none;}}
/* Dot strip — matches the Data Centers stage hero. Small filled circles;
   active dot wears an SVG progress ring around it. */
.hero__dots{
  position:absolute;left:50%;bottom:32px;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:26px;
  z-index:3;
}
/* Architect credit — bottom-right of the home hero, anchored at the
   same vertical offset as the dot strip so the line of bottom chrome
   reads as one band. Same font / colour vocabulary as the sector
   stage and Proyectos credits. */
.hero__credit{
  position:absolute;right:32px;bottom:36px;z-index:3;
  font-family:var(--font-sans);font-weight:400;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  pointer-events:none;
}
@media (max-width:900px){
  .hero__credit{right:18px;bottom:28px;font-size:9px;letter-spacing:.14em;}
}
.hero__dot{
  position:relative;
  width:28px;height:28px;
  background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.hero__dot:focus-visible{outline:none;}
.hero__dot:focus-visible .hero__dot-core{background:#FFFFFF;}
.hero__dot-core{
  display:block;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.55);
  transition:width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms var(--ease-out);
}
.hero__dot:hover .hero__dot-core{background:#FFFFFF;}
.hero__dot.is-on .hero__dot-core{
  background:#FFFFFF;
  width:5px;height:5px;
}
.hero__dot-ring{
  position:absolute;inset:0;pointer-events:none;
}
/* Progress ring fill is driven by requestAnimationFrame in HeroCarousel —
   the ring's stroke-dashoffset is mutated each frame from the active video's
   currentTime/duration ratio. No CSS animation needed; the ring naturally
   syncs with whatever clip length the active slide carries. */

/* ---- Sections ---- */
.section{padding:var(--sp-10) 0;}
.section--light{background:var(--bg);color:var(--fg);}
.section--alt{background:var(--bg-alt);color:var(--fg);}
.section--dark{background:var(--bg-dark);color:var(--fg-on-dark);}
.section--accent{background:var(--accent);color:#fff;}
.section__head{margin-bottom:var(--sp-7);display:flex;flex-direction:column;gap:10px;}
.section__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-0.01em;color:var(--fg);max-width:880px;margin:0;}
.section__title--light{color:#F5F5F3;}
.section__foot{margin-top:var(--sp-7);}
@media (max-width:900px){.section{padding:64px 0;}}

/* ---- Memo: photo full-bleed left (top-to-bottom of section),
        pullquote + stats stacked on the right ---- */
.section--memo{
  background:var(--bg);
  /* No vertical padding so the photo extends edge to edge. The right column
     supplies its own internal padding for the text content. */
  padding:0;
  overflow:hidden;
}
.memo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  min-height:720px;
}
.memo__photo{margin:0;padding:0;}
.memo__photo{position:relative;overflow:hidden;}
.memo__photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1200ms var(--ease-out);
}
.memo__photo:hover img{transform:scale(1.03);}
/* Architect credit — sits over the bottom-left of the photo with a
   soft gradient mask so it stays legible on dark or bright frames.
   Mono + uppercase tracking reads as a discreet caption, not a
   competing label. */
.memo__credit{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,245,243,.78);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  pointer-events:none;
}

/* Right column — internal padding aligns content with the container's right
   edge. On wide viewports padding-right uses calc to land on the container
   line; on narrow viewports it falls back to a sane minimum. */
.memo__col{
  display:flex;flex-direction:column;
  gap:var(--sp-7);
  justify-content:center;
  padding:var(--sp-9) max(24px, calc((100vw - var(--container)) / 2 + 32px))
          var(--sp-9) var(--sp-8);
}
.memo__l{padding-right:0;}
.memo__r{display:flex;flex-direction:column;gap:var(--sp-6);}
.stat-row{display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--ai-hairline);padding-bottom:var(--sp-5);}
.stat-row:last-child{border-bottom:0;}
/* Certifications strip — static grid below the memo. Two rows of
   7 on desktop, wraps naturally on smaller screens. Logos sized
   large enough that the small print on Uptime Tier seals stays
   legible without needing to zoom. */
.credentials-strip{
  background:#F5F5F3;
  padding:var(--sp-7) 0 var(--sp-8);
}
.credentials-strip__eyebrow{
  display:block;text-align:center;
  margin-bottom:var(--sp-6);
}
.credentials-strip__list{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:var(--sp-6) var(--sp-5);
  align-items:center;justify-items:center;
  max-width:1180px;margin:0 auto;
}
.credentials-strip__item{
  display:inline-flex;align-items:center;justify-content:center;
  height:96px;width:100%;
}
.credentials-strip__item img{
  display:block;
  height:100%;width:auto;
  max-width:100%;
  object-fit:contain;
  /* Full colour at rest — the Uptime reds and bsi/ASHRAE blues are
     the point. Keep the scale-up on hover so the badge still
     responds to interest. */
  transition:transform .25s var(--ease-out);
}
.credentials-strip__item:hover img{transform:scale(1.04);}
@media (max-width:1100px){
  .credentials-strip__list{grid-template-columns:repeat(5, minmax(0, 1fr));}
}
@media (max-width:760px){
  .credentials-strip__list{grid-template-columns:repeat(4, minmax(0, 1fr));}
  .credentials-strip__item{height:78px;}
}
@media (max-width:480px){
  .credentials-strip__list{grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px 18px;}
  .credentials-strip__item{height:68px;}
}

@media (max-width:900px){
  .memo{grid-template-columns:1fr;min-height:0;}
  .memo__photo{min-height:320px;}
  .memo__col{padding:var(--sp-7) 24px;gap:var(--sp-6);}
}

/* ---- Article card ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr;}}
.acard{background:#fff;border-top:3px solid var(--accent);display:flex;flex-direction:column;transition:box-shadow 280ms;cursor:pointer;color:inherit;}
.acard:hover{box-shadow:var(--shadow-card-hover);}
.acard__ph{aspect-ratio:16/9;background:#0D1B2A;overflow:hidden;}
.acard__ph img{width:100%;height:100%;object-fit:cover;}
.acard__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;}
.acard__tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.acard__title{font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.25;color:#111;margin:0;}
.acard__excerpt{font-size:14px;line-height:1.6;color:#555;font-weight:300;margin:0;}
.acard__cta{font-size:13px;font-weight:500;color:var(--accent);margin-top:6px;}

/* ---- Page hero ---- */
.page-hero{height:60vh;min-height:420px;position:relative;background-size:cover;background-position:center;margin-top:0;}
.page-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,.85) 100%);}
.page-hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:var(--sp-8);gap:16px;}

/* ---- Editorial / sticky label ---- */
.editorial{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-8);}
.section-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--fg-mid);position:sticky;top:110px;}
.editorial__body p{margin:0 0 24px;}
@media (max-width:900px){.editorial{grid-template-columns:1fr;}.section-label{position:static;}}

/* ---- Pillars ---- */
/* Pillars — each column gets its own 3px brand-accent top border (same
   pattern as ArticleCard). Whitespace separates the columns instead of
   vertical dividers, which were cutting visually through the body copy
   on the right-hand columns. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);}
.pillar{
  padding-top:var(--sp-6);
  border-top:var(--bd-accent-top);  /* 3px solid var(--ai-blue) */
  display:flex;flex-direction:column;gap:12px;
}
.pillars--light .pillar{color:var(--fg);}
.pillar__num{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin:0 0 8px;letter-spacing:.04em;}
.pillar__t{font-family:var(--font-display);font-size:24px;font-weight:500;margin:0;letter-spacing:-0.01em;line-height:1.2;}
.pillar p{font-size:15px;line-height:1.6;font-weight:300;color:rgba(245,245,243,.75);margin:0;max-width:32ch;}
.pillars--light .pillar p{color:var(--fg-mid);}
@media (max-width:900px){.pillars{grid-template-columns:1fr;gap:var(--sp-6);}}

/* ---- Quiénes somos · Historia (timeline) ---- */
.timeline{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-8);padding:var(--sp-6) 0;border-top:1px solid var(--ai-hairline);}
.tl-item:first-of-type{border-top:none;padding-top:0;}
.tl-item__year{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.06em;padding-top:6px;}
.tl-item__t{font-family:var(--font-display);font-size:22px;font-weight:500;margin:0 0 10px;letter-spacing:-0.01em;line-height:1.25;color:var(--fg);}
.tl-item__body p{margin:0;max-width:62ch;font-size:15px;line-height:1.7;font-weight:300;color:var(--fg-mid);}
.tl-item__fig{margin:var(--sp-5) 0 0;max-width:560px;}
.tl-item__fig img{width:100%;height:auto;display:block;}
.tl-item__fig figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-mid);margin-top:10px;}
@media (max-width:900px){.tl-item{grid-template-columns:1fr;gap:var(--sp-4);}}

/* ---- Quiénes somos · El fundador ---- */
.founder{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:var(--sp-8);align-items:start;}
.founder__photo img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.02);}
.founder__role{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin:6px 0 var(--sp-5);}
.founder__text p{font-size:16px;line-height:1.7;font-weight:300;color:var(--fg-mid);max-width:58ch;margin:0 0 20px;}
.founder__text p.founder__role{color:var(--accent);margin:6px 0 var(--sp-5);}
@media (max-width:900px){.founder{grid-template-columns:1fr;}.founder__photo{max-width:340px;}}

/* ---- Quiénes somos · Valores ---- */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-7);}
.value__t{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0 0 10px;letter-spacing:-0.01em;color:var(--fg);}
.value p{font-size:14px;line-height:1.6;font-weight:300;color:var(--fg-mid);margin:0;}

/* ---- Services intro (dark section) ---- */
.svc-intro{font-size:16px;line-height:1.7;font-weight:300;color:rgba(245,245,243,.75);max-width:68ch;margin:0;}

/* ---- Codes ---- */
.codes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);}
.code-list{list-style:none;margin:var(--sp-5) 0 0;padding:0;}
.code-list li{padding:16px 0 16px 18px;border-left:2px solid var(--accent);margin-bottom:10px;font-size:15px;line-height:1.5;color:var(--fg);}
@media (max-width:900px){.codes{grid-template-columns:1fr;}}

/* ---- Accreditations grid ---- */
.accred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ai-hairline);border-left:1px solid var(--ai-hairline);}
.accred{padding:28px 24px;border-right:1px solid var(--ai-hairline);border-bottom:1px solid var(--ai-hairline);min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.accred__label{font-family:var(--font-display);font-weight:500;font-size:17px;color:#111;letter-spacing:.02em;}
.accred__sub{font-size:12px;color:var(--fg-mid);line-height:1.4;}
@media (max-width:900px){.accred-grid{grid-template-columns:repeat(2,1fr);}}

/* ---- Services list ---- */
.svc-list{list-style:none;margin:0;padding:0;column-count:2;column-gap:var(--sp-8);}
.svc-list li{padding:18px 0;border-bottom:1px solid rgba(245,245,243,.15);display:flex;gap:18px;color:#F5F5F3;font-size:16px;line-height:1.4;break-inside:avoid;}
.svc-list__n{font-family:var(--font-mono);font-size:12px;color:var(--accent);min-width:28px;}
@media (max-width:900px){.svc-list{column-count:1;}}

/* =========================================================
   ProyectosHero — 100vh image carousel at the top of /proyectos
   Same visual language as the home carousel (image bg, dark gradient
   overlay, dot strip with ring fill, bottom-left text). Tightened text
   layer: just the "Projects" title — no eyebrow, no sub, no CTA. Adds a
   scroll-down hint at the bottom-centre pointing at the sector grid.
   ========================================================= */
.proj-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#0a1623;}
/* Short variant — used on PagePersonas where the hero is more of a banner
   than a full cinematic stage. ~62% of viewport: enough presence to set
   the tone, but the team grid below is partially visible at first paint
   so the user knows there's more content immediately. */
.proj-hero--short{height:62vh;min-height:480px;}
.proj-hero__slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity 1000ms var(--ease-out);
}
.proj-hero__slide.is-active{opacity:1;}
.proj-hero__img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Ken-Burns drift — slow zoom on the active slide. Implemented as a CSS
   animation (not a transition) so it RE-FIRES every time the slide enters
   the .is-active state, even after the carousel cycles back to it. */
@keyframes proj-hero-zoom{
  from{transform:scale(1.02);}
  to  {transform:scale(1.10);}
}
.proj-hero__slide.is-active .proj-hero__img{
  animation:proj-hero-zoom 9s linear forwards;
}
/* Overlay matches the home hero curve but the middle stops keep more navy
   even at peak. Home runs dark night-time videos; Proyectos cycles still
   photos that include a bright sunset (Calatrava) — leaving the centre
   fully transparent let that brightness pierce through. A 22% navy floor
   at the brightest point + a light extra darkening either side calms it
   without making the imagery feel flat. */
.proj-hero__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,27,42,.65) 0%,
    rgba(13,27,42,.35) 22%,
    rgba(13,27,42,.22) 45%,
    rgba(13,27,42,.48) 65%,
    rgba(13,27,42,.85) 90%,
    rgba(13,27,42,.92) 100%);
}
.proj-hero__inner{
  position:absolute;inset:0;
  max-width:var(--container);margin:0 auto;
  padding:0 32px;
  color:#F5F5F3;
  pointer-events:none;
}
.proj-hero__title{
  /* Title sits at the bottom-LEFT corner; dots + scroll arrow sit at the
     bottom-CENTRE. They share the same vertical band (lowest ~80px of the
     hero) but don't overlap horizontally — "Projects" is short enough that
     the text never reaches the centred dot strip. */
  position:absolute;left:32px;right:auto;bottom:40px;
  margin:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(40px, 5vw, 72px);
  line-height:1.04;letter-spacing:-0.02em;
  color:#FFFFFF;
  text-wrap:balance;
}

/* Dot strip — bottom-centre, identical layout vocabulary to the home
   carousel + stage hero. Active dot wears an SVG progress ring whose
   stroke-dashoffset is filled via a CSS keyframe over 6s (matching the
   slide autoplay timer). The ring SVG only renders for the active dot,
   so on slide change the SVG unmounts/remounts and the keyframe restarts
   cleanly from 0. */
.proj-hero__dots{
  position:absolute;left:50%;bottom:62px;z-index:3;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:26px;
}
.proj-hero__dot{
  position:relative;
  width:28px;height:28px;
  background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.proj-hero__dot:focus-visible{outline:none;}
.proj-hero__dot:focus-visible .proj-hero__dot-core{background:#FFFFFF;}
.proj-hero__dot-core{
  display:block;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.55);
  transition:width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms var(--ease-out);
}
.proj-hero__dot:hover .proj-hero__dot-core{background:#FFFFFF;}
.proj-hero__dot.is-on .proj-hero__dot-core{
  background:#FFFFFF;
  width:5px;height:5px;
}

/* Scroll-down hint — small label + arrow at the bottom-centre. Subtle
   vertical bounce on the arrow draws the eye downward without being noisy.
   Clickable: smooth-scrolls to the sector grid below. */
.proj-hero__scroll{
  position:absolute;left:50%;bottom:22px;z-index:3;
  transform:translateX(-50%);
  background:transparent;border:0;padding:6px 12px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;
  color:rgba(255,255,255,0.78);
  transition:color 200ms var(--ease-out);
}
.proj-hero__scroll:hover{color:#FFFFFF;}
.proj-hero__scroll-label{
  font-family:var(--font-sans);font-weight:500;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.proj-hero__scroll-arrow{
  font-size:18px;line-height:1;
  animation:proj-hero-bounce 1.8s ease-in-out infinite;
}
/* Architect credit — bottom-right of the Proyectos hero, anchored at
   the same vertical offset as the scroll hint. Same vocabulary as
   .shero__stage-credit but matched to this hero's padding scale. */
.proj-hero__credit{
  position:absolute;right:32px;bottom:24px;z-index:3;
  font-family:var(--font-sans);font-weight:400;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  pointer-events:none;
}
@keyframes proj-hero-bounce{
  0%, 100% { transform:translateY(0); opacity:.78; }
  50%      { transform:translateY(4px); opacity:1; }
}

@media (max-width:900px){
  .proj-hero__title{font-size:38px;bottom:36px;left:24px;right:auto;}
  .proj-hero__dots{bottom:60px;gap:18px;}
  .proj-hero__scroll{bottom:22px;}
}
@media (max-width:600px){
  .proj-hero{min-height:520px;}
  /* On phones the title would collide with the centred dot strip, so we
     stack title above dots like the original — but very close to the
     bottom edge, keeping the "low" placement. */
  .proj-hero__title{font-size:28px;bottom:88px;left:24px;right:24px;}
  .proj-hero__dots{bottom:54px;gap:16px;}
}

/* ---- Sector stage (Proyectos page) — F+P-style editorial grid.
   Deep-navy band, 3×2 large tiles with hover-to-play preview videos. Each
   tile mounts a paused <video> showing its poster image; the React handlers
   in SectorTile drive play/pause + currentTime reset on enter/leave/focus.
   The label sits at the bottom-left and stays fully visible at rest. */
.sector-stage{
  background:#0a1623;
  color:var(--fg-on-dark);
  /* Padding-top clears the fixed nav (no parallax hero above any more) and
     gives the title breathing room. Bottom padding kept tight (sp-5 = 24px)
     so the transition into the archive section below reads as one continuous
     navy canvas, not two separate panels. */
  padding:calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-5);
}
.sector-stage__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(36px, 4vw, 54px);
  line-height:1.08;letter-spacing:-0.015em;
  color:#FFFFFF;
  margin:0 0 var(--sp-7);
  max-width:760px;
}
@media (max-width:900px){
  .sector-stage{padding-top:calc(var(--nav-h) + var(--sp-6));}
  .sector-stage__title{font-size:32px;margin-bottom:var(--sp-6);}
}
/* Grid uses a fixed row height (grid-auto-rows) instead of per-tile aspect-
   ratio. This guarantees all tiles in the same row share the EXACT same
   height regardless of the gap between columns — aspect-ratio math can't
   compensate for the gap, but grid-auto-rows just snaps every tile to the
   row. Wide tiles span 2 cols; their width grows but height stays the same.
   The clamp() picks a row height that scales reasonably from ~220px on small
   screens to ~360px on wide ones. */
.sector-stage__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(220px, 24vw, 360px);
  gap:16px;
}
.sector-stage__tile{
  position:relative;display:block;overflow:hidden;
  background:#0a1623;cursor:pointer;
  color:inherit;text-decoration:none;
  outline:none;
  border-radius:14px;             /* F+P-style rounded corners */
  height:100%;                    /* fill the row height set by the grid */
}
.sector-stage__tile--wide{
  grid-column:span 2;
}
@media (max-width:900px){
  .sector-stage__grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(200px, 30vw, 300px);
    gap:12px;
  }
  /* Below 900px (2-col grid), wide tiles span both columns. */
  .sector-stage__tile--wide{grid-column:span 2;}
}
@media (max-width:600px){
  .sector-stage__grid{
    grid-template-columns:1fr;
    grid-auto-rows:200px;
  }
  /* Below 600px (1-col grid), wide modifier collapses to one column. */
  .sector-stage__tile--wide{grid-column:1;}
}
/* Poster image — always-visible base layer. Renders immediately while the
   video element above is still fetching metadata. */
.sector-stage__poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  transition:transform 600ms var(--ease-out);
}
/* Video sits on top of the poster — invisible at rest (so we don't get the
   browser's black <video> fallback flashing through) and faded in only while
   playing. The CSS class `.is-playing` is added by the React handler when
   play() resolves. */
.sector-stage__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
  opacity:0;
  transition:opacity 240ms var(--ease-out), transform 600ms var(--ease-out);
}
.sector-stage__tile.is-playing .sector-stage__video{opacity:1;}
.sector-stage__tile:hover .sector-stage__poster,
.sector-stage__tile:hover .sector-stage__video{
  transform:scale(1.03);
}
/* Subtle bottom-weighted gradient so the label stays legible against any
   frame of the preview. Lifts at rest, lightens slightly on hover so the
   underlying footage breathes. */
.sector-stage__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(13,27,42,0.05) 0%, rgba(13,27,42,0.20) 55%, rgba(13,27,42,0.75) 100%);
  transition:background 320ms var(--ease-out);
}
.sector-stage__tile:hover .sector-stage__overlay{
  background:linear-gradient(180deg, rgba(13,27,42,0.0) 0%, rgba(13,27,42,0.10) 55%, rgba(13,27,42,0.60) 100%);
}
.sector-stage__label{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:2;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px, 1.7vw, 28px);
  line-height:1.2;letter-spacing:-0.005em;
  color:#FFFFFF;
}
.sector-stage__tile:focus-visible{
  box-shadow:inset 0 0 0 2px var(--ai-blue-300);
}
@media (max-width:900px){
  .sector-stage__label{font-size:20px;left:18px;right:18px;bottom:18px;}
}
@media (max-width:600px){
  .sector-stage__tile{aspect-ratio:16/9;}
  .sector-stage__label{font-size:18px;}
}

/* ---- Sector landing page (PageSector) ---- */
.sector-intro{max-width:920px;}
.sector-intro__lede{font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.45;color:var(--fg);letter-spacing:-0.005em;margin:0 0 var(--sp-6);}
.sector-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ai-hairline);border-left:1px solid var(--ai-hairline);}
.sector-proof__cell{padding:24px 22px;border-right:1px solid var(--ai-hairline);border-bottom:1px solid var(--ai-hairline);display:flex;flex-direction:column;gap:6px;}
.sector-proof__k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--fg-mid);}
.sector-proof__v{font-family:var(--font-display);font-weight:500;font-size:17px;color:#111;letter-spacing:.01em;}
@media (max-width:900px){.sector-proof{grid-template-columns:1fr;}}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;border-bottom:1px solid currentColor;padding-bottom:2px;text-decoration:none;}
.back-link:hover{color:#111;}

/* =========================================================
   PageSector — sector landing page
   Adopted from the Aguilera Ingenieros Design System bundle
   (Claude Design handoff). Five sections: shero split + eng
   discipline grid + caps spec list + reference projects + cert
   grid + accent CTA band. The visual signature is the framed
   hero panel — engineering-grid background, corner brackets,
   centred building line-drawing (or photo for sectors without
   an isometric drawing), and a reserved video CTA slot.
   ========================================================= */

/* ── Hero ───────────────────────────────────────────────── */
.shero{
  position:relative;background:#0a1623;color:var(--fg-on-dark);
  padding-top:var(--nav-h);overflow:hidden;
}
.shero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 45%, rgba(0,80,144,0.14) 0%, transparent 70%);
}
.shero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding-top:72px;padding-bottom:88px;min-height:calc(86vh - var(--nav-h));
}
.shero__left{display:flex;flex-direction:column;gap:22px;max-width:560px;}
.shero__h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(38px,4.2vw,58px);line-height:1.06;letter-spacing:-0.015em;
  color:#F5F5F3;margin:0;text-wrap:balance;
}
.shero__sub{font-size:17px;font-weight:300;line-height:1.6;color:rgba(245,245,243,0.74);margin:0;max-width:520px;}
.shero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px;
  border-top:1px solid rgba(245,245,243,0.14);
}
.shero__stat{padding:18px 14px 0 0;display:flex;flex-direction:column;gap:6px;}
.shero__stat-v{font-family:var(--font-display);font-weight:500;font-size:22px;color:var(--ai-blue-300);letter-spacing:-0.01em;line-height:1;}
.shero__stat-k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,0.5);font-weight:500;line-height:1.3;}

/* Framed building / video panel — same skeleton for both flavours. */
.shero__media{
  position:relative;aspect-ratio:4/3;width:100%;
  background:linear-gradient(165deg, rgba(19,38,58,0.6), rgba(8,16,26,0.9));
  border:1px solid rgba(245,245,243,0.12);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.shero__media--photo{
  background-size:cover;background-position:center;
}
/* The photo flavour gets a dimming overlay so the corner brackets and the
   bottom caption strip stay legible — same darkening curve as a project card. */
.shero__media--photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,27,42,0.35) 0%, rgba(13,27,42,0.85) 100%);
}

/* Video flavour — full-bleed looping clip inside the panel frame. The video
   sits under the corner brackets and caption strip; the same gradient overlay
   as the photo flavour darkens the bottom so the strip stays legible without
   washing out the footage. */
.shero__media--video{background:#0a1623;}
.shero__media--video::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(13,27,42,0.18) 0%, rgba(13,27,42,0.78) 100%);
}
.shero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   Deck-style hero (heroVariant: "deck") — used by Hospitales.
   3 square clips visible at once. Centre clip is in forefront
   (full size + full opacity, playing). Flanking clips sit at
   85% scale + 55% opacity, paused. On advance the centre's
   clip src changes; visually it reads as a deck where the
   row of clips slid one step.
   ========================================================= */
.shero--deck{
  position:relative;
  background:#0a1623;
  color:var(--fg-on-dark);
  /* Tight padding so the entire deck fits in the initial viewport: just
     the nav clearance + a small breathing band above, smaller below. */
  padding:calc(var(--nav-h) + var(--sp-3)) 0 var(--sp-4);
  overflow:hidden;
}
.shero-deck__inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);
  width:100%;
}
/* Sector title sits in the slim band above the deck. Minimalist
   treatment: light weight, open tracking, extra breathing room
   between the title and the deck below. */
.shero-deck__title{
  margin:0 0 var(--sp-4);
  font-family:var(--font-display, inherit);
  font-weight:300;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  line-height:1.2;
  letter-spacing:0.005em;
  text-align:center;
  color:var(--fg-on-dark);
}
/* Stage holds the cards absolutely positioned. Cards are 4:3 rectangles
   (source re-cropped to 1200x900, logos pushed out by the tighter height
   crop), so stage height is the card width * 3/4. Centre card is now
   significantly larger; side cards sit BEHIND it and only the outer
   half peeks out (step = w/2 — half of each side card is hidden by
   the centre, scaled down to feel recessed). */
.shero-deck__stage{
  position:relative;
  width:100%;
  height:clamp(240px, 37.5vw, 585px);
}
.shero-deck__card{
  position:absolute;left:50%;top:50%;
  /* Active card width — bumped up significantly; sides are this same
     intrinsic width then visually scaled down + clipped behind centre. */
  --w:clamp(320px, 50vw, 780px);
  /* step = w/2 → side card centre lands at the centre card's left/right
     edge, so half of each side card is tucked behind centre. */
  --step:calc(var(--w) * 0.5);
  width:var(--w);
  aspect-ratio:4/3;
  border-radius:18px;
  overflow:hidden;
  padding:0;margin:0;border:0;
  background:#0a1623;
  cursor:pointer;
  /* The actual move: centre via -50%, then shift by offset * step. Sides
     also scale down (0.65 — smaller than before so the contrast with the
     larger centre reads cleanly). Single transition runs the slide AND
     scale together. */
  transform:translate(calc(-50% + var(--offset, 0) * var(--step)), -50%) scale(0.65);
  opacity:0.5;
  filter:saturate(0.8);
  transition:
    transform 700ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 700ms var(--ease-out),
    filter 700ms var(--ease-out);
}
.shero-deck__card video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.shero-deck__card.is-active{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
  filter:none;
  z-index:3;
  cursor:default;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.shero-deck__card.is-prev,
.shero-deck__card.is-next{
  z-index:2;
}
.shero-deck__card.is-far{
  opacity:0;
  pointer-events:none;
  z-index:1;
}
/* is-warp is applied on the single frame where a card's --offset
   jumped > 1 slot (the long-way-around case in an N=3 loop). Killing
   the transition makes it snap to the new side instead of sliding
   across the active card. The class is removed on the next render so
   normal motion resumes. */
.shero-deck__card.is-warp{
  transition:none;
}
.shero-deck__card.is-prev:hover,
.shero-deck__card.is-next:hover{
  opacity:0.78;
}
.shero-deck__card:focus-visible{
  outline:2px solid var(--ai-blue-300);
  outline-offset:4px;
}
.shero-deck__dots{
  display:flex;align-items:center;gap:22px;
  margin-top:var(--sp-3);
}
.shero-deck__dot{
  position:relative;
  width:28px;height:28px;
  background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.shero-deck__dot:focus-visible{outline:none;}
.shero-deck__dot-core{
  display:block;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.55);
  transition:width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms var(--ease-out);
}
.shero-deck__dot:hover .shero-deck__dot-core,
.shero-deck__dot:focus-visible .shero-deck__dot-core{background:#FFFFFF;}
.shero-deck__dot.is-on .shero-deck__dot-core{
  background:#FFFFFF;
  width:5px;height:5px;
}
/* Progress ring on the active dot — mutated by rAF from the active
   video's currentTime/duration. */
.shero-deck__dot-ring{
  position:absolute;inset:0;pointer-events:none;
}
@media (max-width:900px){
  .shero--deck{min-height:auto;padding-top:calc(var(--nav-h) + var(--sp-5));}
  /* Tablet: stage = card width × 3/4. Step still w/2 from base rule. */
  .shero-deck__stage{height:clamp(225px, 45vw, 420px);}
  .shero-deck__card{--w:clamp(300px, 60vw, 560px);}
}
@media (max-width:600px){
  /* Only the active centre card stays visible on phones. */
  .shero-deck__card{--w:min(82vw, 420px);}
  .shero-deck__card.is-prev,
  .shero-deck__card.is-next{opacity:0;pointer-events:none;}
}

/* ── Stage hero — full-bleed 100vh video stage (Foster + Partners cadence)
   Used by sectors with `heroVariant: "stage"`. The framed-panel hero stays
   the default for everyone else; this variant replaces the entire .shero
   section with a cinematic stage. */
.shero--stage{
  position:relative;
  background:#000;
  color:var(--fg-on-dark);
  height:100vh;min-height:640px;
  padding-top:0;
  overflow:hidden;
}
/* Background video. object-fit:cover means tall portrait clips will be
   side-cropped, wide clips top/bottom-cropped — matches the editorial
   treatment on F+P and similar studio sites. */
.shero__bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}
/* Two-stop gradient: a darker top band so the fixed nav reads cleanly, a
   light middle so the footage breathes, and a heavier bottom so the copy
   stays legible regardless of which clip is on-screen. */
.shero__bg-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,27,42,.55) 0%,
    rgba(13,27,42,.18) 22%,
    rgba(13,27,42,0)   45%,
    rgba(13,27,42,.40) 65%,
    rgba(13,27,42,.85) 90%,
    rgba(13,27,42,.92) 100%);
}
.shero__stage-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:var(--nav-h);
  padding-bottom:120px;       /* leaves clearance for the dot strip */
}
.shero__stage-content{
  max-width:720px;
  display:flex;flex-direction:column;gap:14px;
}
/* Eyebrow over the stage hero — slightly larger than the standard one (which
   targets editorial chrome) so it reads as a category label on top of the
   cinematic frame, but still smaller than the headline below it. */
.shero--stage .eyebrow{
  font-size:13px;letter-spacing:.18em;
}
/* Headline — kept tight on purpose. Stage heros only get an eyebrow + h1;
   long sub-paragraphs were pulling focus off the footage. clamp() floor
   has been dropped from 40 → 30 so phones get a calm size that doesn't
   wrap awkwardly behind tall portrait clips. */
.shero__stage-h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(30px,3.6vw,52px);
  line-height:1.06;letter-spacing:-0.02em;
  color:#F5F5F3;margin:0;
  text-wrap:balance;
}

/* Dot strip — bottom-centre, one button per clip in the reel. */
.shero__stage-dots{
  /* Lifted from 44px to make room for the heroHint label + arrow that
     sits beneath. Sectors without a heroHint look the same — the small
     vertical shift reads as breathing room. */
  position:absolute;left:50%;bottom:78px;z-index:3;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:26px;
}
/* Stage hero hint — tiny "Discover our …" label + downward arrow
   directly under the dot strip. Visually quieter than the Proyectos
   page scroll-hint: smaller type, lower opacity. Clicking scrolls
   past the 100vh hero into the sector's content. */
.shero__stage-hint{
  position:absolute;left:50%;bottom:18px;z-index:3;
  transform:translateX(-50%);
  background:transparent;border:0;padding:4px 10px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;
  color:rgba(255,255,255,0.62);
  transition:color 200ms var(--ease-out);
}
.shero__stage-hint:hover{color:#FFFFFF;}
.shero__stage-hint:focus-visible{outline:none;color:#FFFFFF;}
.shero__stage-hint-label{
  font-family:var(--font-sans);font-weight:400;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
}
.shero__stage-hint-arrow{
  font-size:14px;line-height:1;
  animation:proj-hero-bounce 1.8s ease-in-out infinite;
}
/* Architect credit — bottom-right corner of the stage hero, anchored
   at the SAME vertical offset as .shero__stage-hint so the two read
   as a matched pair across the bottom of the frame. Reuses the hint
   label's font, weight, tracking and colour exactly. */
.shero__stage-credit{
  position:absolute;right:24px;bottom:18px;z-index:3;
  font-family:var(--font-sans);font-weight:400;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  pointer-events:none;
}
.shero__stage-dot{
  position:relative;
  width:28px;height:28px;
  background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.shero__stage-dot:focus-visible{outline:none;}
.shero__stage-dot:focus-visible .shero__stage-dot-core{background:#FFFFFF;}
.shero__stage-dot-core{
  display:block;
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,0.55);
  transition:width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms var(--ease-out);
}
.shero__stage-dot:hover .shero__stage-dot-core{background:#FFFFFF;}
.shero__stage-dot.is-on .shero__stage-dot-core{
  background:#FFFFFF;
  width:5px;height:5px;
}
.shero__stage-dot-ring{
  position:absolute;inset:0;pointer-events:none;
}

/* Stage-hero mobile tuning. Two breakpoints:
   - ≤900px: tablet / narrow window. Headline drops a notch, dots tighten.
   - ≤600px: phones. Headline shrinks further, eyebrow comes in at base size,
     padding tightens so the copy isn't crushed against the dot strip on
     short viewports. */
@media (max-width:900px){
  .shero--stage{min-height:560px;}
  .shero__stage-inner{padding-bottom:128px;}
  .shero__stage-h1{font-size:30px;line-height:1.08;}
  .shero--stage .eyebrow{font-size:12px;letter-spacing:.16em;}
  .shero__stage-dots{gap:18px;bottom:60px;}
  .shero__stage-hint{bottom:14px;}
  .shero__stage-credit{bottom:14px;right:18px;}
}
@media (max-width:600px){
  .shero--stage{min-height:520px;height:100svh;}      /* svh = stable on iOS */
  .shero__stage-inner{padding-bottom:108px;padding-left:0;padding-right:0;}
  .shero__stage-content{max-width:none;gap:10px;}
  .shero__stage-h1{font-size:24px;line-height:1.1;letter-spacing:-0.015em;}
  .shero--stage .eyebrow{font-size:11px;letter-spacing:.14em;}
  .shero__stage-dots{gap:16px;bottom:52px;}
  .shero__stage-dot{width:24px;height:24px;}
  .shero__stage-dot-ring{width:24px !important;height:24px !important;}
  .shero__stage-hint{bottom:12px;}
  .shero__stage-hint-label{font-size:8px;letter-spacing:.16em;}
  /* On phones the credit drops a line below the hint to avoid the
     narrow label colliding with the centre arrow; same font scaling. */
  .shero__stage-credit{bottom:12px;right:14px;font-size:8px;letter-spacing:.16em;}
}

/* Reel tick strip — one notch per clip in a cycling playlist. Sits just above
   the caption strip so it visually pairs with the bottom chrome. Active notch
   is solid white, others are dimmed; the colour transition makes the advance
   feel mechanical rather than abrupt. */
.shero__reel-ticks{
  position:absolute;z-index:3;
  left:16px;right:16px;bottom:54px;
  display:flex;justify-content:flex-end;align-items:center;gap:6px;
  pointer-events:none;
}
.shero__reel-tick{
  display:block;
  width:18px;height:2px;
  background:rgba(245,245,243,0.32);
  transition:background 280ms var(--ease-out), width 280ms var(--ease-out);
}
.shero__reel-tick.is-on{
  background:#FFFFFF;
  width:28px;
}
.shero__grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(245,245,243,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,243,0.05) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(70% 70% at 50% 45%, #000 40%, transparent 100%);
}
.shero__building{
  position:relative;z-index:1;width:82%;height:auto;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(90,149,208,0.25));
  animation:vt-fade-in 900ms var(--ease-out);
}
.shero__media-foot{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, transparent, rgba(8,16,26,0.85));
}
.shero__media-cap{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:rgba(245,245,243,0.6);}
.shero__media-video{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,243,0.85);font-weight:500;cursor:pointer;}
.shero__play{width:24px;height:24px;border-radius:999px;border:1px solid rgba(245,245,243,0.4);display:flex;align-items:center;justify-content:center;color:#F5F5F3;padding-left:2px;transition:all 200ms var(--ease-out);}
.shero__media-video:hover .shero__play{background:var(--ai-blue);border-color:var(--ai-blue);color:#fff;}
.shero__corner{position:absolute;width:10px;height:10px;z-index:2;border-color:rgba(245,245,243,0.4);}
.shero__corner--tl{top:10px;left:10px;border-top:1px solid;border-left:1px solid;}
.shero__corner--tr{top:10px;right:10px;border-top:1px solid;border-right:1px solid;}
.shero__corner--bl{bottom:10px;left:10px;border-bottom:1px solid;border-left:1px solid;}
.shero__corner--br{bottom:10px;right:10px;border-bottom:1px solid;border-right:1px solid;}

@media (max-width:900px){
  .shero__inner{grid-template-columns:1fr;gap:40px;padding-bottom:56px;}
  .shero__right{order:-1;}
  .shero__stats{grid-template-columns:1fr 1fr;gap:8px 0;}
  .shero__h1{font-size:36px;}
}

/* ── 2. What we engineer — discipline cards ─────────────── */
.eng-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--ai-hairline);border-left:1px solid var(--ai-hairline);}
.eng-card{padding:32px 32px 36px;border-right:1px solid var(--ai-hairline);border-bottom:1px solid var(--ai-hairline);}
.eng-card__n{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-bottom:18px;}
.eng-card__t{font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-0.01em;color:#111;margin:0 0 10px;}
.eng-card__d{font-size:14.5px;line-height:1.6;font-weight:300;color:var(--fg-mid);margin:0;}
@media (max-width:760px){.eng-grid{grid-template-columns:1fr;}}

/* ── 3. Technical capabilities — spec list on dark ──────── */
.caps__head{margin-bottom:var(--sp-6);}
.caps__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(245,245,243,0.14);}
.caps__item{
  display:flex;align-items:baseline;gap:24px;
  padding:22px 0;border-bottom:1px solid rgba(245,245,243,0.14);
}
.caps__n{font-family:var(--font-mono);font-size:12px;color:var(--ai-blue-300);min-width:28px;}
.caps__t{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,24px);color:#F5F5F3;letter-spacing:-0.005em;}

/* ── 5. Certifications grid ─────────────────────────────── */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:0;border-top:1px solid var(--ai-hairline);border-left:1px solid var(--ai-hairline);}
.cert{padding:26px 22px;border-right:1px solid var(--ai-hairline);border-bottom:1px solid var(--ai-hairline);min-height:108px;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.cert__label{font-family:var(--font-display);font-weight:500;font-size:17px;color:#111;letter-spacing:.01em;}
.cert__sub{font-size:12px;color:var(--fg-mid);line-height:1.4;}
@media (max-width:760px){.cert-grid{grid-template-columns:1fr 1fr;}}

/* ── 5. CTA accent band — column layout + extra breathing ─ */
.cta-band{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:8px 0;}
.cta-band .section__title{max-width:880px;}

/* Section foot — centred arrow CTA at the end of a section */
.section__foot{margin-top:var(--sp-7);display:flex;justify-content:center;}

/* ---- Team grid ---- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
.tcard{display:flex;flex-direction:column;gap:16px;}
.tcard__photo{
  aspect-ratio:4/5;background:#0D1B2A;color:#F5F5F3;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:48px;font-weight:500;letter-spacing:.04em;
  overflow:hidden;
  border-radius:14px;   /* matches the sector tiles on Proyectos */
}
/* `center top` anchors the photo to its TOP edge — heads (which sit in the
   upper part of a portrait) stay fully visible, and the crop comes off the
   feet instead. Fixes Pedro / Joaquín / Almudena who were getting cut
   at the head with the previous center-center crop. */
.tcard__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 500ms var(--ease-out);}
.tcard:hover .tcard__photo img{transform:scale(1.04);}
.tcard__name{font-family:var(--font-display);font-weight:500;font-size:17px;}
.tcard__degree{font-size:13px;color:var(--fg-mid);margin:4px 0 10px;line-height:1.4;}

/* =========================================================
   PagePersonas — team section on deep navy (matches the Proyectos band).
   Continues the editorial canvas: PersonasHero is full-bleed photo, this
   section opens with the team grid on the same dark surface.
   ========================================================= */
.personas-team{
  background:#0a1623;
  color:var(--fg-on-dark);
  padding:var(--sp-9) 0 var(--sp-7);
}
.personas-team .tcard__name{color:#F5F5F3;}
.personas-team .tcard__degree{color:rgba(245,245,243,0.65);}
.personas-quote{
  background:#0a1623;
  color:var(--fg-on-dark);
  padding:var(--sp-7) 0 var(--sp-9);
  border-top:1px solid rgba(245,245,243,0.08);
}
.pullquote--on-dark{color:#F5F5F3;}
.pullquote--on-dark em, .pullquote--on-dark .accent{color:var(--ai-blue-300);}

/* ---- Accordion ---- */
.acc{border-top:1px solid var(--ai-hairline);}
.acc__item{border-bottom:1px solid var(--ai-hairline);}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 0;background:transparent;border:0;text-align:left;cursor:pointer;gap:20px;}
.acc__title{font-family:var(--font-display);font-size:20px;font-weight:600;color:#111;}
.acc__meta{display:flex;gap:10px;margin-top:6px;}
.acc__pill{background:#F5F5F3;color:#111;padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.06em;}
.acc__dept{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;padding:4px 0;}
.acc__icon{font-family:var(--font-display);font-size:24px;color:var(--accent);}
.acc__body{padding:0 0 28px;max-width:760px;color:var(--fg-mid);font-size:15px;line-height:1.6;}
.acc__link{color:var(--accent);font-size:14px;display:inline-block;margin-top:10px;}

/* ---- Accent CTA band ---- */
.cta-band{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.cta-band .section__title{max-width:880px;}

/* ---- Contact — single dark column, centered ---- */
/* ── Contact page (F+P-inspired single-city card) ──────────────────────
   Light page, one centered rounded card per office. With our single
   Madrid office the card stands alone; the layout scales naturally if
   more cities are ever added (just render the array). The photo lives
   on top of the card; the body holds the city name + icon row + the
   address / phone / email block; a small map CTA closes the body.
   Replaces the old navy `.contacto*` layout which carried a literal
   satellite map (mapa.jpg) — the photo conveys place without the ugly
   render. */
.ai-contact{
  /* Deep-navy page. With the photo now at fixed 16:9 (was flexible
     clamp height), the card is taller and may push past the viewport
     on short laptops — `min-height: 100vh` lets the page grow with
     content while still filling the viewport when shorter. The card
     still sits directly under the nav at the top. */
  background:#0a1623;
  color:var(--fg-on-dark);
  min-height:100vh;
  padding-top:var(--nav-h);
  padding-bottom:18px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.ai-contact__inner{
  display:flex;flex-direction:column;align-items:center;
  gap:18px;
  text-align:center;
  width:100%;
  /* Outer wrapper width — capped at 1320px so on ultra-wide monitors
     the card doesn't span the whole screen, but fluid below that. */
  max-width:1320px;
  margin:0 auto;
  padding-top:18px;
}
/* Outer 2-column wrapper — contact card on the left, map iframe box
   on the right. Each column is half the available width; the gap is
   what separates the two rounded surfaces against the navy page. */
.ai-contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:calc(100vw - 96px);
  max-width:1280px;
  align-items:stretch;
}
.ai-contact-card{
  /* Vertical stack: photo banner on TOP, body BELOW. The card's width
     is now driven by its grid column (see .ai-contact__grid above)
     so each side of the pair gets equal share. */
  display:flex;flex-direction:column;
  background:var(--ai-paper);
  color:var(--fg);
  border-radius:18px;
  overflow:hidden;
  width:100%;
  text-align:left;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.35);
}
/* Map box — same rounded surface as the card, hosts the Google Maps
   iframe at 100%×100%. `align-items: stretch` on the grid makes the
   map box match the card's height automatically.
   Placeholder + iframe stack via position:relative/absolute: the
   placeholder shows immediately on render; once the iframe fires
   onLoad, .is-loaded flips and the iframe fades in over the
   placeholder. */
.ai-contact-map{
  position:relative;
  background:#0a1623;
  border-radius:18px;
  overflow:hidden;
  width:100%;
  min-height:320px;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.35);
}
.ai-contact-map__placeholder{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  color:rgba(255,255,255,0.55);
  /* Soft radial gradient on top of the navy bg so the box isn't a
     pure flat panel — reads as "this area will be content" before the
     iframe paints. The shimmer keyframe gives a subtle pulse. */
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%),
    #0a1623;
  animation:ai-contact-map-shimmer 1.6s ease-in-out infinite;
  transition:opacity 360ms var(--ease-out);
}
.ai-contact-map.is-loaded .ai-contact-map__placeholder{
  opacity:0;pointer-events:none;
}
.ai-contact-map__placeholder-text{
  font-family:var(--font-sans);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;
}
@keyframes ai-contact-map-shimmer{
  0%, 100% { opacity:1; }
  50%      { opacity:.78; }
}
.ai-contact-map__frame{
  position:relative;z-index:2;
  width:100%;height:100%;
  border:0;
  display:block;
  /* Iframe starts invisible so the placeholder owns the visual until
     onLoad. Fade-in is short — the goal is "no blank flash", not a
     showy animation. */
  opacity:0;
  transition:opacity 240ms var(--ease-out);
}
.ai-contact-map.is-loaded .ai-contact-map__frame{
  opacity:1;
}
.ai-contact-card__photo{
  /* Anchored banner — 200px fixed so the photo stays a clean banner
     stripe regardless of the card column width. The map iframe next
     to it has its own height set by the card's total height, so the
     two columns line up. */
  height:200px;
  overflow:hidden;
  background:#0a1623;
}
.ai-contact-card__photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.ai-contact-card__body{
  /* Padding tuned to the card's column width (~half the grid). */
  padding:22px 26px;
  display:flex;flex-direction:column;
  gap:14px;
  flex:1;
}
.ai-contact-card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.ai-contact-card__head-text{
  display:flex;flex-direction:column;
  gap:2px;min-width:0;
}
.ai-contact-card__city{
  margin:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(20px, 1.6vw, 28px);
  line-height:1.1;letter-spacing:-0.01em;
  color:var(--fg);
}
.ai-contact-card__addrs{
  /* Office + legal HQ side-by-side inside the (now narrower) card. */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.ai-contact-card__col{
  display:flex;flex-direction:column;
  gap:6px;
  min-width:0;
}
.ai-contact-card__icons{
  display:flex;align-items:center;gap:8px;
}
.ai-contact-card__ic{
  /* Round white icon button — F+P pattern. Sits on the light card so
     the white circle reads as a button without needing a border. */
  width:36px;height:36px;
  border-radius:50%;
  background:#FFFFFF;
  color:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ai-contact-card__ic:hover{
  background:var(--accent);
  color:#FFFFFF;
  transform:translateY(-1px);
}
.ai-contact-card__company{
  /* Sub-line under "Madrid" — quieter so the city name leads. */
  font-size:11px;
  letter-spacing:.12em;
  color:var(--fg-mid);
  text-transform:uppercase;
}
/* Small uppercase eyebrow above each address column ("Oficina" /
   "Sede legal"). */
.ai-contact-card__addr-label{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--fg-mid);
}
/* Legal HQ address — identical font / colour to the office address.
   Hierarchy is carried by the eyebrow label ("REGISTERED HQ") above
   each column, not by typographic dimming. */
.ai-contact-card__legal-addr{
  font-style:normal;
  font-size:13px;
  line-height:1.55;
  color:var(--fg);
  margin:0;
}
.ai-contact-card__addr{
  font-style:normal;
  font-size:13px;
  line-height:1.55;
  color:var(--fg);
  margin:0;
}
.ai-contact-card__lines{
  display:flex;flex-direction:column;gap:2px;
  font-size:13px;
}
.ai-contact-card__line{
  color:var(--fg);
  text-decoration:none;
  transition:color 200ms var(--ease-out);
}
.ai-contact-card__line:hover{color:var(--accent);}
.ai-contact-card__line--mail{color:var(--accent);}
.ai-contact-card__note{
  font-size:11px;
  color:var(--fg-mid);
  border-top:1px solid rgba(15,30,50,.08);
  padding-top:10px;
  margin-top:6px;
  line-height:1.5;
}
.ai-contact-card__map-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;
  color:var(--accent);
  text-decoration:none;
  transition:color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ai-contact-card__map-cta:hover{color:var(--accent-hover);transform:translateX(2px);}
.ai-contact__social{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:var(--sp-2);
}
.ai-contact__social-ic{
  /* On the navy page bg, the social circles are subtle light glass
     rather than card-coloured — keeps them quiet but visible. */
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:var(--fg-on-dark);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.ai-contact__social-ic:hover{background:var(--accent);color:#FFFFFF;}

@media (max-width:700px){
  /* Mobile: page goes `min-height` so the user can scroll if the
     stacked layout exceeds the viewport. 2-column address grid
     collapses to single-column; photo aspect tightens so it still
     reads as a banner without taking too much vertical share. */
  .ai-contact{
    height:auto;
    min-height:100vh;
    padding-top:calc(var(--nav-h) + 24px);
    padding-bottom:32px;
    display:block;
  }
  .ai-contact__inner{padding:0 16px;}
  /* Phones / narrow tablets — collapse the 2-col grid so card and
     map stack vertically. Both reclaim the full available width. */
  .ai-contact__grid{
    grid-template-columns:1fr;
    width:calc(100vw - 32px);
    gap:14px;
  }
  .ai-contact-map{min-height:280px;}
  .ai-contact-card__photo{height:160px;}
  .ai-contact-card__body{padding:16px 18px;gap:12px;}
  .ai-contact-card__addrs{
    /* Stack the office + legal columns. Legal still reads quieter via
       its smaller font / muted colour. */
    grid-template-columns:1fr;
    gap:14px;
  }
  .ai-contact-card__ic{width:32px;height:32px;}
}
@media (max-width:380px){
  .ai-contact-card__photo{height:120px;}
  .ai-contact-card__body{padding:14px 16px;gap:10px;}
}

.ai-footer__col--brand{gap:14px;}
.ai-footer__social{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.ai-footer__follow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.55);font-weight:500;}
.ai-footer__icons{display:flex;gap:8px;}
.ai-footer__ic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(245,245,243,.35);color:#F5F5F3;transition:all 180ms var(--ease-out);border-radius:2px;}
.ai-footer__ic:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);}
.social-strip{background:var(--bg-dark);color:#F5F5F3;padding:36px 0;}
.social-strip__inner{max-width:var(--container);margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.social-strip__left{display:flex;align-items:center;gap:20px;}
.social-strip__icons{display:flex;gap:8px;}
.social-strip__ic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(245,245,243,.35);color:#F5F5F3;transition:all 180ms var(--ease-out);border-radius:2px;}
.social-strip__ic:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);}
.social-strip__right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.social-strip__mail{color:#F5F5F3;font-size:13px;font-weight:500;}
.social-strip__tel{font-family:var(--font-mono);font-size:12px;color:rgba(245,245,243,.7);}

/* ---- Footer ---- */
.ai-footer{background:var(--bg-deep);color:#F5F5F3;padding:var(--sp-8) 0 var(--sp-6);}
.ai-footer__inner{max-width:var(--container);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px;}
.ai-footer__col{display:flex;flex-direction:column;gap:10px;}
.ai-footer__head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.55);font-weight:500;margin-bottom:8px;}
.ai-footer__col a{color:#F5F5F3;font-size:14px;line-height:2;cursor:pointer;}
.ai-footer__col a:hover{color:var(--accent);}
.ai-footer__meta{font-size:12px;color:rgba(245,245,243,.55);letter-spacing:.08em;text-transform:uppercase;margin-top:8px;}
.ai-footer__addr,.ai-footer__tel{font-size:14px;line-height:1.7;color:rgba(245,245,243,.85);}
.ai-footer__bottom{max-width:var(--container);margin:48px auto 0;padding:20px 32px 0;border-top:1px solid rgba(245,245,243,.12);display:flex;justify-content:space-between;gap:24px;font-size:12px;color:rgba(245,245,243,.55);flex-wrap:wrap;}
@media (max-width:900px){.ai-footer__inner{grid-template-columns:1fr 1fr;}}

/* ---- Cookie bar ---- */
.cookie{position:fixed;bottom:24px;left:24px;right:24px;z-index:70;background:rgba(13,27,42,.95);color:#F5F5F3;padding:14px 20px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid rgba(245,245,243,.12);}
.cookie button{background:var(--accent);color:#fff;border:0;padding:8px 16px;border-radius:2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}


/* =========================================================
   ANIMATIONS — reveal-on-scroll, hero entry, page transitions
   ========================================================= */

/* Reveal: starts hidden + 24px below; flips to visible on .is-revealed.
   Apply to any element via the <Reveal/> wrapper (or by adding the class). */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  will-change:opacity, transform;
}
.reveal.is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* Honor reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .hero__slide.is-active .hero__content > *{opacity:1!important;transform:none!important;animation:none!important;}
}

/* Hero — staggered content entry on slide change */
.hero__content > *{opacity:0;transform:translateY(28px);transition:none;}
.hero__slide.is-active .hero__content > *{animation:heroIn 900ms var(--ease-out) forwards;}
.hero__slide.is-active .hero__content > *:nth-child(1){animation-delay:120ms;}
.hero__slide.is-active .hero__content > *:nth-child(2){animation-delay:240ms;}
.hero__slide.is-active .hero__content > *:nth-child(3){animation-delay:360ms;}
.hero__slide.is-active .hero__content > *:nth-child(4){animation-delay:480ms;}
@keyframes heroIn{
  from{opacity:0;transform:translateY(28px);}
  to  {opacity:1;transform:translateY(0);}
}

/* Hero image — slow Ken-Burns drift on the active slide only */
.hero__img{transform:scale(1.02);transition:transform 8s linear, opacity 1000ms var(--ease-out);}
.hero__slide.is-active .hero__img{transform:scale(1.08);}

/* Page-hero fade-in on background. Previously used background-attachment:
   fixed for a parallax feel, but that anchors the photo to the VIEWPORT
   while the hero element starts mid-scroll, so the initial paint shows
   one crop and the first scroll snaps to another — looks like the framing
   "recalculates". With background-attachment: scroll (the default) the
   photo travels with the section, the bgZoom animation lands cleanly on
   the final framing, and mobile/iOS — which never supported fixed
   reliably anyway — gets the same behaviour. */
.page-hero{
  background-attachment:scroll;
  background-position:center;
  background-size:cover;
  animation:bgZoom 1400ms var(--ease-out);
}
@keyframes bgZoom{
  from{transform:scale(1.04);opacity:0;}
  to  {transform:scale(1);opacity:1;}
}

/* Page transition — when the route swaps, fade the main content in */
.page-shell{animation:pageIn 500ms var(--ease-out);}
@keyframes pageIn{
  from{opacity:0;transform:translateY(12px);}
  to  {opacity:1;transform:translateY(0);}
}

/* Accordion smooth height — replace display toggle */
.acc__body{
  max-height:0;
  overflow:hidden;
  transition:max-height 380ms var(--ease-out);
}
.acc__body-inner{padding:0 0 28px;max-width:760px;color:var(--fg-mid);font-size:15px;line-height:1.6;}
.acc__body-inner p{margin:0 0 14px;}
/* Requirements list inside an open position. Bullets are subtle dots
   in the brand accent so they read as a checklist, not a generic ul. */
.acc__reqs{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;}
.acc__reqs li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--fg-mid);}
.acc__reqs li::before{content:"·";position:absolute;left:0;top:-1px;color:var(--reto-accent);font-weight:700;font-size:18px;}

/* Buttons get a soft idle-state hover lift already; add a focus-visible ring */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Nav: subtle slide-in on mount (only first time) */
.ai-nav{animation:navIn 600ms var(--ease-out);}
@keyframes navIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* Stat numerals — once revealed, gently rise into place */
.stat-row{will-change:opacity, transform;}

/* =========================================================
   VERTICALS HERO — Isometric 3D blocks + engineering chrome
   ========================================================= */

.vhero{
  position:relative;
  background:#0a1623;
  color:var(--fg-on-dark);
  padding:var(--sp-8) 0 var(--sp-9);
  overflow:hidden;
}
.vhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 70% 50%, rgba(0,80,144,0.10) 0%, transparent 70%),
    radial-gradient(40% 40% at 10% 30%, rgba(0,80,144,0.06) 0%, transparent 60%);
}
/* Intro banner — full-width band across the top of the section */
.vhero__intro-wrap{
  position:relative;z-index:1;
  max-width:var(--container);margin:0 auto;
  padding:0 32px var(--sp-6);
  display:flex;flex-direction:column;gap:14px;
}
.vhero__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(28px,2.8vw,42px);line-height:1.1;
  letter-spacing:-0.015em;color:#F5F5F3;margin:0;max-width:900px;
  text-wrap:balance;
}
.vhero__sub{
  font-size:17px;font-weight:300;color:rgba(245,245,243,0.72);
  line-height:1.55;margin:0;max-width:680px;
}

/* Two-column body — both columns scroll naturally together, sized to match
   row-by-row. The right blueprint stack is taller now (FLOOR_W=480, viewBox
   900×1240) so each block lines up with its corresponding menu row on the
   left. No pinning, no reveal animation — all menus are always visible. */
.vhero__inner{
  position:relative;z-index:1;
  max-width:var(--container);margin:0 auto;
  padding:0 32px;
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:64px;align-items:stretch;
}

/* The left column stretches to match the SVG's natural rendered height
   (viewBox 900×1240 → ~1447px at desktop). Items sit absolutely positioned at
   the vertical centres of their corresponding SVG blocks, so the rows line up
   horizontally with the blueprints. Percentages are derived from the viewBox:
   DC centre ≈ 15.2%, FARMA ≈ 44.4%, EDIF ≈ 75.7%. */
/* Verticals menu — items are absolute-positioned so their vertical
   centres line up with the matching floors on the SVG blueprint to the
   right. Scroll-driven active picks whichever row is closest to the
   viewport centre; the active row gets full opacity + brighter label,
   and its expand block (long copy + sector link) opens. */
.vhero__list{
  position:relative;
  list-style:none;margin:0;padding:0;
}
.vhero__item{
  position:absolute;left:0;right:0;
  transform:translateY(-50%);
  display:grid;grid-template-columns:48px 1fr 22px;gap:18px;
  align-items:flex-start;
  padding:24px 0;
  cursor:pointer;
  opacity:0.55;
  transition:opacity 480ms var(--ease-out), color 280ms var(--ease-out);
}
.vhero__item[data-pos="0"]{top:17.66%;}
.vhero__item[data-pos="1"]{top:46.85%;}
.vhero__item[data-pos="2"]{top:78.10%;}
.vhero__item.is-active{opacity:1;}
.vhero__item::before{
  content:"";position:absolute;left:0;top:0;width:0;height:1px;
  background:var(--ai-blue-300);
  transition:width 500ms var(--ease-out);
}
.vhero__item.is-active::before{width:100%;}

.vhero__num{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  color:rgba(245,245,243,0.4);padding-top:6px;letter-spacing:.06em;
  transition:color 280ms var(--ease-out);
}
.vhero__item.is-active .vhero__num{color:var(--ai-blue-300);}
.vhero__body{min-width:0;}
.vhero__label{
  font-family:var(--font-display);font-weight:500;font-size:24px;
  line-height:1.2;letter-spacing:-0.005em;
  color:rgba(245,245,243,0.7);
  transition:color 280ms var(--ease-out);
}
.vhero__item.is-active .vhero__label{color:#FFFFFF;}
.vhero__short{font-size:14px;font-weight:300;color:rgba(245,245,243,0.55);margin-top:4px;line-height:1.5;}
.vhero__thumb{display:none;}

/* Expand block — long paragraph + sector CTA for the active item. The
   collapse rule (gated to ≥901px) hides it on inactive rows so only
   the centred row carries the prose. Mobile keeps every panel open. */
.vhero__expand{
  margin-top:16px;
  max-height:600px;
  opacity:1;
  overflow:hidden;
  transition:max-height 360ms var(--ease-out), opacity 320ms var(--ease-out), margin-top 320ms var(--ease-out);
}
.vhero__long{
  /* Caption-weight copy — narrower column, quieter colour. Reads as
     supporting text beside the drawing instead of competing with it. */
  font-size:13px;font-weight:300;line-height:1.6;
  color:rgba(245,245,243,0.72);
  margin:0 0 14px;max-width:420px;
  letter-spacing:0.005em;
}
/* Sector-link CTA — small uppercase anchor inside the expand block.
   Looks like "VIEW SECTOR PROJECTS →" — drives the user to the matching
   sector landing page. */
.vhero__sector-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ai-blue-300);
  cursor:pointer;
  transition:color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.vhero__sector-link:hover{
  color:#FFFFFF;
  transform:translateX(2px);
}
.vhero__arrow{
  font-size:18px;color:rgba(245,245,243,0.3);padding:6px 10px 0;
  opacity:0;transform:translateX(-4px);
  cursor:pointer;display:inline-block;
  transition:all 280ms var(--ease-out);
}
.vhero__item.is-active .vhero__arrow,
.vhero__item:hover .vhero__arrow{opacity:1;transform:translateX(0);color:var(--ai-blue-300);}
.vhero__arrow:hover{
  transform:translateX(4px) !important;
  color:#FFFFFF !important;
}

/* Desktop only — collapse the expand block on inactive items so only
   the active vertical carries the prose. Below 900px the layout is a
   single column and every row should remain readable. */
@media (min-width: 901px){
  .vhero__item:not(.is-active) .vhero__expand{
    max-height:0;
    opacity:0;
    margin-top:0;
    pointer-events:none;
  }
}
.vhero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(245,245,243,0.12);padding-top:14px;
}
.vhero__stat{display:flex;flex-direction:column;gap:4px;padding-right:12px;}
.vhero__stat-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,243,0.5);font-weight:500;}
.vhero__stat-v{font-family:var(--font-display);font-weight:500;font-size:14px;color:#F5F5F3;letter-spacing:-0.005em;}
.vhero__arrow{
  font-size:18px;color:rgba(245,245,243,0.3);padding:6px 10px 0;
  opacity:0;transform:translateX(-4px);
  cursor:pointer;display:inline-block;
  transition:all 280ms var(--ease-out);
}
.vhero__item.is-active .vhero__arrow,
.vhero__item:hover .vhero__arrow{opacity:1;transform:translateX(0);color:var(--ai-blue-300);}
.vhero__arrow:hover{
  /* Arrow lifts + brightens further on direct hover so users see it's
     a discrete link target (routes to the sector page), distinct from
     the row's activate-and-scroll click. */
  transform:translateX(4px) !important;
  color:#FFFFFF !important;
}

/* RIGHT side — scrolls with the page; renders the SVG at its natural aspect
   (900×1240 viewBox). Both columns stretch to the same height via the grid. */
.vhero__right{
  position:relative;
  display:flex;align-items:stretch;justify-content:center;
}
.vt-svg{
  width:100%;max-width:1050px;height:auto;display:block;
  animation:vt-fade-in 1000ms var(--ease-out);
}
@keyframes vt-fade-in{
  from{opacity:0;transform:translateY(20px);}
  to  {opacity:1;transform:translateY(0);}
}

/* Drawing chrome */
.vt-corner{stroke:rgba(245,245,243,0.5);stroke-width:1;}
.vt-axis line{stroke:rgba(245,245,243,0.35);stroke-width:0.5;transition:all 480ms var(--ease-out);}
.vt-axis-l{
  font-family:var(--font-mono);font-size:10px;
  fill:rgba(245,245,243,0.5);text-anchor:end;font-weight:500;letter-spacing:.04em;
}

/* Block wrapper */
.vt-block{
  transition:transform 600ms var(--ease-out),opacity 480ms var(--ease-out);
  opacity:0.35;
}
.vt-block.is-active{opacity:1;}
.vt-block:hover{opacity:0.7;}
.vt-block.is-active:hover{opacity:1;}

/* Block ID badge */
.vt-block-id-line{stroke:rgba(245,245,243,0.4);stroke-width:0.75;}
.vt-block.is-active .vt-block-id-line{stroke:var(--ai-blue-300);stroke-width:1;}
.vt-block-id-num{
  font-family:'Inter',sans-serif;font-size:9px;font-weight:600;
  fill:rgba(245,245,243,0.5);letter-spacing:.12em;
}
.vt-block-id-lbl{
  font-family:'Inter',sans-serif;font-size:10px;font-weight:500;
  fill:rgba(245,245,243,0.75);letter-spacing:.16em;
}
.vt-block.is-active .vt-block-id-num,
.vt-block.is-active .vt-block-id-lbl{fill:#FFFFFF;}

/* ----- The 3D isometric faces ----- */
.vt-side{
  fill:rgba(13,27,42,0.92);
  stroke:rgba(245,245,243,0.35);
  stroke-width:0.6;
}
.vt-skin{
  fill:rgba(13,27,42,0.7);
  stroke:rgba(245,245,243,0.5);
  stroke-width:0.75;
}
.vt-top{
  fill:rgba(31,55,82,0.75);
  stroke:rgba(245,245,243,0.55);
  stroke-width:0.6;
}
.vt-floor-base{stroke:rgba(245,245,243,0.45);stroke-width:1;}

.vt-block.is-active .vt-side{fill:rgba(8,18,32,1);stroke:rgba(245,245,243,0.7);}
.vt-block.is-active .vt-skin{
  fill:rgba(0,80,144,0.10);
  stroke:#FFFFFF;stroke-width:1;
}
.vt-block.is-active .vt-top{
  fill:rgba(45,80,120,0.85);
  stroke:#FFFFFF;stroke-width:0.85;
}
.vt-block.is-active .vt-floor-base{stroke:#FFFFFF;stroke-width:1.4;}

/* ----- Per-floor patterns ----- */

/* DC — front louvers + vent unit */
.vt-louver{stroke:rgba(245,245,243,0.25);stroke-width:0.4;}
.vt-block.is-active .vt-louver{stroke:rgba(245,245,243,0.55);}
.vt-unit{fill:rgba(13,27,42,0.6);stroke:rgba(245,245,243,0.45);stroke-width:0.5;}
.vt-block.is-active .vt-unit{stroke:#FFFFFF;}
.vt-unit-l{stroke:rgba(245,245,243,0.3);stroke-width:0.4;}
.vt-block.is-active .vt-unit-l{stroke:rgba(245,245,243,0.6);}
.vt-led{fill:#5A95D0;opacity:0;}
.vt-block.is-active .vt-led{opacity:0.8;animation:vt-led 2.2s ease-in-out infinite;}
@keyframes vt-led{
  0%,30%,100%{opacity:0.2;}
  50%,55%{opacity:1;filter:drop-shadow(0 0 3px #5A95D0);}
}
/* Upright server cabinet rendering — inspired by Nscale's iso server farm */
.vt-cab-front{
  fill:rgba(13,27,42,0.78);
  stroke:rgba(245,245,243,0.35);
  stroke-width:0.35;
}
.vt-cab-side{
  fill:rgba(7,15,26,0.9);
  stroke:rgba(245,245,243,0.28);
  stroke-width:0.3;
}
.vt-cab-top{
  fill:rgba(31,55,82,0.85);
  stroke:rgba(245,245,243,0.4);
  stroke-width:0.3;
}
.vt-cab-u{stroke:rgba(245,245,243,0.22);stroke-width:0.25;}
.vt-cab-cable{stroke:rgba(245,245,243,0.3);stroke-width:0.45;stroke-linecap:round;}
.vt-rack-tray{stroke:rgba(245,245,243,0.3);stroke-width:0.4;}
.vt-block.is-active .vt-cab-front{stroke:#FFFFFF;stroke-width:0.55;fill:rgba(0,80,144,0.18);}
.vt-block.is-active .vt-cab-side{stroke:rgba(245,245,243,0.6);}
.vt-block.is-active .vt-cab-top{stroke:#FFFFFF;fill:rgba(45,85,130,0.95);}
.vt-block.is-active .vt-cab-u{stroke:rgba(245,245,243,0.55);}
.vt-block.is-active .vt-cab-cable{stroke:var(--ai-blue-300);stroke-width:0.6;}
.vt-block.is-active .vt-rack-tray{stroke:#FFFFFF;stroke-width:0.6;}

/* FARMA — sealed envelope + AHU */
.vt-seam{stroke:rgba(245,245,243,0.3);stroke-width:0.4;}
.vt-block.is-active .vt-seam{stroke:rgba(245,245,243,0.6);}
.vt-door{
  fill:rgba(13,27,42,0.5);
  stroke:rgba(245,245,243,0.45);
  stroke-width:0.5;
}
.vt-block.is-active .vt-door{stroke:#FFFFFF;fill:rgba(0,80,144,0.15);}
.vt-equip{fill:rgba(13,27,42,0.6);stroke:rgba(245,245,243,0.5);stroke-width:0.55;}
.vt-block.is-active .vt-equip{stroke:#FFFFFF;}
.vt-equip-line{stroke:rgba(245,245,243,0.35);stroke-width:0.4;}
.vt-vent{fill:rgba(13,27,42,0.7);stroke:rgba(245,245,243,0.45);stroke-width:0.4;}
/* Generic signage plate (DC equipment control panels) */
.vt-sign{fill:rgba(13,27,42,0.6);stroke:rgba(245,245,243,0.45);stroke-width:0.45;}
.vt-block.is-active .vt-sign{stroke:#FFFFFF;}

/* Manifold pipe (FARMA — connects stacks to AHU) */
.vt-pipe-thick{stroke:rgba(245,245,243,0.45);stroke-width:1.5;}
.vt-block.is-active .vt-pipe-thick{stroke:var(--ai-blue-300);}

/* Extraction stacks */
.vt-stack{fill:rgba(13,27,42,0.7);stroke:rgba(245,245,243,0.5);stroke-width:0.5;}
.vt-stack-cap{fill:rgba(31,55,82,0.85);stroke:rgba(245,245,243,0.55);stroke-width:0.5;}
.vt-block.is-active .vt-stack{stroke:#FFFFFF;}
.vt-block.is-active .vt-stack-cap{stroke:#FFFFFF;}
.vt-stack-puff{fill:rgba(245,245,243,0.0);}
.vt-block.is-active .vt-stack-puff{
  fill:rgba(90,149,208,0.6);
  animation:vt-puff 2.2s ease-out infinite;
}
@keyframes vt-puff{
  0%   {opacity:0;transform:translateY(0)   scale(0.6);}
  30%  {opacity:0.7;}
  100% {opacity:0;transform:translateY(-14px) scale(1.6);}
}
.vt-equip-lbl{
  font-family:'Inter',sans-serif;font-size:8px;font-weight:500;
  fill:rgba(245,245,243,0.55);letter-spacing:.16em;text-transform:uppercase;
}
.vt-equip-lbl-sm{
  font-family:'Inter',sans-serif;font-size:7px;font-weight:500;
  fill:rgba(245,245,243,0.75);letter-spacing:.12em;
}
.vt-equip-sm{
  font-family:var(--font-mono);font-size:8.5px;
  fill:rgba(245,245,243,0.55);
}
.vt-block.is-active .vt-equip-lbl,
.vt-block.is-active .vt-equip-lbl-sm,
.vt-block.is-active .vt-equip-sm{fill:#FFFFFF;}

/* Shared style for image-based isometric line drawings (DC, Farma, Auditorio).
   PNGs are pre-baked with light-blue lines on transparent — no filter needed. */
.vt-iso-drawing,
.vt-ten-drawing{
  opacity:0.55;
  transition:opacity 480ms var(--ease-out), filter 480ms var(--ease-out);
}
.vt-block.is-active .vt-iso-drawing,
.vt-block.is-active .vt-ten-drawing{
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(90,149,208,0.55));
}

/* FARMA — narrow viewing windows on the cleanroom envelope */
.vt-window{fill:rgba(120,170,210,0.06);stroke:none;}
.vt-block.is-active .vt-window{fill:rgba(120,170,210,0.14);}

/* FARMA — HEPA ceiling panels */
.vt-hepa-panel{fill:rgba(245,245,243,0.04);stroke:rgba(245,245,243,0.4);stroke-width:0.45;}
.vt-block.is-active .vt-hepa-panel{
  fill:rgba(120,170,210,0.18);stroke:#FFFFFF;
  animation:vt-hepa-panel 3.4s ease-in-out infinite;
}
@keyframes vt-hepa-panel{
  0%,100%{fill:rgba(120,170,210,0.10);}
  50%    {fill:rgba(120,170,210,0.28);}
}

/* Callouts */
.vt-callout{animation:vt-callout-in 460ms var(--ease-out) both;}
@keyframes vt-callout-in{
  from{opacity:0;transform:translateX(-6px);}
  to  {opacity:1;transform:translateX(0);}
}
.vt-callout-dot{fill:var(--ai-blue-300);stroke:#FFFFFF;stroke-width:0.4;}
.vt-callout-leader{stroke:rgba(245,245,243,0.55);stroke-width:0.55;}
.vt-callout-base{stroke:#FFFFFF;stroke-width:0.7;}
.vt-callout-text{
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;
  fill:#FFFFFF;letter-spacing:0;
}

/* Title block — outer wrapper holds the position (transitions when active
   drawing changes); inner .vt-title runs the one-shot fade-in. */
.vt-title-wrap{transition:transform 520ms var(--ease-out);}
.vt-title{animation:vt-callout-in 600ms var(--ease-out) both;animation-delay:200ms;}
.vt-title-box{fill:rgba(13,27,42,0.6);stroke:rgba(245,245,243,0.55);stroke-width:0.75;}
.vt-title line{stroke:rgba(245,245,243,0.5);stroke-width:0.5;}
.vt-title-h{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;fill:#FFFFFF;letter-spacing:.18em;}
.vt-title-k{font-family:'Inter',sans-serif;font-size:8px;font-weight:500;fill:rgba(245,245,243,0.45);letter-spacing:.12em;text-transform:uppercase;}
.vt-title-v{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:rgba(245,245,243,0.85);letter-spacing:.04em;}

/* Responsive */
@media (max-width: 1024px){.vhero__inner{gap:48px;}}
@media (max-width: 900px){
  .vhero__intro-wrap{padding:0 24px 48px;}
  .vhero__inner{
    grid-template-columns:1fr;gap:48px;padding:0 24px 64px;
  }
  .vhero__right{min-height:540px;order:-1;}
  .vt-svg{max-width:780px;}
  .vhero__title{font-size:30px;}
  /* Below 900px: drop absolute positioning, items flow naturally. Scroll
     listener is detached in the React effect at this breakpoint. */
  .vhero__list{display:flex;flex-direction:column;gap:24px;}
  .vhero__item{position:static;transform:none;opacity:1;}
  .vhero__item[data-pos="0"],
  .vhero__item[data-pos="1"],
  .vhero__item[data-pos="2"]{top:auto;}
}
/* Phones — the 900×1240 blueprint SVG renders fine but at this width every
   photo, callout and title-block detail collapses to a thumbnail strip; it's
   also the single biggest paint cost on the home page. The card content below
   already carries the same story in legible type, so we hide the SVG here
   and let the verticals stand on their content alone. */
@media (max-width: 640px){
  .vhero__right{display:none;}
  .vhero__inner{gap:32px;padding-bottom:48px;}
  .vhero__title{font-size:26px;}
  .vhero__sub{font-size:15px;}
  .vhero__label{font-size:20px;}
  .vhero__long{font-size:13px;}
  .vhero__item{grid-template-columns:36px 1fr 18px;gap:14px;padding:22px 0;border-top:1px solid rgba(245,245,243,0.08);}
  .vhero__item:first-child{border-top:0;}
  /* Per-row drawing comes online here. Centered above the label so the
     row reads as: drawing → name → tagline → copy → arrow. */
  .vhero__thumb{
    display:block;
    width:100%;
    max-width:clamp(220px, 70vw, 320px);
    height:auto;
    margin:0 auto 14px;
    opacity:.95;
  }
}
@media (prefers-reduced-motion: reduce){
  .vt-svg{animation:none;}
  .vt-led,.vt-hepa-panel,.vt-stack-puff,.vt-callout,.vt-title{animation:none;}
  .vt-block{transition:opacity 240ms ease;}
}

/* CTA under the 3-card home news grid (links to the full news page) */
.grid-3__cta{margin-top:var(--sp-7);display:flex;justify-content:center;}

/* =========================================================
   Talento page — narrative-driven, photo-led
   ========================================================= */

/* The talento hero uses the full team photo. The default page-hero overlay
   is heavy enough for typical site photography, but the group photo is busy
   — we lift the overlay a touch so the hero copy stays legible. */
.page-hero--people{
  /* darken slightly more than the default page-hero gradient */
  background-color:#0a1623;
}
.page-hero--people .page-hero__ov{
  background:linear-gradient(180deg, rgba(13,27,42,.35) 0%, rgba(13,27,42,.85) 100%);
}

/* =========================================================
   Careers page (PageTalento) — full deep-navy treatment
   ========================================================= */
/* The whole page wears the navy treatment so it reads as one
   continuous narrative: banner → journey → game → find spot →
   positions → CTA → vida-CTA. Section variants used here override
   their light/alt backgrounds; .section--accent (the spontaneous
   candidacy band) keeps brand blue. */
[data-screen-label="talento"]{
  --bg:#0a1623;
  --bg-alt:#0a1623;
  --fg:var(--fg-on-dark);
  --fg-mid:var(--fg-on-dark-mid);
  background:#0a1623;
}
/* Positions section flipped to LIGHT — long accordion lists scan
   far better with dark text on a light bg than the other way round.
   Creates a navy → light → navy sandwich between the game above and
   the vida-CTA below, which gives the list its own visual chapter.
   We RESET --fg/--fg-mid back to their light-mode values inside this
   section because the page-level data-screen-label="talento" block
   reassigns them to fg-on-dark for the rest of /talento; without
   the reset, every var(--fg) here would still resolve to the dark
   theme's white. */
.talento-positions{
  background:#F5F5F3;
  --fg:#0D1B2A;
  --fg-mid:#5A6573;
  color:var(--fg);
}
/* Title now dark + bold (overrides section__title--light if React
   still applies it). */
.talento-positions__title{
  font-weight:700;
  color:var(--fg) !important;
  margin:0 0 14px;
}
.talento-positions__lead{
  color:var(--fg-mid);
  max-width:60ch;
  margin:6px 0 32px;
}
.talento-positions__lead--empty{
  color:var(--fg);
  font-size:20px;
  font-weight:300;
  max-width:60ch;
  margin:6px 0 0;
}
/* Accordion overrides — match the light treatment. Hairlines use
   the standard --ai-hairline, the body copy uses the mid token. */
.talento-positions .acc__item{border-color:var(--ai-hairline);}
.talento-positions .acc__title{color:var(--fg);}
.talento-positions .acc__dept{color:var(--fg-mid);}
.talento-positions .acc__pill{background:rgba(13,27,42,0.06);color:var(--fg);}
.talento-positions .acc__icon{color:var(--fg-mid);}
.talento-positions .acc__head:hover .acc__icon,
.talento-positions .acc__item.is-open .acc__icon{color:var(--fg);}
.talento-positions .acc__body p{color:var(--fg-mid);}
.talento-positions .acc__link{color:var(--reto-accent);}
.talento-cta,
.talento-vidacta{background:#0a1623;}
.talento-vidacta__inner,
.talento-find__inner{
  max-width:780px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.talento-find__sub,
.talento-vidacta__sub{
  color:rgba(245,245,243,0.78);
  max-width:680px;margin:0;
}
.talento-vidacta{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:var(--sp-7);
}

/* =========================================================
   Journey path — straight scroll-driven SVG between banner & game
   ========================================================= */
/* Straight vertical line drawn dead-centre. Stops alternate
   left/right of the line for the 4 milestones; start + end labels
   are centred ABOVE/BELOW their dots (NOT around them) so the line
   never cuts through the text. Scroll progress drives the
   stroke-dashoffset (line draws in) and per-stop "passed" state
   (text fades up from 0.42 → 1, dot lights up). */
.journey{
  position:relative;
  background:#0a1623;
  padding:var(--sp-9) 0 var(--sp-9);
  overflow:hidden;
}
.journey__inner{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:0 24px;
}
/* The SVG carries the line. Absolute-positioned dead-centre, full
   height of the section. Width is small (just the line). */
.journey__svg{
  position:absolute;
  left:50%;top:0;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  pointer-events:none;
  /* preserveAspectRatio="none" on the element lets the line stretch
     to whatever height the section ends up being. */
}
.journey__track{
  stroke:rgba(255,255,255,0.10);
  stroke-width:1;
}
.journey__line{
  stroke:var(--ai-blue-300);
  stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(0,80,144,0.4));
  transition:stroke-dashoffset 200ms linear;
}
.journey__stops{
  list-style:none;margin:0;padding:0;
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  gap:0;
}
.journey__stop{
  position:relative;
  min-height:180px;
  display:flex;align-items:center;justify-content:center;
}
/* Dot lane — a narrow centred column that owns the dot. Keeps the
   dot dead on the line regardless of what the content next to it
   does, and ensures the dot never lands inside a text block. */
.journey__dot-wrap{
  position:absolute;
  left:50%;top:50%;
  width:18px;height:18px;
  transform:translate(-50%, -50%);
  z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.journey__dot{
  width:12px;height:12px;border-radius:50%;
  /* Match the page bg so the dot looks like a notch in the line,
     not a circle drawn on top. */
  background:#0a1623;
  border:1.5px solid rgba(255,255,255,0.3);
  transition:all 380ms var(--ease-out);
}
.journey__stop.is-passed .journey__dot{
  background:var(--ai-blue-300);
  border-color:#FFFFFF;
  box-shadow:0 0 16px rgba(0,80,144,0.7);
}
/* Milestone content — left or right column, offset from the centre
   line so the line never touches the text. */
.journey__stop--milestone .journey__content{
  width:42%;
  padding:0 36px;
  opacity:0.42;
  transition:opacity 480ms var(--ease-out);
}
.journey__stop--milestone.is-passed .journey__content{opacity:1;}
.journey__stop--milestone.is-left .journey__content{margin-right:auto;text-align:right;}
.journey__stop--milestone.is-right .journey__content{margin-left:auto;text-align:left;}
.journey__tag{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  display:block;margin-bottom:8px;
}
.journey__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.2;letter-spacing:-0.01em;
  color:#FFFFFF;
}
/* Start + end labels — no dot. The title sits dead-centred on the
   line and gets a page-bg painted around it (via a wide horizontal
   padding + matching background) so the SVG line behind visually
   terminates at the edge of the text. Net effect: the line appears
   to emerge from the centre of "Your journey at Aguilera" and to
   dissolve into "Your journey begins with a challenge". */
.journey__stop--start,
.journey__stop--end{
  min-height:200px;
}
.journey__stop--start .journey__content,
.journey__stop--end .journey__content{
  width:auto;margin:0 auto;text-align:center;
  padding:8px 24px;
  max-width:780px;
  opacity:0.55;
  transition:opacity 480ms var(--ease-out);
  position:relative;z-index:2;
}
.journey__stop--start.is-passed .journey__content,
.journey__stop--end.is-passed .journey__content{opacity:1;}
.journey__stop--start .journey__title,
.journey__stop--end .journey__title{
  font-size:clamp(28px, 3.6vw, 48px);
  letter-spacing:-0.02em;
  font-weight:600;
}

@media (max-width: 700px){
  /* On phones: line tucked to the left edge, stops left-aligned in a
     single column. Start/end labels still centre on the line column
     but their text flows to the right. */
  .journey__svg{left:20px;transform:none;width:2px;}
  .journey__dot-wrap{left:20px;}
  .journey__stop{min-height:160px;}
  .journey__stop--start,
  .journey__stop--end{min-height:200px;}
  .journey__stop--milestone .journey__content,
  .journey__stop--milestone.is-left .journey__content,
  .journey__stop--milestone.is-right .journey__content{
    width:100%;margin:0;text-align:left;padding:0 12px 0 48px;
  }
  .journey__stop--start .journey__content,
  .journey__stop--end .journey__content{
    text-align:left;padding:8px 12px 8px 36px;margin:0;
  }
  .journey__title{font-size:18px;}
  .journey__stop--start .journey__title,
  .journey__stop--end .journey__title{font-size:24px;}
}

/* =========================================================
   El Reto Aguilera — recruiting game embedded on PageTalento
   ========================================================= */
/* Iframe is placed edge-to-edge immediately after the banner — no
   container, no padding, no intro panel, no rounded corners. The
   page reads as: banner → game → manifesto → pillars → positions.
   Visually it looks like the game IS the page; technically it's an
   iframe so the two app shells stay crash- and CSS-isolated.
   The rotate overlay paints when a phone is in portrait mode (the
   game UI is too dense for portrait); CSS-only via @media query,
   no JS listener needed. */
/* Intro panel that sits ABOVE the iframe. Same deep-navy as the
   iframe section so the two read as one continuous block of the
   careers page narrative. Bottom padding stripped so the intro flows
   seamlessly into the iframe below without a gap. */
/* .talento-reto-intro removed — the journey path's closing line
   ("Empieza con un reto") now hands off to the game directly, so the
   intro panel was redundant. */
.talento-reto{
  position:relative;
  background:#0a1623;
  /* No padding — the game stage carries its own internal padding and
     the next section (.talento-find) sets its own top padding, so an
     extra strip here just reads as a mismatched "faldón" below the
     boot: the boot has radial glows + grid, the section padding is
     flat #0a1623, and the eye reads the optical difference as two
     different navies even though the hex is identical. Flush join. */
  padding:0;
}
/* Hide the in-game `.game-embed__bar` (logo + lang toggle) since the
   main site already has both in its own nav. Scoped to the .reto-scope
   wrapper so we don't accidentally hit anything else. */
.reto-scope .game-embed__bar{display:none;}
.reto-scope .game-embed{padding-top:0;padding-bottom:0;}
/* Rotate prompt — hidden by default; the orientation media query
   below switches it on when the user is on a portrait phone. Sits
   above the iframe (z-index 5) so users see it instead of the
   game's loading screen. */
.talento-reto__rotate{display:none;}
@media (orientation: portrait) and (max-width: 960px),
       (max-width: 600px) and (max-height: 720px){
  .talento-reto__rotate{
    display:flex;
    position:absolute;inset:0;z-index:5;
    background:
      radial-gradient(circle at 30% 20%, rgba(0,80,144,0.18), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(0,80,144,0.10), transparent 55%),
      #0a1623;
    align-items:center;justify-content:center;
    padding:32px;
    color:#F5F5F3;
  }
  .talento-reto__rotate-inner{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:18px;max-width:320px;
  }
  .talento-reto__rotate-ic{
    color:#5A95D0;
    animation:talento-reto-rotate 1.8s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  .talento-reto__rotate-title{
    font-family:var(--font-display);font-weight:500;
    font-size:22px;line-height:1.2;letter-spacing:-0.01em;
  }
  .talento-reto__rotate-body{
    font-family:var(--font-sans);font-size:13px;line-height:1.5;
    color:rgba(245,245,243,0.7);
  }
  /* When the rotate overlay shows, the iframe shouldn't take user
     interaction — pointer-events on the parent + visibility on the
     iframe so it stops loading game JS until the device rotates. */
  .talento-reto__rotate ~ .talento-reto__frame{
    pointer-events:none;
  }
}
@keyframes talento-reto-rotate{
  0%, 100% { transform:rotate(0deg); }
  45%      { transform:rotate(-25deg); }
  55%      { transform:rotate(-25deg); }
}
@media (prefers-reduced-motion: reduce){
  .talento-reto__rotate-ic{
    animation:talento-reto-fade 2s ease-in-out infinite;
  }
  @keyframes talento-reto-fade{
    0%, 100% { opacity:1; }
    50%      { opacity:.6; }
  }
}

/* Manifesto — dark band, big centred pullquote, small attribution */
.section--manifesto{padding:var(--sp-9) 0;}
.manifesto{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1020px;}
.manifesto__quote{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-quote);line-height:1.18;letter-spacing:var(--tr-display);
  color:#F5F5F3;margin:var(--sp-6) 0 var(--sp-5);
  text-wrap:balance;
}
.manifesto__caption{
  font-family:var(--font-mono);font-size:13px;
  color:rgba(245,245,243,.55);letter-spacing:.04em;margin:0;
}

/* Three moments — three-up photo grid with a heading + short caption each */
.moments{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-7);
  margin-top:var(--sp-6);
}
.moments__item{display:flex;flex-direction:column;gap:14px;}
.moments__ph{
  aspect-ratio:4/3;overflow:hidden;background:var(--ai-hairline);
}
.moments__ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--ease-out);
}
.moments__item:hover .moments__ph img{transform:scale(1.04);}
.moments__t{
  font-family:var(--font-display);font-weight:500;font-size:20px;
  letter-spacing:-0.005em;color:var(--fg);margin:6px 0 0;
}
.moments__p{
  font-size:15px;line-height:1.55;color:var(--fg-mid);
  margin:0;max-width:42ch;
}

/* Mentorship — full-bleed photo on the left, copy block on the right,
   same structural pattern as the home Vision memo. */
.section--mentor{padding:0;overflow:hidden;}
.mentor{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;align-items:stretch;min-height:560px;
}
.mentor__ph{position:relative;overflow:hidden;margin:0;padding:0;}
.mentor__ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1200ms var(--ease-out);
}
.mentor__ph:hover img{transform:scale(1.03);}
.mentor__col{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-9) max(24px, calc((100vw - var(--container)) / 2 + 32px))
          var(--sp-9) var(--sp-8);
}

/* Beyond — two-photo strip with captions */
.beyond{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-7);
  margin-top:var(--sp-6);
}

/* Centred CTA wrapped inside the Beyond section (replaces the
   former dark "Listo para el reto" band that sat as its own
   section). Sits below the photo strip with breathing room,
   centre-aligned column, hairline divider above to separate it
   visually from the captions. */
.vida-cta-inline{
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--ai-hairline);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}
.vida-cta-inline__title{max-width:22ch;margin:0;}
.beyond__item{display:flex;flex-direction:column;gap:12px;}
.beyond__ph{
  aspect-ratio:3/2;overflow:hidden;background:var(--ai-hairline);
}
.beyond__ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--ease-out);
}
.beyond__item:hover .beyond__ph img{transform:scale(1.04);}
.beyond__cap{
  font-size:14px;color:var(--fg-mid);line-height:1.5;margin:0;
  font-style:italic;
}

@media (max-width:900px){
  .moments{grid-template-columns:1fr;gap:var(--sp-6);}
  .mentor{grid-template-columns:1fr;min-height:0;}
  .mentor__ph{min-height:280px;}
  .mentor__col{padding:var(--sp-7) 24px;}
  .beyond{grid-template-columns:1fr;gap:var(--sp-6);}
}

/* =========================================================
   Client trust strip — desaturated logos in a left→right marquee.
   Hover any logo to restore colour; hover the strip to pause.
   ========================================================= */
.client-strip{
  background:var(--bg-alt);
  padding:var(--sp-7) 0 var(--sp-8);
  overflow:hidden;
}
.client-strip__head{margin-bottom:var(--sp-6);}

/* Soft fade-out at both edges so logos enter / exit cleanly instead of
   getting clipped against the section background. */
.client-strip__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.client-strip__track{
  display:flex;align-items:center;gap:80px;
  width:max-content;
  animation:client-marquee 60s linear infinite;
}

.client-strip__item{
  flex-shrink:0;
  /* Per-logo scale is driven by `--logo-scale` (set inline from JS when
     a logo entry has `scale: N`). Defaults to 1 — the original 54×140 box. */
  height:calc(54px * var(--logo-scale, 1));
  min-width:calc(140px * var(--logo-scale, 1));
  display:flex;align-items:center;justify-content:center;
  padding:0 8px;
}
.client-strip__item img{
  max-width:calc(160px * var(--logo-scale, 1));
  max-height:calc(54px * var(--logo-scale, 1));
  width:auto;height:auto;display:block;
  filter:grayscale(1) contrast(.85) opacity(.5);
  /* multiply blends any white background (JPG/WebP logos) into the off-white
     page so the logo sits on the page without a visible rectangle around it. */
  mix-blend-mode:multiply;
  transition:filter 280ms var(--ease-out);
}
.client-strip__item:hover img{
  filter:grayscale(0) contrast(1) opacity(1);
}

/* Placeholder used until a real logo file lands. Renders the client
   name in the brand display face, treated like a wordmark. Gets the
   same grey → colour treatment via colour transition. */
.client-strip__placeholder{
  font-family:var(--font-display);
  font-weight:500;font-size:18px;
  letter-spacing:.04em;text-transform:uppercase;
  color:rgba(17,17,17,.42);
  white-space:nowrap;
  transition:color 280ms var(--ease-out);
}
.client-strip__item:hover .client-strip__placeholder{
  color:var(--accent);
}

@keyframes client-marquee{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

@media (prefers-reduced-motion: reduce){
  .client-strip__track{animation:none;}
}
@media (max-width:700px){
  .client-strip__track{gap:48px;animation-duration:42s;}
  .client-strip__item{height:42px;min-width:110px;}
  .client-strip__item img{max-width:120px;max-height:42px;}
  .client-strip__placeholder{font-size:15px;}
}

/* =========================================================
   Article (individual news issue)
   ========================================================= */
.article{padding-top:var(--nav-h);background:#fff;}

/* Hero: full-bleed photo, dark gradient overlay, meta + title + back link */
.article__hero{
  position:relative;
  min-height:480px;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  padding:var(--sp-9) 0 var(--sp-8);
  color:#F5F5F3;
}
.article__hero-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,27,42,.35) 0%, rgba(13,27,42,.85) 100%);
}
.article__hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;}
.article__back{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:rgba(245,245,243,.7);cursor:pointer;
  transition:color 200ms var(--ease-out);
  text-decoration:none;
}
.article__back:hover{color:#FFFFFF;}
.article__meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:rgba(245,245,243,.75);
}
.article__meta-n{color:var(--ai-blue-300);font-weight:600;}
.article__meta-tag{
  text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;
  color:var(--ai-blue-300);
  padding-left:14px;border-left:1px solid rgba(245,245,243,.25);
}
.article__meta-read{
  margin-left:auto;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:rgba(245,245,243,.5);
}
.article__title{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-display);line-height:1.05;letter-spacing:var(--tr-display);
  color:#F5F5F3;margin:0;max-width:920px;text-wrap:balance;
}

/* Body — narrow readable column, blocks rendered by ArticleBlock switch */
.article__body{
  max-width:760px;
  padding:var(--sp-9) var(--gutter);
  display:flex;flex-direction:column;
}
.article-block{margin:0;}
.article-block--lede{
  font-size:var(--fs-body-lg);
  line-height:1.6;font-weight:400;
  color:var(--fg);
  margin-bottom:var(--sp-6);
}
.article-block--p{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--fg);
  margin-bottom:var(--sp-5);
}
.article-block--h2{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tr-display);
  color:var(--fg);
  margin:var(--sp-7) 0 var(--sp-4);
  text-wrap:balance;
}
.article-block--h3{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);line-height:1.3;
  color:var(--fg);
  margin:var(--sp-6) 0 var(--sp-3);
}
.article-block--image{
  margin:var(--sp-7) calc(-1 * var(--sp-7)) var(--sp-7);
  display:flex;flex-direction:column;gap:10px;
}
.article-block--image img{
  width:100%;height:auto;display:block;
}
.article-block--image figcaption{
  font-size:var(--fs-body-sm);color:var(--fg-mid);
  font-style:italic;line-height:1.5;
  padding-left:4px;
}
.article-block--quote{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-quote);line-height:1.2;letter-spacing:var(--tr-display);
  color:var(--fg);
  margin:var(--sp-8) 0;padding-left:var(--sp-5);
  border-left:var(--bd-accent-left);
  text-wrap:pretty;
}

@media (max-width:700px){
  .article__hero{min-height:360px;padding:var(--sp-8) 0 var(--sp-6);}
  .article__title{font-size:32px;}
  .article-block--image{margin-left:0;margin-right:0;}
  .article-block--h2{margin-top:var(--sp-6);}
}

/* =========================================================
   News page — articles list + editorial note
   ========================================================= */
.newsletter{max-width:900px;margin:0 auto;}

.newsletter__archive{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  border-top:1px solid var(--ai-hairline);
}
.newsletter__issue{
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--ai-hairline);
  display:grid;grid-template-columns:220px 1fr;gap:28px;
  align-items:start;
}

/* Thumbnail — sharp 4:3 crop, mild zoom on hover */
.newsletter__issue-thumb{
  display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--ai-hairline);cursor:pointer;
}
.newsletter__issue-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--ease-out);
}
.newsletter__issue:hover .newsletter__issue-thumb img{transform:scale(1.04);}

.newsletter__issue-body{
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.newsletter__issue-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:.06em;color:var(--fg-mid);
}
.newsletter__issue-n{color:var(--accent);font-weight:600;}
.newsletter__issue-tag{
  text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;font-weight:600;color:var(--accent);
  padding-left:14px;border-left:1px solid var(--ai-hairline);
}
.newsletter__issue-read{
  margin-left:auto;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--ai-text-muted);
}
.newsletter__issue-title{
  font-family:var(--font-display);font-weight:500;font-size:24px;
  letter-spacing:-0.005em;line-height:1.25;
  color:var(--fg);text-wrap:balance;
  cursor:pointer;display:inline-flex;align-items:baseline;gap:12px;
  transition:color 200ms var(--ease-out);
}
.newsletter__issue-title:hover{color:var(--accent);}
.newsletter__issue-title .arr{
  font-size:18px;opacity:0;transform:translateX(-4px);
  transition:all 220ms var(--ease-out);color:var(--accent);
}
.newsletter__issue:hover .newsletter__issue-title .arr{
  opacity:1;transform:translateX(0);
}
.newsletter__issue-excerpt{
  font-size:14px;line-height:1.6;color:var(--fg-mid);
  margin:0;max-width:60ch;
}

@media (max-width:700px){
  .newsletter__issue{grid-template-columns:120px 1fr;gap:18px;}
  .newsletter__issue-title{font-size:19px;}
  .newsletter__issue-excerpt{display:none;}
}

/* =========================================================
   Project-detail page (PageProject)
   ========================================================= */
.pdetail__hero{
  position:relative;
  min-height:460px;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  padding:var(--sp-9) 0 var(--sp-8);
  color:#F5F5F3;
}
.pdetail__hero-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,27,42,.30) 0%, rgba(13,27,42,.88) 100%);
}
.pdetail__hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;}
.back-link--light{color:rgba(245,245,243,.78);border-bottom-color:rgba(245,245,243,.4);}
.back-link--light:hover{color:#FFFFFF;}
.pdetail__cat{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent-on-dark);
}
.pdetail__title{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-display);line-height:1.05;letter-spacing:-0.01em;
  margin:0;max-width:16ch;text-wrap:balance;
}
.pdetail__loc{
  font-family:var(--font-sans);font-weight:300;font-size:17px;
  color:rgba(245,245,243,.74);margin:0;
}

/* Facts — definition grid */
.pdetail__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:0;background:var(--ai-hairline);
  border:1px solid var(--ai-hairline);
}
.pdetail__fact{background:var(--bg);padding:var(--sp-5) var(--sp-5);}
.pdetail__fact-k{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--fg-mid);margin:0 0 8px;
}
.pdetail__fact-v{
  font-family:var(--font-display-book);font-size:21px;line-height:1.25;
  color:var(--fg);margin:0;
}
@media (max-width:900px){.pdetail__facts{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pdetail__facts{grid-template-columns:1fr;}}

/* Scope */
.pdetail__scope{max-width:780px;}
.pdetail__scope-text{
  font-family:var(--font-display-book);font-weight:300;
  font-size:clamp(22px,2.2vw,30px);line-height:1.4;
  color:var(--fg-on-dark);margin:18px 0 0;text-wrap:pretty;
}

/* CTA */
.pdetail__cta{max-width:680px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}

@media (max-width:700px){
  .pdetail__hero{min-height:340px;padding:var(--sp-8) 0 var(--sp-6);}
  .pdetail__title{font-size:34px;}
}

/* ── Sector pages: unified deep-navy treatment ───────────────────────────
   Every section on a sector page sits on the same #0a1623 backdrop. We
   redefine the colour-token swatches inside the data-screen-label="sector"
   wrapper so existing section variants (light / alt / dark) all inherit
   the navy bg and on-dark text without touching the markup of each
   sector child. --accent stays as the brand blue so CTAs/links still
   read as interactive. */
[data-screen-label="sector"]{
  --bg:#0a1623;
  --bg-alt:#0a1623;
  --bg-dark:#0a1623;
  --fg:var(--fg-on-dark);
  --fg-mid:var(--fg-on-dark-mid);
  background:#0a1623;
}
/* The accent CTA section uses var(--accent) directly for its bg — flip
   it to navy too so there's no remaining island of a different colour. */
[data-screen-label="sector"] .section--accent{
  background:#0a1623;
}
/* Section titles that opted out of the token system with a hard light
   colour are already fine. The `.section__title` default reads
   var(--fg), which now resolves to on-dark — automatic. */

/* ── Legal pages (cookies, privacidad, aviso legal) ────────────────────
   Long-form policy pages rendered by PageLegal. Light editorial layout
   with a constrained reading column, generous line-height, and a small
   "back" anchor at the top. Block types — h2/h3, paragraphs, lists,
   tables — share a coherent typographic scale. */
.legal{
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  padding-top:calc(var(--nav-h) + var(--sp-6));
  padding-bottom:var(--sp-9);
}
.legal__inner{
  max-width:780px;
  margin:0 auto;
}
.legal__back{
  display:inline-block;
  margin-bottom:var(--sp-5);
  font-size:13px;letter-spacing:.04em;
  color:var(--fg-mid);
  cursor:pointer;
  transition:color 180ms var(--ease-out);
}
.legal__back:hover{color:var(--accent);}
.legal__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(32px, 4vw, 56px);
  line-height:1.05;letter-spacing:-0.02em;
  margin:8px 0 var(--sp-6);
  color:var(--fg);
}
.legal__body{
  font-size:15px;line-height:1.7;
  color:var(--fg);
}
.legal__h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px, 2.2vw, 28px);
  line-height:1.2;letter-spacing:-0.01em;
  margin:var(--sp-7) 0 var(--sp-3);
  color:var(--fg);
}
.legal__h3{
  font-family:var(--font-sans);font-weight:600;
  font-size:16px;
  letter-spacing:0;
  margin:var(--sp-5) 0 var(--sp-2);
  color:var(--fg);
}
.legal__p{
  margin:0 0 14px;
}
.legal__p a,
.legal__ul li a{
  color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.legal__p a:hover,
.legal__ul li a:hover{color:var(--accent-hover);}
.legal__ul{
  margin:0 0 16px;
  padding-left:22px;
}
.legal__ul li{
  margin-bottom:6px;
  line-height:1.6;
}
.legal__table-wrap{
  overflow-x:auto;
  margin:var(--sp-3) 0 var(--sp-5);
  border:1px solid rgba(15,30,50,.1);
  border-radius:8px;
}
.legal__table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.legal__table th,
.legal__table td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid rgba(15,30,50,.08);
}
.legal__table th{
  background:var(--bg-alt);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--fg-mid);
}
.legal__table tr:last-child td{border-bottom:0;}

@media (max-width:600px){
  .legal{padding-top:calc(var(--nav-h) + var(--sp-5));}
  .legal__body{font-size:14px;}
}

/* Footer legal-link cluster — tiny clickable anchors that route to the
   policy pages. Inherits the footer's existing typography. */
.ai-footer__legal-links{
  display:inline;
}
.ai-footer__legal-link{
  cursor:pointer;
  transition:color 180ms var(--ease-out);
}
.ai-footer__legal-link:hover{color:#FFFFFF;}
.ai-footer__legal-sep{
  opacity:.4;
}
/* Cookie bar's "Política de Cookies" inline link — uses the bar's own
   underline-on-hover treatment. */
.cookie__link{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}