/* ============================================================
   SEGURIDAD DE COLOMBIA — Home stylesheet
   Vanilla CSS, mobile-first, animation-driven
   ============================================================ */

/* ============================================================
   HOME HERO — banner background variant
   ============================================================ */

/* Lock the hero's shape to the banner's own aspect ratio so cover
   never has to crop or letterbox — replace with your real dimensions */
.hero--banner {
  min-height: 0 !important;
  aspect-ratio: 1920 / 745 !important;
}

/* Fallback color, only visible for a split second while the image loads */
.hero--banner .hero-bg {
  background: linear-gradient(135deg, #12294f 0%, #2450a8 55%, #1b3970 100%) !important;
}

.hero--banner .hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Old dark gradient was built to protect white text over a photo —
   copy now lives in its own card, so drop it */
.hero--banner .hero-bg::after {
  background: none !important;
  content: none !important;
}

/* Break out of the 1280px centered .container, anchor content to the
   TOP-right instead of vertically centered so it never overflows the
   bottom of the fixed-ratio banner */
.hero--banner .hero-inner {
  max-width: none !important;
  padding-inline: clamp(1.5rem, 6vw, 5rem) !important;
  padding-block: clamp(1.25rem, 3vw, 2rem) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

.hero--banner .hero-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--sp-3) !important;
  width: min(380px, 100%) !important;
}

/* Frosted glass card — light, compact, translucent */
.hero--banner .hero-text {
  max-width: none !important;
  background: rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
  box-shadow: 0 16px 40px rgba(5, 62, 92, 0.18) !important;
}

/* Smaller headline/paragraph so the whole card stays short enough
   to fit comfortably inside the banner's fixed height */
.hero--banner .hero-text h1 {
  font-size: clamp(1.5rem, 1.8vw + 0.6rem, 2.5rem) !important;
  margin-bottom: var(--sp-3) !important;
}
.hero--banner .hero-text h1 .strong-display {
  margin-bottom: var(--sp-2) !important;
}
.hero--banner .hero-text p {
  font-size: 0.9rem !important;
  margin-bottom: var(--sp-4) !important;
}

/* Navy text now that the card is light, not a dark photo */
.hero--banner .hero-text h1,
.hero--banner .hero-text h1 .strong-display,
.hero--banner .hero-text p {
  color: var(--c-navy) !important;
  text-shadow: none !important;
}

.hero--banner .hero-actions .link-secondary {
  color: var(--c-navy) !important;
}
.hero--banner .hero-actions .link-secondary:hover {
  color: var(--c-orange-600) !important;
}

/* "Desde 1971" badge: un-stick from absolute positioning, stack it
   below the text card instead of floating separately */
.hero--banner .hero-card {
  position: static !important;
  width: 100% !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Base CSS hides this card under 900px — keep it visible here */
@media (max-width: 767px) {
  .tabs-wrap {
    margin-top: -3rem !important;
  }
  /* Square crop, shown at true proportions — swap 1 / 1 if your
     actual image isn't exactly square */
  .hero--banner {
    aspect-ratio: 1 / 1 !important;
  }

  .hero--banner .hero-bg img {
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Hide everything except the button — this image already has its
     own headline + logo baked in */
  .hero--banner .hero-text h1,
  .hero--banner .hero-text p,
  .hero--banner .hero-actions .link-secondary,
  .hero--banner .hero-card {
    display: none !important;
  }

  .hero--banner .hero-text {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .hero--banner .hero-inner {
	position: static !important;
	height: auto !important;
	padding: 0 !important;
    display: block !important;
   }

  .hero--banner .hero-right {
    position: absolute !important;
    bottom: 6% !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: none !important;
   }

  .hero--banner .hero-actions {
    align-items: center !important;
  }

  .hero--banner .hero-actions .btn--primary {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  }
}

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colors (confirmed) */
  --c-navy: #053E5C;
  --c-navy-700: #0a4d6e;
  --c-navy-900: #032e45;
  --c-orange: #FF9E00;
  --c-orange-600: #e88e00;
  --c-text: #606060;
  --c-text-strong: #1f2937;
  --c-bg-gray: #F2F2F2;
  --c-white: #ffffff;
  --c-black: #0A0A0A;
  --c-green: #22C55E;
  --c-green-600: #16a34a;
  --c-border: #e5e7eb;

  /* Typography */
  --f-title: "Raleway", system-ui, sans-serif;
  --f-body:  "Montserrat", system-ui, sans-serif;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --container: 1280px;
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 600ms;
  --d-reveal: 700ms;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(5, 62, 92, .06), 0 1px 3px rgba(5, 62, 92, .08);
  --shadow:    0 4px 12px rgba(5, 62, 92, .08), 0 2px 4px rgba(5, 62, 92, .06);
  --shadow-lg: 0 12px 32px rgba(5, 62, 92, .12), 0 4px 8px rgba(5, 62, 92, .06);
  --shadow-xl: 0 24px 48px rgba(5, 62, 92, .18), 0 8px 16px rgba(5, 62, 92, .08);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-title);
  color: var(--c-navy);
  line-height: 1.15;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.2vw + .8rem, 1.5rem); }
p  { font-family: var(--f-body); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}

.section { padding-block: clamp(3rem, 7vw, 6rem); position: relative; }
.section-tight { padding-block: clamp(2rem, 5vw, 4rem); }

/* ---------- Animation system ----------
   Add data-anim="fade-up | fade-in | slide-left | slide-right | zoom"
   to elements. JS toggles .is-visible when entering viewport. */
