/* ============================================================
   Importx — global styles
   Tokens and scales per website-plan.md §3.
   ============================================================ */

:root {
  --navy: #1E4877;
  --sky: #4584B4;
  --sky-soft: #A7C9E4;
  --sky-tint: #EDF4FA;      /* section tint derived from --sky-soft */
  --ink: #12263A;
  --white: #FFFFFF;
  --gray: #B4B4B4;
  --accent: #2E5E85;        /* stone blue — interactive / CTA color (no orange) */
  --accent-ink: #1E4877;    /* navy — accent hover / pressed */
  --footer-navy: #193C63;   /* navy darkened a step so the footer separates from the CTA band */

  --font-head: 'Overpass', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 7rem);
  --header-h: 72px;
}

/* ---------- Reset-ish base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: #1e4877; /* matches the sky gradient top so overscroll blends */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: inherit;
}

p { margin: 0 0 1rem; }

a { color: var(--sky); }

ul { margin: 0; padding: 0; list-style: none; }

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.9rem;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--navy);
}

.section-intro {
  max-width: 44rem;
  font-size: 1.125rem;
  color: #3B5166;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.9rem 1.6rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 72, 119, 0.35);
}

.btn-ghost {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.btn-ghost-navy {
  border-color: var(--navy);
  color: var(--navy);
}

.btn-ghost-navy:hover { background: rgba(30, 72, 119, 0.08); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.9375rem; }

/* ---------- Sky layer (fixed, behind everything) ---------- */

#sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Same gradient the WebGL scene painted onto its container:
     #1e4877 → #4584b4 at 50%, flat below. Also the no-WebGL sky. */
  background: linear-gradient(180deg, #1e4877 0%, #4584b4 50%, #4584b4 100%);
}

/* No scrim/overlay on the sky — client direction: never darken the cloud
   scene. Hero text legibility comes from text-shadow on the glyphs only. */

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* The wordmark ships in two builds and the header crossfades between them so the
   right one is always over the right background:
     .logo-blue — Ink letters + blue X, for white / light backgrounds
     .logo-mono — white letters + grey X, for the navy backgrounds (a blue X on
                  blue would disappear, so the blue build never sits on navy)
   Both builds share one viewBox and identical paths, so stacking them registers
   exactly and the crossfade reads as the fills simply recoloring. */
.logo-link { position: relative; display: inline-flex; align-items: center; }

.logo-link img { height: 24px; width: auto; transition: opacity 0.25s ease; }

/* .logo-mono stays in flow and sizes the box; .logo-blue rides on top of it. */
.logo-link .logo-blue { position: absolute; top: 0; left: 0; }

/* Default: the header starts transparent over the blue hero / navy masthead. */
.logo-mono { opacity: 1; }
.logo-blue { opacity: 0; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a:not(.btn) {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  /* Pure solid white over the hero sky — per client direction. */
  color: rgb(255, 255, 255);
  transition: opacity 0.2s ease, color 0.25s ease;
}

/* Animated underline on the primary nav links. Scoped to direct children (>)
   so the ES/EN language switch — grandchildren inside .lang-switch, with its
   own active-language underline — is left untouched. The bar grows in from the
   left on hover/focus and retracts to the right on leave, tracking currentColor
   so it stays white over the hero and ink on the solid/light header. */
.site-nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s ease;
}

.site-nav > a:not(.btn):hover::after,
.site-nav > a:not(.btn):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
  color: rgb(255, 255, 255);
  transition: color 0.25s ease;
}

