/*
Theme Name: Hestia Child
Template: hestia
Version: 1.0
*/

/* === Header moderno y elegante con fondo blanco desde inicio === */
.navbar, 
.navbar .container {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  position: fixed;
  width: 100%;
  z-index: 999;
}

/* Texto del menú */
.navbar .main-navigation a {
  color: #000 !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Hover del menú */
.navbar .main-navigation a:hover {
  color: #0073e6 !important;
}

/* Efecto al hacer scroll */
.navbar.scrolled,
.navbar.scrolled .container {
  background-color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .navbar, 
  .navbar .container {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}



/* === Fondo blanco fijo para el header desde el inicio === */
.header {
  background-color: #ffffff !important; /* Blanco sólido */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Sombra suave para separación */
}

/* Ajusta el color de los enlaces del menú para que resalten */
.header .main-navigation a {
  color: #000000 !important; /* Negro para buen contraste */
}

/* Efecto hover */
.header .main-navigation a:hover {
  color: #0073e6 !important; /* Azul elegante al pasar el cursor */
}

/* Asegura que siga siendo visible en dispositivos móviles */
@media (max-width: 768px) {
  .header {
    background-color: #ffffff !important;
  }
}


/* ===== Estilo moderno para el menú principal ===== */

.main-navigation a {
  font-size: 1.15rem;         /* Aumenta el tamaño de letra */
  font-weight: 600;           /* Un poco más gruesa para legibilidad */
  color: #222 !important;     /* Color oscuro elegante */
  text-transform: uppercase;  /* Mayúsculas opcionales (puedes quitarlo si no lo quieres) */
  letter-spacing: 0.5px;      /* Espaciado entre letras */
  transition: all 0.3s ease;  /* Suaviza los cambios al pasar el mouse */
}

/* Efecto hover (cuando pasas el cursor) */
.main-navigation a:hover {
  color: #0056b3 !important;  /* Azul elegante (puedes cambiar el tono) */
  text-decoration: none;
  transform: scale(1.05);     /* Efecto sutil de agrandado */
}

/* Ajuste del espaciado entre elementos del menú */
.main-navigation ul li {
  margin-right: 25px;         /* Espacio entre los ítems */
}

/* Versión responsiva para pantallas pequeñas */
@media (max-width: 768px) {
  .main-navigation a {
    font-size: 1rem;
  }
}


.background-card {
  background: rgba(255, 255, 255, 0.9);
  width: 80%;
  margin: 0 auto;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

.site-main {
  position: relative;
  z-index: 2;
  
  /* ===== Estilo moderno y elegante para el área de contenido ===== */
.content-area {
  max-width: 1200px;              /* Centra el contenido con un ancho fijo elegante */
  margin: 60px auto;              /* Espacio superior e inferior + centrado horizontal */
  background: rgba(255, 255, 255, 0.9); /* Blanco translúcido para efecto moderno */
  border-radius: 20px;            /* Bordes redondeados suaves */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil y elegante */
  padding: 50px 60px;             /* Espaciado interno cómodo */
  backdrop-filter: blur(6px);     /* Efecto de difuminado detrás (tipo vidrio esmerilado) */
  transition: all 0.3s ease;      /* Animación suave */
}

/* Efecto al pasar el mouse (hover) */
.content-area:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Ajuste del texto para verse más profesional */
.content-area h1,
.content-area h2,
.content-area h3 {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-weight: 600;
  color: #1c1c1c;
  letter-spacing: 0.5px;
}

.content-area p {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  color: #555;
  line-height: 1.7;
  font-size: 17px;
}

/* Aseguramos que no pegue con el footer */
.site-footer {
  margin-top: 60px;
}

/* ==== Sección de Soluciones ==== */
.soluciones-section {
  background-color: #f2f6fa;
  padding: 70px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* Ajuste de texto y botones en las tarjetas */
.solucion-card h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #222 !important;
  margin-bottom: 10px !important;
}

.btn-solucion {
  background-color: #00509e !important;
  color: white !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
}

.btn-solucion:hover {
  background-color: #003f7d !important;
  transform: scale(1.05) !important;
}


/* --- EFECTO HOVER Y TAMAÑO DE ICONOS --- */
.solucion-card i {
  font-size: 50px !important; /* tamaño más grande del ícono */
  color: #00509e;
  margin-bottom: 15px;
  display: block;
  transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

/* --- ANIMACIÓN DE ENTRADA --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.solucion-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeUp 0.8s ease forwards;
}

/* --- EFECTO HOVER EN TARJETA --- */
.solucion-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* --- EFECTO HOVER EN ICONO --- */
.solucion-card:hover i {
  transform: scale(1.15) rotate(2deg);
  color: #0077ff;
  opacity: 1;
}

}


  
}