:root{
 --bg:#070B14;
 --text:#fff;
 --muted:rgba(255,255,255,.7);
 --stroke:rgba(255,255,255,.12);
 --accent:#6FBF8E;
 --max:1160px;
}

body{
  margin:0;
  font-family:Inter,system-ui;
  background:var(--bg);
  color:var(--text);

  /* offset para header fijo */
  padding-top:88px;
}

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

/* =========================
   HEADER (FIXED)
   ========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  border-bottom:1px solid var(--stroke);
  background:rgba(7,11,20,.8);
  backdrop-filter:blur(12px);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.logo-img{
  height:56px;
  width:auto;
  display:block;
}

.nav{
  display:flex;
  gap:18px;
}

.nav a{
  color:var(--muted);
  font-weight:600;
  text-decoration:none;
}

.nav a:hover{
  color:#fff;
}

.nav-right{
  display:flex;
  gap:12px;
}

.btn{
  padding:10px 16px;
  border-radius:14px;
  border:1px solid var(--stroke);
}

.lang{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
}

/* =========================
   HERO
   ========================= */

.hero{
  padding:96px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}

.hero h1{
  font-size:56px;
  line-height:1.05;
  margin:0;
}

.hero p{
  color:var(--muted);
  line-height:1.7;
  font-size:18px;
}

.hero-image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-image img{
  max-width:420px;
  width:100%;
  opacity:.95;
}

/* =========================
   FOOTER
   ========================= */

.footer{
  padding:32px 0;
  color:var(--muted);
  font-size:13px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
}

/* =========================
   BRAND LOGO (helpers)
   ========================= */

.brand-logo{
  height:28px;
  width:auto;
  display:block;
}

@media (min-width:900px){
  .brand-logo{height:30px}
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   HERO PARTICLES (shared)
   - Same visual family as index hero
   - Use .hero--subtle for internal pages
   ========================= */

.hero-content{ position:relative; z-index:1; }

.hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.95;
  -webkit-mask-image: radial-gradient(circle at 45% 35%, #000 72%, transparent 98%);
  mask-image: radial-gradient(circle at 45% 35%, #000 72%, transparent 98%);
}

.hero--subtle .hero-particles{
  opacity:.55;
  -webkit-mask-image: radial-gradient(circle at 45% 30%, #000 62%, transparent 96%);
  mask-image: radial-gradient(circle at 45% 30%, #000 62%, transparent 96%);
}

/* =========================
   ABOUT: WHO RAIL (no dots)
   ========================= */

.who-rail{
  position:relative;
  padding-left:34px;
}

.who-rail::before{
  content:"";
  position:absolute;
  left:12px;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

/* animated highlight that travels the rail */
.who-rail::after{
  content:"";
  position:absolute;
  left:12px;
  top:8px;
  width:2px;
  height:120px;
  border-radius:999px;
  background: linear-gradient(to bottom, transparent, rgba(16,185,129,.55), transparent);
  opacity:.75;
  filter: blur(.2px);
  animation: whoRailScan 4.6s linear infinite;
}

@keyframes whoRailScan{
  0%{ transform: translateY(0); opacity:.0; }
  10%{ opacity:.7; }
  90%{ opacity:.7; }
  100%{ transform: translateY(calc(100% - 120px)); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .who-rail::after{ animation:none; opacity:0; }
}

.who-item{
  position:relative;
  padding:18px 0 22px;
}

.who-item + .who-item{
  border-top:1px solid rgba(255,255,255,.08);
}

.who-title{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(148,163,184,.85);
  margin:0 0 10px;
}

.who-year{
  margin:0;
  font-size:64px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
}

.who-desc{
  margin:12px 0 0;
  max-width:56ch;
  color:rgba(226,232,240,.9);
  line-height:1.6;
}

/* subtle pulse + hover lift/glow */
.who-hover{
  border-radius:18px;
  padding-left:0;
  padding-right:0;
  transition: transform 220ms ease, filter 220ms ease;
}

.who-hover::before{
  content:"";
  position:absolute;
  inset:-14px -18px;
  border-radius:18px;
  background:
    radial-gradient(520px 200px at 30% 25%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(520px 220px at 15% 35%, rgba(16,185,129,.10), transparent 65%);
  opacity:0;
  transition: opacity 220ms ease;
  pointer-events:none;
}

.who-hover:hover,
.who-hover:focus-within{ transform: translateY(-2px); }

.who-hover:hover::before,
.who-hover:focus-within::before{ opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .who-year{ animation: whoPulse 5.2s ease-in-out infinite; }
  .who-item + .who-item .who-year{ animation-delay: .6s; }
}

@keyframes whoPulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(16,185,129,0)); }
  50%{ filter: drop-shadow(0 0 14px rgba(16,185,129,.18)); }
}

/* =========================
   TRUSTED-BY STRIP (legacy)
   ========================= */

.adia-trusted-strip{
  overflow:hidden;
  position:relative;
}

.adia-trusted-track{
  display:flex;
  gap:14px;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:adiaMarquee 28s linear infinite;
}

.adia-trusted-strip:hover .adia-trusted-track{
  animation-play-state:paused;
}

.adia-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.85);
  font-weight:600;
}

@keyframes adiaMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.subtle{
  margin-top:10px;
  color:rgba(255,255,255,.55);
  font-size:14px;
}

/* =========================
   CLIENTS MARQUEE (Powering)
   ========================= */

.clients-section{
  position:relative;
}

.clients-marquee{
  position:relative;
  overflow:hidden;
  padding:10px 0;
}

.clients-marquee::before,
.clients-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  z-index:2;
  pointer-events:none;
}

.clients-marquee::before{
  left:0;
  background:linear-gradient(to right, rgba(5,7,15,1), rgba(5,7,15,0));
}

.clients-marquee::after{
  right:0;
  background:linear-gradient(to left, rgba(5,7,15,1), rgba(5,7,15,0));
}

.clients-track{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  will-change:transform;

  flex-wrap:nowrap;
  white-space:nowrap;

  animation:marquee-left 34s linear infinite;
}

.clients-track.reverse{
  animation-name:marquee-right;
  animation-duration:46s;
  opacity:.72;
}

.clients-marquee:hover .clients-track{
  animation-play-state:paused;
}

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

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

.client-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;

  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);

  color:rgba(226,232,240,.92);
  font-size:14px;
  line-height:1;
  white-space:nowrap;

  transition:transform .18s ease,
             border-color .18s ease,
             background .18s ease,
             color .18s ease,
             box-shadow .18s ease;
}