.nav-toggle .bar {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle .bar + .bar { margin-top: 5px; }

/* Solid state: after scrolling near the sheet, and always on stub pages */
.site-header.scrolled,
.site-header.solid {
  background: var(--white);
  box-shadow: 0 2px 18px rgba(18, 38, 58, 0.10);
}

/* Solid-navy bar (Servicios): the color of the index sky's top (#1E4877).
   Its alpha is scroll-driven by main.js via --bar-alpha — transparent while
   the container scene fills the view, easing to solid as the scene scrolls
   out (background-color transition makes the fade gentle). Defaults to solid
   if JS never runs. Keeps the home page's white logo/links/CTA — main.js holds
   this header out of the .on-light / .scrolled states so white persists. */
.site-header.site-header--solid {
  background: rgba(30, 72, 119, var(--bar-alpha, 1));
}

/* Hovering (or keyboard-focusing into) the bar fades the navy fully in even
   over the scene, so the nav is solid and legible while it's being used; the
   background-color transition carries the fade in and back out. */
.site-header.site-header--solid:hover,
.site-header.site-header--solid:focus-within {
  background-color: rgba(30, 72, 119, 1);
}

/* Servicios deliberately has NO logo crossfade: it keeps the monochrome build
   the whole way down. Its bar does fade transparent to navy, but main.js holds
   this header out of the .scrolled / .on-light states so the links and CTA stay
   white throughout — and the wordmark has to match the bar's own content scheme,
   not the surface behind it. Tying the logo to --bar-alpha here would put Ink
   letters next to white links at the top of the page. The default .logo-mono /
   .logo-blue opacities above already give the right result, so there is nothing
   to add. */

/* Over a light masthead (.on-light, set by main.js) the header stays
   transparent but its content is navy/ink from the very start. */
.site-header.scrolled .logo-mono,
.site-header.solid .logo-mono,
.site-header.on-light .logo-mono { opacity: 0; }

.site-header.scrolled .logo-blue,
.site-header.solid .logo-blue,
.site-header.on-light .logo-blue { opacity: 1; }

.site-header.scrolled .site-nav a:not(.btn),
.site-header.solid .site-nav a:not(.btn),
.site-header.on-light .site-nav a:not(.btn) { color: var(--ink); }

.site-header.scrolled .nav-toggle,
.site-header.solid .nav-toggle,
.site-header.on-light .nav-toggle { color: var(--ink); }

/* Header CTA: pure solid white pill with navy text (was accent blue). */
.site-nav .btn-primary {
  background: var(--white);
  color: var(--navy);
}

.site-nav .btn-primary:hover {
  background: var(--sky-tint);
  color: var(--navy);
  box-shadow: none;
  transform: none;
}

/* On the solid white header (scrolled / stub pages) a white fill would
   blend in — outline it in navy so it stays a defined button. */
.site-header.scrolled .site-nav .btn-primary,
.site-header.solid .site-nav .btn-primary,
.site-header.on-light .site-nav .btn-primary {
  border-color: var(--navy);
}

/* Language switch (ES / EN). The links are .site-nav a:not(.btn), so they
   inherit the nav's color in every header state (white over the hero, ink on
   the solid/light bar) with no extra rules. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.site-header .site-nav .lang-switch a {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.lang-switch a:not([aria-current]) { opacity: 0.6; }
.lang-switch a:not([aria-current]):hover { opacity: 1; }

.lang-switch a[aria-current] {
  cursor: default;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-switch .sep { opacity: 0.4; font-weight: 400; }

/* The "/" separator is a <span>, so it doesn't inherit the nav's
   a:not(.btn) color rules. Color the whole switch so the separator tracks
   every header state (white over the hero, ink on the solid/light bar). */
.site-nav .lang-switch { color: rgb(255, 255, 255); }

.site-header.scrolled .site-nav .lang-switch,
.site-header.solid .site-nav .lang-switch,
.site-header.on-light .site-nav .lang-switch { color: var(--ink); }

/* Mobile menu (≤1024px) */
@media (max-width: 1024px) {

  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1; /* under the header row so logo + toggle stay visible */
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    background: var(--navy);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .site-nav a:not(.btn) { font-size: 1.35rem; }

  /* On the navy overlay the links are always white, even when the
     header behind is in its solid state. */
  .site-header.scrolled .site-nav a:not(.btn),
  .site-header.solid .site-nav a:not(.btn),
  .site-header.on-light .site-nav a:not(.btn),
  .site-header.scrolled .site-nav .lang-switch,
  .site-header.solid .site-nav .lang-switch,
  .site-header.on-light .site-nav .lang-switch { color: rgb(255, 255, 255); }

  body.menu-open { overflow: hidden; }

  body.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
  }

  body.menu-open .nav-toggle .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.menu-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* The overlay is navy: keep the header row's icons white while open. */
  body.menu-open .site-header { background: transparent; box-shadow: none; }
  body.menu-open .site-header .logo-blue { opacity: 0; }
  body.menu-open .site-header .logo-mono { opacity: 1; }
  body.menu-open .site-header .nav-toggle { color: rgb(255, 255, 255); }
}

