:root{
  --bg:#FAFAF7;
  --surface:#F1F1E9;
  --ink:#1800AD;
  --ink-soft:#55547A;
  --ink-faint:#9291AE;
  --accent:#C1FF72;
  --accent-deep:#97DA2D;
  --indigo:#1800AD;
  --line:#DEDED2;
  --line-strong:#C7C6B8;

  --display:'Space Grotesk',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;

  --wrap:1180px;
}

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

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
  }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

ul{
  list-style:none;
}

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

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

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.05;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
}

.eyebrow::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--ink-soft);
}

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

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:0.02em;
  padding:14px 24px;
  border-radius:2px;
  border:1px solid var(--ink);
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
  white-space:nowrap;
  cursor:pointer;
}

.btn-primary{
  background:var(--ink);
  color:var(--bg);
}

.btn-primary:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:var(--ink);
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}

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

.btn-arrow{
  transition:transform .2s ease;
}

.btn:hover .btn-arrow{
  transform:translateX(3px);
}

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

header.nav{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
}

header.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(250,250,247,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

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

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
  color:var(--indigo);
}

.brand-logo{
  height:56px;
  width:auto;
  flex-shrink:0;
  display:block;
}

.brand svg{
  width:26px;
  height:26px;
  flex-shrink:0;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
}

.nav-links a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.03em;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:3px;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:1px;
  background:var(--ink);
  transition:width .25s ease;
}

.nav-links a:hover{
  color:var(--ink);
}

.nav-links a:hover::after{
  width:100%;
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:20px;
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:1.5px;
  background:var(--ink);
  margin:5px 0;
  transition:.25s;
}

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

.hero{
  position:relative;
  padding:96px 0 90px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
}

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

.hero-eyebrow{
  margin-bottom:26px;
}

.hero h1{
  font-size:clamp(2.5rem,5.4vw,4.4rem);
  max-width:12ch;
}

.hero-lede{
  margin-top:26px;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:17px;
}

.hero-ctas{
  display:flex;
  gap:16px;
  margin-top:40px;
  flex-wrap:wrap;
}

.hero-visual{
  position:absolute;
  top:50%;
  right:-4%;
  transform:translateY(-50%);
  width:min(54%, 620px);
  aspect-ratio:1/1;
  z-index:0;
  pointer-events:none;
}

.hero-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0.92;
}

/* ---------- Section shell ---------- */

section{
  padding:104px 0;
}

.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:64px;
}

.section-head h2{
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  max-width:14ch;
}

.section-head p{
  color:var(--ink-soft);
  font-size:15.5px;
  max-width:42ch;
}

.alt{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- Servicios ---------- */

.services-list{
  border-top:1px solid var(--line);
}

.service-row{
  display:grid;
  grid-template-columns:80px 1.1fr 1.6fr;
  gap:32px;
  padding:32px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:background .2s ease;
}

.service-row:hover{
  background:rgba(193,255,114,0.10);
}

.service-num{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-faint);
  padding-top:4px;
}

.service-title{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
}

.service-desc{
  color:var(--ink-soft);
  font-size:15px;
  max-width:52ch;
}

/* ---------- Por qué ---------- */

.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.why-card{
  background:var(--bg);
  padding:44px;
}

.why-mark{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:11px;
  margin-bottom:22px;
}

.why-card h3{
  font-size:19px;
  margin-bottom:12px;
}

.why-card p{
  color:var(--ink-soft);
  font-size:15px;
  max-width:40ch;
}

/* ---------- Sectores ---------- */

.sector-chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:56px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px 10px 12px;
  border:1px solid var(--line-strong);
  border-radius:100px;
  font-size:14px;
  background:var(--bg);
}

.chip svg{
  width:16px;
  height:16px;
  stroke:var(--indigo);
}

.sector-mosaic{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
}

.tile{
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:18px;
}

