/* ===============================
   LANAIS – Theme Overrides
   (se carga después de style.css, blog.css, responsive.css)
   =============================== */

/* ---- Paleta ----
   NOTA: mantenemos --e-global-color-primary = blanco
   porque el tema original la usa para textos/botones.
*/
:root {
  --e-global-color-primary: #ffffff;               /* se mantiene blanco */
  --e-global-color-secondary: #4A5A73;            /* gris secondary (subtítulos) */
  --e-global-color-accent: #1A5AFF;               /* azul acento (botones/enlaces) */
  --e-global-color-text: #334155;                 /* texto cuerpo */
  --e-global-color-white: #ffffff;
  --e-global-color-black: #0B0F1A;

  /* Mapear los “violetas” del tema a la gama LANAIS */
  --e-global-color-strong-violet: #0B2A66;        /* navy fuerte (para gradientes) */
  --e-global-color-bright-violet: #1A5AFF;        /* azul brillante */
  --e-global-color-very-dark-violet: #ffffff;     /* fondos de tarjetas/secciones -> blanco */
  --e-global-color-very-dark-black-mostly-violet: #F2F6FC; /* fondos suaves */
  --e-global-color-purple-family: #EAF0F8;        /* gris-azulado suave */
  --e-global-color-purple-family2: #DBE7F5;       /* gris-azulado más marcado */

  --e-global-color-star-yellow: #fbc729;          /* sin cambios */
  --e-global-color-pure-red: #ff0000;             /* sin cambios */
}

/* ---- Tipografía / colores base ---- */
body {
  background-color: #ffffff;
  color: var(--e-global-color-text);
}

/* Títulos con navy LANAIS para efecto corporativo */
h1, h2, h3, h4, h5 {
  color: #0B2A66;
}
h2 span, .text-white h2 span { /* mantiene contraste en spans destacados */
  color: #0B2A66;
}

/* ---- Header / Navbar ---- */
/* Navbar con fondo blanco y borde azul corporativo */
.header-con .navbar {
  background: #ffffff !important; /* blanco */
  border: 2px solid #ffffff !important; /* blanco */
}
.header-con .navbar-light .navbar-nav .nav-link {
  color: #0B2A66 !important;
}
.header-con .navbar-light .navbar-nav .nav-link:hover,
.header-con .navbar-light .navbar-nav .nav-link.active {
  color: var(--e-global-color-accent) !important; /* azul brillante */
}

