/* ===========================
   SmartTech PS — CSS completo optimizado
   Autor: Tú + ajuste asistido
   =========================== */

/* ---- Contador de visitas ---- */
.visit-counter {
  margin-left: 10px;
  font-weight: 800;
  color: #4AA9C8;
  font-size: 1.1rem;
  display:inline-block;
  padding:.2rem .6rem;
  border-radius:999px;
  background: rgba(74,169,200,.12);
}

/* ---- Reset suave + tipografía base ---- */
html, body {
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--dark);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.5s ease-in-out;
  font-size: clamp(15px, .9rem + .2vw, 17px);
}

/* ---- Paleta y tokens ---- */
:root{
  --primary: #4AA9C8;   /* azul claro logo */
  --secondary: #B8B8B8; /* gris metálico */
  --light: #DFF7FF;     /* azul cielo */
  --dark: #091E3E;      /* azul oscuro */
  --accent: #FFB703;    /* dorado acento */

  --radius:16px;
  --shadow: 0 12px 28px rgba(0,0,0,.08);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.06);
  --shadow-lg: 0 18px 36px rgba(0,0,0,.10);

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --z-nav:1000; --z-modal:1050; --z-toast:1100;
}

/* ---- Fondo general (mejorado) ---- */
body{
  background: linear-gradient(145deg, #ffffff 0%, #f3f5f8 50%, #e8edf3 100%);
  color: #2a2e37;
}

/* ---- Tipografía fluida ---- */
h1{ font-weight:800 !important; font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); }
h2{ font-weight:800 !important; font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
h3{ font-weight:700 !important; font-size: clamp(1.3rem, .9rem + 1.5vw, 2rem); }
h4{ font-weight:700 !important; }
h5, h6{ font-weight:600 !important; }

/* ---- Spinner ---- */
.spinner {
  width: 40px; height: 40px;
  background: var(--primary);
  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
  0% { transform: perspective(120px) rotateX(0) rotateY(0); }
  50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0); }
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
#spinner {
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
}
#spinner.show {
  transition: opacity .5s ease-out, visibility 0s linear 0s;
  visibility: visible; opacity: 1;
}

/* ---- Botones (pill + sombras suaves) ---- */
.btn{
  font-weight:700;
  transition: transform .15s ease, box-shadow .2s ease;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  box-shadow: none !important;
}
.btn:hover{ transform: translateY(-1px) }
.btn-primary, .btn-secondary {
  color:#fff; box-shadow: inset 0 0 0 50px transparent;
}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), #2e8fb0);
  border: none; box-shadow: 0 10px 24px rgba(74,169,200,.28) !important;
}
.btn-primary:hover{ filter: brightness(.98) }
.btn-outline-light{ border-width:2px }
.btn[disabled], .btn:disabled { opacity:.6; cursor:not-allowed; filter:grayscale(.2); }

.btn-square{ width:36px; height:36px; padding:0; text-align:center; }
.btn-sm-square{ width:30px; height:30px; padding:0; text-align:center; }
.btn-lg-square{ width:48px; height:48px; padding:0; text-align:center; }

