:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --txt:#0e1a2b;
  --muted:#5b6b7f;
  --accent:#2563eb;
  --accent2:#22d3ee;
  --radius:18px;
  --line:rgba(16,24,40,.12);
}

/* Base */
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background:var(--bg);
  overflow-x: clip;                /* corta desbordes horizontales globales */
  -webkit-tap-highlight-color: transparent;
}
@supports not (overflow: clip){
  body{ overflow-x:hidden; }
}

.logo{height:34px;width:auto}
.grad{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Header con gradiente sin “mordisco” */
.bg-gradient-light{
  background: linear-gradient(180deg, #fafbff 0%, #f8f9fd 40%, var(--bg) 100%);
}

/* Pills/etiquetas */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--muted); font-size:.9rem;
}

/* Tipografía secciones */
.section-title{font-weight:800; letter-spacing:-.02em}
.section-sub{max-width:760px;margin-inline:auto}

/* Feature cards */
.f-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem;
  background:var(--card);
  box-shadow:0 8px 20px rgba(16,24,40,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.f-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(16,24,40,.1); }
.f-card i{ font-size:20px; color:var(--accent); }

/* Step cards */
.step-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem 1.1rem;
  background:#fff; height:100%;
}
.badge-num{
  display:inline-grid; place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:#f1f5f9;border:1px solid var(--line); font-weight:700;
  margin-bottom:.5rem;
}

/* Trust cards */
.t-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem;
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.t-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,24,40,.08); }
.t-card i{ font-size:22px;color:var(--accent); }

/* Progress */
.progress-wrapper{ max-width:680px }
.progress{ height:.75rem; background:#e9eef5; border-radius:999px; overflow:hidden }
.progress-bar{ background:linear-gradient(90deg,var(--accent),var(--accent2)); }

/* Contact mini card */
.contact-card{
  display:flex; gap:.6rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px;
  padding:.8rem 1rem; background:#fff;
}
.contact-card i{ color:var(--accent); font-size:20px }

/* Showcase grid images */
.shot-grid{
  width:100%; height:auto; border:1px solid var(--line);
  border-radius:14px; display:block; object-fit:cover; aspect-ratio:16/10;
}

/* ===== Navbar flotante tipo “pill” =====
   En el HTML usa: <nav class="navbar navbar-expand-lg sticky-top shadow-xs nav-float"> */
.navbar.nav-float{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  top: 12px;
  z-index: 1030; /* > sticky-top (~1020) para seguridad */
}

/* El contenedor del nav es el “ancla” del overlay */
.navbar.nav-float .container-xl{
  position: relative;                      /* ancla del overlay */
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,24,40,.12);
  background-clip: padding-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: none;
  filter: drop-shadow(0 12px 18px rgba(16,24,40,.08));
  transform: translateZ(0);
  backface-visibility: hidden;
  padding-block: .4rem;
  padding-inline: .8rem;
  overflow: visible;                       /* no cortes al overlay */
}

/* Asegura que el botón de menú siempre esté sobre el overlay */
.navbar .navbar-toggler{
  position: relative;
  z-index: 1300;
}

/* En móvil ajustamos márgenes y radios del “pill” */
@media (max-width: 991.98px) {
  .navbar.nav-float{ top: 10px; }
  .navbar.nav-float .container-xl{
    margin-inline: 12px;
    border-radius: 16px;
    padding-block: .35rem;
  }
}

/* ===== Overlay Menu (dropdown) =====
   No empuja contenido y nunca supera el ancho de la pantalla */
.overlay-menu{
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  max-width: 100vw;
  margin: 8px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(16,24,40,.14);
  transform: translateY(-10px);
  opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 1200;                           /* sobre nav */
}
.overlay-menu.show{
  transform: translateY(0);
  opacity:1; pointer-events:auto;
}
.overlay-menu .nav-link{ padding:.5rem 1rem; border-radius:10px }
.overlay-menu .nav-link:hover{ background:#f7f9fc }

/* Compensa el padding lateral del container en móvil */
@media (max-width: 991.98px){
  .overlay-menu{ width: calc(100vw - 24px); }
}

/* Modal idioma (glass + backdrop) */
.force-show { display:block; }
.glass-modal{
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border:1px solid rgba(16,24,40,.12);
  border-radius:18px;
}
.blur-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
  z-index:1050;
}

/* Helpers */
.py-6{ padding-block: clamp(2rem, 6vw, 4rem); }
.shadow-xs{ box-shadow:0 4px 16px rgba(16,24,40,.04); }

/* AOS perf */
@media (prefers-reduced-motion:no-preference){
  [data-aos]{ will-change: transform, opacity; }
}

/* Footer */
footer h6{ font-weight:800 }

/* ===== Seguridad anti-desbordes ===== */
header, section, footer { overflow-x: clip; }   /* no dejan escapar 1–2px */
.container-xl { overflow-x: visible; }         /* ¡clave! para no cortar overlay */
.carousel, .carousel-inner { overflow: hidden; }
img, svg, canvas, video { max-width:100%; height:auto; display:block; }

/* ===== Accesibilidad y anti-zoom ===== */
input, select, textarea { font-size:16px; }    /* evita zoom por focus en iOS */
html, body { touch-action: manipulation; }     /* reduce double-tap zoom */



.v{
    color: #2563eb;
 }