[data-anim] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-anim="fade-in"]    { transform: none; }
[data-anim="slide-left"]  { transform: translate3d(-32px, 0, 0); }
[data-anim="slide-right"] { transform: translate3d( 32px, 0, 0); }
[data-anim="zoom"]        { transform: scale(0.94); }
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger via inline --d delay seconds */
[data-anim] { transition-delay: var(--d, 0ms); }

/* Ambient loops */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bounce-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
  /* Hero text reveal — never trap users in opacity:0 */
  .hero-text .word,
  .hero-text p,
  .hero-actions,
  .hero-card { opacity: 1 !important; transform: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition:
    transform var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out),
    background-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-orange);
  color: var(--c-white);
  box-shadow: 0 6px 16px rgba(255, 158, 0, .3);
}
.btn--primary:hover {
  background: var(--c-orange-600);
  box-shadow: 0 10px 24px rgba(255, 158, 0, .42);
}

.btn--navy {
  background: var(--c-navy);
  color: var(--c-white);
}
.btn--navy:hover {
  background: var(--c-navy-700);
  box-shadow: 0 8px 20px rgba(5, 62, 92, .25);
}

.btn--outline {
  background: transparent;
  color: var(--c-navy);
  border: 2px solid var(--c-navy);
}
.btn--outline:hover { background: var(--c-navy); color: var(--c-white); }

.btn--ghost {
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--shadow);
}
.btn--ghost:hover { box-shadow: var(--shadow-lg); }

.btn--whatsapp {
  background: var(--c-green);
  color: var(--c-white);
}
.btn--whatsapp:hover { background: var(--c-green-600); box-shadow: 0 8px 20px rgba(34, 197, 94, .35); }

.btn .arrow { transition: transform var(--d-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Hero primary CTA "Empieza a tomar el control" — reduced ~20%,
   less vertical padding, solid orange with no shimmer (designer comment) */
.hero-actions .btn--primary {
  padding: 0.6rem 1.2rem;
  font-size: 0.76rem;
}


/* ---------- Top bar ---------- */
:root {
  --c-topbar-bg:        #969696;   /* LEFT half: contact info bg */
  --c-topbar-text:      #FFFFFF;   /* LEFT half: text color */
  --c-topbar-icon-bg:   #1F2937;   /* contact icon circles (dark) */
  --c-topbar-right:     #F5F5F5;   /* RIGHT half: socials bg */
  --c-topbar-soc-bg:    #969696;   /* social icon circles */
  --topbar-skew: 36px;
}
.topbar {
  position: relative;
  z-index: 40;          /* stay above the hero, which is pulled up under the header */
  background: var(--c-topbar-bg);
  color: var(--c-topbar-text);
  font-family: var(--f-body);
  font-size: 0.76rem;
  font-weight: 500;
  isolation: isolate;
  overflow: hidden;
}
/* Light right slab with diagonal left edge */
.topbar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 340px;
  background: var(--c-topbar-right);
  clip-path: polygon(var(--topbar-skew) 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.topbar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: 0;
  min-height: 48px;
}
.topbar-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}
.topbar-info > * {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-topbar-text);
  transition: opacity var(--d-fast);
}
.topbar-info a:hover { opacity: 0.7; }
.topbar-icon {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  /* No background — the PNGs already include a white circle with a
     transparent cut-out for the icon shape. The gray topbar bg shows
     through the cut-out producing the intended design. */
}
.topbar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No filter — keep PNG colors intact. */
}
.topbar-socials {
  display: flex;
  gap: 12px;
  padding-right: var(--sp-4);
  padding-left: var(--sp-4);
}
.topbar-socials a {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-topbar-soc-bg);
  color: #ffffff;
  transition: transform var(--d-fast), background var(--d-fast);
}
.topbar-socials a:hover {
  background: var(--c-orange);
  transform: translateY(-2px);
}
.topbar-socials a svg { width: 12px; height: 12px; }

/* The address is the longest item in the topbar and the first to collide with
   the diagonal light slab on the right. Hide it before that happens. */
@media (max-width: 1280px) {
  .topbar-location { display: none; }   /* address block (icon + text) hidden */
}
@media (max-width: 1100px) {
  :root { --topbar-skew: 24px; }
  .topbar::after { width: 290px; }
  .topbar-info { gap: var(--sp-5); font-size: .78rem; }
}
@media (max-width: 768px) {
  /* On mobile the topbar is hidden — the contact info lives in the
     floating WhatsApp button and the footer, so there's no UX loss
     and we save vertical space at the top of the page. */
  .topbar { display: none; }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--d-base) var(--ease-out),
    border-color var(--d-base),
    box-shadow var(--d-base),
    backdrop-filter var(--d-base);
}

.header {
  background: var(--c-navy) !important;
  border-bottom: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.nav-main a,
.nav-mega-trigger {
  color: var(--c-white) !important;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background var(--d-base) var(--ease-out), color var(--d-fast);
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  transition: padding-block var(--d-base) var(--ease-out);
}
/* Compact sticky header — shrinks on scroll */
.header.is-scrolled .header-inner { padding-block: var(--sp-2); }
.header .logo img { transition: height var(--d-base) var(--ease-out); }
.header.is-scrolled .logo img { height: 36px; }

/* CTA in header — brand yellow/orange with the same text treatment as nav items */
#ctaTop {
  padding: 0.62rem 1.08rem;
  border-radius: 6px;
  background: var(--c-orange);
  color: #ffffff;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  box-shadow: 0 5px 14px rgba(255, 158, 0, .32);
}
#ctaTop:hover {
  transform: translateY(-2px);
  background: var(--c-orange-600);
  box-shadow: 0 9px 20px rgba(255, 158, 0, .42);
}
.header.is-scrolled #ctaTop { padding: 0.52rem 1rem; font-size: 0.85rem; }
.logo {
  display: inline-flex;
  align-items: center;
  transition: transform var(--d-fast);
}
.logo:hover { transform: scale(1.03); }
.logo img { height: 44px; width: auto; }
/* Transparent header sits on the dark hero banner → white wordmark.
   Once it turns solid white on scroll, swap back to the navy one. */