/* ---- Navbar “glass” + sticky ---- */
.navbar-dark{
  position: absolute; top:0; left:0; width:100%;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(9, 30, 62, .55) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: var(--z-nav);
}
.sticky-top.navbar-dark{
  position: fixed; background:#ffffff !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.navbar-dark .navbar-brand h1{ color:#fff; }
.sticky-top.navbar-dark .navbar-brand h1{ color: var(--primary); }

.navbar-dark .navbar-toggler{
  color: var(--primary) !important; border-color: var(--primary) !important;
}

.navbar-dark .navbar-nav .nav-link{
  position: relative; margin-left: 25px;
  padding: 35px 0;
  color: #FFFFFF; font-size: 18px; font-weight: 600;
  transition: .5s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{ color: var(--primary); }

@media (min-width: 992px) {
  .sticky-top.navbar-dark .navbar-nav .nav-link{ padding:20px 0; color: var(--dark); }
  .navbar-dark .navbar-nav .nav-link::before{
    position:absolute; content:""; width:0; height:2px; bottom:-1px; left:50%;
    background:var(--primary); transition:.5s;
  }
  .navbar-dark .navbar-nav .nav-link:hover::before,
  .navbar-dark .navbar-nav .nav-link.active::before{ width:100%; left:0; }
  .navbar-dark .navbar-nav .nav-link.nav-contact::before{ display:none; }
}

@media (max-width: 991.98px) {
  .sticky-top.navbar-dark{ position:relative; background: rgba(9,30,62,.96)!important; }
  .navbar-dark .navbar-nav .nav-link{ padding:10px 0; color:#fff; }
  .navbar-dark .navbar-brand h1{ color: var(--primary); }
}

/* ---- Carousel / Hero ---- */
.carousel-caption{
  inset:0; z-index:1;
}
.carousel-caption h5, .carousel-caption h1{
  color:#ffffff !important; text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.carousel-caption .btn-outline-light{
  color:#ffffff !important; border-color:#ffffff !important;
}
#header-carousel img { aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 576px) {
  .carousel-caption h5 { font-size: 14px; font-weight: 500 !important; }
  .carousel-caption h1 { font-size: 30px; font-weight: 600 !important; }
}
.carousel-control-prev, .carousel-control-next { width:10%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width:3rem; height:3rem; }

/* ---- Títulos de sección ---- */
.section-title{ position:relative; text-align:center; }
.section-title::before{
  position:absolute; content:""; width:150px; height:5px; left:50%; bottom:0;
  background:var(--primary); border-radius:2px; margin-left:-75px;
}
.section-title.section-title-sm::before{ width:90px; height:3px; }
.section-title::after{ display:none; } /* look más sobrio */

/* ---- Items de servicio ---- */
.service-item{
  position:relative; padding: 28px 26px;
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.05);
  background:#fff; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease;
}
.service-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-item .service-icon{
  margin: 0 auto 18px auto;
  width:76px; height:76px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), #2e8fb0);
  color:#fff;
  box-shadow: 0 10px 24px rgba(74,169,200,.28);
}
.service-item .service-icon i{ transform:none }
.service-item a.btn{
  position:absolute; width:60px; bottom:-48px; left:50%;
  margin-left:-30px; opacity:0;
}
.service-item:hover a.btn{ bottom:-24px; opacity:1; }

/* ---- Testimonios / clientes ---- */
.testimonial-carousel .owl-dots{
  margin-top:15px; display:flex; align-items:flex-end; justify-content:center;
}
.testimonial-carousel .owl-dot{
  position:relative; display:inline-block; margin:0 5px;
  width:15px; height:15px; background:#DDDDDD; border-radius:2px; transition:.5s;
}
.testimonial-carousel .owl-dot.active{ width:30px; background:var(--primary); }
.testimonial-carousel .owl-item .testimonial-item{ transition:.5s; }
.testimonial-item{
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
}
.testimonial-carousel .owl-item.center .testimonial-item{
  background:#FFFFFF !important; box-shadow: 0 0 30px #DDDDDD;
}

/* ---- Equipo ---- */
.team-item{
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  transition:.5s;
  overflow:hidden;
}
.team-item:hover{ box-shadow: var(--shadow-lg) }
.team-social{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(9,30,62,.0), rgba(9,30,62,.65));
  backdrop-filter: blur(2px);
  transition: opacity .25s ease, transform .25s ease;
  opacity:0;
}
.team-item:hover .team-social{ opacity:1; }
.team-social a.btn{
  position:relative; margin:0 3px; margin-top:100px; opacity:0;
}
.team-item:hover .team-social a.btn:first-child{ opacity:1; margin-top:0; transition:.3s 0s; }
.team-item:hover .team-social a.btn:nth-child(2){ opacity:1; margin-top:0; transition:.3s .05s; }
.team-item:hover .team-social a.btn:nth-child(3){ opacity:1; margin-top:0; transition:.3s .1s; }
.team-item:hover .team-social a.btn:nth-child(4){ opacity:1; margin-top:0; transition:.3s .15s; }

.team-item .team-img img,
.blog-item .blog-img img{ transition: .5s; }
.team-item:hover .team-img img,
.blog-item:hover .blog-img img{ transform: scale(1.06); }