/* The new wordmark is more slender than the old one, so at 24px it runs ~176px
   wide — enough to crowd the hamburger on a phone. Step it down to 21px (~154px,
   still comfortably above the 120px minimum width in the brand guide). Scoped to
   the header so the footer keeps its own 22px. */
@media (max-width: 600px) {
  .site-header .logo-link img { height: 21px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--white);
  padding-top: var(--header-h);
}

/* Wider measure so the ~64px headline settles into two natural lines.
   (700px still wraps to 3 at desktop; 730px is the 2-line threshold.)
   Centered in the hero: the box and everything in it sit on the axis. */
.hero-content { max-width: 740px; margin-inline: auto; }

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

/* Solid colors, no shadows — sub and trust sit dark over the light clouds.
   No separate cap: the sub shares the headline's 740px column so it wraps
   to two lines instead of three. */
.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.1875rem);
  color: var(--ink);
  margin-bottom: 0;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
  justify-content: center;
}

/* Minimalistic: no border at all on the hero CTA buttons. */
.hero-ctas .btn { border: none; }

/* Second CTA: solid white button with navy text (was a translucent ghost). */
.hero-ctas .btn-ghost {
  background: var(--white);
  color: var(--navy);
}

.hero-ctas .btn-ghost:hover {
  background: var(--sky-tint);
  box-shadow: none;
}

.hero-ctas .btn-primary:hover { box-shadow: none; }

.hero-trust {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.hero-trust .dot { margin-inline: 0.5rem; opacity: 0.6; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  line-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cue-bounce 2.2s ease-in-out infinite; }

  @keyframes cue-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
  }
}

/* ---------- Load fade-in ---------- */

/* On the home page's first load, hold the header and all page content
   invisible for a passive 0.75s (the `both` fill keeps the from-state
   through the delay), then gently fade in over the next 1.5s. The fixed
   sky underneath is untouched, so the text and UI ease in over the
   clouds. Descendants (e.g. the bouncing scroll cue) fade with the group
   while keeping their own animations. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ui-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .home .site-header,
  .home main {
    animation: ui-fade-in 1.5s ease 0.75s both;
  }
}

/* ---------- Scroll reveal ---------- */

/* main.js tags content blocks inside `.section` (and the `.stats` trust bar)
   with `.reveal`; they fade and rise into place as they scroll into view —
   the agusticks.com effect. Driven by the independent `translate` property
   (not `transform`) so it composes cleanly with the `transform`-based hover
   lifts on cards and buttons. The whole rule lives inside a no-preference
   query, so reduced-motion visitors never get the hidden state and see all
   content immediately. The home hero keeps its own load fade-in (ui-fade-in
   above) and is left untagged. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.6s ease, translate 0.6s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- The sheet (content that slides over the fixed sky) ---------- */

.sheet {
  position: relative;
  z-index: 1;
  background: var(--white);
  box-shadow: 0 -18px 45px rgba(18, 38, 58, 0.30);
}

.section { padding-block: var(--section-pad); }

.section-tint { background: var(--sky-tint); }

[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* ---------- Stats band (§6.1) ---------- */

.stats { padding-block: 2.75rem; }

.stats ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem 1.5rem;
  text-align: center;
}

.stats .num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