.logo .logo-dark { display: none; }
.header.is-scrolled .logo .logo-light { display: none; }
.header.is-scrolled .logo .logo-dark { display: block; }

.nav-main {
  display: none;
  gap: var(--sp-4);
}
.nav-main a {
  position: relative;
  font-family: var(--f-body);      /* Montserrat (designer comment) */
  font-weight: 600;                /* light */
  color: var(--c-navy);            /* navy against the solid white sticky header */
  font-size: 0.85rem;
  padding-block: var(--sp-2);
  transition: color var(--d-base) var(--ease-out);
  white-space: nowrap;
}

.nav-main a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.nav-main a:hover::after { transform: scaleX(1); }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
}
.menu-toggle span {
  width: 24px; height: 2px;
  background: #ffffff;   /* was var(--c-navy) — invisible on the navy header */
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base);
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1181px) {
  .nav-main { display: flex; align-items: center; }
  .menu-toggle { display: none; }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .header-inner { gap: var(--sp-4); }
  .nav-main { gap: var(--sp-3); }
  .nav-main a,
  .nav-mega-trigger {
    font-size: 0.78rem;
    padding-inline: var(--sp-2);
  }
  #ctaTop {
    padding-inline: 0.85rem;
  }
}

/* ============================================================
   MEGAMENU — "Dónde protegemos" (7 sectores)
   ============================================================ */
.nav-mega { position: relative; display: flex; align-items: center; }
.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  font-family: var(--f-body);
  font-weight: 600;                /* light */
  color: var(--c-navy);
  font-size: 0.85rem;
  padding-block: var(--sp-2);
  transition: color var(--d-base) var(--ease-out);
  white-space: nowrap;
}
.nav-mega-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.nav-mega:hover .nav-mega-trigger::after,
.nav-mega:focus-within .nav-mega-trigger::after { transform: scaleX(1); }
.nav-caret { transition: transform var(--d-base) var(--ease-out); }
.nav-mega:hover .nav-caret,
.nav-mega:focus-within .nav-caret { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(640px, 92vw);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(5, 62, 92, .28), 0 6px 18px rgba(0, 0, 0, .08);
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-out),
    visibility var(--d-base);
  z-index: 70;
}
/* Orange accent bar at the top edge */
.mega-panel::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 3px;
  background: var(--c-orange);
  border-radius: 0 0 3px 3px;
}
/* Hover bridge so the panel doesn't close in the gap */
.mega-panel::after {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-head { padding: 0 var(--sp-2) var(--sp-4); }
.mega-eyebrow {
  display: inline-block;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange-600);
}
.mega-sub {
  margin: 4px 0 0;
  font-family: var(--f-body);
  font-size: 0.8rem;
  color: var(--c-text);
  max-width: 46ch;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mega-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: 12px;
  border: 1px solid transparent;
  transition:
    background var(--d-fast) var(--ease-out),
    border-color var(--d-fast),
    transform var(--d-fast) var(--ease-out);
}
.mega-card:hover {
  background: var(--c-bg-gray);
  border-color: var(--c-border);
  transform: translateY(-1px);
}
.mega-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(5, 62, 92, .06);
  color: var(--c-navy);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast);
}
.mega-card:hover .mega-ico {
  background: var(--c-orange);
  color: var(--c-navy);
}
.mega-txt { display: flex; flex-direction: column; line-height: 1.25; }
.mega-txt strong {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-navy);
}
.mega-txt small {
  font-family: var(--f-body);
  font-size: 0.72rem;
  color: var(--c-text);
  margin-top: 2px;
}
/* "Ver cómo operamos" — spans both columns, navy emphasis */
.mega-card--all {
  grid-column: 1 / -1;
  margin-top: 4px;
  justify-content: center;
  background: var(--c-navy);
  border-radius: 12px;
}
.mega-card--all:hover { background: var(--c-navy-700); transform: translateY(-1px); }
.mega-card--all .mega-txt { align-items: center; text-align: center; }
.mega-card--all .mega-txt strong { color: #fff; }
.mega-card--all .mega-txt small { color: rgba(255, 255, 255, .8); }

/* ============================================================
   MEGAMENU — "Intranet" (grouped text links + CTA)
   ============================================================ */
/* Last item in the nav, so the panel hangs from the right edge of its
   trigger instead of centering (a centered 640px panel would overflow
   past the viewport on the right at 1024-1280px widths). */
.mega-panel.mega-panel--intranet {
  left: auto;
  right: 0;
  transform: translateY(10px);
}
.nav-mega:hover .mega-panel.mega-panel--intranet,
.nav-mega:focus-within .mega-panel.mega-panel--intranet {
  transform: translateY(0);
}
.mega-columns {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.mega-col-title {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-orange-600);
  margin: 0 0 6px;
  padding: 0 var(--sp-2);
}
.mega-links { display: flex; flex-direction: column; gap: 2px; }
.mega-links a {
  display: block;
  padding: 8px var(--sp-2);
  border-radius: 10px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.3;
  /* !important: the panel is always a white surface, but on the home page
     .header--overlay:not(.is-scrolled) .nav-main a forces white text on
     every <a> inside .nav-main (mega-panel included) while the header sits
     transparent over the hero. Same escape hatch already used for
     .drawer-acc-list a below. */
  color: var(--c-navy) !important;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast);
}
.mega-links a:hover { background: var(--c-bg-gray); color: var(--c-orange-600) !important; }