/* ---- Blog / Artículos ---- */
.blog-item{
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.blog-item .blog-img img{
  aspect-ratio: 16/10; object-fit: cover; transform:none; transition: transform .4s ease;
}

/* ---- Pricing ---- */
.pricing-card{
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease;
}
.pricing-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Mapa embebido ---- */
.rounded.overflow-hidden.shadow-sm iframe{ border-radius: 16px !important; }

/* ---- Enlaces animados (footer/links) ---- */
.link-animated a{ transition:.3s; }
.link-animated a:hover{ padding-left: 10px; }

/* ---- Header secundario ---- */
.bg-header{
  background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/carousel-1.jpg) center center no-repeat;
  background-size: cover;
}

/* ---- Varios ---- */
@media (min-width: 991.98px) {
  .facts{ position: relative; margin-top: -75px; z-index: 1; }
}
.back-to-top{
  position: fixed; display:none; right:45px; bottom:45px; z-index:99;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  border:none;
}
@media (min-width: 767.98px) { .footer-about{ margin-bottom: -75px; } }

/* ---- Accesibilidad: foco visible y contraste ---- */
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--primary), white 25%);
  outline-offset: 2px; border-radius: 6px;
}
a:focus-visible, .btn:focus-visible{ box-shadow: 0 0 0 4px rgba(74,169,200,.25); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus-visible{ color:#1f6f88; }

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .wow, .animated { animation:none !important; }
}

/* ---- Rendimiento móvil ---- */
@media (max-width: 767px){
  .navbar-dark{ backdrop-filter: none !important; }
  .btn-primary, .service-item, .pricing-card { box-shadow: 0 6px 14px rgba(0,0,0,.12) !important; }
}
/* Evita will-change permanente: solo al hover */
.service-item:hover, .pricing-card:hover, .blog-item:hover { will-change: transform; }

/* ---- Modo oscuro (auto por sistema) ---- */
@media (prefers-color-scheme: dark) {
  :root{
    --primary: #6ec7e2;
    --light: #0e2a4e;
    --dark: #e9eef6;
  }
  body{
    background: linear-gradient(145deg, #0c1420 0%, #111a28 50%, #0a121c 100%);
    color: var(--dark);
  }
  .navbar-dark{ background: rgba(9,30,62,.75)!important; }
  .service-item, .pricing-card, .team-item, .blog-item{
    background:#101926; border-color: rgba(255,255,255,.06); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .section-title::before{ background: #6ec7e2; }
  .visit-counter{ background: rgba(110,199,226,.18); color:#9bd9ed; }
  .link-animated a:hover{ color:#9bd9ed; }
}

/* ---- Print (básico) ---- */
@media print {
  .navbar, .footer-about, .back-to-top, .owl-carousel, .btn { display:none !important; }
  body { background:#fff !important; color:#000; }
  a::after{ content:" (" attr(href) ")"; font-size: .85em; }
}


/* ==========================================================
   SPS PRO UPGRADE (pegalo al FINAL de tu style.css)
   ========================================================== */

/* Hero premium */
.sps-hero{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items: stretch;
  overflow:hidden;
}
.sps-hero__bg{
  position:absolute; inset:0; z-index:0;
}
.sps-hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.03);
}
.sps-hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 10% 20%, rgba(74,169,200,.35), transparent 60%),
    radial-gradient(900px 450px at 90% 30%, rgba(255,183,3,.18), transparent 60%),
    linear-gradient(180deg, rgba(9,30,62,.78) 0%, rgba(9,30,62,.55) 45%, rgba(9,30,62,.85) 100%);
}
.sps-hero__content{ position:relative; z-index:1; }

/* Hero card (glass) */
.sps-hero-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px) saturate(140%);
  padding: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}
.sps-input{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.sps-input::placeholder{ color: rgba(255,255,255,.65) !important; }
.sps-input:focus{
  box-shadow: 0 0 0 4px rgba(74,169,200,.22) !important;
  border-color: rgba(74,169,200,.55) !important;
}

/* Metrics */
.sps-metrics{
  display:flex; gap:12px; flex-wrap:wrap;
}
.sps-metric{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 150px;
  backdrop-filter: blur(8px);
}
.sps-metric__num{
  font-weight: 900;
  font-size: 1.35rem;
  color: #fff;
  line-height: 1;
}
.sps-metric__txt{
  font-size: .86rem;
  color: rgba(255,255,255,.72);
}

/* Service cards premium */
.sps-serviceCard{
  height:100%;
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
.sps-serviceCard::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 160px at 20% 10%, rgba(74,169,200,.25), transparent 55%);
  pointer-events:none;
}
.sps-serviceCard:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sps-serviceCard__icon{
  width:72px; height:72px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary), #2e8fb0);
  color:#fff;
  box-shadow: 0 10px 24px rgba(74,169,200,.28);
  margin-bottom: 14px;
  position:relative;
  z-index:1;
}
.sps-serviceCard__body{ position:relative; z-index:1; }