.stats .lbl {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: #4A607A;
}

/* ---------- Services (§6.2) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(167, 201, 228, 0.55);
  border-radius: 12px;
  padding: 1.75rem 1.6rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(30, 72, 119, 0.14);
  border-color: var(--sky-soft);
}

.card .icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sky-tint);
  color: var(--navy);
  margin-bottom: 1.1rem;
}

.card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.card p {
  font-size: 0.975rem;
  color: #3B5166;
  margin-bottom: 1.1rem;
}

.card .more {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--accent);
}

.section-cta { text-align: center; margin-top: 2.75rem; }

/* ---------- Photo band ---------- */

/* A window onto a photo that is deliberately shorter than the photo itself, so
   the picture has room to pan vertically as the band scrolls by.

   --crop is the window's height as a share of the photo's own height at the
   same width; it drives both the band's aspect ratio and how far the image
   travels, so it's the one number to touch to retune the crop.

   --img-w/--img-h are the source photo's pixel dimensions. Every band photo so
   far is 2752x1536, so those are the defaults; a differently-shaped photo sets
   them on its own element rather than needing a new rule. */
.photo-band {
  --crop: 0.80;
  --img-w: 2752;
  --img-h: 1536;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--img-w) / calc(var(--img-h) * var(--crop));
  background: var(--sky-tint);
}

.photo-band img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  /* main.js publishes scroll progress as --pan (0 → 1). The image travels its
     own spare height — (1 - crop), i.e. 20% at the current crop — so the window
     walks from the top of the photo to the bottom over one pass. Without JS (or
     with reduced motion) --pan holds at 0.5 and the crop simply sits centred. */
  transform: translate3d(0, calc(var(--pan, 0.5) * (var(--crop) - 1) * 100%), 0);
  will-change: transform;
}

/* ---------- Why Importx (§6.3) ---------- */

.props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2.25rem 1.75rem;
  margin-top: 2.75rem;
}

.prop .icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  margin-bottom: 1rem;
}

.prop h3 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }

.prop p { font-size: 0.95rem; color: #3B5166; margin: 0; }

/* ---------- Cobertura (§6.4) ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 2.25rem 2.5rem;
}

.pills li {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--sky-soft);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
}

.pills li.us {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------- Testimonials (§6.5) ---------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.quote {
  background: var(--sky-tint);
  border-radius: 12px;
  padding: 1.9rem 1.75rem;
}

.quote blockquote {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
}

.quote figcaption {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4A607A;
}

/* ---------- Contact band (§6.6) ---------- */

.contact-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.contact-band .section-title { color: var(--white); }

.contact-band .section-intro {
  color: rgba(255, 255, 255, 0.88);
  margin-inline: auto;
}

.contact-band .btn-primary { margin-top: 1.5rem; }

.contact-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  font-size: 0.95rem;
}

.contact-quick a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 1px;
}

.contact-quick a:hover { border-bottom-color: var(--white); }

/* ---------- Footer (§4.2) ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--footer-navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}

.site-footer .logo-link img { height: 22px; }

.footer-brand p { margin-top: 1.1rem; max-width: 24rem; }

.footer-brand .reassure {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
}

.site-footer li { margin-bottom: 0.55rem; }

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover { color: var(--white); }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.footer-social a:hover { border-color: var(--white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom nav { display: flex; gap: 1.5rem; }

.footer-bottom a { color: rgba(255, 255, 255, 0.6); }

.footer-bottom a:hover { color: var(--white); }

/* ---------- Stub pages ---------- */

.stub-main {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
  background: var(--sky-tint);
}

.stub-main h1 { color: var(--navy); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.5rem; }