.tile-label{
  position:relative;
  z-index:2;
  font-family:var(--mono);
  font-size:11.5px;
  color:#fff;
  letter-spacing:0.03em;
}

.tile svg{
  position:absolute;
  top:22px;
  left:18px;
  width:26px;
  height:26px;
  stroke:rgba(255,255,255,0.85);
  z-index:2;
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(20,19,61,0.05) 0%,
    rgba(20,19,61,0.75) 100%
  );
  z-index:1;
}

.tile-1{
  background:
    linear-gradient(160deg,rgba(24,0,173,0.55),rgba(20,19,61,0.8)),
    url("https://images.pexels.com/photos/19471015/pexels-photo-19471015.jpeg?auto=compress&cs=tinysrgb&w=800")
    center/cover no-repeat,
    linear-gradient(160deg,#1800AD,#14133D);
}

.tile-2{
  background:
    linear-gradient(160deg,rgba(40,16,193,0.55),rgba(28,27,85,0.8)),
    url("https://images.pexels.com/photos/34297951/pexels-photo-34297951.jpeg?auto=compress&cs=tinysrgb&w=800")
    center/cover no-repeat,
    linear-gradient(160deg,#2810C1,#1C1B55);
}

.tile-3{
  background:
    linear-gradient(160deg,rgba(14,0,143,0.55),rgba(15,14,51,0.8)),
    url("https://images.pexels.com/photos/3845737/pexels-photo-3845737.jpeg?auto=compress&cs=tinysrgb&w=800")
    center/cover no-repeat,
    linear-gradient(160deg,#0E008F,#0F0E33);
}

.tile-4{
  background:
    linear-gradient(160deg,rgba(33,9,187,0.55),rgba(23,22,80,0.8)),
    url("https://images.pexels.com/photos/6111585/pexels-photo-6111585.jpeg?auto=compress&cs=tinysrgb&w=800")
    center/cover no-repeat,
    linear-gradient(160deg,#2109BB,#171650);
}

.tile-5{
  background:
    linear-gradient(160deg,rgba(20,0,144,0.55),rgba(18,17,64,0.8)),
    url("https://images.pexels.com/photos/6235240/pexels-photo-6235240.jpeg?auto=compress&cs=tinysrgb&w=800")
    center/cover no-repeat,
    linear-gradient(160deg,#140090,#121140);
}

/* ---------- Método ---------- */

.method-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-top:8px;
}

.method-line::before{
  content:"";
  position:absolute;
  top:15px;
  left:0;
  right:0;
  height:1px;
  background:var(--line-strong);
}

.method-step{
  position:relative;
  padding-top:44px;
}

.method-dot{
  position:absolute;
  top:8px;
  left:0;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--ink);
}

.method-step.is-active .method-dot{
  background:var(--accent);
  border-color:var(--accent-deep);
}

.method-progress{
  position:absolute;
  top:8px;
  left:0;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(193,255,114,0.28);
  z-index:1;
  animation:travel-dot 6s ease-in-out infinite;
}

@keyframes travel-dot{
  0%{ left:0%; opacity:0; }
  4%{ opacity:1; }
  20%{ left:0%; }
  30%{ left:calc(25% + 8px); }
  40%{ left:calc(25% + 8px); }
  50%{ left:calc(50% + 16px); }
  60%{ left:calc(50% + 16px); }
  70%{ left:calc(75% + 24px); }
  85%{ left:calc(75% + 24px); opacity:1; }
  92%{ opacity:0; }
  100%{ left:0%; opacity:0; }
}

.method-step:nth-of-type(1) .method-dot{
  animation:dot-light-1 6s ease-in-out infinite;
}

.method-step:nth-of-type(2) .method-dot{
  animation:dot-light-2 6s ease-in-out infinite;
}

.method-step:nth-of-type(3) .method-dot{
  animation:dot-light-3 6s ease-in-out infinite;
}

.method-step:nth-of-type(4) .method-dot{
  animation:dot-light-4 6s ease-in-out infinite;
}

@keyframes dot-light-1{
  0%,85%{
    background:var(--accent);
    border-color:var(--accent-deep);
    box-shadow:0 0 0 4px rgba(193,255,114,0.22);
  }
  92%,100%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
}

@keyframes dot-light-2{
  0%,28%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
  35%,85%{
    background:var(--accent);
    border-color:var(--accent-deep);
    box-shadow:0 0 0 4px rgba(193,255,114,0.22);
  }
  92%,100%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
}

@keyframes dot-light-3{
  0%,55%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
  62%,85%{
    background:var(--accent);
    border-color:var(--accent-deep);
    box-shadow:0 0 0 4px rgba(193,255,114,0.22);
  }
  92%,100%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
}

@keyframes dot-light-4{
  0%,80%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
  86%,90%{
    background:var(--accent);
    border-color:var(--accent-deep);
    box-shadow:0 0 0 4px rgba(193,255,114,0.22);
  }
  92%,100%{
    background:var(--bg);
    border-color:var(--ink);
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .method-progress{
    display:none;
  }

  .method-step:nth-of-type(1) .method-dot,
  .method-step:nth-of-type(2) .method-dot,
  .method-step:nth-of-type(3) .method-dot,
  .method-step:nth-of-type(4) .method-dot{
    animation:none;
  }
}

.method-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
  display:block;
  margin-bottom:10px;
}

.method-step h3{
  font-size:17px;
  margin-bottom:10px;
  font-family:var(--display);
  font-weight:600;
}

.method-step p{
  color:var(--ink-soft);
  font-size:14.5px;
}

/* ---------- CTA final ---------- */

.cta-final{
  background:
    linear-gradient(180deg,rgba(24,0,173,0.55) 0%,rgba(8,6,28,0.88) 100%),
    url("https://images.pexels.com/photos/48604/pexels-photo-48604.jpeg?auto=compress&cs=tinysrgb&w=1600")
    center/cover no-repeat,
    var(--ink);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}

.cta-final .wrap{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:40px;
  align-items:center;
}

.cta-final h2{
  font-size:clamp(2rem,4vw,3rem);
  color:var(--bg);
}

.cta-final .accent-word{
  color:var(--accent);
}

.cta-final p{
  color:rgba(250,250,247,0.7);
  margin-top:18px;
  max-width:48ch;
  font-size:16px;
}

.cta-final-actions{
  display:flex;
  justify-content:flex-start;
}

.cta-final .btn-primary{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}

.cta-final .btn-primary:hover{
  background:transparent;
  color:var(--accent);
  border-color:var(--accent);
}

/* ---------- Legal pages ---------- */

.legal-hero{
  padding:64px 0 44px;
  border-bottom:1px solid var(--line);
}

.legal-hero h1{
  font-size:clamp(2rem,4.4vw,3rem);
  max-width:none;
  margin-top:18px;
}

.legal-updated{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-faint);
  margin-top:16px;
}

.legal-content{
  padding:72px 0 110px;
}

.legal-content .wrap{
  max-width:760px;
}

.legal-content h2{
  font-size:1.35rem;
  margin-top:52px;
  margin-bottom:16px;
}

.legal-content h2:first-of-type{
  margin-top:0;
}

.legal-content h3{
  font-family:var(--body);
  font-weight:600;
  font-size:1.02rem;
  margin-top:26px;
  margin-bottom:8px;
}

.legal-content p{
  color:var(--ink-soft);
  margin-bottom:14px;
}

.legal-content ul{
  margin:0 0 16px 0;
}

.legal-content li{
  color:var(--ink-soft);
  padding-left:20px;
  position:relative;
  margin-bottom:8px;
}

.legal-content li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--ink-faint);
}