/* Feature list */
.sps-featureList{ display:flex; flex-direction:column; gap:12px; }
.sps-feature{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
}
.sps-feature__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(74,169,200,.14);
  color: #1f6f88;
  flex: 0 0 auto;
}

/* Glass card generic */
.sps-glassCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}

/* Plans */
.sps-planCard{
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.sps-planCard:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sps-planCard__top{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Contact mini cards */
.sps-contactCards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 576px){
  .sps-contactCards{ grid-template-columns: 1fr 1fr; }
}
.sps-miniCard{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration:none;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  color: var(--dark);
  transition: transform .2s ease, box-shadow .25s ease;
}
.sps-miniCard i{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(74,169,200,.14);
  color: #1f6f88;
  font-size: 20px;
}
.sps-miniCard__arrow{ margin-left:auto; color: rgba(9,30,62,.55); }
.sps-miniCard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Sticky CTA móvil */
.sps-sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display:flex;
  background: rgba(9,30,62,.92);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  z-index: 1200;
}
.sps-sticky-cta__btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 10px 6px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.78rem;
  gap:4px;
}
.sps-sticky-cta__btn i{ font-size: 18px; }
.sps-sticky-cta__btn:hover{ color: var(--primary); }
@media (max-width: 991.98px){
  body{ padding-bottom: 62px; }
}

/* Better navbar brand on sticky */
.sticky-top.navbar-dark .navbar-brand small{ color: rgba(9,30,62,.65)!important; }


/* ==========================================================
   SPS RESPONSIVE + COLOR SYSTEM (PEGAR AL FINAL)
   Objetivo: 100% responsive + mezcla de colores SPS más fina
   ========================================================== */

/* ---------- 1) Tokens mejorados (colores SPS + escalas) ---------- */
:root{
  /* SPS Blues (principal + profundo) */
  --sps-blue-50: #EAF7FB;
  --sps-blue-100:#D8F1F8;
  --sps-blue-200:#B7E5F2;
  --sps-blue-300:#87D3E7;
  --sps-blue-400:#5BBFE0;
  --sps-blue-500:#4AA9C8; /* tu primary */
  --sps-blue-600:#2E8FB0;
  --sps-blue-700:#1F6F88;
  --sps-blue-800:#0F3C58;
  --sps-blue-900:#091E3E; /* tu dark */

  /* Neutral (gris SPS) */
  --sps-gray-50: #F7F8FA;
  --sps-gray-100:#EEF1F4;
  --sps-gray-200:#DCE2E8;
  --sps-gray-300:#C5CED8;
  --sps-gray-400:#9EABB8;
  --sps-gray-500:#7B8794;
  --sps-gray-700:#3A4756;

  /* Accent (dorado) */
  --sps-accent-500:#FFB703;

  /* Re-asignación a tus variables existentes (compatibilidad) */
  --primary: var(--sps-blue-500);
  --dark: var(--sps-blue-900);
  --secondary: #B8B8B8;
  --accent: var(--sps-accent-500);

  /* Sombra/Radio adaptativos */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 10px 22px rgba(9,30,62,.08);
  --shadow:    0 14px 30px rgba(9,30,62,.10);
  --shadow-lg: 0 22px 46px rgba(9,30,62,.14);

  /* Layout fluid */
  --container-pad: clamp(14px, 3vw, 28px);
  --section-pad: clamp(44px, 6vw, 90px);
  --gap: clamp(12px, 2vw, 18px);

  /* Tipografía fluida (más estable en móviles) */
  --text-base: clamp(15px, 0.92rem + 0.25vw, 17px);
  --text-sm: clamp(13px, 0.85rem + 0.15vw, 15px);
  --text-lg: clamp(18px, 1.05rem + 0.35vw, 20px);
  --h1: clamp(2.05rem, 1.2rem + 2.9vw, 3.4rem);
  --h2: clamp(1.75rem, 1.15rem + 2.2vw, 2.7rem);
  --h3: clamp(1.35rem, 1rem + 1.4vw, 2rem);

  /* “Safe tap sizes” */
  --tap: 44px;
}

