/* ============================================================
   EKKO · security & compliance
   Sistema de diseño v1
   ============================================================ */

:root{
  /* Paleta de marca */
  --navy:        #1A2B47;
  --navy-deep:   #0F1B30;
  --navy-abyss:  #0A1424;
  --blue:        #2E6DB4;
  --blue-bright: #4A8FDB;
  --gold:        #C9A227;
  --gold-soft:   #D9BC5A;
  --bone:        #F1EFE8;
  --bone-dim:    #E4E1D6;
  --ink:         #12203A;

  /* Roles */
  --bg:          #FBFAF6;
  --text:        #1A2B47;
  --text-soft:   #4A5A76;
  --text-faint:  #8592A8;
  --line:        rgba(26,43,71,.12);
  --line-strong: rgba(26,43,71,.22);

  /* Tipografía */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-brand:   'Montserrat', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;

  /* Escala */
  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 5.4rem);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{ line-height:1.08; font-weight:600; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

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

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--font-brand);
  font-weight:500;
  letter-spacing:-.01em;
  font-size:1.5rem;
  color:var(--navy);
  line-height:1;
}
.wordmark--big{ font-size:clamp(3rem,8vw,4.5rem); color:var(--bone); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(251,250,246,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--line); }
.nav__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{ position:relative; display:flex; align-items:center; }
.nav__brand .wordmark__echo{
  position:absolute; right:-10px; top:50%; width:6px; height:6px;
  border-radius:50%; background:var(--gold);
  transform:translateY(-50%);
  box-shadow:0 0 0 0 rgba(201,162,39,.5);
  animation:pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(201,162,39,.45); }
  70%{ box-shadow:0 0 0 9px rgba(201,162,39,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
}
.nav__links{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav__links a{
  font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
  color:var(--text-soft); position:relative; transition:color .25s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1.5px;
  background:var(--blue); transition:width .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover{ color:var(--navy); }
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  padding:.55rem 1.1rem; border-radius:999px;
  background:var(--navy); color:var(--bone)!important;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nav__cta:hover{ background:var(--blue); transform:translateY(-1px); }

.lang{
  display:flex; align-items:center; gap:.3rem;
  background:none; border:1px solid var(--line-strong); cursor:pointer;
  padding:.4rem .7rem; border-radius:999px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--text-faint); transition:border-color .25s var(--ease);
}
.lang:hover{ border-color:var(--blue); }
.lang__opt{ transition:color .25s var(--ease); }
.lang__opt.is-active{ color:var(--navy); }
.lang__sep{ opacity:.4; }

.nav__burger{ display:none; background:none; border:0; cursor:pointer; width:32px; height:32px; position:relative; }
.nav__burger span{
  position:absolute; left:6px; right:6px; height:2px; background:var(--navy);
  border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1){ top:12px; }
.nav__burger span:nth-child(2){ bottom:12px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem var(--gutter) 4rem;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(46,109,180,.10), transparent 55%),
    linear-gradient(180deg, #FBFAF6 0%, #F4F2EA 100%);
  overflow:hidden;
}
/* Elemento firma: eco concéntrico */
.hero__echo{
  position:absolute; top:50%; left:82%; translate:-50% -50%;
  width:min(70vw,760px); aspect-ratio:1; pointer-events:none;
  opacity:.5;
}
.hero__echo span{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px solid var(--blue);
  animation:echo 6s var(--ease) infinite;
}
.hero__echo span:nth-child(1){ animation-delay:0s; }
.hero__echo span:nth-child(2){ animation-delay:1.5s; }
.hero__echo span:nth-child(3){ animation-delay:3s; }
.hero__echo span:nth-child(4){ animation-delay:4.5s; }
@keyframes echo{
  0%{ width:8%; height:8%; opacity:0; border-color:var(--gold); }
  15%{ opacity:.55; }
  100%{ width:100%; height:100%; opacity:0; border-color:var(--blue); }
}

.hero__inner{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; z-index:2; }
.hero__eyebrow{
  font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
  margin-bottom:1.6rem; opacity:0; animation:rise .8s var(--ease) .1s forwards;
}
.hero__title{
  font-size:var(--step-4); font-weight:600; letter-spacing:-.03em;
  max-width:16ch; margin-bottom:1.8rem;
}
.hero__title span{ display:block; opacity:0; animation:rise .9s var(--ease) forwards; }
.hero__title span:nth-child(1){ animation-delay:.18s; }
.hero__title span:nth-child(2){ animation-delay:.30s; }
.hero__title span:nth-child(3){ animation-delay:.42s; }
.hero__title-accent{
  font-style:italic; font-weight:300;
  background:linear-gradient(100deg, var(--blue), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.1em;
}
.hero__lead{
  font-size:var(--step-1); font-weight:300; color:var(--text-soft);
  max-width:52ch; line-height:1.55; margin-bottom:2.6rem;
  opacity:0; animation:rise .9s var(--ease) .55s forwards;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; opacity:0; animation:rise .9s var(--ease) .7s forwards; }

.hero__scroll{
  position:absolute; bottom:2rem; left:var(--gutter); z-index:2;
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-faint);
  opacity:0; animation:rise 1s var(--ease) 1s forwards;
}
.hero__scroll-line{ width:48px; height:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; inset:0; width:40%; background:var(--blue);
  animation:slide 2.4s var(--ease) infinite;
}
@keyframes slide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(280%); } }

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-size:var(--step--1); font-weight:500;
  letter-spacing:.01em; padding:.9rem 1.6rem; border-radius:999px;
  cursor:pointer; border:1px solid transparent; transition:all .3s var(--ease);
}
.btn--primary{ background:var(--navy); color:var(--bone); }
.btn--primary:hover{ background:var(--blue); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(46,109,180,.6); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--navy); background:rgba(26,43,71,.04); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ============================================================
   STRIP
   ============================================================ */