/* Compact policies menu */
.mega-panel.mega-panel--policies {
  width: min(360px, 88vw);
}

/* Mobile drawer accordion */
.drawer-acc { border-bottom: 1px solid var(--c-border); }
.drawer-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-title);
  font-weight: 600;
  color: var(--c-navy);
  padding: var(--sp-3) 0;
}
.drawer-acc summary::-webkit-details-marker { display: none; }
.drawer-acc summary svg { transition: transform var(--d-base) var(--ease-out); }
.drawer-acc[open] summary svg { transform: rotate(180deg); }
.drawer-acc-list {
  display: flex;
  flex-direction: column;
  padding: 2px 0 var(--sp-3) var(--sp-4);
}
.drawer-acc-list a {
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  font-size: 0.9rem;
  color: var(--c-text) !important;
  padding: var(--sp-2) 0 !important;
  border-bottom: none !important;
}
.drawer-acc-list a:hover { color: var(--c-orange-600) !important; }
.drawer-acc-subhead {
  display: block;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-orange-600);
  margin-top: var(--sp-3);
  padding-top: 2px;
}
.drawer-acc-subhead:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .mega-panel, .nav-caret, .mega-card, .mega-ico, .drawer-acc summary svg {
    transition-duration: 0.01ms !important;
  }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(80vw, 320px);
  background: var(--c-white);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-16) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transform: translateX(100%);
  transition: transform var(--d-base) var(--ease-out);
  z-index: 60;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer a {
  font-family: var(--f-title);
  font-weight: 600;
  color: var(--c-navy);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.nav-drawer .btn { margin-top: var(--sp-4); }
.nav-drawer a.btn--navy { color: #fff; }
.scrim {
  position: fixed; inset: 0;
  background: rgba(5, 62, 92, .35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base);
  z-index: 55;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 72vh, 760px);
  background: linear-gradient(135deg, #062b44 0%, #0b4a6f 100%);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg a {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Banner is wide and may crop on narrower viewports. Bias left to keep the
     artwork's dark gradient behind the headline while preserving the scene. */
  object-position: 32% 50%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--d-slow) var(--ease-out);
}
/* Ken-burns ambient: slow zoom-out from 1.08 to 1 over 12 s */
.hero-bg img.is-active {
  opacity: 1;
  animation: kenburns 14s var(--ease-out) forwards;
}
@keyframes kenburns {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The artwork already carries its own dark gradient on the left; this only
     deepens it so the white headline keeps contrast wherever it gets cropped. */
  background:
    linear-gradient(90deg, rgba(4,26,43,.82) 0%, rgba(4,26,43,.45) 34%, rgba(4,26,43,0) 62%),
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(4,26,43,.5) 100%);
}
/* On smaller screens the image fills the hero behind the text, so the overlay
   has to be stronger for the text to stay readable. */
@media (max-width: 768px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(4,26,43,.72) 0%, rgba(4,26,43,.55) 45%, rgba(4,26,43,.75) 100%);
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-block: clamp(3rem, 8vw, 5rem) clamp(8rem, 14vw, 11rem);
}
.hero-text { max-width: 720px; }
.hero-text h1 {
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-bottom: var(--sp-6);
  /* Reduced one level per designer comment: ~48 px laptop, ~68 px desktop */
  font-size: clamp(2rem, 2.7vw + 0.8rem, 4.25rem);
  color: var(--c-white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero-text h1 .strong-display {
  display: block;
  font-family: var(--f-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.5em;
  margin-bottom: var(--sp-4);
  color: var(--c-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
/* Word stagger reveal — JS adds .anim-in to trigger */
.hero-text .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.hero.anim-in .hero-text .word {
  opacity: 1;
  transform: none;
}
.hero-text p {
  font-family: var(--f-body);
  color: #ffffff;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .55),
    0 1px 3px rgba(0, 0, 0, .35);
  margin-bottom: var(--sp-8);
  font-size: clamp(1rem, .8vw + .8rem, 1.15rem);
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out) 1.0s, transform .7s var(--ease-out) 1.0s;
}
.hero.anim-in .hero-text p { opacity: 1; transform: none; }
/* Forced break keeps the subtitle on 2 lines on desktop; on mobile it
   disappears so the phrase wraps naturally (designer comment #9). */
@media (max-width: 600px) {
  .hero-text p .br-desktop { display: none; }
}
.hero-actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out) 1.25s, transform .7s var(--ease-out) 1.25s;
}
.hero.anim-in .hero-actions { opacity: 1; transform: none; }
.hero-actions {
  /* Stack: link "Visita todos nuestros servicios" sits below the
     orange button (designer comment) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.hero-actions .link-secondary {
  font-family: var(--f-body);
  color: var(--c-white);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--d-fast);
}
.hero-actions .link-secondary:hover { color: var(--c-orange); }

.hero-card {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  max-width: min(100%, 560px);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-6);
  padding: 0.48rem 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .8s var(--ease-out) 1.4s, transform .8s var(--ease-out) 1.4s;
}
.hero.anim-in .hero-card { opacity: 1; transform: none; }
.hero-card svg {
  width: 18px;
  height: 18px;
  color: var(--c-orange);
  flex-shrink: 0;
}
.hero-card strong {
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 800;
}
.hero-card span {
  color: rgba(255, 255, 255, .84);
  font-size: 0.76rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .hero-card {
    display: none;
  }
}

/* Floating WhatsApp button */
.fab-whatsapp {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-green);
  color: var(--c-white);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 22px rgba(34, 197, 94, .42);
  transition: transform var(--d-fast), box-shadow var(--d-fast);
  z-index: 40;
}
.fab-whatsapp:hover { transform: scale(1.05); box-shadow: 0 12px 28px rgba(34, 197, 94, .55); }

/* ---------- Industry tabs (overlapping the hero) ---------- */
.tabs-wrap {
  margin-top: clamp(-5.5rem, -6vw, -4rem);
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
  position: relative;
  z-index: 8;
}
.tabs {
  position: relative;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 20px;
  box-shadow:
    0 28px 60px rgba(5, 62, 92, .18),
    0 12px 24px rgba(5, 62, 92, .10);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.tabs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-orange), transparent);
  border-radius: 0 0 999px 999px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 9px;
  padding: 16px 12px;
  border-radius: 14px;
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(5, 62, 92, .78);
  border: 1px solid transparent;
  transition:
    background var(--d-base) var(--ease-out),
    color var(--d-base),
    border-color var(--d-base),
    transform var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out);
  min-width: 110px;
  position: relative;
  z-index: 1;
}
/* "Sector" eyebrow above each industry name */
.tab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.1;
}
.tab-pre {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
/* Vertical separator lines between tabs (sit in the 6px gap) */
.tab + .tab::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42%;
  background: rgba(5, 62, 92, .12);
}
.tab svg {
  color: currentColor;
  transition: color var(--d-base) var(--ease-out), transform var(--d-base);
}
.tab:hover svg { transform: translateY(-3px); }

