/* ================== BASE / PALETA ================== */
:root{
  --blue-50:#f0f7ff; --blue-100:#e8f3ff; --blue-200:#d6ebff; --blue-300:#b7ddff;
  --blue-400:#8fc7ff; --blue-500:#64b3ff; --blue-600:#3a99f0;
  --ink-900:#0a1a2a; --ink-700:#233547; --ink-500:#516173;
  --card:#fff; --radius:16px; --shadow:0 14px 28px rgba(22,68,123,.10), 0 6px 12px rgba(22,68,123,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink-700);
  background: radial-gradient(1200px 500px at 20% -10%, var(--blue-100), transparent 60%),
              radial-gradient(1000px 500px at 120% 0%, var(--blue-50), transparent 50%),
              #ffffff;
  line-height:1.55;
}
img{max-width:100%; display:block}

/* Wrapper y títulos */
.wrap{width:min(1100px, 92%); margin-inline:auto}
.section-title{
  text-align:center; margin:0 0 28px; color:var(--ink-900);
  font-size: clamp(22px, 3vw, 28px);
}

/* ===== HEADER AZUL ===== */
.site-header{
  position: sticky; top:0; z-index:50;
  background: #1674EA; /* azul sólido */
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff }
.brand img{ width:80px; height:auto; border-radius:8px }
.brand span{ display:none } /* ocultar texto Inovtech */

.main-nav ul{ display:flex; gap:16px; list-style:none; margin:0; padding:0 }
.main-nav a{
  color:#e9f2ff; text-decoration:none; padding:8px 12px; border-radius:10px;
  transition: background .2s ease, color .2s ease;
}
.main-nav a:hover,.main-nav a.active{
  color:#fff; background: rgba(255,255,255,.14);
}

.nav-toggle{ display:none; border:none; background:transparent; font-size:24px; color:#fff }
@media (max-width: 760px){
  .main-nav ul{ display:none }
  .main-nav ul.open{
    display:flex; position:absolute; right:4%; top:62px; flex-direction:column; gap:8px;
    background:#1674EA; padding:12px; border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,.15);
  }
  .nav-toggle{ display:block }
}


/* ================== HERO ================== */
.hero{ position:relative; padding: 84px 0 78px; overflow:hidden }

.hero .wrap{ text-align:center }
.hero h1{
  margin:0 auto 12px; color:var(--ink-900);
  font-size: clamp(26px, 4vw, 42px); line-height:1.12;
}
.hero p{ margin:0 auto 26px; max-width:760px; color:var(--ink-500) }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

.btn{
  display:inline-block; padding:12px 20px; border-radius:999px;
  text-decoration:none; font-weight:700; position:relative; overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 8px 18px rgba(22,68,123,.12);
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  color:#fff; border:1px solid rgba(255,255,255,.2);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; background: radial-gradient(120px 60px at var(--x,50%) var(--y,50%), rgba(255,255,255,.25), transparent 40%);
  opacity:0; transition:opacity .25s ease;
}
.btn-primary:hover::after{ opacity:1 }
.btn-outline{
  background:#fff; color:var(--blue-600); border:1px solid var(--blue-300);
}
.btn-outline:hover{ background:var(--blue-100) }

.hero-shape{
  position:absolute; inset:auto -20% -35% -20%;
  height:60%;
  background: radial-gradient(ellipse at center, var(--blue-200), transparent 60%);
  filter: blur(40px);
  animation: floatY 8s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0)}
  50%{ transform: translateY(16px)}
}

/* ================== FEATURES ================== */
.feature{ padding:36px 0 }
.feature.alt{ background: linear-gradient(180deg, transparent, var(--blue-50)) }
.grid-2{ display:grid; gap:28px; align-items:center; grid-template-columns: 1.1fr 1fr }
.feature .media{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transform: translateZ(0);
}
.feature .media img{ transition: transform .6s cubic-bezier(.2,.7,.2,1) }
.feature .media:hover img{ transform: scale(1.06) }
.feature .content h2{ margin:0 0 8px; color:var(--ink-900); font-size: clamp(20px, 2.6vw, 28px) }
.feature .content p{ margin:0; color:var(--ink-700) }

/* ===== CLIENTES CARRUSEL ===== */
.clients{ padding:44px 0 }
.logo-carousel{
  position:relative; display:flex; align-items:center; gap:10px;
}
.logo-viewport{
  overflow:hidden; width:100%;
}
.logo-track{
  display:flex; align-items:center; gap:18px;
  will-change: transform;
}
.client-card{
  flex: 0 0 220px; /* tamaño tarjeta */
  height: 120px;
  background:#fff; border-radius:16px; padding:14px;
  box-shadow: 0 12px 26px rgba(22,68,123,.12);
  display:flex; align-items:center; justify-content:center;
  transition: transform .18s ease, box-shadow .25s ease;
}
.client-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(22,68,123,.18);
}
.client-card img{
  max-width: 100%; max-height: 90%;
  object-fit: contain; filter: grayscale(100%); opacity:.9;
  transition: filter .25s ease, opacity .25s ease;
}
.client-card:hover img{ filter:none; opacity:1 }