.stub-main p { color: #3B5166; margin-bottom: 1.75rem; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {

  /* Hero centering is now global (see .hero); only the stacked-trust
     tweak is mobile-specific. */
  .hero-trust .dot { display: block; height: 0.35rem; overflow: hidden; opacity: 0; }

  .stats ul { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer-bottom { justify-content: center; text-align: center; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   INTERIOR PAGES (Nosotros · Servicios · Cobertura · Contacto · Portal)
   Reuses the tokens/components above; adds page-specific pieces.
   ============================================================ */

/* ---------- Masthead (navy band that replaces the clouds hero) ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(158deg, #1E4877 0%, #163a5e 55%, #122E4B 100%);
  color: var(--white);
  padding-top: calc(var(--header-h) + clamp(2.75rem, 6vw, 4.75rem));
  padding-bottom: clamp(2.75rem, 6vw, 4.75rem);
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 120% at 88% -20%, rgba(69, 132, 180, 0.55), transparent 62%);
}

.page-hero .eyebrow { color: var(--sky-soft); }

.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
}

.page-hero .lead {
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Interior masthead copy rises + fades in on load, echoing the scroll reveal
   used on the sections below (the home hero has its own ui-fade-in and isn't a
   `.page-hero`). Same easing as the container's spin-rise so the two feel
   coordinated on the light masthead; `both` fill holds the from-state through
   the delay, so the copy is hidden at first paint — no flash. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero .lead {
    animation: hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .page-hero .eyebrow { animation-delay: 0.05s; }
  .page-hero h1       { animation-delay: 0.13s; }
  .page-hero .lead    { animation-delay: 0.21s; }

  @keyframes hero-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ---------- Light masthead (white, hosts the spinning container) ---------- */

.page-hero--light {
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid rgba(167, 201, 228, 0.35);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

.page-hero--light::after { content: none; }

.page-hero--light .container {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.page-hero--light h1 { color: var(--navy); }
.page-hero--light .lead { color: #3B5166; }
.page-hero--light .eyebrow { color: var(--accent); }

/* The 3D stage: transparent WebGL canvas — the page's white is the backdrop,
   which is the whole point (max contrast for the container). */
.hero-spin {
  position: relative;
  margin: 0;
  height: clamp(300px, 34vw, 430px);
  touch-action: pan-y pinch-zoom; /* horizontal drag spins; the page still scrolls */
}

.hero-spin canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.hero-spin.dragging canvas { cursor: grabbing; }

.spin-hint {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6E8194;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.hero-spin.spun .spin-hint { opacity: 0; }

/* No WebGL: hide the stage, the copy owns the masthead again. */
.page-hero--light.no-spin .container { grid-template-columns: 1fr; }
.page-hero--light.no-spin .hero-spin { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-spin { animation: spin-rise 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both; }

  @keyframes spin-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 860px) {
  .page-hero--light .container { grid-template-columns: 1fr; }
  .hero-spin { height: clamp(240px, 62vw, 340px); margin-top: 0.75rem; }
}

/* ---------- Yard hero (Servicios: 3D container field behind the masthead) ---------- */

.page-hero--yard {
  display: flex;
  flex-direction: column;
  justify-content: center;         /* center the copy card in the scene space */
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid rgba(167, 201, 228, 0.35);
  min-height: clamp(540px, 74vh, 820px);
  /* Center the card in the scene *below* the fixed top bar: a full header's
     height of top padding and none at the bottom, so justify-content centers
     it within the visible-below-the-bar region, not the whole section. */
  padding-top: var(--header-h);
  padding-bottom: 0;
  touch-action: pan-y pinch-zoom; /* horizontal drag orbits; the page still scrolls */
}

.page-hero--yard::after { content: none; }

/* Always 100% width — the 3D field is a disc sized for any aspect up to
   ~4.5:1, so no max-width cap is needed. The field renders full-bleed; the
   copy stays legible via its own dark card, not a white fade over the scene. */
.page-hero--yard canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.page-hero--yard.dragging canvas { cursor: grabbing; }

/* Copy floats above the canvas; only links catch the pointer so the rest
   of the surface stays draggable. It sits in a navy glass card — a #1E4877
   vertical gradient (40%→60% alpha, top→down), matching the top bar — so the
   white text reads over the full-bleed field without a white wash. */
.page-hero--yard .container { position: relative; z-index: 1; pointer-events: none; }
.page-hero--yard .container a { pointer-events: auto; }

.page-hero--yard .page-hero-copy {
  max-width: 50rem;
  margin-inline: auto;
  padding: 50px;
  border-radius: 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(30, 72, 119, 0.40), rgba(30, 72, 119, 0.60));
}

.page-hero--yard h1 { color: var(--white); }
.page-hero--yard .lead { color: rgba(255, 255, 255, 0.9); max-width: 44rem; }
.page-hero--yard .eyebrow { color: var(--sky-soft); }

/* No WebGL (or init failure): plain white masthead, copy stays. */
.page-hero--yard.no-yard canvas { display: none; }

@media (max-width: 640px) {
  .page-hero--yard { min-height: clamp(460px, 72vh, 640px); }
  .page-hero--yard .page-hero-copy { padding: 20px; }
  .page-hero--yard h1 { font-size: 1.6rem; }
  .page-hero--yard .lead { font-size: 0.95rem; }
}

/* ---------- Prose / shared bits ---------- */

.prose p { color: #3B5166; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--navy); }

.lead-tint { color: #3B5166; font-size: 1.125rem; max-width: 46rem; }

/* checklist with a masked check glyph in the accent color */
.checklist { display: grid; gap: 0.65rem; margin: 1.35rem 0 0; }

.checklist li {
  position: relative;
  padding-left: 1.9rem;
  color: #3B5166;
  font-size: 0.975rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* chip/tag row */
.tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.35rem; }

.tags li {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--sky-tint);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}

/* italic benefit callout */
.note-callout {
  margin-top: 1.6rem;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--accent);
  background: var(--sky-tint);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--ink);
}

/* ---------- Servicios: sticky index + detail blocks ---------- */

.svc-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.svc-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  counter-reset: svc;            /* numbers the links below, starting at 01 */
}

.svc-nav h4 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--gray);
  margin-bottom: 0.9rem;
}

.svc-nav a {
  counter-increment: svc;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0 0.5rem 0.85rem;
  margin-left: -0.85rem;
  color: #3B5166;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* "0N" prefix — decimal-leading-zero pads 1→"01", matching the .kicker
   numbers on each service block. Muted until the row is active/hovered. */
.svc-nav a::before {
  content: counter(svc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--sky-soft);
  transition: color 0.15s ease;
}

.svc-nav a:hover,
.svc-nav a.is-active {
  color: var(--navy);
  border-left-color: var(--accent);
}

.svc-nav a:hover::before,
.svc-nav a.is-active::before { color: var(--accent); }

.svc-block { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.svc-block + .svc-block {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(167, 201, 228, 0.55);
}

.svc-block .kicker {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.svc-block h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0.4rem 0 0.75rem;
}

.svc-block > p { color: #3B5166; max-width: 46rem; }

@media (max-width: 900px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-nav { display: none; }
}

/* ---------- Process stepper (7-step despacho) ---------- */

.steps { margin-top: 2.5rem; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-bottom: 1.9rem;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: var(--sky-soft);
}

.step .n {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
}

.step h3 { font-size: 1.1rem; color: var(--navy); margin: 0.55rem 0 0.35rem; }
.step p { font-size: 0.95rem; color: #3B5166; margin: 0; }

/* ---------- Nosotros ---------- */

.split {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.stat-panel {
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.4rem);
  display: grid;
  gap: 1.4rem;
}

.stat-panel .s .n {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1.1;
}

.stat-panel .s .l { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.pillar {
  text-align: center;
  padding: 2.1rem 1.6rem;
  background: var(--white);
  border: 1px solid rgba(167, 201, 228, 0.55);
  border-radius: 14px;
}

.pillar .ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  background: var(--sky-tint);
  color: var(--navy);
}

.pillar h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 0.4rem; }
.pillar p { color: #3B5166; font-size: 0.95rem; margin: 0; }

/* ---------- Cobertura ---------- */

.cov-group { margin-top: 2.5rem; }

.cov-group > h3 {
  color: var(--navy);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.locs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.loc {
  background: var(--white);
  border: 1px solid rgba(167, 201, 228, 0.55);
  border-radius: 12px;
  padding: 1.25rem 1.3rem;
}

.loc h4 { color: var(--navy); font-size: 1.05rem; margin-bottom: 0.25rem; }
.loc .role { font-size: 0.85rem; color: #4A607A; margin: 0; }

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.35rem;
  align-items: center;
  margin-top: 2.75rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: var(--sky-tint);
  border: 1px solid var(--sky-soft);
}

.callout .badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
}

.callout h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 0.25rem; }
.callout p { margin: 0; color: #3B5166; font-size: 0.95rem; }

/* ---------- Contacto ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.field .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--sky-soft);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { min-height: 130px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 72, 119, 0.12);
}

.form .full.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.form-note { font-size: 0.82rem; color: #4A607A; margin: 0; }

.form-done {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--sky-tint);
  border-radius: 14px;
}

.form-done .check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
}

.form-done h3 { color: var(--navy); }
.form-done p { color: #3B5166; margin: 0; }
.form-done:focus { outline: none; }

.contact-info {
  background: var(--sky-tint);
  border-radius: 16px;
  padding: 1.9rem;
}

.info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(167, 201, 228, 0.5);
}

.info-item:first-child { padding-top: 0; }
.info-item:last-child { padding-bottom: 0; border-bottom: 0; }

.info-item .ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  display: grid;
  place-items: center;
}

.info-item h4 { font-size: 0.95rem; color: var(--navy); margin: 0 0 0.2rem; }
.info-item a,
.info-item p { font-size: 0.92rem; color: #3B5166; margin: 0; text-decoration: none; }
.info-item a:hover { color: var(--navy); }

@media (max-width: 480px) { .form { grid-template-columns: 1fr; } }

.contact-intro .btn-row { margin-top: 1.75rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Portal (split-screen login, demo fake-auth) ---------- */

.portal-main { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }

.portal-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, #1E4877 0%, #163a5e 55%, #122E4B 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3rem));
}

.portal-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 90% -10%, rgba(69, 132, 180, 0.5), transparent 62%);
}

.portal-brand .logo-link img { height: 26px; margin-bottom: 0.5rem; }
.portal-brand h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--white); }
.portal-brand p { color: rgba(255, 255, 255, 0.85); max-width: 26rem; }

.portal-brand .reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.portal-form-wrap {
  display: grid;
  place-items: center;
  background: var(--sky-tint);
  padding: clamp(2rem, 5vw, 3.5rem);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 2.5rem));
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(18, 38, 58, 0.15);
}

.login-card h2 { color: var(--navy); font-size: 1.5rem; margin-bottom: 0.4rem; }
.login-card .sub { color: #4A607A; font-size: 0.95rem; margin-bottom: 1.6rem; }
.login-card .field { margin-bottom: 1.1rem; }
.login-card .btn { width: 100%; text-align: center; margin-top: 0.4rem; }

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.login-row label { display: inline-flex; align-items: center; gap: 0.45rem; color: #3B5166; }
.login-row a { color: var(--accent); text-decoration: none; font-weight: 600; }
.login-row a:hover { text-decoration: underline; }

.auth-error {
  background: #FBEAE7;
  color: #8A2013;
  border: 1px solid #F3C7BF;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}

.login-help {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(167, 201, 228, 0.6);
  font-size: 0.9rem;
  color: #4A607A;
}

.login-help a { color: var(--accent); text-decoration: none; font-weight: 600; }
.login-help a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .portal-main { grid-template-columns: 1fr; min-height: 0; }
  .portal-brand { padding-bottom: clamp(2rem, 6vw, 3rem); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

  .btn, .card { transition: none; }

  .btn-primary:hover, .btn-ghost:hover, .card:hover { transform: none; }
}