/* ============================================================
   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);
}

.logo-link { display: inline-flex; align-items: center; }

.logo-link img { height: 24px; width: auto; }

.logo-navy { display: none; }

.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);
}

/* 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-white,
.site-header.solid .logo-white,
.site-header.on-light .logo-white { display: none; }

.site-header.scrolled .logo-navy,
.site-header.solid .logo-navy,
.site-header.on-light .logo-navy { display: block; }

.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-navy { display: none; }
  body.menu-open .site-header .logo-white { display: block; }
  body.menu-open .site-header .nav-toggle { color: rgb(255, 255, 255); }
}

/* ---------- 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;
  }
}

/* ---------- 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; }

/* ---------- 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;
}

/* ---------- 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; }
}