/* Active + hover share the same emphasized look */
.tab.is-active,
.tab:hover {
  background: var(--c-navy);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 24px rgba(5, 62, 92, .22);
  transform: translateY(-2px);
}
.tab.is-active svg,
.tab:hover svg {
  color: var(--c-orange);
}

@media (max-width: 768px) {
  .tabs-wrap {
    margin-bottom: 2rem;
  }
  .tabs {
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    padding: 8px;
    border-radius: 16px;
  }
  .tab {
    min-width: 104px;
    padding: 13px 10px;
  }
  .tab svg {
    width: 28px;
    height: 28px;
  }
}

/* ---------- SECURA section (video bg + quiz) ---------- */
.secura {
  position: relative;
  overflow: hidden;
  color: var(--c-white);
  padding-block: clamp(4rem, 10vw, 8rem);
  margin-top: 0;
  background: var(--c-navy); /* fallback while video loads */
}
.secura-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.secura-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay — minimal tint, just enough to keep the white text legible */
.secura-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.secura-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.secura h2 {
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: var(--sp-3);
}
.secura .sub {
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: 1.15rem;
  margin-bottom: var(--sp-12);
  opacity: .9;
}
.secura .quiz {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-height: 380px;
}
.quiz-progress {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}
.quiz-progress .dot {
  width: 32px; height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  transition: background var(--d-base);
}
.quiz-progress .dot.is-active { background: var(--c-orange); }
.quiz-progress .dot.is-done   { background: var(--c-white); }

.quiz-step {
  display: none;
  animation: quiz-in var(--d-base) var(--ease-out) both;
}
.quiz-step.is-active { display: block; }
@keyframes quiz-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Welcome screen (city by IP) */
.quiz-welcome {
  display: none;
  text-align: center;
  padding-block: clamp(1rem, 4vw, 2.5rem);
}
.quiz-welcome.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.quiz-welcome-greet {
  font-family: var(--f-body);
  font-size: clamp(1.15rem, 1.2vw + 1rem, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 32ch;
  color: var(--c-white);
}
.quiz-welcome-greet strong { color: var(--c-orange); font-weight: 700; }
.quiz-q {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: var(--sp-6);
  color: var(--c-white);
}
.quiz-options {
  display: grid;
  gap: var(--sp-3);
}
.quiz-options.cols-7 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.quiz-options.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.quiz-options.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.quiz-options button {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: var(--c-white);
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-weight: 500;
  text-align: center;
  transition: transform var(--d-fast), background var(--d-fast), border-color var(--d-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.quiz-options button svg { color: var(--c-orange); }
.quiz-options button:hover {
  background: rgba(255, 158, 0, 0.15);
  border-color: var(--c-orange);
  transform: translateY(-2px);
}

.quiz-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-6);
  align-items: center;
}
.quiz-back {
  color: rgba(255,255,255,.7);
  font-size: 0.9rem;
  transition: color var(--d-fast);
}
.quiz-back:hover { color: var(--c-white); }
.quiz-back[hidden] { visibility: hidden; }

.quiz-result {
  text-align: left;
}
.quiz-result h3 {
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}
.quiz-result .reco {
  color: var(--c-orange);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: var(--sp-4);
}
.quiz-result p {
  color: rgba(255,255,255,.85);
  margin-bottom: var(--sp-6);
}
.quiz-result .actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ---------- Problema ---------- */
.problema {
  position: relative;
  background: var(--c-white);
  overflow: hidden;
}
/* Mobile: image on top, normal flow */
.problema-img {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.problema-img picture { display: block; }
.problema-img img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.problema-text {
  position: relative;
}
.problema-text .lead {
  font-family: var(--f-title);
  font-weight: 500;
  color: var(--c-navy);
  font-size: 1.05rem;
  margin-bottom: var(--sp-3);
}
.problema-text h2 {
  font-family: var(--f-title);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-5);
}
.problema-text .body {
  color: var(--c-text);
  font-size: 1.05rem;
}
.problema-text .body strong { color: var(--c-navy); font-weight: 700; }

/* Desktop: camera bleeds from the left edge of the viewport, text on right.
   The camera is 1.25x taller than wide and its width scales with the viewport
   (44vw), so a fixed min-height cropped its base on wide screens. The section
   now grows on the same ratio (44vw * 1.25 = 55vw) and object-fit: contain
   guarantees the whole camera is visible at any screen size. */
@media (min-width: 900px) {
  .problema {
    min-height: clamp(540px, 55vw, 900px);
    display: flex;
    align-items: center;
  }
  .problema-img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;                       /* box spans the section height */
    width: clamp(380px, 44vw, 720px);
    margin: 0;
    pointer-events: none;
    z-index: 1;
  }
  .problema-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;             /* scale down, never crop */
    object-position: left top;       /* stay anchored to the top-left */
  }
  .problema-text {
    width: 50%;
    margin-left: auto;
    z-index: 2;
  }
}