.strip{ background:var(--navy-deep); color:var(--bone); }
.strip__inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.1rem var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.4rem;
}
.strip__item{
  font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.03em; color:rgba(241,239,232,.78);
}
.strip__dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-head{ max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter); margin-bottom:3.5rem; }
.section-head__label,
.section-head__label--light{
  font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.section-head__label::before,
.section-head__label--light::before{
  content:''; width:26px; height:1px; background:var(--gold);
}
.section-head__label--light{ color:var(--gold-soft); }
.section-head__label--light::before{ background:var(--gold); }
.section-head__title{ font-size:var(--step-3); max-width:20ch; }

/* ============================================================
   SERVICIOS
   ============================================================ */
.services{ padding:7rem 0; }
.services__grid{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem;
}
.svc{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.9rem; background:#fff;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow:hidden;
}
.svc:hover{ transform:translateY(-5px); border-color:var(--line-strong);
  box-shadow:0 24px 50px -30px rgba(26,43,71,.35); }
.svc--entry{ grid-column:span 3; }
.svc--line{ grid-column:span 2; background:var(--bone); border-color:transparent; }
.svc--star{ grid-column:span 6; background:
  radial-gradient(120% 160% at 90% 10%, rgba(46,109,180,.16), transparent 60%),
  var(--navy); border-color:transparent; color:var(--bone); }

.svc__tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin-bottom:1rem;
  display:inline-block;
}
.svc--star .svc__tag{ color:var(--gold-soft); }
.svc__tag--star{ color:var(--gold-soft); }
.svc__name{ font-size:var(--step-1); margin-bottom:.7rem; letter-spacing:-.02em; }
.svc--star .svc__name{ font-size:var(--step-2); max-width:14ch; }
.svc__desc{ color:var(--text-soft); font-weight:300; font-size:var(--step-0); max-width:56ch; }
.svc--line .svc__desc,
.svc--entry .svc__desc{ color:var(--text-soft); }
.svc--star .svc__desc{ color:rgba(241,239,232,.82); }
.svc__star-glow{
  position:absolute; right:-60px; bottom:-60px; width:220px; height:220px;
  border-radius:50%; border:1px solid rgba(201,162,39,.35);
  box-shadow:0 0 0 30px rgba(201,162,39,.05), inset 0 0 60px rgba(201,162,39,.08);
}

/* ============================================================
   ENFOQUE
   ============================================================ */
.approach{ background:var(--navy-deep); color:var(--bone); padding:7rem 0; position:relative; overflow:hidden; }
.approach::before{
  content:''; position:absolute; top:-30%; left:-10%; width:50%; height:160%;
  background:radial-gradient(circle, rgba(46,109,180,.14), transparent 60%);
  pointer-events:none;
}
.approach__inner{
  position:relative; max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.approach__title{ font-size:var(--step-2); color:var(--bone); margin-bottom:1.4rem; max-width:16ch; }
.approach__lead{ color:rgba(241,239,232,.72); font-weight:300; font-size:var(--step-0); max-width:46ch; }
.approach__steps{ list-style:none; display:flex; flex-direction:column; gap:0; }
.approach__step{
  display:flex; gap:1.6rem; padding:1.7rem 0;
  border-top:1px solid rgba(241,239,232,.12);
}
.approach__step:last-child{ border-bottom:1px solid rgba(241,239,232,.12); }
.approach__num{
  font-family:var(--font-mono); font-size:.8rem; color:var(--gold-soft);
  padding-top:.35rem; flex:none; letter-spacing:.05em;
}
.approach__step h3{ font-size:var(--step-1); margin-bottom:.4rem; color:var(--bone); }
.approach__step p{ color:rgba(241,239,232,.7); font-weight:300; font-size:var(--step--1); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about{ padding:7rem 0; }
.about__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center;
}
.about__title{ font-size:var(--step-2); margin-bottom:1.6rem; max-width:16ch; }
.about__text p{ color:var(--text-soft); font-weight:300; margin-bottom:1.2rem; max-width:52ch; }
.about__text .btn{ margin-top:1rem; }

.about__aside{ display:flex; justify-content:center; }
.about__card{
  position:relative; width:100%; aspect-ratio:1/.92; border-radius:24px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(46,109,180,.35), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-abyss) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(26,43,71,.6);
}
.about__descriptor{ font-family:var(--font-mono); font-size:var(--step--1); color:rgba(241,239,232,.6); letter-spacing:.05em; }
.about__wave{ display:flex; align-items:flex-end; gap:6px; height:40px; margin-top:1.4rem; }
.about__wave span{
  width:4px; background:var(--gold-soft); border-radius:2px;
  animation:wave 1.6s var(--ease) infinite;
}
.about__wave span:nth-child(1){ height:40%; animation-delay:0s; }
.about__wave span:nth-child(2){ height:75%; animation-delay:.2s; }
.about__wave span:nth-child(3){ height:100%; animation-delay:.4s; }
.about__wave span:nth-child(4){ height:65%; animation-delay:.6s; }
.about__wave span:nth-child(5){ height:35%; animation-delay:.8s; }
@keyframes wave{ 0%,100%{ transform:scaleY(.5); opacity:.6; } 50%{ transform:scaleY(1); opacity:1; } }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{ background:
  radial-gradient(100% 120% at 0% 0%, rgba(46,109,180,.18), transparent 50%),
  var(--navy-abyss); color:var(--bone); padding:7rem 0; }
