/* ==========================================================================
   IT Services Paraguay — Landing Page
   Tokens: azul primario #163B8F · navy #0B1F45 · cian #22C3DE · blanco #FFFFFF
   Tipografía: Space Grotesk (display) + Inter (texto)
   ========================================================================== */

:root{
  --blue-900:#0B1F45;
  --blue-800:#0F2A63;
  --blue-700:#163B8F;
  --blue-600:#1E4FB8;
  --cyan-500:#22C3DE;
  --cyan-400:#57D6EB;
  --white:#FFFFFF;
  --ink:#12203F;
  --ink-soft:#4A5B7C;
  --bg-soft:#F3F7FC;
  --bg-card:#FFFFFF;
  --border-soft:#E0E9F5;
  --success:#1FAE6A;
  --danger:#E24949;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --header-h:76px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(11,31,69,.06);
  --shadow-md:0 12px 32px rgba(11,31,69,.12);
  --shadow-lg:0 24px 60px rgba(11,31,69,.18);
  --ease:cubic-bezier(.22,.9,.32,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--ink-soft); }

a{ color:var(--blue-700); text-decoration:none; }

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

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

:focus-visible{
  outline:3px solid var(--cyan-500);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue-700);
  color:var(--white);
  box-shadow:0 6px 18px rgba(22,59,143,.28);
}
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,59,143,.34); }
.btn-outline{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.5);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--white); transform:translateY(-2px); }
.btn-sm{ padding:9px 18px; font-size:.9rem; }

.btn-store{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--cyan-500);
  color:var(--blue-900);
  font-family:var(--font-display);
  font-weight:700;
  padding:11px 20px;
  border-radius:10px;
  text-decoration:none;
  font-size:.94rem;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow:0 4px 14px rgba(34,195,222,.35);
}
.btn-store:hover{ background:var(--cyan-400); transform:translateY(-2px); box-shadow:0 8px 20px rgba(34,195,222,.45); }
.btn-store svg{ width:16px; height:16px; flex-shrink:0; }

.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  color:var(--blue-800);
  font-family:var(--font-display);
  font-weight:700;
  padding:11px 20px;
  border-radius:10px;
  border:1.5px solid var(--border-soft);
  font-size:.94rem;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn-whatsapp svg{ width:17px; height:17px; flex-shrink:0; color:#1FAE6A; }
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--blue-700); }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--border-soft);
}
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.site-header .brand .logo{ height:50px; width:auto; display:block; }
.site-header .brand-text{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  color:var(--blue-900);
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.main-nav{ margin-left:auto; margin-right:36px; }
.main-nav ul{
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.96rem;
  color:var(--blue-900);
  position:relative;
  padding:6px 2px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:2px;
  background:var(--cyan-500);
  transition:right .25s var(--ease);
}
.main-nav a:hover::after{ right:0; }

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--blue-900);
  border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed;
    top:var(--header-h);
    left:0; right:0;
    background:var(--white);
    border-bottom:1px solid var(--border-soft);
    box-shadow:var(--shadow-md);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .main-nav.open{ max-height:260px; }
  .main-nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 24px 18px;
  }
  .main-nav li{ width:100%; }
  .main-nav a{ display:block; padding:12px 0; border-bottom:1px solid var(--border-soft); width:100%; }
  .header-actions .btn-whatsapp .label{ display:none; }
  .header-actions .btn-whatsapp{ padding:11px 13px; }
}
@media (max-width:520px){
  .site-header .brand .logo{ height:34px; }
  .header-actions{ gap:8px; }
  .btn-store span.label{ display:none; }
  .btn-store{ padding:11px 13px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(155deg, var(--blue-900) 0%, var(--blue-800) 46%, var(--blue-700) 100%);
  color:var(--white);
  overflow:hidden;
  padding:96px 0 110px;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:48px;
  position:relative;
  z-index:2;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan-400);
  background:rgba(34,195,222,.12);
  border:1px solid rgba(34,195,222,.3);
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:22px;
}
.hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan-500);
  box-shadow:0 0 0 0 rgba(34,195,222,.6);
  animation:pulse-dot 2.2s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(34,195,222,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,195,222,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,195,222,0); }
}
.hero h1{
  color:var(--white);
  font-size:clamp(2.1rem, 4vw, 3.2rem);
  margin-bottom:.42em;
}
.hero h1 em{
  font-style:normal;
  color:var(--cyan-400);
}
.hero .lead{
  color:rgba(255,255,255,.82);
  font-size:1.14rem;
  max-width:520px;
  margin-bottom:1.6em;
}
.hero-stats{
  display:flex;
  gap:32px;
  margin:34px 0 8px;
  flex-wrap:wrap;
}
.hero-stats .stat b{
  display:block;
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--white);
}
.hero-stats .stat span{
  font-size:.86rem;
  color:rgba(255,255,255,.65);
}
.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}