/* Botones */
.lc-btn{
  border:none; width:38px; height:38px; border-radius:50%;
  background:#1674EA; color:#fff; font-size:22px; line-height:38px; text-align:center;
  box-shadow: 0 10px 22px rgba(22,68,123,.25);
  cursor:pointer; transition: transform .12s ease, background .2s ease;
}
.lc-btn:hover{ transform: translateY(-2px); background:#0d5fcc }
.lc-prev{ margin-right:6px } .lc-next{ margin-left:6px }

/* Auto-scroll suave (se controla por JS). En móvil, tarjetas más pequeñas */
@media (max-width: 920px){
  .client-card{ flex-basis: 180px; height: 100px }
}
@media (max-width: 560px){
  .client-card{ flex-basis: 150px; height: 90px }
}


/* ================== CONTACTO ================== */
.contact{ padding:44px 0 }
.contact .grid-2{ grid-template-columns: 1.2fr 1fr }
.map iframe{
  border:0; border-radius: var(--radius); box-shadow: var(--shadow);
}
.contact-card{
  background:var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:20px; transform: translateZ(0);
}
.contact-card h2{ margin:0 0 12px; color:var(--ink-900) }
.contact-block + .contact-block{ margin-top:12px }
.contact-block h3{ margin:0 0 6px; font-size:16px; color:var(--ink-700) }
.contact a{ color:var(--blue-600); text-decoration:none }
.contact a:hover{ text-decoration:underline }

/* ================== CONÓCENOS ================== */
.about{ padding:44px 0 }
.card-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.card{
  background:var(--card); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  display:flex; flex-direction:column; transform: translateZ(0);
  transition: transform .18s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-6px) rotateZ(-.25deg); box-shadow: 0 18px 36px rgba(22,68,123,.15) }
.card img{ aspect-ratio: 16/9; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1) }
.card:hover img{ transform: scale(1.05) }
.card-body{ padding:16px }
.card-body h3{ margin:0 0 6px; color:var(--ink-900) }
.card-body p{ margin:0; color:var(--ink-700) }
.values{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:4px 14px;
  margin:8px 0 0; padding:0 0 0 16px;
}

/* ================== FOOTER ================== */
.site-footer{ border-top:1px solid rgba(99,132,175,.15); background:#fff }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; color:var(--ink-500); font-size:14px }
.to-top{ text-decoration:none; padding:6px 10px; border-radius:10px; background:var(--blue-100); color:#0b2a4a }

/* ================== REVEAL ON SCROLL ================== */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); will-change: transform, opacity }
.reveal.is-in{ opacity:1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.reveal.delay-1{ transition-delay:.08s } .reveal.delay-2{ transition-delay:.16s } .reveal.delay-3{ transition-delay:.24s }

/* ================== RESPONSIVE ================== */
@media (max-width: 920px){
  .grid-2{ grid-template-columns: 1fr }
  .contact .grid-2{ grid-template-columns: 1fr }
}
@media (max-width: 760px){
  .main-nav ul{ display:none }
  .main-nav ul.open{
    display:flex; position:absolute; right:4%; top:62px; flex-direction:column; gap:8px; background:#fff;
    padding:12px; border-radius:12px; box-shadow: var(--shadow);
  }
  .nav-toggle{ display:block }
  .site-header .wrap{ padding:8px 0 }
}

/* ================== PREFERS-REDUCED-MOTION ================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
}
/* ===== CERTIFICACIÓN ===== */
.cert{ padding:44px 0; background: linear-gradient(180deg, transparent, var(--blue-50)) }
.cert-card{
  display:grid; gap:22px; align-items:center;
  grid-template-columns: 1fr 1.2fr;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px;
}
.cert-media{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; padding:18px;
  min-height: 180px;
}
.cert-media img{
  width: 80%; max-width: 320px; height:auto; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(22,68,123,.10));
}
.cert-content h3{ margin:0 0 6px; color: var(--ink-900) }
.cert-content p{ margin:0 0 14px; color: var(--ink-700) }

.cert-actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn-cert{ min-width: 200px; text-align:center }

@media (max-width: 920px){
  .cert-card{ grid-template-columns: 1fr }
  .cert-media img{ width: 70%; max-width: 260px }
}