/* ---------- 2) Base responsive: fuentes, contenedor, espaciado ---------- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  font-size: var(--text-base);
  line-height: 1.55;
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(74,169,200,.12), transparent 60%),
    radial-gradient(900px 360px at 90% 10%, rgba(255,183,3,.10), transparent 55%),
    linear-gradient(145deg, #ffffff 0%, #f3f5f8 45%, #e8edf3 100%);
  color: #2a2e37;
}

/* Headings más consistentes */
h1{ font-size: var(--h1) !important; line-height: 1.05; }
h2{ font-size: var(--h2) !important; line-height: 1.12; }
h3{ font-size: var(--h3) !important; line-height: 1.2; }
p{ font-size: var(--text-base); }
small, .small{ font-size: var(--text-sm) !important; }

/* Contenedores: respeta Bootstrap, pero mejora padding horizontal */
.container, .container-fluid{
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* Secciones: padding vertical consistente */
.container-fluid.py-5{
  padding-top: var(--section-pad) !important;
  padding-bottom: var(--section-pad) !important;
}

/* Evita overflow accidental en móviles */
img, svg, video, canvas{ max-width: 100%; height: auto; }
.row{ --bs-gutter-x: clamp(12px, 2vw, 24px); }

/* ---------- 3) Navbar: mejor comportamiento móvil + sticky ---------- */
.navbar-dark{
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}
.navbar-dark .navbar-brand h1{
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem) !important;
  letter-spacing: .2px;
}
.navbar-dark .navbar-nav .nav-link{
  font-size: clamp(15px, .95rem + .2vw, 18px);
}

/* Menú móvil más usable */
@media (max-width: 991.98px){
  .navbar-dark .navbar-collapse{
    background: rgba(9,30,62,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 10px 14px;
    margin-top: 10px;
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
  }
  .navbar-dark .navbar-nav .nav-link{
    padding: 12px 6px !important;
    margin-left: 0 !important;
  }
}

/* Sticky: contraste perfecto */
.sticky-top.navbar-dark{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(9,30,62,.08);
}
.sticky-top.navbar-dark .navbar-nav .nav-link{
  color: rgba(9,30,62,.92) !important;
}
.sticky-top.navbar-dark .navbar-nav .nav-link:hover,
.sticky-top.navbar-dark .navbar-nav .nav-link.active{
  color: var(--primary) !important;
}

/* ---------- 4) Botones: tamaño táctil + consistencia ---------- */
.btn{
  min-height: var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-size: clamp(14px, .9rem + .2vw, 16px);
  padding: .75rem 1.15rem;
}
.btn-lg{
  min-height: 52px;
  padding: .9rem 1.25rem;
}

/* Botón primario más “SPS” */
.btn-primary{
  background: linear-gradient(135deg, var(--sps-blue-500), var(--sps-blue-700)) !important;
  box-shadow: 0 14px 28px rgba(74,169,200,.25) !important;
}
.btn-primary:active{ transform: translateY(0); }
.btn-outline-light:hover{
  background: rgba(255,255,255,.12);
}

/* ---------- 5) Hero/carousel: sin cortes en móviles (vh fix) ---------- */
.sps-hero{
  min-height: 88svh; /* mejor que vh en iOS/Android modernos */
}
@supports not (height: 100svh){
  .sps-hero{ min-height: 88vh; }
}

/* Títulos del hero: legibilidad móvil */
.carousel-caption .display-1{
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.2rem) !important;
}
.carousel-caption h5{
  font-size: clamp(12px, .8rem + .4vw, 16px) !important;
  letter-spacing: .12em;
  opacity: .95;
}

/* Reduce exceso de altura del hero en móviles pequeños */
@media (max-width: 576px){
  #header-carousel img{ aspect-ratio: 4/5; } /* mejor para pantalla vertical */
  .carousel-caption{ padding: 0 var(--container-pad); }
  .carousel-caption .btn{ width: 100%; }
  .carousel-caption .btn + .btn{ margin-top: 10px; }
}

