/* Bitwave Backgrounds – alternar Wave/Gradient por sección con data-URI + fallbacks */
:root{
  --bw-wave: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221920%22%20height%3D%221080%22%20viewBox%3D%220%200%201920%201080%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22paper%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F6F9FF%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFFFFF%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22waveA%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%22.12%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%22.12%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22waveB%22%20x1%3D%221%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%22.08%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%22.08%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23paper%29%22/%3E%0A%20%20%3Cpath%20d%3D%22M0%20760%20C%20360%20840%2C%20540%20800%2C%20840%20830%20C%201080%20852%2C%201320%20920%2C%201920%20860%20L%201920%201080%20L%200%201080%20Z%22%20fill%3D%22url%28%23waveA%29%22/%3E%0A%20%20%3Cpath%20d%3D%22M0%20800%20C%20480%20880%2C%20880%20780%2C%201240%20830%20C%201540%20870%2C%201720%20950%2C%201920%20930%20L%201920%201080%20L%200%201080%20Z%22%20fill%3D%22url%28%23waveB%29%22/%3E%0A%3C/svg%3E');
  --bw-gradient: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221920%22%20height%3D%221080%22%20viewBox%3D%220%200%201920%201080%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22bgGrad%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F7FAFF%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFFFFF%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22glowL%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%220.22%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22glowR%22%20cx%3D%221%22%20cy%3D%220%22%20r%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%220.20%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23bgGrad%29%22/%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23glowL%29%22/%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23glowR%29%22/%3E%0A%3C/svg%3E');
}

.section{
  padding: 64px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px; /* para que el fondo se aprecie */
}

/* Alternar automáticamente */
.section:nth-of-type(odd){
  background-image: var(--bw-wave),
    url('/assets/bg/bitwave-bg-wave.svg'),
    url('/assets/bg/bitwave-bg-wave.webp');
}
.section:nth-of-type(even){
  background-image: var(--bw-gradient),
    url('/assets/bg/bitwave-bg-gradient.svg'),
    url('/assets/bg/bitwave-bg-gradient.webp');
}

/* Por si el sitio corre en subcarpeta (rutas relativas de fallback) */
@media all {
  .section:nth-of-type(odd){
    background-image: var(--bw-wave),
      url('assets/bg/bitwave-bg-wave.svg'),
      url('assets/bg/bitwave-bg-wave.webp');
  }
  .section:nth-of-type(even){
    background-image: var(--bw-gradient),
      url('assets/bg/bitwave-bg-gradient.svg'),
      url('assets/bg/bitwave-bg-gradient.webp');
  }
}

/* Ajustes de posición en bloques específicos */
.hero { background-position: top center; }
#contacto { background-position: top center; }

/* Si algún estilo inline pisa el background con shorthand, reforzamos */
.section{
  background-color: #fff !important;
}



/* === Interactive Cards & Hero Background Fix === */

/* Force hero to use wave background explicitly */
.section.hero {
  background-image:
    var(--bw-wave),
    url('/assets/bg/bitwave-bg-wave.svg'),
    url('/assets/bg/bitwave-bg-wave.webp') !important;
  background-position: top center;
}