/* Icono hamburguesa en azul corporativo */
.navbar-light .navbar-toggler {
  border-color: #0B2A66 !important; /* borde azul */
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(11, 42, 102, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


/* Botón de contacto (usa gradiente de los nuevos azules) */
.header-contact .contact-btn {
  background-color: #0B2A66 !important; /* azul corporativo */
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
}
.header-contact .contact-btn:hover {
  background-color: var(--e-global-color-accent) !important; /* azul brillante al hover */
}

/* ---- Secciones y fondos ---- */
/* Fondo suave corporativo donde el tema usaba el “violeta claro” */
.light-violet-bg {
  background-color: var(--e-global-color-very-dark-black-mostly-violet);
}

/* HERO: deja texto legible y CTA corporativa */
.banner-con .primary_btn {
  background-image: linear-gradient(to top, var(--e-global-color-strong-violet) 0%, var(--e-global-color-bright-violet) 100%);
}

/* “Work with us”: mantenemos fondo oscuro para conservar textos blancos */
.our-work-con {
  background: #0B2A66;
}
.our-work-con h2,
.our-work-con p,
.our-work-con .primary_btn,
.our-work-con .popup-vimeo span {
  color: #FFFFFF !important;
}

/* Tarjetas/boxes a blanco con borde sutil para look “corporativo” */
.services-box,
.pricing-plans-con .pricing-box,
.sidebar,
.singleblog-section .main-box,
.blogpage-section .blog-box,
.single-blog-box {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(7, 34, 86, 0.10) !important; /* navy 10% */
  box-shadow: 0 6px 24px rgba(11, 42, 102, 0.06);
}

/* Iconos/labels activos con azul acento */
a, .generic-btn2 a:hover, .single-blog-box h4 a:hover {
  color: var(--e-global-color-accent);
}

/* Paginación y chips sociales con el nuevo gradiente */
.pagination .page-item:not(.disabled).active > .page-link,
.load-more a,
.sidebar .tags a,
.blogpage-section .blog-box .button-portion .read_more,
.singleblog-section .content4 .tag .button,
.singleblog-section .box3 .social-icons ul li,
.footer-con .middle_portion .email-form button,
.primary_btn {
  background-image: linear-gradient(to top, var(--e-global-color-strong-violet) 0%, var(--e-global-color-bright-violet) 100%) !important;
  color: #fff !important;
  border: none;
}

/* Footer más claro y corporativo */
.footer-con {
  background: #0B2A66; /* navy */
}
.footer-con h4,
.footer-con .middle_portion .logo-content p,
.footer-con .middle_portion li a,
.footer-con .copyright p {
  color: #EAF0F8;
}
.footer-con .middle_portion li a:hover {
  color: #FFFFFF;
}

/* Separadores / líneas */
.faq-con .accordion-card,
.footer-con .copyright p,
.sidebar .post-thumbnail-entry,
.sidebar .widget,
.blogpage-section .blog-box .lower-portion {
  border-color: rgba(7, 34, 86, 0.12) !important;
}

/* Dots/slider */
.testimonial-con .owl-carousel .owl-dots .owl-dot span {
  background-image: linear-gradient(to top, #C9D7F4 0%, #C9D7F4 100%);
}
.testimonial-con .owl-carousel .owl-dots .owl-dot.active span,
.testimonial-con .owl-carousel .owl-dots .owl-dot:hover span {
  background-image: linear-gradient(to top, var(--e-global-color-strong-violet) 0%, var(--e-global-color-bright-violet) 100%);
}

/* Botón back-to-top adaptado */
#button {
  background-color: var(--e-global-color-accent);
}
#button:hover { transform: translateY(-5px); }

/* Ajustes de texto en fondos claros */
p, .text-size-18, .text-size-16, .text-size-14 {
  color: var(--e-global-color-text);
}

/* Contraste en badges del carrusel de proyectos */
.badge {
  background: #EAF0F8;
  color: #0B2A66;
  border: 1px solid rgba(7, 34, 86, 0.15);
}

/* ---------------------------
   Blog dinámico
---------------------------- */
.blog-hero {
  background-image: url(../images/banner-bg-img.png);
}

.blog-meta .statistics-box {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 20px 30px;
}

.blog-feed-con {
  background: #F8FBFF;
}

.blog-filters {
  margin-bottom: 24px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  border: 1px solid rgba(11, 42, 102, 0.3);
  background: #fff;
  color: #0B2A66;
  font-weight: 600;
  border-radius: 40px;
  padding: 10px 18px;
  transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: linear-gradient(135deg, #0B2A66 0%, #1A5AFF 100%);
  color: #fff;
  border-color: transparent;
}

.blog-card {
  background: #fff;
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 22px 45px rgba(7, 26, 64, 0.08);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(7, 34, 86, 0.05);
}

.blog-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.blog-card .source-chip {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 42, 102, 0.1);
  color: #0B2A66;
}

.blog-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.blog-card p {
  flex: 1;
  margin-bottom: 18px;
}

.blog-card footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.blog-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-card .tags span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(26, 90, 255, 0.1);
  color: #1A5AFF;
}

.blog-card a.read-more {
  font-weight: 700;
  color: #1A5AFF;
  text-decoration: none;
}

.blog-card a.read-more i {
  margin-left: 6px;
}

.blog-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.blog-placeholder .placeholder-card {
  height: 240px;
  border-radius: 26px;
  background: linear-gradient(120deg, rgba(11, 42, 102, 0.12), rgba(26, 90, 255, 0.08));
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

.blog-error {
  border-radius: 18px;
  border: none;
}

.insights-cta {
  background: #0B2A66;
  color: #fff;
  padding: 80px 0;
}

.insights-cta .cta-content .eyebrow {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.insights-cta h2,
.insights-cta p {
  color: #fff;
}