.client-pill:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  color:#fff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .clients-track{
    animation:none!important;
    transform:none!important;
  }
  .clients-marquee::before,
  .clients-marquee::after{
    display:none;
  }
}

/* =========================
   HEADER SHRINK ON SCROLL
   ========================= */

.header{
  transition: background .18s ease, border-color .18s ease, padding .18s ease, box-shadow .18s ease;
}

.header .header-inner{
  transition: padding .18s ease;
}

/* tu logo actual usa .logo-img */
.logo-img{
  transition: height .18s ease, opacity .18s ease, transform .18s ease;
}

/* estado scrolleado */
.header.is-scrolled{
  background: rgba(7,11,20,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.header.is-scrolled .header-inner{
  padding: 10px 0; /* antes 16px */
}

.header.is-scrolled .logo-img{
  height: 44px; /* antes 56px */
  opacity: .98;
  transform: translateY(-0.5px);
}

/* opcional: links un poquito más “tight” */
.header.is-scrolled .nav{
  gap: 16px;
}

/* =========================
   REVEAL ON SCROLL (generic)
   Used by Capability Field
   ========================= */

[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-reveal].is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =========================
   CAPABILITY FIELD — HOVER
   (Technology choices)
   ========================= */

/* Wrapper is already .group in HTML */
.capability-item{
  position:relative;
  padding-left:24px;
  transition: transform 180ms ease;
}

/* Vertical technical marker */
.capability-item::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:1px;
  height:20px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.0),
    rgba(255,255,255,.35),
    rgba(255,255,255,.0)
  );
  opacity:0;
  transition: opacity 180ms ease;
}

/* Hover / focus */
.capability-item:hover,
.capability-item:focus-within{
  transform: translateX(2px);
}

.capability-item:hover::before,
.capability-item:focus-within::before{
  opacity:1;
}

/* Text contrast refinement on hover */
.capability-item:hover h3,
.capability-item:focus-within h3{
  color:#fff;
}

.capability-item:hover p,
.capability-item:focus-within p{
  color:rgba(226,232,240,.95);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .capability-item,
  .capability-item:hover{
    transform:none;
  }
}
/* =========================
   CAPABILITY FIELD — SCAN EFFECT
   ========================= */

.capability-item::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  opacity:0;
  transform: translateY(-50%) scaleX(.2);
  pointer-events:none;
}

/* trigger on hover */
.capability-item:hover::after,
.capability-item:focus-within::after{
  opacity:1;
  animation: capabilityScan 720ms ease-out forwards;
}

@keyframes capabilityScan{
  0%{
    transform: translateY(-50%) scaleX(.15);
    opacity:.0;
  }
  30%{
    opacity:.45;
  }
  100%{
    transform: translateY(-50%) scaleX(1);
    opacity:0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .capability-item::after{
    display:none;
  }
}
/* =========================
   CAPABILITY FIELD — AMBIENT LIFE
   ========================= */

@media (prefers-reduced-motion: no-preference){

  /* Move the technical grid very slowly */
  .capability-field-bg{
    animation: gridDrift 42s linear infinite;
  }

  @keyframes gridDrift{
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 120px 120px;
    }
  }

  /* Subtle breathing of the whole field */
  .capability-field{
    animation: fieldBreath 18s ease-in-out infinite;
  }

  @keyframes fieldBreath{
    0%,100%{
      opacity: .96;
    }
    50%{
      opacity: 1;
    }
  }
}
/* =========================
   HERO TITLES (Semantic)
   ========================= */

/* Hero estándar (Services, About, Contact) */
.hero-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem; /* md:text-5xl */
  }
}

/* Hero primario (Home only) */
.hero-title--primary {
  font-size: 2.25rem; /* text-4xl */
}

@media (min-width: 768px) {
  .hero-title--primary {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

/* =========================
   CTA Buttons (Unified)
   - Pure CSS helpers to keep CTA styling consistent across pages/sections
   - Do not change copy; only standardize presentation
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.btn-sm {
  padding: 0.5rem 1rem; /* px-4 py-2 */
  font-size: 0.875rem;  /* text-sm */
  font-weight: 500;     /* font-medium */
}

.btn-md {
  padding: 0.75rem 1.25rem; /* px-5 py-3 */
  font-size: 0.875rem;      /* text-sm */
  font-weight: 600;         /* font-semibold */
}

.btn-lg {
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  font-size: 0.875rem;     /* text-sm */
  font-weight: 500;        /* font-medium */
}

/* Use when an existing CTA was semibold but needs the lg padding */
.btn-strong {
  font-weight: 600;
}

.btn-primary {
  background: #ffffff;
  color: #000000;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
}