/* Base for all enhanced cards */
.card-pro {
  position: relative;
  border: 1px solid #e6eefc;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(45,108,223,0.08), transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(96,165,250,0.08), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 60%, #ffffff 100%);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-position .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Subtle grid overlay inside cards */
.card-pro::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(#eef2f7 1px, transparent 1px),
    linear-gradient(90deg, #eef2f7 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .28;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

/* Hover expand (only on devices that actually hover) */
@media (hover: hover) and (pointer: fine) {
  .card-pro:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 20px 50px rgba(2,6,23,.14);
    background-position: 0 -6px, 0 -3px, 0 0;
  }
  .card-pro:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    transform: translateY(-2px) scale(1.01);
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .card-pro { transition: box-shadow .2s }
  .card-pro:hover { transform: none }
}

/* Variant for hero's featured card (a bit richer) */
.card-hero {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(45,108,223,0.10), transparent 45%),
    radial-gradient(100% 100% at 100% 0%, rgba(96,165,250,0.10), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 65%, #ffffff 100%);
}
.card-hero::before{
  content:"";
  position:absolute; inset:auto 0 -30% -30%;
  width: 160%; height: 80%;
  background: radial-gradient(60% 80% at 60% 40%, rgba(45,108,223,0.08), transparent 60%);
  transform: rotate(-6deg);
  pointer-events:none;
}

/* Optional tinted variants for different sections if wanted later */
.card-tint-blue {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(45,108,223,0.10), transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(96,165,250,0.10), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, #f6faff 60%, #ffffff 100%);
}

/* === Hero corporate background === */
:root {
  --bw-hero: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221920%22%20height%3D%221080%22%20viewBox%3D%220%200%201920%201080%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22paper%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F3F7FF%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFFFFF%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22gl1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%22.22%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22gl2%22%20cx%3D%221%22%20cy%3D%220%22%20r%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%22.20%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22wave%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232D6CDF%22%20stop-opacity%3D%22.10%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2360A5FA%22%20stop-opacity%3D%22.10%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23paper%29%22/%3E%0A%20%20%3C%21--%20corner%20glows%20--%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23gl1%29%22/%3E%0A%20%20%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22url%28%23gl2%29%22/%3E%0A%20%20%3C%21--%20diagonal%20accents%20--%3E%0A%20%20%3Cg%20opacity%3D%22.10%22%3E%0A%20%20%20%20%3Cpolygon%20points%3D%220%2C160%200%2C0%20360%2C0%22%20fill%3D%22%2360A5FA%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%221920%2C1080%201920%2C900%201560%2C1080%22%20fill%3D%22%232D6CDF%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3C%21--%20waves%20near%20bottom%20to%20be%20visible%20behind%20hero%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%20750%20C%20360%20820%2C%20600%20820%2C%20940%20850%20C%201280%20880%2C%201600%20940%2C%201920%20900%20L%201920%201080%20L%200%201080%20Z%22%20fill%3D%22url%28%23wave%29%22/%3E%0A%20%20%3Cpath%20d%3D%22M0%20790%20C%20400%20860%2C%20820%20800%2C%201280%20840%20C%201560%20870%2C%201760%20940%2C%201920%20930%20L%201920%201080%20L%200%201080%20Z%22%20fill%3D%22%232D6CDF%22%20opacity%3D%22.06%22/%3E%0A%3C/svg%3E');
}
.section.hero {
  background-image:
    var(--bw-hero),
    url('/assets/bg/bitwave-bg-hero.svg'),
    url('/assets/bg/bitwave-bg-wave.svg');
  background-position: top center;
  min-height: 72vh;
}
/* Readability overlay (very subtle) */
.section.hero::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.25) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* Mobile refinements */
@media (max-width: 720px) {
  .section { padding: 40px 0; }
  .hero .wrap { padding: 36px 0 !important; gap: 14px !important; }
  h1 { font-size: 28px !important; line-height: 1.18; }
  p.lead { font-size: 15px !important; }
  .btn { padding: 12px 14px; }
  .btn-primary, .btn-outline { width: 100%; text-align: center }
  .card { border-radius: 14px }
  /* Make hero copy more readable on busy backgrounds */
  .hero-copy {
    background: rgba(255,255,255,.75);
    border: 1px solid #e8eef8;
    border-radius: 14px;
    padding: 12px;
    backdrop-filter: saturate(150%) blur(4px);
  }
}

/* Extra small phones */
@media (max-width: 390px) {
  h1 { font-size: 24px !important; }
  .brand strong { font-size: 16px }
}

/* Improve mobile menu tap targets */
.mobile-menu a { padding: 14px 8px; font-size: 16px }



/* === Navbar: azul corporativo + CTA blanco === */
header {
  background: #2d6cdf;
  border-bottom: none;
}
.brand .logo { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.brand strong { color: #ffffff; }

nav a { color: #ffffff; }
nav a:hover { color: #e2e8f0; }

/* Add a CTA button in navbar */
.nav .cta-nav {
  display: inline-block;
  margin-left: 10px;
  padding: 10px 14px;
  background: #ffffff;
  color: #2d6cdf;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(255,255,255,.15);
}
.nav .cta-nav:hover { filter: brightness(.98); transform: translateY(-1px); }

.mobile-toggle { color: #ffffff; }

/* Mobile drawer also blue, links white */
.mobile-menu { background: #2d6cdf; border-top: none; }
.mobile-menu a { color: #ffffff; border-bottom-color: rgba(255,255,255,.15); }
.mobile-menu .cta-nav { display:block; text-align:center; margin:8px 0; }



/* Mobile additional fixes */
@media (max-width: 720px) {
  .nav { height: 60px }
  .brand strong { font-size: 16px }
  .brand .logo { width: 28px; height: 28px }
  .hero .wrap { grid-template-columns: 1fr !important; }
  .grid.cols-3, .grid.cols-4, .grid.cols-2 { grid-template-columns: 1fr !important; }
  .card .body { padding: 16px }
  .cta { padding: 18px }
  .icon { width: 36px; height: 36px }
  .btn { width: 100% }
  .section { min-height: 0 } /* better autosize on small devices */
}



/* === SLA CTA BLUE SECTION === */
.cta-blue{
  background: linear-gradient(135deg, #2d6cdf 0%, #60a5fa 100%);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  box-shadow: 0 24px 60px rgba(45,108,223,.25);
}
.cta-blue h3{ color:#fff; margin:0 0 6px }
.cta-blue p{ color:#e8f0ff; margin:0 }
.btn-cta-white{
  background:#ffffff; color:#2d6cdf; border:1px solid #e5e7eb;
  padding:12px 18px; border-radius:12px; font-weight:700;
  box-shadow: 0 8px 24px rgba(255,255,255,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media(hover:hover) and (pointer:fine){
  .btn-cta-white:hover{ transform: translateY(-1px); box-shadow:0 14px 30px rgba(255,255,255,.28) }
}
/* Mobile stacking for CTA */
@media (max-width: 720px){
  .cta-blue{ padding:20px; gap:12px; }
  .btn-cta-white{ width:100%; text-align:center }
}



/* bottom wave hint so hero always shows shape */
.section.hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(45,108,223,.08), rgba(45,108,223,0) 70%);
  pointer-events:none;
}



@media (max-width: 480px){
  .hero .wrap{ padding: 28px 0 !important }
  h1{ font-size: 24px !important }
  .lead{ font-size: 14px !important }
}

/* Logo como imagen (anula el fondo anterior del span) */
.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: none;       /* quita el gradient anterior */
  box-shadow: none;       /* quita el borde interno anterior */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;      /* separa del texto Bitwave */
}
.brand .logo img {
  display: block;
  width: 100%;
  height: 100%;
}