:root{
  --bg:#071320;
  --card:#0b2036;
  --text:#e8f0ff;
  --muted:#b7c7e6;
  --brand:#3ea6ff;
  --brand2:#2dd4bf;
  --border: rgba(255,255,255,.12);
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  --radius: 16px;
  --max: 1120px;
  --pad: 22px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(62,166,255,.22), transparent 58%),
    radial-gradient(900px 520px at 88% 18%, rgba(45,212,191,.16), transparent 58%),
    radial-gradient(900px 760px at 50% 96%, rgba(255,255,255,.07), transparent 62%),
    var(--bg);
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.small{font-size:.95rem; color:var(--muted)}

header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,19,32,.62);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  gap: 14px;
}
.brand{display:flex; align-items:center; gap:.7rem;}
.logo{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow);
}
.navlinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.navlinks a{padding:.55rem .7rem; border-radius:999px; color:var(--muted)}
.navlinks a:hover{background: rgba(255,255,255,.05); color:var(--text)}
.navlinks a.active{background: rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.18)}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.82rem 1.08rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.btn.primary{
  background: linear-gradient(135deg, rgba(62,166,255,.98), rgba(45,212,191,.98));
  border-color: transparent;
  color: #04101c;
  font-weight: 750;
}

.card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero{padding: 74px 0 26px}
.heroGrid{display:grid; grid-template-columns: 1.22fr .78fr; gap: 20px}
@media (max-width: 920px){ .heroGrid{grid-template-columns: 1fr;} }

.heroCard{padding:34px}
.pill{
  display:inline-flex; align-items:center;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .92rem;
}
.lead{color:var(--muted); font-size:1.08rem; line-height:1.68}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.heroAside{padding:16px; display:flex; flex-direction:column; gap:12px}
.photo{
  width:100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow:hidden;
  position: relative;
}
.photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(7,19,32,.45), transparent 45%);
  pointer-events:none;
}

.section{padding: 22px 0 62px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
@media (max-width: 920px){ .grid3{grid-template-columns: 1fr;} }
.feature{padding: 18px}
.split{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
@media (max-width: 920px){ .split{grid-template-columns: 1fr;} }

.footer{padding: 24px 0 50px; border-top: 1px solid var(--border); color: var(--muted)}
.footerRow{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ===== Carrusel automático ===== */
.carousel{ position: relative; }
.carousel-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carousel-img.active{ opacity: 1; }

/* ===== GIF fullscreen ===== */

.gifWrapper{
  position: relative;
}

.gifWrapper img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  cursor: pointer;
}

.gifPlayBtn{
  position:absolute;
  bottom:12px;
  right:12px;
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(7,19,32,.7);
  color: var(--text);
  font-size:.9rem;
  cursor:pointer;
  backdrop-filter: blur(6px);
}

/* Pantalla completa */
.gif-fs:fullscreen{
  width:100%;
  height:100%;
  object-fit: contain;
  background: black;
  border-radius: 0;
}

.gif-fs:fullscreen + .gifPlayBtn{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-size: 1rem;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .heroGrid{
    grid-template-columns: 1fr;
  }
  .nav{
    flex-wrap: wrap;
    gap: 12px;
  }
  .navlinks{
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
}

@media (max-width: 600px){
  h1{ font-size: 1.7rem; }
  .lead{ font-size: 1rem; }
  .container{ padding: 0 16px; }
  .grid3{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .btn{ width: 100%; text-align: center; }
}


/* ================= RESULTADOS / GIF ================= */
.section .grid3{
  grid-template-columns: 1fr;   /* 1 sola columna */
  justify-items: center;        /* centra las cards */
  gap: 22px;
}

.section .grid3 .card.feature{
  width: min(960px, 100%);      /* hace los GIF más grandes */
}

@media (max-width: 768px){
  .section .grid3 .card.feature{
    width: 100%;
  }
}

html {
  scroll-behavior: smooth;
}

/* Compensa la altura del header fijo al hacer scroll a un ancla */
#cotizar {
  scroll-margin-top: 110px; /* ajusta este valor al alto real de tu header */
}

header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,19,32,.62);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;                 /* ← ESTE es tu header real */
  padding: 0 var(--pad);        /* ← sin padding vertical */
  max-width: var(--max);
  margin: 0 auto;
  gap: 14px;
}

.brand-logo{
  height: 72px;  /* sube desde 46 → se verá mucho más “presente” */
  width: auto;
  display: block;
}

@media (max-width: 768px){
  .nav{
    height: 64px;
    padding: 0 16px;
  }
  .brand-logo{
    height: 44px;
  }
}


.footer-brand{
  display: flex;
  justify-content: center;
  margin-top: -72px;
}

.footer-brand img{
  height: 72px;
  opacity: .85;
}