/* Signature element: red gráfica de nodos (identidad de conectividad/red) */
.hero-graphic{
  position:relative;
  z-index:2;
  aspect-ratio:1/1;
  width:100%;
  max-width:460px;
  margin:0 auto;
}
.hero-graphic svg{ width:100%; height:100%; overflow:visible; }
.hero-graphic .link{
  stroke:rgba(87,214,235,.4);
  stroke-width:1.4;
  fill:none;
}
.hero-graphic .link-active{
  stroke:var(--cyan-400);
  stroke-width:1.6;
  stroke-dasharray:6 8;
  animation:dash-flow 3.4s linear infinite;
}
@keyframes dash-flow{ to{ stroke-dashoffset:-140; } }
.hero-graphic .node{
  fill:var(--white);
}
.hero-graphic .node-core{
  fill:var(--cyan-500);
  animation:node-pulse 2.6s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes node-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.18); opacity:.85; }
}
.hero-graphic .node-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:9.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  fill:rgba(255,255,255,.78);
}
.hero-graphic .hub-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  fill:var(--blue-900);
}

.hero-bg-shape{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(34,195,222,.14), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, rgba(30,79,184,.35), transparent 60%);
  pointer-events:none;
}

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero .lead{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero-graphic{ max-width:320px; margin-top:20px; }
}
@media (max-width:480px){
  .hero-graphic .node-label{ font-size:8px; }
}

/* ---------- Secciones genéricas ---------- */
.section{ padding:96px 0; }
.section.alt{ background:var(--bg-soft); }
.section-eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:10px;
  display:block;
}
.section-title{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom:.3em;
}
.section-sub{
  color:var(--ink-soft);
  max-width:560px;
  margin-bottom:48px;
  font-size:1.05rem;
}
.section-head{ margin-bottom:48px; }

/* ---------- Servicios ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.card{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.card .card-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:linear-gradient(140deg, var(--blue-700), var(--blue-900));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  flex-shrink:0;
}
.card .card-icon svg{ width:24px; height:24px; stroke:var(--white); }
.card h3{ font-size:1.1rem; margin-bottom:.5em; }
.card p{ font-size:.95rem; margin-bottom:0; }

@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr; } }

/* ---------- Subsecciones de Servicios ---------- */
.service-group{ margin-top:64px; }
.service-group:first-of-type{ margin-top:0; }
.service-group-head{ max-width:640px; margin-bottom:32px; }
.service-group-tag{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-700);
  background:rgba(22,59,143,.08);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.service-group-head h3{ font-size:1.35rem; margin-bottom:.35em; }
.service-group-sub{ font-size:1rem; margin-bottom:0; }
.apps-group{
  margin-top:80px;
  padding-top:56px;
  border-top:1px solid var(--border-soft);
}

/* ---------- Aplicaciones ---------- */
.apps-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.app-card{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.app-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.app-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:linear-gradient(140deg, var(--cyan-500), var(--blue-700));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  flex-shrink:0;
}
.app-icon svg{ width:26px; height:26px; color:var(--white); }
.app-tag{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:6px;
}
.app-card h4{
  font-family:var(--font-display);
  color:var(--blue-900);
  font-size:1.2rem;
  margin:0 0 .5em;
}
.app-card p{ font-size:.95rem; margin-bottom:20px; flex-grow:1; }
.app-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9rem;
  color:var(--blue-700);
}
.app-link svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.app-link:hover svg{ transform:translateX(4px); }