.legal-content a{
  color:var(--indigo);
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal-content strong{
  color:var(--ink);
  font-weight:600;
}

.legal-note{
  margin-top:40px;
  padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14px;
  color:var(--ink-soft);
}

/* ---------- Cookie banner ---------- */

.cookie-banner{
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  max-width:520px;
  margin:0 auto;
  background:var(--ink);
  color:var(--bg);
  border-radius:6px;
  padding:24px 26px;
  box-shadow:0 20px 50px rgba(20,19,61,0.28);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:16px;
  transform:translateY(150%);
  opacity:0;
  transition:transform .45s ease, opacity .45s ease;
}

.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
}

.cookie-banner.is-visible.nav-open{
  transform:translateY(150%);
  opacity:0;
  pointer-events:none;
}

.cookie-banner p{
  font-size:13.5px;
  line-height:1.55;
  color:rgba(250,250,247,0.78);
}

.cookie-banner a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cookie-actions .btn{
  padding:11px 18px;
  font-size:12.5px;
}

.cookie-actions .btn-primary{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}

.cookie-actions .btn-primary:hover{
  background:transparent;
  color:var(--accent);
}

.cookie-actions .btn-ghost{
  border-color:rgba(250,250,247,0.28);
  color:var(--bg);
}

.cookie-actions .btn-ghost:hover{
  border-color:var(--bg);
}