/* ---------- Problema: cámara "viva" (motion) ----------
   .cam-parallax is the positioning stage: on mobile it shrinks to the
   image (max 360px, centered); on desktop it fills the absolute box so
   the lens overlays (glow/ring/REC ~ 68%/70%) stay on the glass.
   The parallax translateY is applied to .cam-parallax by JS; the
   focus-in (scale+blur) is applied to .cam-focus (the img) so the two
   transforms never collide. All motion is gated by reduced-motion. */
.cam-parallax {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 360px;
}
@media (min-width: 900px) {
  .problema-img .cam-parallax {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
  }
}
/* lens overlays — centered on the glass (x 68%, y 70% of the frame) */
.cam-glow, .cam-ring, .cam-rec { pointer-events: none; opacity: 0; }
.problema-img.is-visible .cam-glow,
.problema-img.is-visible .cam-ring,
.problema-img.is-visible .cam-rec { opacity: 1; }
.cam-glow {
  position: absolute; left: 68%; top: 70%; width: 28%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,158,0,.7) 0%, rgba(255,158,0,.28) 42%, rgba(255,158,0,0) 70%);
  mix-blend-mode: screen;
  transition: opacity var(--d-reveal) var(--ease-out);
}
.cam-ring {
  position: absolute; left: 68%; top: 70%; width: 19%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(255,158,0,.9);
}
.cam-rec {
  position: absolute; left: 7%; top: 6%;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(6,25,38,.62); color: #fff;
  padding: .28rem .55rem; border-radius: 999px;
  font-family: var(--f-title); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em;
  transition: opacity var(--d-reveal) var(--ease-out);
}
.cam-rec i { width: 8px; height: 8px; border-radius: 50%; background: #E23B3B; }

@media (prefers-reduced-motion: no-preference) {
  /* focus-in: the camera settles from a soft zoom+blur when revealed */
  .cam-focus {
    transition: transform 1.1s var(--ease-out), filter 1s ease;
  }
  .problema-img .cam-focus { transform: scale(1.08); filter: blur(3px); }
  .problema-img.is-visible .cam-focus { transform: none; filter: none; }
  /* ambient: the lens "breathes", the radar ring pulses, REC blinks */
  .problema-img.is-visible .cam-glow { animation: cam-breathe 3.4s ease-in-out infinite; }
  .problema-img.is-visible .cam-ring { animation: cam-sonar 3.4s ease-out infinite; }
  .problema-img.is-visible .cam-rec i { animation: cam-rec-blink 1.4s steps(1) infinite; }
}
@keyframes cam-breathe {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes cam-sonar {
  0%       { opacity: .8; transform: translate(-50%, -50%) scale(.7); }
  70%, 100%{ opacity: 0;  transform: translate(-50%, -50%) scale(2.1); }
}
@keyframes cam-rec-blink {
  0%   { opacity: 1; }
  50%  { opacity: .15; }
}

/* ---------- Solucion ---------- */
.solucion {
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--radius-xl);  /* all corners */
  margin: var(--sp-8) clamp(1rem, 3vw, 3rem) var(--sp-12);
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(3rem, 6vw, 5rem);
}
/* Banner with the photo bg (guards + shield + skyline).
   `min-height` + `center top` keep the guards fully visible — the
   image is anchored to the top so it never crops their heads, and any
   excess room at the bottom blends into the navy of the section below. */
.solucion-banner {
  background:
    /* The artwork fades to light grey exactly where the copy sits, which drops
       white text to ~2:1 contrast. This scrim darkens the text side only and
       clears before the guards on the right. */
    linear-gradient(100deg,
      rgba(5, 30, 52, .95) 0%,
      rgba(5, 30, 52, .90) 40%,
      rgba(5, 30, 52, .55) 60%,
      rgba(5, 30, 52, 0) 78%),
    url('../assets/img/bg-solucion.png') center top / cover no-repeat,
    var(--c-navy);
  padding-block: clamp(5rem, 10vw, 8rem);
  min-height: clamp(440px, 38vw, 620px);
  position: relative;
  display: flex;
  align-items: center;
}
/* Subtle dark fade at the bottom of the banner so it blends with the
   navy area below where the cards sit. */
.solucion-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--c-navy));
  pointer-events: none;
}
.solucion-text {
  max-width: 600px;
  position: relative;
  z-index: 1;
}
.solucion-text h2 {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  line-height: 0.95;             /* tighter line spacing between the two lines */
  margin-bottom: var(--sp-5);
}
.solucion-text h2 .line1 {
  color: #ffffff;
  display: block;
  font-weight: 500;          /* lighter weight to keep visual hierarchy */
  opacity: 0.85;
  margin-bottom: 0;
  padding-bottom: 0;
}
.solucion-text h2 .line2 {
  color: #ffffff;
  display: block;
  font-weight: 700;
}
.solucion-text p {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  margin-bottom: var(--sp-6);
  max-width: 480px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: clamp(-3rem, -3vw, -2rem); /* let cards float over the banner edge */
  position: relative;
  z-index: 2;
}
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform var(--d-base) var(--ease-out), background var(--d-base), border-color var(--d-base);
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,158,0,.45);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.card-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-orange);
  display: grid;
  place-items: center;
  color: var(--c-white);
  box-shadow: 0 6px 14px rgba(255,158,0,.35);
  transition: transform var(--d-base);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); animation: pulse-soft 1.6s var(--ease-out) infinite; }