/* ---------- 6) Cards: grids estables + sombras coherentes ---------- */
.service-item, .pricing-card, .team-item, .blog-item, .testimonial-item,
.sps-serviceCard, .sps-planCard, .sps-glassCard, .sps-feature, .sps-miniCard{
  border-radius: var(--radius);
}

/* Mejor separación en móviles */
@media (max-width: 767.98px){
  .service-item, .pricing-card, .team-item, .blog-item, .testimonial-item{
    box-shadow: var(--shadow) !important;
  }
  .section-title{ margin-bottom: 22px !important; }
}

/* Evita “saltos” en cards con alturas distintas */
.service-item, .pricing-card, .blog-item, .team-item{
  height: 100%;
}

/* ---------- 7) Tipografía + lectura en secciones ---------- */
.section-title h1{ max-width: 22ch; margin-inline:auto; }
.section-title h5{ letter-spacing: .12em; }

/* Párrafos: ancho cómodo en desktop */
@media (min-width: 992px){
  .container p{
    max-width: 75ch;
  }
}

/* ---------- 8) Formularios: full responsive + mejor UX ---------- */
.form-control{
  min-height: 46px;
  border-radius: 14px !important;
  border: 1px solid rgba(9,30,62,.12) !important;
}
.form-control:focus{
  border-color: rgba(74,169,200,.55) !important;
  box-shadow: 0 0 0 4px rgba(74,169,200,.18) !important;
}

/* Inputs del hero glass */
.sps-input{ min-height: 46px; }

/* ---------- 9) Mapa/iframes: sin overflow ---------- */
iframe{
  max-width: 100%;
  border: 0;
}

/* ---------- 10) Sticky CTA móvil: que no tape contenido ---------- */
@media (max-width: 991.98px){
  .sps-sticky-cta{
    padding-bottom: env(safe-area-inset-bottom);
  }
  body{ padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* ---------- 11) Accesibilidad y contraste ---------- */
a{ text-underline-offset: 3px; }
a:hover{ text-decoration-thickness: 2px; }

:focus-visible{
  outline: 3px solid rgba(74,169,200,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- 12) Dark mode refinado (colores SPS) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --primary: #6ec7e2;
    --dark: #e9eef6;
  }

  body{
    background:
      radial-gradient(900px 360px at 12% 0%, rgba(110,199,226,.16), transparent 60%),
      radial-gradient(900px 360px at 90% 10%, rgba(255,183,3,.10), transparent 55%),
      linear-gradient(145deg, #0b1220 0%, #111a28 55%, #0a121c 100%);
    color: #e9eef6;
  }

  /* Cards */
  .service-item, .pricing-card, .team-item, .blog-item, .testimonial-item,
  .sps-serviceCard, .sps-planCard, .sps-glassCard, .sps-feature, .sps-miniCard{
    background: rgba(16,25,38,.92) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
    color: #e9eef6;
  }

  .text-muted{ color: rgba(233,238,246,.72) !important; }

  .sticky-top.navbar-dark{
    background: rgba(10,18,28,.80) !important;
    border-bottom-color: rgba(255,255,255,.08);
  }
  .sticky-top.navbar-dark .navbar-nav .nav-link{
    color: rgba(233,238,246,.92) !important;
  }
}

/* ---------- 13) Ultra-wide: limita “stretch” excesivo ---------- */
@media (min-width: 1400px){
  .container{ max-width: 1240px; }
}

/* ---------- 14) Ajuste fino de visit counter ---------- */
.visit-counter{
  font-size: clamp(.95rem, .9rem + .35vw, 1.1rem);
  background: rgba(74,169,200,.14);
  color: var(--primary);
  border: 1px solid rgba(74,169,200,.18);
}

/* ==========================================================
   SPS PATCH PRO (Hero + Navbar + Glass)
   Pegar al FINAL de tu style.css
   ========================================================== */

/* 1) Altura real de navbar/topbar (para que el hero no quede pegado) */
:root{
  --sps-topbar-h: 45px;
  --sps-nav-h: 86px; /* ajusta si cambias padding de la navbar */
  --sps-header-offset: calc(var(--sps-topbar-h) + var(--sps-nav-h));
}

/* En escritorio: topbar existe */
@media (min-width: 992px){
  .navbar-dark{
    top: var(--sps-topbar-h) !important;
  }
}

/* En móvil: topbar no se ve => navbar arranca arriba */
@media (max-width: 991.98px){
  :root{ --sps-topbar-h: 0px; }
  .navbar-dark{ top: 0 !important; }
}

/* 2) Hero: agrega “aire” para que no choque con el header */
#header-carousel{
  margin-top: var(--sps-header-offset);
}

