/* =========================================================
   IMPORTADORA CELESTE — Estilos específicos de la página
   Autor: ChatGPT (GPT-5 Thinking)
   Fecha: 2025-10-16
   Uso: Cargar DESPUÉS de tu style.css del tema para que sobrescriba.
   ========================================================= */

/* =========================================================
   RESET LIGERO / UTILIDADES
   - Variables de color/estética y utilidades base.
   - Evita valores “mágicos” repetidos y facilita cambios globales.
   ========================================================= */
:root{
  --azul:#2155b5;            /* Azul corporativo para títulos principales */
  --azul-2:#2b64c9;          /* Azul secundario (íconos, acentos) */
  --azul-suave:#eaf1ff;      /* Fondo suave de secciones informativas */
  --borde-suave:#dbe7ff;     /* Bordes suaves y separadores */
  --gris-700:#374151;        /* Texto medio-oscuro (accesible) */
  --gris-600:#4b5563;        /* Texto secundario */
  --gris-800:#1f2937;        /* Texto muy oscuro / botones outline */
  --blanco:#fff;             /* Blanco; útil para fondos/contraste */
  --sombra-suave:0 8px 22px rgba(0,0,0,.06); /* Sombra consistente */
}

/* Garantiza imágenes fluidas en contenedores responsivos */
img{max-width:100%; height:auto;}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   - Botón circular fijo en esquina inferior derecha.
   - Animación de halo para captar atención sin ser invasivo.
   ========================================================= */
.container-boton{
  position:fixed;               /* Fijo en la ventana */
  right:18px; bottom:18px;      /* Separación del borde */
  z-index:999;                  /* Por encima de casi todo */
  background:#2e6329;           /* Verde propio (ligeramente distinto al oficial) */
  border:1px solid #fff;        /* Borde blanco para resaltar */
  border-radius:50%;            /* Forma circular */
  padding:25px;                 /* Tamaño del botón */
  transition:transform .3s ease;/* Suaviza hover */
  animation: efectoW 1.2s infinite; /* Halo repetido */
}
.container-boton:hover{ transform:scale(1.07); }   /* Efecto “pop” al pasar el mouse */
.container-boton .boton{ width:40px; display:block; } /* Tamaño del ícono PNG/SVG */

/* Animación del halo: arranca intenso y se difumina */
@keyframes efectoW{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.85)}
  100%{box-shadow:0 0 0 25px rgba(0,0,0,0)}
}

/* =========================================================
   STICKY TOPBAR (franja superior + barra de utilidades)
   - Encabezado que “pega” arriba con info de contacto y menú corto.
   - Se carga encima del header del tema (logo grande).
   ========================================================= */
.sticky-topbar{
  position:sticky; top:0;       /* Se mantiene visible al hacer scroll */
  z-index:90;                   /* Por encima del contenido normal, debajo de modales */
  background:var(--blanco);
  box-shadow:0 2px 8px rgba(0,0,0,.04); /* Separación visual del contenido */
}