.card h3 {
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  flex: 1;
}
.card p {
  color: rgba(255,255,255,.7);
  font-size: 0.92rem;
  margin-bottom: var(--sp-4);
  flex: 1; /* push the link to the bottom for equal spacing */
}
.card a {
  color: var(--c-orange);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--d-fast);
  margin-top: auto;
}
.card a:hover { gap: var(--sp-3); }

@media (max-width: 768px) {
  .solucion-banner {
    background-position: center top;
    background-size: cover;
  }
  .solucion-text { max-width: 100%; }
  .solucion-text h2 .line1,
  .solucion-text h2 .line2 { color: #ffffff; } /* fallback so navy text isn't lost on mobile bg */
}

/* ---------- Operación visible ---------- */
.operacion {
  background:
    url('../assets/img/bg-operacion.jpg?v=2') left 25% / cover no-repeat,
    var(--c-bg-gray);
  position: relative;
}
.operacion h2 {
  text-align: center;
  margin-bottom: var(--sp-10);
  position: relative;
  z-index: 1;
}
.operacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
  position: relative;
  z-index: 1;
}
.operacion-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.operacion-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(5, 62, 92, .12);
  font-family: var(--f-body);
  color: var(--c-text-strong);
  font-size: 1rem;
}
.operacion-list li .check-circle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  transition: transform var(--d-base);
  filter: drop-shadow(0 4px 8px rgba(255, 158, 0, .35));
}
.operacion-list li:hover .check-circle { transform: scale(1.15) rotate(-6deg); }
.operacion-text > p {
  margin-bottom: var(--sp-6);
  color: var(--c-text);
  font-size: 1.05rem;
}
.operacion-cta { margin-top: var(--sp-8); }

@media (min-width: 900px) {
  .operacion {
    min-height: 600px;
    display: flex;
    align-items: center;
    padding-block: clamp(4rem, 7vw, 5rem);
  }
  .operacion-grid {
    /* Empty left column for the photo (in the bg) + text on the right */
    grid-template-columns: 1fr 1fr;
  }
  .operacion-text { grid-column: 2; }
  /* The h2 lives outside the grid, so centering it dragged the navy title over
     the dark half of the photo (navy on navy = invisible). Align it with the
     text column, which is the light side the artwork leaves for copy. */
  .operacion h2 {
    width: 50%;
    margin-left: auto;
    text-align: left;
  }
}

/* On mobile the bg photo would crowd the text — fall back to plain gray */
@media (max-width: 768px) {
  .operacion {
    background: var(--c-bg-gray);
  }
}

/* ---------- Experiencia / medio siglo ---------- */
.experiencia {
  background: var(--c-white);
}
.experiencia-title {
  text-align: center;
  font-family: var(--f-title);
  color: var(--c-navy);
  margin-bottom: var(--sp-10);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.2vw + 0.5rem, 1.5rem);
  line-height: 1.3;
}
.experiencia-title strong { font-weight: 700; }
.experiencia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}
.experiencia-stats {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(5, 62, 92, 0.78), rgba(5, 62, 92, 0.88)),
    url('../assets/img/bg-experiencia.jpg') center / cover no-repeat,
    var(--c-navy);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}
.stat {
  position: relative;
  z-index: 1;
}
.stat-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 0;
  font-family: var(--f-title);
  color: var(--c-orange);
  margin-bottom: var(--sp-2);
  line-height: 1.05;
}
.stat-pre {
  font-size: 0.95rem;
  font-weight: 700;
}
.stat-num {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-emph {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stat-suf {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.95;
}
.stat p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-family: var(--f-body);
  line-height: 1.5;
}
.experiencia-photo img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  min-height: 320px;
}

@media (min-width: 900px) {
  .experiencia-grid { grid-template-columns: 2fr 1fr; }
  .experiencia-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .experiencia-stats { grid-template-columns: 1fr; }
}

/* ---------- Testimonios ---------- */
.testimonios {
  background: var(--c-white);
  color: var(--c-text-strong);
  text-align: center;
  /* Less empty space below the CTA button (designer comment) */
  padding-bottom: clamp(0.5rem, 1.5vw, 1.25rem);
}
.testimonios h2 {
  color: var(--c-navy);
  font-family: var(--f-title);
  margin-bottom: var(--sp-12);
}

/* Single horizontal row: 2 portraits | orange card | 3 portraits.
   The card starts collapsed (width 0) so the 5 portraits sit centered;
   clicking a portrait expands the card, pushing the portraits aside. */
.testimonios-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
}

.t-portraits-left,
.t-portraits-right {
  display: flex;
  gap: clamp(6px, 0.8vw, 12px);
  flex-wrap: nowrap;
}