/* Si usas tu .sps-hero (upgrade), también aplica */
.sps-hero{
  padding-top: var(--sps-header-offset);
}

/* 3) Mejor lectura del texto del hero (sube contraste sin dañar estilo) */
.carousel-caption .p-3{
  padding: clamp(14px, 2.2vw, 22px) !important;
}

/* Tu párrafo del hero (si lo tienes) que no se pierda */
.carousel-caption p,
.carousel-caption .lead,
.carousel-caption .hero-subtitle{
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
  max-width: 62ch;
  margin-inline: auto;
}

/* 4) Overlay del hero: más pro y uniforme */
#header-carousel .carousel-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 10% 20%, rgba(74,169,200,.25), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(255,183,3,.12), transparent 60%),
    linear-gradient(180deg, rgba(9,30,62,.72) 0%, rgba(9,30,62,.45) 40%, rgba(9,30,62,.78) 100%);
  z-index:0;
}
#header-carousel .carousel-caption{ position:relative; z-index:1; }

/* 5) Card glass del formulario: más definida (se nota “enterprise”) */
.sps-hero-card,
.carousel-caption .sps-hero-card,
.carousel-caption .glass-card,
.carousel-caption .quick-form{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.28) !important;
}

/* Inputs del formulario dentro del hero: mejor contraste */
.sps-input,
.carousel-caption input,
.carousel-caption select,
.carousel-caption textarea{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.carousel-caption input::placeholder,
.carousel-caption textarea::placeholder{
  color: rgba(255,255,255,.68) !important;
}
.carousel-caption input:focus,
.carousel-caption select:focus,
.carousel-caption textarea:focus{
  border-color: rgba(74,169,200,.60) !important;
  box-shadow: 0 0 0 4px rgba(74,169,200,.18) !important;
}

/* 6) Botones del hero: más consistentes y pro */
.carousel-caption .btn{
  min-height: 46px;
  padding: .8rem 1.2rem;
}
.carousel-caption .btn-outline-light{
  border-color: rgba(255,255,255,.55) !important;
  color:#fff !important;
}
.carousel-caption .btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 7) Responsive del hero: mejor en pantallas medianas/pequeñas */
@media (max-width: 991.98px){
  #header-carousel{ margin-top: var(--sps-nav-h); } /* topbar no está */

  .carousel-caption .p-3{ max-width: 980px !important; }
  .carousel-caption .btn{ width: 100%; }
  .carousel-caption .btn + .btn{ margin-top: 10px; }
}

/* En móviles muy verticales: el hero se ve más “Instagram-friendly” */
@media (max-width: 576px){
  #header-carousel img{ aspect-ratio: 4 / 5; object-fit: cover; }
  .carousel-caption h1{ font-size: clamp(2rem, 1.2rem + 4.2vw, 3.1rem) !important; }
}

/* 8) Navbar glass más “premium” (suave) */
.navbar-dark{
  background: rgba(9, 30, 62, .62) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
}

/* Sticky en blanco: mejor contraste */
.sticky-top.navbar-dark{
  background: rgba(255,255,255,.94) !important;
}
.sticky-top.navbar-dark .navbar-brand h1{ color: var(--primary) !important; }

/* 9) Back to top: que no se vea “perdido” y no choque con CTA */
.back-to-top{
  border-radius: 16px !important;
  width: 46px !important;
  height: 46px !important;
}
@media (max-width: 991.98px){
  .back-to-top{ right: 14px !important; bottom: 78px !important; }
}

/* ==========================================================
   SPS — CONTRASTE PERFECTO EN MÓVIL (Dark Mode)
   Arregla textos Bootstrap (.text-dark/.text-muted) cuando el
   móvil está en modo oscuro y tus fondos son oscuros.
   ========================================================== */

