/* Ulla Servicios y Desarrollos - Estilos Oficiales Profesionales (Tema Claro / Light) */

:root {
  --color-primary: #FFCC00;       /* Amarillo Ulla Oficial */
  --color-primary-dark: #E6B800;
  --color-primary-amber: #F59E0B;
  --color-bg-page: #F8FAFC;       /* Slate 50 ultra suave, no cansa la vista */
  --color-bg-card: #FFFFFF;
  --color-text-main: #0F172A;     /* Slate 900 de máxima legibilidad */
  --color-text-body: #334155;     /* Slate 700 para lectura confortable */
  --color-text-muted: #64748B;    /* Slate 500 */
  --color-border: #E2E8F0;        /* Slate 200 */
  --color-white: #FFFFFF;
}

/* Custom Scrollbar - Suave y moderno */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #F8FAFC;
  color: #0F172A;
}

/* Hazard / Construction Striping matching Logo Colors */
.hazard-border {
  background: repeating-linear-gradient(
    -45deg,
    #FFCC00,
    #FFCC00 12px,
    #0F172A 12px,
    #0F172A 24px
  );
  height: 5px;
  width: 100%;
}

/* Logo badge border style (reusable for cards / hero pill) */
.ulla-pill-border {
  border: 2px solid #FFCC00;
  border-radius: 1.25rem;
}

/* Floating WhatsApp Button Pulse */
.whatsapp-pulse {
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  animation: pulse-green 2s infinite cubic-bezier(0.66, 0, 1);
}

@keyframes pulse-green {
  to {
    box-shadow: 0 0 0 22px rgba(37, 211, 102, 0);
  }
}

/* Hero Background Pattern - Tema Claro Luminoso */
.hero-overlay {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.92) 50%, rgba(255, 255, 255, 0.96) 100%),
              radial-gradient(circle at 80% 20%, rgba(255, 204, 0, 0.18) 0%, transparent 50%);
}

/* Card Glow on Hover - Profesional y elegante */
.service-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #E2E8F0;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: #F59E0B;
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
}

/* Tab button active state */
.filter-btn.active {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  font-weight: 800;
  border-color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

/* Number counter styling */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Signature Chevron Motif from Logo */
.chevron-brand {
  display: inline-flex;
  align-items: center;
  color: #D97706;
  font-weight: 900;
  letter-spacing: -2px;
}