.t-portrait {
  position: relative;
  width: clamp(60px, 6.5vw, 96px);
  height: clamp(150px, 16vw, 220px);
  border-radius: 999px;
  overflow: hidden;
  background: #1a1a1a;       /* hides any whitish corner artifact */
  padding: 0;
  border: 0;
  cursor: pointer;
  filter: grayscale(100%) brightness(0.85);
  transition:
    transform var(--d-base) var(--ease-out),
    filter var(--d-base),
    box-shadow var(--d-base);
}
.t-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Zoom in slightly so the source image's pre-baked rounded edges are
     cropped out and never show as thin light lines around the silhouette. */
  transform: scale(1.08);
  transform-origin: center;
}
.t-portrait:hover,
.t-portrait.is-active {
  filter: grayscale(0) brightness(1);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 22px rgba(5, 62, 92, 0.22);
}
/* Subtle "hint" bounce to invite the click while the card is collapsed */
.t-portrait.is-hint {
  animation: portrait-hint 0.9s var(--ease-out);
}
@keyframes portrait-hint {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-12px) scale(1.04); }
  60%      { transform: translateY(-4px) scale(1.02); }
}

.testimonio-card {
  background: var(--c-orange);
  color: var(--c-text-strong);
  border-radius: var(--radius);
  text-align: left;
  position: relative;
  box-shadow: 0 16px 32px rgba(255, 158, 0, .22);
  /* Collapsed by default — expands when the stage gets .is-open */
  max-width: 0;
  padding: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  flex: 0 1 auto;
  transition:
    max-width 0.55s var(--ease-out),
    padding 0.55s var(--ease-out),
    opacity 0.4s var(--ease-out);
}
.testimonios-stage.is-open .testimonio-card {
  max-width: 640px;
  width: 100%;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  min-height: 240px;
  opacity: 1;
  flex: 1 1 auto;
}
/* Each .t-content is overlaid; only the active one is shown */
.t-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  position: absolute;
  inset: clamp(1.75rem, 3vw, 2.5rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
.t-content.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Placeholder shown while no portrait is hovered */
.t-placeholder {
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
}
.t-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  gap: var(--sp-3);
  color: rgba(31, 41, 55, 0.78);
}
.t-placeholder-inner svg {
  opacity: 0.55;
  animation: float-soft 2.6s ease-in-out infinite;
}
.t-placeholder-inner p {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 !important;
}

.t-stat-block { display: flex; flex-direction: column; }
.t-stat {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--c-text-strong);
  letter-spacing: -0.02em;
}
.t-stat-sub {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: var(--sp-2);
  color: var(--c-text-strong);
  line-height: 1.3;
}
.t-stat-sub em { font-style: normal; font-weight: 500; opacity: 0.85; }

.t-body p { margin-bottom: var(--sp-4); font-size: 0.98rem; line-height: 1.55; }
.t-body .author { display: flex; flex-direction: column; gap: 2px; }
.t-body .author strong { color: var(--c-text-strong); font-weight: 700; }
.t-body .author span { font-size: 0.85rem; color: var(--c-text-strong); opacity: 0.75; }

.testimonios .cta-final {
  margin-top: var(--sp-12);
}

@media (max-width: 900px) {
  /* Portraits on one row (under the title), testimonial opens below */
  .testimonios-stage { flex-wrap: wrap; gap: var(--sp-6); }
  .t-portraits-left  { order: 1; }
  .t-portraits-right { order: 2; }
  .testimonio-card   { order: 3; }
  .testimonios-stage.is-open .testimonio-card {
    flex-basis: 100%;
    max-width: 600px;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .t-content {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .testimonios-stage.is-open .testimonio-card { min-height: 320px; }
  .t-portraits-left,
  .t-portraits-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- Clientes ---------- */
.clientes {
  background: var(--c-white);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.clientes h2 {
  text-align: center;
  margin-bottom: var(--sp-10);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--sp-12);
  width: max-content;
  animation: marquee 85s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 160px;
  height: 80px;
  transition: transform var(--d-base);
}
.marquee-item img {
  /* Logos show in full colour (client request). max-height is an explicit
     px value — a percentage doesn't resolve inside the centered grid track,
     so tall/vertical logos used to render at natural size and get clipped
     by the marquee's overflow. 60px keeps them balanced with wide logos. */
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.marquee-item:hover { transform: scale(1.06); }

/* ---------- Footer ---------- */
.footer {
  background: var(--c-navy);   /* logo navy instead of black (designer comment) */
  color: rgba(255,255,255,.7);
  padding-block: var(--sp-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
.footer-brand img { height: 48px; margin-bottom: var(--sp-4); }
.footer-brand .socials {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.footer-brand .socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  color: var(--c-white);
  transition: background var(--d-fast), transform var(--d-fast);
}
.footer-brand .socials a:hover { background: var(--c-orange); transform: translateY(-3px); }
.footer-col h4 {
  font-family: var(--f-title);
  color: var(--c-orange);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-4);
  font-weight: 700;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a {
  color: rgba(255,255,255,.7);
  font-size: 0.92rem;
  transition: color var(--d-fast);
}
.footer-col a:hover { color: var(--c-orange); }
.footer-legal {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.82rem;
  text-align: center;
  color: rgba(255,255,255,.45);
}

@media (min-width: 768px) {
  /* Brand block + 4 link columns (inner pages). */
  .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
  /* The home footer only has 3 link columns. */
  .footer-grid--home { grid-template-columns: 1.5fr repeat(3, 1fr); }
}