@media (prefers-color-scheme: dark) and (max-width: 991.98px){

  /* Texto general: evita “azul/negro” ilegible */
  body,
  p, span, small, li, label,
  .lead,
  .text-dark,
  .text-secondary,
  .text-muted{
    color: rgba(233, 238, 246, .92) !important; /* blanco suave */
  }

  /* Títulos siempre legibles */
  h1, h2, h3, h4, h5, h6,
  .display-1, .display-2, .display-3, .display-4{
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
  }

  /* Enlaces y acentos SPS */
  a, .link-animated a{
    color: #9bd9ed !important;
  }
  a:hover, .link-animated a:hover{
    color: #c7f0ff !important;
  }

  /* Cards/Secciones oscuras: fuerza contraste */
  .service-item, .pricing-card, .team-item, .blog-item,
  .sps-glassCard, .sps-planCard, .sps-feature, .sps-serviceCard{
    background: #0f1826 !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  }

  /* Subtítulos dentro de cards (evita el “azul oscuro” apagado) */
  .service-item h1, .service-item h2, .service-item h3, .service-item h4,
  .pricing-card h1, .pricing-card h2, .pricing-card h3, .pricing-card h4,
  .sps-planCard h1, .sps-planCard h2, .sps-planCard h3, .sps-planCard h4,
  .sps-feature h1, .sps-feature h2, .sps-feature h3, .sps-feature h4,
  .sps-serviceCard h1, .sps-serviceCard h2, .sps-serviceCard h3, .sps-serviceCard h4{
    color: #ffffff !important;
  }

  /* Iconos/ticks que se vean “SPS premium” */
  .sps-feature__icon,
  .service-item .service-icon,
  .sps-serviceCard__icon,
  .sps-miniCard i{
    background: rgba(110,199,226,.16) !important;
    color: #9bd9ed !important;
  }

  /* Botones dentro de cards: mejor contraste */
  .btn-outline-light{
    border-color: rgba(255,255,255,.55) !important;
    color: #fff !important;
  }
  .btn-outline-light:hover{
    border-color: #9bd9ed !important;
    color: #9bd9ed !important;
  }

  /* Secciones con fondo oscuro + texto “por defecto bootstrap” */
  .bg-dark, .bg-header, .bg-primary,
  section.bg-dark, section.bg-primary{
    color: rgba(233,238,246,.92) !important;
  }
}

/* ==========================================================
   FIX: CLIENTES Y ALIADOS (móvil) — texto siempre legible
   ========================================================== */

/* 1) Si la sección está en fondo claro, NO puede ir texto blanco */
@media (max-width: 991.98px){
  /* cubre secciones típicas de Bootstrap */
  .bg-light .text-white,
  .bg-white .text-white,
  .bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
  .bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6{
    color: var(--dark) !important;
    text-shadow: none !important;
  }

  .bg-light p, .bg-light small, .bg-light span,
  .bg-white p, .bg-white small, .bg-white span{
    color: rgba(9, 30, 62, .78) !important;
  }
}

/* 2) En modo oscuro del celular: si esa sección se mantiene clara, la oscurecemos
      para que todo el carrusel se vea premium y con contraste */
@media (prefers-color-scheme: dark) and (max-width: 991.98px){
  .bg-light, .bg-white{
    background: linear-gradient(145deg, #0c1420 0%, #101a28 55%, #0a121c 100%) !important;
  }

  .bg-light .section-title h1, .bg-light .section-title h2, .bg-light .section-title h3,
  .bg-white .section-title h1, .bg-white .section-title h2, .bg-white .section-title h3,
  .bg-light .section-title p,  .bg-white .section-title p{
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
  }

  /* card del carrusel (cliente) */
  .bg-light .owl-carousel .testimonial-item,
  .bg-white .owl-carousel .testimonial-item,
  .bg-light .owl-carousel .service-item,
  .bg-white .owl-carousel .service-item{
    background: #0f1826 !important;
    border-color: rgba(255,255,255,.07) !important;
  }

  .bg-light .owl-carousel .testimonial-item *,
  .bg-white .owl-carousel .testimonial-item *,
  .bg-light .owl-carousel .service-item *,
  .bg-white .owl-carousel .service-item *{
    color: rgba(233,238,246,.92) !important;
  }
}