:root{
  /* Paleta Principal */
  --brand-primary:#0ea5e9;
  --brand-secondary:#22c55e;
  --brand-accent:#f59e0b;
  --brand-deep:#0284c7;
  
  /* Fondos y superficies */
  --bg-main:#f8fafc;
  --bg-elevated:#ffffff;
  --bg-glass:rgba(255,255,255,.75);
  --bg-glass-hover:rgba(255,255,255,.92);
  
  /* Bordes y separadores */
  --border-light:rgba(15, 23, 42, .08);
  --border-normal:rgba(15, 23, 42, .12);
  --border-strong:rgba(15, 23, 42, .18);
  
  /* Texto */
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  
  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 48px rgba(15,23,42,.12);
  --shadow-brand: 0 12px 32px rgba(14,165,233,.22);
  
  /* Efectos */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 20px;
}

/* === RESET Y BASE === */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1400px 700px at 12% 5%, rgba(14,165,233,.14), transparent 65%),
    radial-gradient(1200px 600px at 88% 12%, rgba(34,197,94,.11), transparent 68%),
    radial-gradient(800px 400px at 50% 95%, rgba(245,158,11,.08), transparent 70%),
    var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* === NAVBAR === */
.navbar{
  background: var(--bg-glass)!important;
  border-bottom: 1px solid var(--border-light);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
}

.navbar.scrolled{
  background: rgba(255,255,255,.88)!important;
  box-shadow: var(--shadow-md);
}

.navbar-brand{
  font-weight: 800;
  font-size: 1.35rem;
  /* Fallback primero */
  color: var(--brand-primary);
}

/* Solo aplicar gradiente si hay soporte */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .navbar-brand{
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

/* === BRAND PILL === */
.brand-pill{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.5rem 1rem;
  border:1px solid var(--border-normal);
  border-radius: 999px;
  background: var(--bg-glass-hover);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--blur-sm));
  transition: all .25s ease;
}

.brand-pill:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
}

.brand-pill .icon{
  width: 20px;
  height: 20px;
  color: var(--brand-primary);
}

/* === HERO SECTION === */
.hero{
  position: relative;
  border:1px solid var(--border-light);
  background: 
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.08)),
    var(--bg-elevated);
  border-radius: 28px;
  padding: 48px 32px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: all .4s ease;
}

.hero::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(14,165,233,.15), transparent 70%);
  pointer-events: none;
  animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.1); }
}

.hero:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
}

.hero-title{
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
  /* Fallback primero */
  color: var(--text-primary);
}

/* Solo aplicar gradiente si hay soporte */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title{
    background: linear-gradient(135deg, var(--text-primary), var(--brand-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.hero-subtitle{
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 2rem;
}

/* === CARDS === */
.card-soft{
  position: relative;
  border:1px solid var(--border-light);
  background: var(--bg-elevated);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: var(--shadow-md);
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-soft::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  opacity: 0;
  transition: opacity .3s ease;
}

.card-soft:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.card-soft:hover::after{
  opacity: 1;
}

.card-soft .imgwrap{
  position: relative;
  aspect-ratio: 16/9;
  background: 
    linear-gradient(135deg, rgba(14,165,233,.08), rgba(34,197,94,.06)),
    var(--bg-main);
  border-bottom:1px solid var(--border-light);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}

.card-soft .imgwrap::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.05));
  opacity: 0;
  transition: opacity .3s ease;
}

.card-soft:hover .imgwrap::before{
  opacity: 1;
}

.card-soft img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-soft:hover img{
  transform: scale(1.08);
}

.card-soft .card-body{
  padding: 1.75rem;
}

.card-title{
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
}

.card-text{
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* === BADGES Y CHIPS === */
.badge-premium{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.1));
  border: 1px solid rgba(14,165,233,.25);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-deep);
}

.chipbar{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin: 1.5rem 0;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1.1rem;
  border-radius: 999px;
  border:1px solid var(--border-normal);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-sm));
  color: var(--text-primary);
  text-decoration:none;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}

.chip:hover{
  transform: translateY(-3px) scale(1.02);
  background: var(--bg-glass-hover);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.chip.active{
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(34,197,94,.12));
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}

/* === BOTONES === */
.btn-brand{
  position: relative;
  background-color: var(--brand-primary) !important;
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: .85rem 2rem;
  border-radius: 14px;
  box-shadow: var(--shadow-brand);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.btn-brand::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

.btn-brand:hover{
  background-color: var(--brand-primary) !important;
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 42px rgba(14,165,233,.28);
}

.btn-brand:hover::before{
  opacity: 1;
}

.btn-brand:active,
.btn-brand:focus,
.btn-brand:focus-visible{
  background-color: var(--brand-primary) !important;
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(0.98);
  box-shadow: var(--shadow-brand);
}

.btn-outline-soft{
  border:1px solid var(--border-normal);
  color: var(--text-primary);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-sm));
  font-weight: 600;
  padding: .85rem 2rem;
  border-radius: 14px;
  transition: all .25s ease;
}