@media (max-width:900px){ .apps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){
  .apps-grid{ grid-template-columns:1fr; }
  .apps-group{ margin-top:56px; padding-top:40px; }
}

/* ---------- Tecnologías: carrusel infinito ---------- */
.tech-carousel{
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-track{
  display:flex;
  align-items:flex-start;
  gap:64px;
  width:max-content;
  animation:tech-scroll 32s linear infinite;
}
@keyframes tech-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (hover:hover){
  .tech-carousel:hover .tech-track{ animation-play-state:paused; }
}
.tech-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  width:112px;
}
.tech-badge{
  width:88px;
  height:88px;
  border-radius:22px;
  background:var(--white);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tech-item:hover .tech-badge{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--cyan-500);
}
.tech-badge img{
  height:48px;
  width:auto;
  max-width:52px;
}
.tech-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.82rem;
  color:var(--ink-soft);
  white-space:nowrap;
}

@media (max-width:620px){
  .tech-track{ gap:40px; animation-duration:24s; }
  .tech-item{ width:92px; }
  .tech-badge{ width:72px; height:72px; border-radius:18px; }
  .tech-badge img{ height:38px; }
}

/* ---------- Contacto ---------- */
.contact-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
.contact-info h2{ margin-bottom:.4em; }
.contact-methods{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-methods li{
  display:flex;
  align-items:center;
  gap:14px;
}
.contact-methods .icon{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--white);
  border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-methods .icon svg{ width:19px; height:19px; stroke:var(--blue-700); }
.contact-methods a{ color:var(--ink); font-weight:600; }
.contact-methods a:hover{ color:var(--blue-700); }
.contact-methods span.sub{ display:block; font-size:.82rem; color:var(--ink-soft); font-weight:400; }

.contact-form{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--shadow-md);
}
.form-row{ margin-bottom:18px; }
.form-row label{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88rem;
  color:var(--blue-900);
  margin-bottom:7px;
}
.form-row input,
.form-row textarea{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--border-soft);
  border-radius:10px;
  font-family:var(--font-body);
  font-size:.96rem;
  color:var(--ink);
  background:var(--bg-soft);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.form-row input:focus,
.form-row textarea:focus{
  border-color:var(--blue-700);
  background:var(--white);
  outline:none;
}
.form-row textarea{ resize:vertical; min-height:120px; }
.contact-form .btn-primary{ width:100%; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin:14px 0 0; text-align:center; }
.hidden{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{
  margin-top:16px;
  padding:13px 16px;
  border-radius:10px;
  font-size:.92rem;
  font-weight:600;
}
.alert.success{ background:rgba(31,174,106,.12); color:var(--success); border:1px solid rgba(31,174,106,.3); }
.alert.error{ background:rgba(226,73,73,.1); color:var(--danger); border:1px solid rgba(226,73,73,.3); }

@media (max-width:860px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-form{ padding:26px; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--blue-900);
  color:rgba(255,255,255,.75);
  padding:36px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.site-footer a{ color:var(--white); }
.site-footer a:hover{ color:var(--cyan-400); }
.footer-nav{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
}
.footer-nav a{ font-size:.9rem; color:rgba(255,255,255,.75); }
.footer-nav a:hover{ color:var(--cyan-400); }
.footer-copy{ font-size:.85rem; margin:0; }
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-logo{
  height:34px;
  width:auto;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px; height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  z-index:200;
  transition:transform .2s var(--ease);
}
.whatsapp svg{ width:28px; height:28px; fill:var(--white); }
.whatsapp:hover{ transform:scale(1.08); }

/* ---------- Animaciones de entrada ---------- */
[data-animate]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-animate].in-view{
  opacity:1;
  transform:translateY(0);
}