/* Franja superior azul con texto de contacto */
.promo-strip{
  background:var(--azul);
  color:#e6efff;                /* Contraste suficiente en azul */
  font-weight:700;
  padding:6px 12px;
  text-align:center;
  font-size:.95rem;
}
.promo-strip span{ color:#fff; } /* Refuerza contraste en números/tags */

.utility-bar{ border-bottom:1px solid #eef2ff; } /* Sutil divisor inferior */

/* Contenedor interno: flex para logo, menú y acciones */
.ub-inner{
  max-width:1200px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:14px;
  justify-content:space-between; flex-wrap:wrap; /* Refluye en móviles */
}

/* Logo pequeño de la topbar */
.ub-logo img{ display:block; height:34px; width:auto; }

/* Botón hamburguesa (sin JS por ahora; visual) */
.ub-menu-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; color:var(--gris-800);
  font-weight:700; cursor:pointer;
}

/* Píldoras de categorías: accesibles y tocables */
.ub-cats{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cat{ position:relative; }      /* Necesario para el dropdown posicionado */

/* Botón estilo “pill” */
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:800;
  background:#f3f6ff; border:1px solid #e6ecff; color:var(--azul);
  text-decoration:none;
}
.pill:hover{ background:#e8f0ff; border-color:#d6e5ff; }

/* Dropdown simple (abre con :hover; sin JS) */
.dd-menu{
  position:absolute; top:110%; left:0; min-width:220px;
  background:#fff; border:1px solid #e5ecff; border-radius:10px;
  box-shadow:var(--sombra-suave); padding:8px 0; display:none;
}
.cat:hover .dd-menu{ display:block; } /* Abre menú al pasar el mouse */
.dd-menu a{
  display:block; padding:8px 12px; color:var(--gris-700); text-decoration:none;
}
.dd-menu a:hover{ background:#f5f8ff; color:var(--azul); }

/* Acciones de la derecha (sucursales, ubicación, pagos) */
.ub-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; /* Centra ícono */
  border-radius:10px; border:1px solid #e6ecff; background:#f8fbff;
  color:var(--azul-2); text-decoration:none;
}
.icon-btn:hover{ background:#eef5ff; }

/* Si el tema añadía un “spacer”, lo anulamos (ya usamos sticky) */
.sticky-spacer{ height:0; }

/* =========================================================
   HEADER INFERIOR (logo grande + CTA)
   - Sección del tema donde luce el logo amplio y el CTA de WhatsApp/teléfono.
   ========================================================= */
.header-flex{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.logo_area img{ max-height:200px; height:auto; } /* Evita logos gigantes en desktop */

/* CTA doble (botón verde y teléfono) */
.ub-cta{ display:flex; align-items:center; gap:10px; }
.ub-cta__btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#25D366; color:#fff; border-radius:999px; padding:10px 16px;
  font-weight:800; text-decoration:none;
  box-shadow:0 6px 16px rgba(15,183,90,.25); /* Realce del botón de conversión */
}
.ub-cta__btn i{ font-size:18px; } /* Ícono levemente mayor */
.ub-cta__link{
  color:var(--gris-800); text-decoration:none; font-weight:800;
}
.ub-cta__link i{ color:var(--azul-2); } /* Acento en el ícono del teléfono */

/* =========================================================
   TIRA DE BENEFICIOS
   - Chips con promesas/ventajas bajo el header.
   ========================================================= */
.benefits-strip{
  background:#eef3ff;
  border-top:1px solid var(--borde-suave);
  border-bottom:1px solid var(--borde-suave);
}
.benefits-wrap{
  max-width:1200px; margin:0 auto; padding:10px 20px;
  display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap;
}
.benefit{
  background:#fff; border:1px solid #e5ecff; border-radius:999px; padding:8px 12px;
  font-weight:800; color:#1e293b; white-space:nowrap; /* No se parten en 2 líneas */
}
.benefit i{ color:var(--azul-2); margin-right:6px; }

/* =========================================================
   SLIDER / LATEST NEWS (del tema)
   - Solo aseguramos que queden clicables sobre overlays del theme.
   ========================================================= */
.latest_newsarea{ position:relative; z-index:1; }
#sliderSection{ position:relative; z-index:1; }

/* =========================================================
   CARRUSEL HORIZONTAL DE MARCAS (sin JS)
   - Rejilla responsive que simula carrusel con scroll natural.
   ========================================================= */
.carousel{
  padding:28px 0; background:#f7f9ff;
  border-top:1px solid #eef2ff; border-bottom:1px solid #eef2ff;
}
.carousel-title{
  text-align:center; margin:0 0 14px; color:var(--azul);
  font:800 clamp(1.4rem,1.1rem + 1.2vw,2rem) 'Oswald',system-ui,sans-serif;
}
.carousel-viewport{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
}
/* Breakpoints: reduce columnas para que no se aplasten */
@media (max-width:1100px){ .carousel-viewport{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){  .carousel-viewport{ grid-template-columns:repeat(2,1fr);} }

.carousel-slide{
  background:#fff; border:1px solid #e8eeff; border-radius:14px; padding:14px;
  display:grid; place-items:center; box-shadow:var(--sombra-suave);
}
.carousel-dots{ display:none; } /* No usamos dots cuando es grilla estática */

/* =========================================================
   BLOQUE: COMPRAR REPUESTOS + ALIADOS
   - Título + texto + matriz de tarjetas de aliados (logos).
   ========================================================= */
.info-band{
  background:var(--azul-suave); padding:28px 0 36px;
  border-top:1px solid var(--borde-suave); border-bottom:1px solid var(--borde-suave);
}
.info-band__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.info-band h2{
  margin:0 0 6px; color:var(--azul);
  font:800 clamp(1.6rem,1.3rem + 1.5vw,2.2rem) 'Oswald',system-ui,sans-serif;
  text-align:center;
}
.info-band__lead{
  margin:0 auto 18px; max-width:760px;
  color:var(--gris-600); text-align:center;
}

/* Grilla de aliados: 6→3→2→1 según ancho */
.ally-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
@media (max-width:1100px){ .ally-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){  .ally-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){  .ally-cards{ grid-template-columns:1fr; } }

.ally-card{
  background:#fff; border:2px solid #cfe1ff; border-radius:16px; padding:16px;
  box-shadow:var(--sombra-suave), inset 0 0 0 1px rgba(255,255,255,.6); /* Borde interno sutil */
  display:grid; place-items:center; min-height:170px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ally-card:hover{
  transform:translateY(-2px);
  border-color:#9dbbff; box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.ally-card img{ max-width:90%; max-height:140px; object-fit:contain; display:block; }

/* =========================================================
   PRODUCTOS DESTACADOS (grid + cards)
   - Título con pastilla roja y cards con llamada a la acción.
   ========================================================= */
.section-title{ margin:18px 0 14px; }
.section-title--solid > span{
  display:inline-block; background:#e30613; color:#fff;
  padding:6px 14px; border-radius:6px; line-height:1.2; /* “Pastilla” */
}

/* Rejilla de productos responsiva (4→3→2→1) */
.product-grid--full{
  display:grid; grid-template-columns:repeat(4, minmax(230px,1fr));
  gap:24px; width:100%; align-items:stretch;
}
@media (max-width:1200px){ .product-grid--full{ grid-template-columns:repeat(3, minmax(220px,1fr)); } }
@media (max-width:992px){  .product-grid--full{ grid-template-columns:repeat(2, minmax(220px,1fr)); } }
@media (max-width:576px){  .product-grid--full{ grid-template-columns:1fr; } }

/* Tarjeta de producto */
.product-card{
  position:relative; background:#fff; border:1px solid #eaeaea; border-radius:12px;
  padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex; flex-direction:column; min-height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate; /* Evita que pseudo-elementos ajenos interfieran */
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.10); border-color:#e5e5e5;
}

/* Imagen del producto: contenedora y con fondo suave */
.pc-img{
  width:100%; height:190px; object-fit:contain; background:#f7f8fb; border-radius:10px;
  margin-bottom:12px; aspect-ratio:16/10; display:block;
}
.pc-title{ font-weight:800; margin:6px 0 6px; line-height:1.2; color:#273142; }
.pc-desc{ color:#5b6573; font-size:15px; line-height:1.5; margin-bottom:14px; }

/* Botón de acción: se va al fondo de la card */
.pc-btn{
  margin-top:auto; display:inline-block; padding:10px 16px; border-radius:8px;
  font-weight:700; line-height:1; text-decoration:none; cursor:pointer; user-select:none;
}

/* =========================================================
   SECCIÓN SOCIAL (imagen + copy + botón)
   ========================================================= */
#socialShowcase{ padding:30px 0; }
.block-link{ display:block; } /* Toda la imagen es clic */
.social-mockup{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:var(--sombra-suave);
}
.social-copy{
  background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:16px 18px; height:100%;
}
.big-title{ font-weight:900; margin-bottom:8px; }
.accent{ color:#3b82f6; }

/* Botón de gradiente para CTA social */
.btn.btn-gradient.btn-pill{
  display:inline-block; border-radius:999px; padding:10px 16px;
  background:linear-gradient(90deg,#2563eb,#3b82f6); color:#fff;
  text-decoration:none; font-weight:800;
}

/* =========================================================
   MÉTODOS DE PAGO (cards)
   - Grilla adaptable con icono, título, descripción y “chips”.
   ========================================================= */
.payment-cards{
  background:#f8fbff; padding:28px 0;
  border-top:1px solid #eef2ff; border-bottom:1px solid #eef2ff;
}
.payment-cards__container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.payment-cards__header{ text-align:center; margin-bottom:16px; }
.payment-cards__header h2{ color:var(--azul); font-weight:800; }

/* 4 columnas → 3 → 2 → 1 según ancho */
.payment-cards__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:1100px){ .payment-cards__grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:800px){  .payment-cards__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){  .payment-cards__grid{ grid-template-columns:1fr;} }

.payment-card{
  background:#fff; border:1px solid #e6ecff; border-radius:14px; padding:16px;
  box-shadow:var(--sombra-suave);
}
.payment-card__logo{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  background:#eef4ff; color:var(--azul-2); margin-bottom:8px;
}
.payment-card__title{ font-weight:800; margin:4px 0 6px; }
.payment-card__desc{ color:#5b6573; margin:0 0 10px; }

/* Chips informativos (beneficios/condiciones) */
.payment-card__tags{
  display:flex; gap:6px; flex-wrap:wrap; padding:0; margin:0; list-style:none;
}
.payment-card__tags li{
  background:#f3f6ff; border:1px solid #e6ecff; color:#344054;
  padding:4px 8px; border-radius:999px; font-weight:700; font-size:.85rem;
}
.payment-cards__disclaimer{ margin-top:12px; color:#6b7280; text-align:center; font-size:.95rem; }

/* =========================================================
   FOOTER
   - Paleta oscura, 4 columnas (2-2-1.5-2) que colapsan en móviles.
   ========================================================= */
.site-footer{ background:#0f172a; color:#cbd5e1; }
.footer__top{ padding:28px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__grid{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:2fr 2fr 1.5fr 2fr; gap:20px;
}
/* Colapsa a 2 cols y luego a 1 col */
@media (max-width:1100px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){  .footer__grid{ grid-template-columns:1fr; } }

.footer__logo img{ height:46px; }
.footer__about{ margin:8px 0 12px; color:#e2e8f0; }

/* Iconos de pagos + badge PSE */
.footer__payments i, .badge-pse{ font-size:22px; margin-right:8px; }
.badge-pse{
  display:inline-block; background:#1e3a8a; color:#fff;
  border-radius:6px; padding:2px 6px; font-weight:800; font-size:.85rem;
}

.footer__title{ color:#fff; font-weight:800; margin-bottom:10px; }
.list-links{ list-style:none; padding:0; margin:0; }
.list-links a{ color:#e2e8f0; text-decoration:none; display:inline-block; padding:4px 0; }
.list-links a:hover{ color:#fff; text-decoration:underline; }

.footer__address .link{ color:#fff; text-decoration:underline; } /* Enlaces de dirección */
.footer__hours{ list-style:none; padding:0; margin:8px 0 0; }
.footer__hours li{ margin:4px 0; }

/* Botones del footer */
.ft-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:800;
}
.ft-btn-primary{ background:#22c55e; color:#0b1b2a; }
.ft-btn-outline{ border:1px solid #5b6b87; color:#e2e8f0; }
.ft-btn:hover{ filter:brightness(1.02); }

/* Redes sociales */
.ft-social{ color:#e2e8f0; margin-right:10px; font-size:20px; text-decoration:none; }
.ft-social:hover{ color:#fff; }

/* Franja inferior del footer */
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  max-width:1200px; margin:0 auto; padding:12px 20px;
}
.back-to-top{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:#13203a; color:#fff; text-decoration:none;
}

/* =========================================================
   SCROLL TO TOP (del theme)
   - Reubicado para no chocar con el botón de WhatsApp.
   ========================================================= */
.scrollToTop{
  position:fixed; right:16px; bottom:84px; /* deja espacio al botón de WhatsApp */
  z-index:50;
}

/* =========================================================
   HELPERS / ACCESIBILIDAD
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   RESPONSIVE AFINES
   - Ajustes finos para pantallas pequeñas.
   ========================================================= */
@media (max-width:960px){
  .ub-cats{ display:none; }      /* Oculta el mega-menú si no implementarás JS móvil */
  .logo_area img{ max-height:140px; } /* Reduce un poco el logo grande */
}
@media (max-width:540px){
  .ub-cta__link{ display:none; } /* En móviles chicos deja sólo el botón verde (principal) */
}



/* Fuerza mismo encuadre en todas las imágenes del slider */
#sliderSection .slick_slider .single_iteam { position: relative; }
#sliderSection .slick_slider .single_iteam img {
  display:block;
  width:100%;
  height: clamp(220px, 40vw, 420px); /* ajusta el tope a tu diseño */
  object-fit: cover;                  /* recorta para llenar */
  object-position: center;            /* centra el foco */
  background:#000;                    /* evita halos con PNGs */
}

/* Evita que un padding del inner afecte el canvas del slide */
#sliderSection .slick_slider .single_iteam > a,
#sliderSection .slick_slider .single_iteam > div {
  margin:0; padding:0; border:0;
}



/* =========================================================
   TÍTULO TIPO “PASTILLA” (VARIANTE AZUL)
   Bloque para estilizar encabezados como una etiqueta/pastilla
   centrada. Se usa en:
      <h2 class="section-title section-title--brand"><span>…</span></h2>
   Notas:
   - Usamos .section-title como base reutilizable.
   - La variante .section-title--brand pinta la pastilla en azul.
   - Añadimos !important sólo en color/fondo para sobreescribir
     estilos previos del theme que pintaban en rojo.
   ========================================================= */

/* ------- Base del título ------- */
.section-title{
  /* Separación estándar arriba/abajo; más aire arriba que abajo */
  margin: 18px 0 14px;

  /* Tipografía compacta, muy legible en headings.
     - 800: peso alto para mejor presencia
     - 1.25rem: tamaño base del texto (el “bloque”, no la pastilla)
     - line-height 1.2 para reducir salto vertical */
  font: 800 2.50rem/1.2 "Oswald", system-ui, sans-serif;

  /* Centramos el conjunto (incluida la pastilla interna) */
  text-align: center;

  /* Color del texto del h2 fuera de la pastilla (fallback) */
  color: #1f2937;
}

/* El <span> es la “pastilla” visual que envuelve el texto */
.section-title > span{
  /* Que se mida como caja en línea pero con propiedades de bloque:
     permite paddings y border-radius sin romper el flujo */
  display: inline-block;

  /* Relleno interno: alto/alto; ancho/ancho */
  padding: 8px 16px;

  /* Esquinas redondeadas pronunciadas para “chip/pill look” */
  border-radius: 12px;

  /* Ligero tracking para mejorar lectura de mayúsculas */
  letter-spacing: .2px;

  /* Micro-animaciones sutiles en hover */
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

/* ------- Variante de marca (AZUL) ------- */
.section-title.section-title--brand > span{
  /* Fondo azul corporativo. Usamos !important para garantizar
     que sobreescribe variantes antiguas (rojas) del theme. */
  background: #2155b5 !important;

  /* Texto blanco para contraste AA/AAA */
  color: #ffffff !important;

  /* Sombra suave para “levantar” la pastilla del fondo */
  box-shadow: 0 10px 26px rgba(33,85,181,.22);
}

/* Efecto hover: ligera elevación y sombra más amplia
   (no cambiamos color para evitar “brincos” de contraste) */
.section-title.section-title--brand > span:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(33,85,181,.28);
}

/* ------- Ajustes responsivos ------- */
@media (max-width:576px){
  /* Menos margen en móviles para compactar el layout */
  .section-title{
    margin: 14px 0 10px;
  }

  /* Reducimos padding y radio para que la pastilla no domine
     en pantallas pequeñas */
  .section-title > span{
    padding: 7px 14px;
    border-radius: 10px;
  }
}