.btn-outline-soft:hover{
  background: var(--bg-glass-hover);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-soft:active,
.btn-outline-soft:focus,
.btn-outline-soft:focus-visible{
  background: var(--bg-glass-hover);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* === PANEL DE SERVICIOS === */
.services-panel{
  margin-top: 2rem;
  border:1px solid var(--border-light);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.service-card{
  position: relative;
  border:1px solid var(--border-light);
  background: var(--bg-elevated);
  border-radius: 18px;
  padding: 1.75rem;
  height:100%;
  box-shadow: var(--shadow-sm);
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.service-card::before{
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  opacity: 0;
  transition: opacity .3s ease;
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.service-card:hover::before{
  opacity: 1;
}

.service-icon{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(34,197,94,.1));
  border-radius: 16px;
  margin-bottom: 1.25rem;
  color: var(--brand-primary);
  font-size: 1.75rem;
  transition: all .3s ease;
}

.service-card:hover .service-icon{
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(34,197,94,.15));
}

.service-title{
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: .75rem;
  color: var(--text-primary);
}

.service-description{
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.6;
}

/* === UTILIDADES === */
.small-muted{ 
  color: var(--text-muted); 
  font-size: .875rem;
}

.text-gradient{
  /* Fallback */
  color: var(--brand-primary);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient{
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-normal), transparent);
  margin: 2rem 0;
}

/* === FOOTER === */
.footer{
  margin-top: 4rem;
  border-top:1px solid var(--border-light);
  color: var(--text-secondary);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  padding: 3rem 0 2rem;
}

.footer a{
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .2s ease;
}

.footer a:hover{
  color: var(--brand-primary);
}

/* === ANIMACIONES === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up{
  animation: fadeInUp .6s ease-out forwards;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .hero{
    padding: 32px 24px;
    border-radius: 20px;
  }
  
  .hero-title{
    font-size: 2rem;
  }
  
  .hero-subtitle{
    font-size: 1.1rem;
  }
  
  .chipbar{
    gap: .5rem;
  }
  
  .chip{
    font-size: .85rem;
    padding: .55rem .9rem;
  }
  
  .services-panel{
    padding: 1.5rem;
  }
}

/* ===================================================== */
/* === COMPATIBILIDAD CROSS-BROWSER (CRÍTICO) === */
/* ===================================================== */

/* Asegurar que todos los títulos con gradiente tengan fallback */
.hero-title,
.product-title-main,
.services-title,
.section-title,
.products-header h2,
.sirf-title,
.cta-title,
.help-banner-title,
.contact-title {
  color: var(--text-primary);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title,
  .product-title-main,
  .services-title,
  .section-title,
  .products-header h2,
  .sirf-title,
  .cta-title,
  .help-banner-title,
  .contact-title {
    background: linear-gradient(135deg, var(--text-primary), var(--brand-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

/* Precios siempre visibles */
.price-value,
.price-value-main {
  color: var(--brand-primary) !important;
  font-weight: 900;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .price-value,
  .price-value-main {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent !important;
  }
}

/* Fix botones WhatsApp */
.btn-whatsapp-large {
  background-color: #25D366 !important;
  background-image: linear-gradient(135deg, #25D366, #128C7E) !important;
  border: none !important;
  color: #ffffff !important;
}

.btn-whatsapp-large:hover,
.btn-whatsapp-large:focus,
.btn-whatsapp-large:active,
.btn-whatsapp-large:focus-visible {
  background-color: #25D366 !important;
  background-image: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #ffffff !important;
  opacity: 0.9;
}

/* Fix botones blancos */
.btn-white,
.btn-white-tech {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--brand-primary) !important;
  border: 2px solid transparent;
}

.btn-white:hover,
.btn-white-tech:hover,
.btn-white:focus,
.btn-white-tech:focus,
.btn-white:active,
.btn-white-tech:active,
.btn-white:focus-visible,
.btn-white-tech:focus-visible {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--brand-primary) !important;
}

/* Fix botones outline blancos */
.btn-outline-white {
  background-color: rgba(255,255,255,.15) !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  color: #ffffff !important;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:active,
.btn-outline-white:focus-visible {
  background-color: rgba(255,255,255,.25) !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #ffffff !important;
}

/* Fix chips activos */
.chip-enhanced.active {
  background-color: var(--brand-primary) !important;
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  color: #ffffff !important;
}

/* Fix botones de teléfono */
.btn-phone-large {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.btn-phone-large:hover,
.btn-phone-large:focus,
.btn-phone-large:active,
.btn-phone-large:focus-visible {
  background-color: var(--bg-main) !important;
  color: var(--brand-primary) !important;
}

/* Prevenir tap highlight en móviles */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Asegurar que los links mantengan su estilo */
a.btn-brand,
a.btn-brand:visited {
  color: #ffffff !important;
}

a.btn-whatsapp-large,
a.btn-whatsapp-large:visited {
  color: #ffffff !important;
}