/* ---------- Footer ---------- */

footer{
  padding:64px 0 40px;
  border-top:1px solid var(--line);
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:32px;
  padding-bottom:48px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  color:var(--indigo);
}

.footer-brand svg{
  width:24px;
  height:24px;
}

.footer-tag{
  color:var(--ink-soft);
  font-size:14px;
  margin-top:10px;
  max-width:32ch;
}

.footer-cols{
  display:flex;
  gap:64px;
  flex-wrap:wrap;
}

.footer-col h4{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
}

.footer-col a,
.footer-col span{
  display:block;
  font-size:14.5px;
  color:var(--ink-soft);
  margin-bottom:9px;
}

.footer-col a:hover{
  color:var(--ink);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
  flex-wrap:wrap;
  gap:10px;
}

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

/* ---------- Reveal ---------- */

/*
  El contenido permanece visible por defecto.
  JavaScript únicamente añade la animación cuando está disponible.
*/

.reveal{
  opacity:1;
  transform:none;
}

.js-enabled .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

.js-enabled .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

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

@media (max-width:920px){

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-visual{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    max-width:340px;
    margin:0 auto 8px;
    order:-1;
  }

  .section-head{
    grid-template-columns:1fr;
  }

  .why-grid{
    grid-template-columns:1fr;
  }

  .sector-mosaic{
    grid-template-columns:repeat(3,1fr);
  }

  .method-line{
    grid-template-columns:repeat(2,1fr);
    row-gap:40px;
  }

  .method-line::before{
    display:none;
  }

  .method-progress{
    display:none;
  }

  .cta-final .wrap{
    grid-template-columns:1fr;
  }

  .service-row{
    grid-template-columns:44px 1fr;
  }

  .service-row .service-desc{
    grid-column:1/-1;
    padding-left:0;
  }

  .nav-links{
    position:fixed;
    inset:0;
    background:rgba(250,250,247,0.97);
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    box-shadow:-12px 0 32px rgba(20,19,61,0.10);
    flex-direction:column;
    align-items:flex-start;
    padding:104px 24px 36px;
    gap:26px;
    z-index:40;
    transform:translateX(100%);
    transition:transform .3s ease;
  }

  .nav-links.is-open{
    transform:translateX(0);
  }

  .nav-cta .btn-ghost{
    display:none;
  }

  .nav-toggle{
    display:block;
  }
}

@media (max-width:680px){

  .wrap{
    padding:0 20px;
  }

  section{
    padding:72px 0;
  }

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

  .method-line{
    grid-template-columns:1fr;
  }

  .cookie-banner{
    left:14px;
    right:14px;
    bottom:14px;
    padding:20px;
  }
}