.contact__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.contact__title{ font-size:var(--step-2); color:var(--bone); margin-bottom:1.3rem; max-width:14ch; }
.contact__lead{ color:rgba(241,239,232,.72); font-weight:300; max-width:40ch; margin-bottom:2rem; }
.contact__mail{
  font-family:var(--font-mono); font-size:var(--step-0); color:var(--gold-soft);
  border-bottom:1px solid rgba(201,162,39,.4); padding-bottom:2px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.contact__mail:hover{ color:var(--gold); border-color:var(--gold); }

.contact__form{ display:flex; flex-direction:column; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(241,239,232,.6);
}
.field input,.field textarea{
  font-family:var(--font-display); font-size:var(--step-0); color:var(--bone);
  background:rgba(241,239,232,.05); border:1px solid rgba(241,239,232,.15);
  border-radius:12px; padding:.85rem 1rem; transition:border-color .25s var(--ease), background .25s var(--ease);
  resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-bright); background:rgba(241,239,232,.08);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(241,239,232,.35); }
.contact__note{ font-size:.78rem; color:rgba(241,239,232,.5); font-weight:300; }
.contact__form .btn--primary{ background:var(--gold); color:var(--navy-abyss); }
.contact__form .btn--primary:hover{ background:var(--gold-soft); box-shadow:0 12px 30px -12px rgba(201,162,39,.6); }
.contact__form .btn.is-sent{ background:#3FA96A; color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-abyss); color:rgba(241,239,232,.7); padding:3rem 0; border-top:1px solid rgba(241,239,232,.08); }
.footer__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.footer__brand{ display:flex; align-items:baseline; gap:.7rem; }
.footer__brand .wordmark{ color:var(--bone); font-size:1.3rem; }
.footer__descriptor{ font-family:var(--font-mono); font-size:.7rem; color:rgba(241,239,232,.45); letter-spacing:.05em; }
.footer__nav{ display:flex; gap:1.6rem; }
.footer__nav a{ font-size:var(--step--1); color:rgba(241,239,232,.6); transition:color .25s var(--ease); }
.footer__nav a:hover{ color:var(--gold-soft); }
.footer__legal{ display:flex; gap:1.2rem; font-family:var(--font-mono); font-size:.72rem; color:rgba(241,239,232,.4); width:100%; padding-top:1.5rem; margin-top:.5rem; border-top:1px solid rgba(241,239,232,.08); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .services__grid{ grid-template-columns:1fr 1fr; }
  .svc--entry,.svc--line,.svc--star{ grid-column:span 2; }
  .approach__inner,.about__inner,.contact__inner{ grid-template-columns:1fr; gap:2.6rem; }
  .about__aside{ order:-1; }
  .about__card{ max-width:420px; }
}
@media (max-width:640px){
  .nav__links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:.4rem; padding:1.2rem var(--gutter) 2rem; margin:0;
    background:rgba(251,250,246,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .4s var(--ease); pointer-events:none;
  }
  .nav__links.is-open{ transform:translateY(0); pointer-events:auto; }
  .nav__links a{ font-size:1.05rem; padding:.6rem 0; width:100%; }
  .nav__cta{ margin-top:.5rem; }
  .nav__burger{ display:block; margin-left:auto; }
  .lang{ margin-left:0; }
  .services__grid{ grid-template-columns:1fr; }
  .svc--entry,.svc--line,.svc--star{ grid-column:span 1; }
  .hero{ padding-top:7.5rem; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline-offset:4px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .hero__title span,.hero__eyebrow,.hero__lead,.hero__actions,.hero__scroll{ opacity:1!important; transform:none!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}