@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@400;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Paleta Corporativa SILICON - Premium */
  --sil-primario:   #002D6E;
  --sil-secundario: #007BFF;
  --sil-oscuro:     #030A16;
  --sil-gris-bg:    #F8FAFC; /* Más limpio, moderno */
  --sil-blanco:     #FFFFFF;
  --sil-texto:      #334155; /* Slate 700 para mejor legibilidad */
  --sil-muted:      #64748B; /* Slate 500 */
  --sil-radio:      16px;    /* Bordes más redondeados y amigables */
  --sil-sombra:     0 10px 30px -5px rgba(0, 45, 110, 0.08); /* Sombra moderna suave */
  --sil-sombra-hover: 0 20px 40px -5px rgba(0, 123, 255, 0.15); /* Sombra intensa en hover */
  --sil-grad-primario: linear-gradient(135deg, #002D6E 0%, #004bba 100%);
  --sil-grad-secundario: linear-gradient(135deg, #007BFF 0%, #00d2ff 100%);
}

/* ── Reset y Ocultar elementos nativos de WP ────────────────── */
.entry-header, header.page-header,
h1.entry-title, .page-title,
.entry-header * {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.entry-content,
.entry-content > .wp-block-html:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Tipografía global del bloque de servicios ──────────────── */
.sil-wrap {
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: var(--sil-texto);
  background-color: var(--sil-blanco);
  -webkit-font-smoothing: antialiased;
}

.sil-wrap h1, .sil-wrap h2,
.sil-wrap h3, .sil-wrap h4 {
  font-family: 'Outfit', 'Montserrat', sans-serif;
  color: var(--sil-primario);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sil-wrap * { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

/* ── Utilidades de Animación (Micro-interacciones) ──────────── */
a[id^="sie"] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
a[id^="sie"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--sil-sombra-hover);
  opacity: 0.95;
}

/* Iconos flotantes */
@keyframes sieFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.sie-float { 
  animation: sieFloat 4s ease-in-out infinite; 
}

/* Efecto Fade In Up al hacer scroll */
.sie-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sie-fade.sie-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Entrada Hero */
@keyframes sieSlideIn {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sie-hero-anim {
  animation: sieSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sie-hero-anim-delay {
  animation: sieSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.sie-hero-anim-delay2 {
  animation: sieSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── Tarjetas de Servicio Internas (Grid) ───────────────────── */
.sie-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px); /* Efecto Glassmorphism */
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--sil-radio);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--sil-sombra);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Brillo sutil de fondo en las tarjetas */
.sie-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--sil-grad-secundario);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.sie-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sil-sombra-hover);
  border-color: rgba(0, 123, 255, 0.3);
}

.sie-card:hover::before {
  opacity: 0.03; /* Leve tinte azul al pasar el mouse */
}

.sie-card-ico {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,123,255,0.1) 0%, rgba(0,123,255,0.2) 100%);
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  transition: transform 0.4s ease, background 0.4s ease;
}

.sie-card:hover .sie-card-ico {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(0,123,255,0.15) 0%, rgba(0,123,255,0.3) 100%);
}

.sie-card h3 {
  font-size: 18px; 
  font-weight: 700;
  color: var(--sil-primario); 
  margin: 0 0 12px;
}
.sie-card p {
  font-size: 14px; 
  color: var(--sil-muted);
  margin: 0; 
  line-height: 1.7;
}

/* ── Proceso de Trabajo (Pasos numerados) ───────────────────── */
.sie-step-item {
  text-align: center;
  padding: 0 16px;
  position: relative;
}

.sie-step-num {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--sil-blanco);
  border: 4px solid var(--sil-secundario);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; 
  font-size: 30px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--sil-primario);
  box-shadow: 0 8px 25px rgba(0,123,255,0.15);
  transition: all 0.4s ease;
}

.sie-step-item:hover .sie-step-num {
  transform: translateY(-5px) rotate(5deg);
  box-shadow: 0 12px 30px rgba(0,123,255,0.25);
  background: var(--sil-grad-secundario);
  color: var(--sil-blanco);
  border-color: transparent;
}

.sie-step-item h4 {
  font-size: 16px; font-weight: 700;
  color: var(--sil-primario); margin: 0 0 8px;
}
.sie-step-item p { 
  font-size: 14px; color: var(--sil-muted); line-height: 1.6; 
}

/* ── Diferenciadores (Por qué elegirnos) ────────────────────── */
.sie-diff-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--sil-blanco); 
  border-radius: var(--sil-radio);
  padding: 24px; 
  box-shadow: var(--sil-sombra);
  border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sie-diff-item:hover {
  border-color: rgba(0, 123, 255, 0.2);
  transform: translateX(6px);
  box-shadow: var(--sil-sombra-hover);
}
.sie-diff-ico {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,123,255,0.1) 0%, rgba(0,123,255,0.2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  transition: transform 0.3s ease;
}
.sie-diff-item:hover .sie-diff-ico {
  transform: scale(1.1) rotate(-5deg);
}
.sie-diff-item h4 {
  font-size: 16px; font-weight: 700;
  color: var(--sil-primario); margin: 0 0 6px;
}
.sie-diff-item p { 
  font-size: 14px; color: var(--sil-muted); line-height: 1.6; 
}

/* ── Botones Premium ───────────────────────────────────────── */
.sil-btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white !important;
  border-radius: 30px;
  padding: 14px 32px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sil-btn-whatsapp::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

.sil-btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}

@keyframes silFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}