/*
 * COSIMEX — Custom Brand CSS
 * Paleta exacta del LOGOS.svg. Aplica directamente al DOM (sin body.uav-theme).
 * Sobrescribe TODOS los usos de #B5E717 (verde lima) del template.
 *
 * Regla arquitectónica: el template pinta lima en `.theme-btn span` (pastilla)
 * y `.theme-btn i` (círculo). El contenedor .theme-btn es transparente.
 * Aquí se recolorean SÓLO span+i, el contenedor va transparent.
 */

:root {
  --brand-red: #c1272d;
  --brand-red-hover: #a92027;
  --brand-green: #245b4e;
  --brand-green-hover: #1a463b;
  --brand-slate: #0F172A;
  --brand-text: #393c3e;
  --wa-green: #25D366;
  --wa-green-hover: #20BD5A;
}

/* ────────────────────────────────────────────
   Botones pill+circle (theme-btn y variantes)
   ──────────────────────────────────────────── */
.theme-btn,
.theme-btn-s2,
.theme-btn-s3,
.theme-btn-s4,
.theme-btn-s5,
.wpo-title-btn,
.footer-btn,
.hero-btn,
.problem-solve-btn,
.close-form {
  background-color: transparent !important;
  border-color: transparent !important;
}
.theme-btn span,
.theme-btn-s2 span,
.theme-btn-s3 span,
.theme-btn-s4 span,
.theme-btn-s5 span,
.theme-btn i,
.theme-btn-s2 i,
.theme-btn-s3 i,
.theme-btn-s4 i,
.theme-btn-s5 i {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}
.theme-btn:hover span,
.theme-btn-s2:hover span,
.theme-btn-s3:hover span,
.theme-btn-s4:hover span,
.theme-btn-s5:hover span,
.theme-btn:hover i,
.theme-btn-s2:hover i,
.theme-btn-s3:hover i,
.theme-btn-s4:hover i,
.theme-btn-s5:hover i {
  background-color: var(--brand-red-hover) !important;
}

/* ────────────────────────────────────────────
   Header: layout 1 fila, contraste, sticky
   ──────────────────────────────────────────── */
.wpo-site-header .navbar-brand img,
.sticky-header .navbar-brand img {
  max-height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* Compactar navegación para caber en 1 fila desktop */
@media (min-width: 992px) {
  .wpo-site-header .navigation-holder > ul,
  .sticky-header .navigation-holder > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
  }
  .wpo-site-header .navigation-holder > ul > li > a,
  .sticky-header .navigation-holder > ul > li > a {
    padding: 8px 10px !important;
    font-size: 0.88rem;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    white-space: nowrap;
  }
  .wpo-site-header .header-right,
  .sticky-header .header-right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px !important;
  }
  .wpo-site-header .navbar,
  .sticky-header .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Contraste ítems del menú (fondo claro → texto oscuro) */
.wpo-site-header .navigation-holder > ul > li > a,
.sticky-header .navigation-holder > ul > li > a {
  color: var(--brand-text);
}
.wpo-site-header #navbar > ul > li > a:hover,
.wpo-site-header #navbar > ul > li > a.active,
.wpo-site-header #navbar > ul > li.current > a,
.sticky-header #navbar > ul > li > a:hover,
.sticky-header #navbar > ul > li > a.active,
.sticky-header #navbar > ul > li.current > a {
  color: var(--brand-red) !important;
  background: rgba(193, 39, 45, 0.08) !important;
}
.wpo-site-header #navbar > ul > li .sub-menu a:hover,
.wpo-site-header #navbar > ul > li .sub-menu a.active {
  color: var(--brand-red) !important;
}

/* Sticky header COSIMEX: fondo blanco con sombra */
.sticky-header {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Ítem destacado del menú (Apoyo Legal) */
.nav-brand-link {
  color: var(--brand-red) !important;
  font-weight: 700 !important;
}

/* ────────────────────────────────────────────
   Botones del header (teléfono + WhatsApp pill)
   ──────────────────────────────────────────── */
/* Botón teléfono compacto pill — fondo blanco con texto rojo COSIMEX legible */
.btn-phone-compact {
  background-color: #ffffff !important;
  color: var(--brand-red) !important;
  border: 1px solid rgba(193, 39, 45, 0.35) !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(193, 39, 45, 0.1);
}
.btn-phone-compact i {
  color: var(--brand-red) !important;
}
.btn-phone-compact:hover {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
  border-color: var(--brand-red) !important;
}
.btn-phone-compact:hover i {
  color: #ffffff !important;
}

.btn-wa-header {
  background-color: var(--wa-green) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.btn-wa-header:hover {
  background-color: var(--wa-green-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-wa-header .wa-icon-mini,
.wa-icon-mini {
  width: 14px;
  height: 14px;
  fill: #fff;
  vertical-align: middle;
}

/* ────────────────────────────────────────────
   Neutralizar #B5E717 en todos los selectores del template
   ──────────────────────────────────────────── */

.back-to-top {
  border-color: var(--brand-red) !important;
  color: var(--brand-red) !important;
}
.back-to-top:hover {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
}

.form input:focus,
.form textarea:focus,
.form select:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.15) !important;
}

.contact-validation-active #loader2 i {
  color: var(--brand-red) !important;
}

.social-links li a:hover {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

.wpo-site-header .mobail-menu button,
.wpo-site-header .mobail-menu button:focus {
  background-color: var(--brand-red) !important;
}

.client-team ul li:last-child {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}

.wpo-testimonial-section-s2 .testimonial-slide .owl-dots button.active,
.wpo-case-section .case-slider .owl-dots button.active,
.wpo-cta-section .owl-dots button.active,
.wpo-portfolio-section .owl-dots button.active,
.owl-dots button.active {
  background: var(--brand-red) !important;
}

.wpo-mission-vision-section .mission-vision-right .wpo-section-title-s2 .title-top span::before {
  background-color: var(--brand-red) !important;
}

.odometer,
.wpo-about-section .odometer,
.wpo-about-section-s2 .odometer,
.wpo-fun-fact-grids .odometer {
  color: var(--brand-red) !important;
}

.wpo-why-choose-section-s4 .why-choose-left .why-choose-left-bg {
  background-color: var(--brand-red) !important;
}
.wpo-pricing-section .pricing-card.active .pricing-item,
.wpo-pricing-section .pricing-card:hover .pricing-item {
  background-color: var(--brand-red) !important;
}

/* Badges de datos secundarios en About */
.about-badge {
  display: inline-block;
  padding: 6px 14px;
  margin: 4px 6px 4px 0;
  border-radius: 999px;
  background: rgba(193, 39, 45, 0.08);
  color: var(--brand-red);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(193, 39, 45, 0.2);
}

/* Iconos de tarjetas de Servicios COSIMEX */
.service-icon-red {
  background-color: rgba(193, 39, 45, 0.1) !important;
  color: var(--brand-red) !important;
}
.service-icon-green {
  background-color: rgba(36, 91, 78, 0.1) !important;
  color: var(--brand-green) !important;
}

/* Logo UAV compacto dentro del card banner-fraude en COSIMEX */
.uav-logo-inline {
  max-height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ────────────────────────────────────────────
   Floating WhatsApp Widget
   ──────────────────────────────────────────── */
.whatsapp-float-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--wa-green);
  color: #fff;
  padding: 12px 22px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all 200ms ease;
  animation: pulse-wa 3s infinite;
}
.whatsapp-float-widget:hover {
  background-color: var(--wa-green-hover);
  color: #fff;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
}
.whatsapp-icon-svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}
@keyframes pulse-wa {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Utility overrides */
.text-brand-red { color: var(--brand-red) !important; }
.text-brand-green { color: var(--brand-green) !important; }
.bg-brand-red { background-color: var(--brand-red) !important; color: #fff !important; }
.bg-brand-green { background-color: var(--brand-green) !important; color: #fff !important; }

/* ────────────────────────────────────────────
   Neutraliza el pill-hover crema del template (::before con #FBFEE7)
   Deja solamente el hover de marca definido arriba.
   ──────────────────────────────────────────── */
.wpo-site-header #navbar > ul > li > a::before,
.wpo-site-header #navbar > ul > li > a:hover::before,
.wpo-site-header #navbar > ul > li > a.active::before,
.sticky-header #navbar > ul > li > a::before,
.sticky-header #navbar > ul > li > a:hover::before,
.sticky-header #navbar > ul > li > a.active::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PULIDO 4 — Erradicación sistemática del lima del template (COSIMEX)
   Mapa de sustitución (fuente = sass/style.css):
     Fondos grandes/superficies:  #4C6311 · #405413        → var(--brand-green) #245b4e
     Fondos claros / neutros:     #E4EADB · #F1F4E3 · #EFF6EA · #F1FEE7 · #FBFEE7(bg)
                                                             → #F7F5F3 (gris cálido)
     Textos claros s/ oscuro:     #FBFEE7 · #F1FEE7 (como color)
                                                             → #F5F1EA (crema neutra)
     Acentos/dots/hovers:         #B5E717 · #BFE734 · #E8FA9C · #C8F8A9 · #9AEF67 · #318102 · #2B6014
                                                             → var(--brand-red) #c1272d
     Placeholder/gris verdoso:    #899174                   → #6b7280
   ═══════════════════════════════════════════════════════════════ */

/* — Superficies grandes de sección/tarjeta invertidas a claro con texto oscuro —
     Cards y superficies del template que venían verde oliva/oscuro pasan a blanco/neutro
     con borde y texto legibles. Footers que van oscuros por decisión de marca se manejan
     en el bloque específico más abajo. */
.wpo-about-section .about-right,
.wpo-service-section .wpo-service-card .service-item,
.wpo-service-section-s3 .wpo-service-card .service-item,
.wpo-problem-solve-section .problem-solve-right,
.wpo-testimonial-section .testimonial-slide .testimonial-card,
.wpo-testimonial-section-s2 .testimonial-slide .testimonial-card,
.contact-left,
.wpo-mission-vision-section .mission-vision-left,
.wpo-why-choose-section-s3 .why-choose-left,
.wpo-why-choose-section-s3 .why-choose-right .why-choose-item .why-choose-list,
.wpo-case-single-section .case-top .item span,
.wpo-case-single-section .case-single-item .case-single-content .case-single-bottom .case-card,
.wpo-blog-single-section .blog-card-bottom .blog-card,
.wpo-blog-single-section .author-widget,
.wpo-blog-single-section .more-posts,
.wpo-blog-single-section .comments-area .comments-area-top {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  color: var(--brand-text) !important;
}
/* Textos dentro de esos cards ahora oscuros y legibles */
.wpo-about-section .about-right h3,
.wpo-service-section .wpo-service-card .service-item h3,
.wpo-service-section .wpo-service-card .service-item h3 a,
.wpo-service-section .wpo-service-card .service-item p,
.wpo-problem-solve-section .problem-solve-right h3,
.wpo-problem-solve-section .problem-solve-right p,
.wpo-testimonial-section .testimonial-slide .testimonial-card h3,
.wpo-testimonial-section .testimonial-slide .testimonial-card p,
.wpo-testimonial-section-s2 .testimonial-slide .testimonial-card h3,
.wpo-testimonial-section-s2 .testimonial-slide .testimonial-card p,
.contact-left h3, .contact-left p {
  color: var(--brand-text) !important;
}
/* Los enlaces de los cards claros → rojo de marca */
.wpo-service-section .wpo-service-card .service-item a,
.wpo-problem-solve-section .problem-solve-right a {
  color: var(--brand-red);
}

/* Superficies pequeñas de acento (íconos redondos, hover arrow) → verde institucional (queda) */
.wpo-why-choose-section .why-choose-right .why-choose-item .why-choose-list .icon,
.wpo-why-choose-section-s2 .why-choose-right .why-choose-item .why-choose-list .icon,
.wpo-case-section .case-item:hover .arrow-icon,
.team-card .team-bottom .team-list .team-text h3 a:hover {
  background-color: var(--brand-green) !important;
  color: #fff !important;
}
.wpo-blog-single-section .comments-area .comment-reply-link {
  background-color: var(--brand-green) !important;
  color: #fff !important;
}

/* Footers COSIMEX: se preservan verde institucional (decisión de marca) */
.wpo-site-footer .wpo-topbar-footer,
.wpo-site-footer-s2 .wpo-topbar-footer,
.wpo-site-footer .wpo-lower-footer,
.wpo-site-footer-s2 .wpo-lower-footer {
  background-color: var(--brand-green) !important;
}

/* — Fondos de sección claros verdosos → neutro cálido — */
.wpo-page-title,
.wpo-page-title-s2,
.wpo-about-section,
.wpo-about-section-s2,
.wpo-about-section-s3,
.wpo-why-choose-section,
.wpo-why-choose-section-s2,
.wpo-why-choose-section-s3,
.wpo-contact-section,
.wpo-contact-section-s2,
.wpo-case-section-s2 .case-left .case-item .case-content,
.wpo-faq-section,
.wpo-faq-section-s2,
.wpo-faq-section .wpo-faq-items,
.wpo-faq-section-s2 .wpo-faq-items,
.wpo-about-section-s3 .wpo-about-item,
.wpo-problem-solve-section-s2 .problem-solve-right,
.wpo-portfolio-section .portfolio-all-items .portfolio-wrap .portfolio-items,
.wpo-service-section-s2,
.wpo-pricing-section .pricing-card,
.wpo-pricing-section .pricing-card .pricing-item .pricing-money,
.wpo-service-single-section .service-single-item .image,
.pagination-wrapper .pg-pagination li a {
  background-color: #F7F5F3 !important;
}

/* — Card interior about-right y service-bg (antes verde oliva) → blanco con acento — */
.wpo-about-section .about-right .about-right-bg,
.wpo-service-section .wpo-service-card .service-item .service-bg,
.wpo-service-section-s3 .wpo-service-card .service-item .service-bg {
  background-color: #ffffff !important;
  border-top: 4px solid var(--brand-red);
}

/* — Acentos/dots decorativos → rojo COSIMEX — */
.wpo-section-title .title-top span::before,
.wpo-section-title-s2 .title-top span::before,
.wpo-section-title-s3 .title-top span::before,
.wpo-page-title .wpo-breadcumb-wrap .top-title span::before,
.wpo-page-title-s2 .wpo-breadcumb-wrap .top-title span::before,
.wpo-faq-section-s2 .wpo-section-title-s3 span::before,
.wpo-why-choose-section-s3 .why-choose-right .title-top span::before,
.wpo-faq-section .wpo-section-title-s3 span::before,
.wpo-about-section .about-right .about-bottom p::before,
.wpo-about-section-s2 .about-right .about-bottom p::before,
.wpo-about-section-s3 .about-right .about-bottom p::before,
.wpo-problem-solve-section .problem-solve-right .problem-solve-bottom p::before,
.wpo-service-section .wpo-service-card .service-bottom p::before,
.wpo-service-section-s3 .wpo-service-card .service-bottom p::before {
  background-color: var(--brand-red) !important;
}

/* — Iconos coloreados lima → rojo — */
.wpo-case-section .case-item .case-bottom .arrow-icon,
.wpo-contact-pg-section .contact-top-item .office-info-item.active .office-info-content,
.wpo-contact-pg-section .contact-top-item .office-info-item:hover .office-info-content {
  background-color: var(--brand-red) !important;
}

/* — Textos "current/active" en el nav (más específicos que mis overrides previos) — */
.wpo-site-header #navbar > ul li a:hover,
.wpo-site-header #navbar > ul li a.active,
.wpo-site-header #navbar > ul li a:focus,
.wpo-site-header #navbar > ul li a:active,
.wpo-site-header #navbar > ul > li .sub-menu a:after,
.wpo-site-header #navbar > ul > li .sub-menu a:hover,
.wpo-site-header #navbar > ul > li .sub-menu a.active {
  color: var(--brand-red) !important;
}

/* — Links de servicio/case/blog hover (eran verde oscuro #2B6014) → rojo — */
.wpo-service-section .wpo-service-card .service-item .service-bg .service-content h3 a:hover,
.wpo-service-section-s3 .wpo-service-card .service-item .service-bg .service-content h3 a:hover,
.wpo-case-section .case-item .case-bottom .case-content .case-text h3 a:hover,
.wpo-service-section-s2 .service-item .service-bottom .service-content .service-text h3 a:hover,
.wpo-blog-section .blog-item .blog-bottom .blog-content .blog-text h3 a:hover,
.wpo-blog-single-section .blog-tag ul li a:hover,
.wpo-blog-single-section .more-posts a:hover .post-control-link,
.wpo-blog-single-section .comments-area .comment-reply-link:hover,
.wpo-blog-pg-section .wpo-blog-wrap .blog-item .blog-content .blog-tag li a:hover,
.wpo-blog-pg-section .wpo-blog-wrap .blog-item .blog-content h3 a:hover {
  color: var(--brand-red) !important;
}

/* — Textos crema claros del template sobre fondo oscuro (footer/hero/topbar) → crema neutra — */
.wpo-hero-static .hero-content p,
.wpo-hero-static .hero-content h2,
.wpo-site-footer .wrapper .top-left h2,
.wpo-site-footer-s2 .wrapper .top-left h2,
.wpo-site-footer .footer-address .item ul li,
.wpo-site-footer-s2 .footer-address .item ul li,
.wpo-site-footer .link-widget ul li,
.wpo-site-footer-s2 .link-widget ul li,
.wpo-site-footer .link-widget ul li a,
.wpo-site-footer-s2 .link-widget ul li a,
.wpo-site-footer .newsletter-s2 .form-fild .fild,
.wpo-site-footer-s2 .newsletter-s2 .form-fild .fild {
  color: #F5F1EA !important;
}
.wpo-site-footer .newsletter-s2 .form-fild .fild::-webkit-input-placeholder,
.wpo-site-footer-s2 .newsletter-s2 .form-fild .fild::-webkit-input-placeholder {
  color: rgba(245, 241, 234, 0.55) !important;
}
.wpo-site-footer .newsletter-s2 .form-fild .fild::-moz-placeholder,
.wpo-site-footer-s2 .newsletter-s2 .form-fild .fild::-moz-placeholder {
  color: rgba(245, 241, 234, 0.55) !important;
}

/* — Botones de footer con lima → rojo — */
.wpo-site-footer .newsletter-s2 .form-fild button,
.wpo-site-footer-s2 .newsletter-s2 .form-fild button {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}
.wpo-site-footer .newsletter-s2 .form-fild button:hover,
.wpo-site-footer-s2 .newsletter-s2 .form-fild button:hover {
  background-color: var(--brand-red-hover) !important;
}
.wpo-site-footer .link-widget ul li a:hover,
.wpo-site-footer-s2 .link-widget ul li a:hover,
.wpo-site-footer .wpo-lower-footer .copyright a,
.wpo-site-footer-s2 .wpo-lower-footer .copyright a,
.wpo-site-footer .wpo-lower-footer .copyright a:hover,
.wpo-site-footer-s2 .wpo-lower-footer .copyright a:hover,
.wpo-site-footer .wpo-lower-footer .right li a:hover,
.wpo-site-footer-s2 .wpo-lower-footer .right li a:hover,
.wpo-site-footer .footer-address .item ul li span,
.wpo-site-footer-s2 .footer-address .item ul li span,
.wpo-site-footer-s2 .newsletter-s2 .form-fild .terms label {
  color: var(--brand-red) !important;
}

/* — theme-btn-s3 hover (era #405413) — */
.theme-btn-s3:hover span, .theme-btn-s3:focus span, .theme-btn-s3:active span,
.theme-btn-s3:hover i, .theme-btn-s3:focus i, .theme-btn-s3:active i,
.theme-btn-s3 span {
  background-color: var(--brand-red-hover) !important;
  color: #fff !important;
}

/* — Pricing (no usado pero por consistencia) — */
.wpo-pricing-section .pricing-card.active,
.wpo-pricing-section .pricing-card:hover {
  background-color: var(--brand-red) !important;
}
.wpo-pricing-section .pricing-card.active .pricing-item .pricing-content .pricing-btn span,
.wpo-pricing-section .pricing-card:hover .pricing-item .pricing-content .pricing-btn span {
  background-color: var(--brand-green) !important;
}

/* — Textos CTA sobre fondo oscuro — */
.wpo-cta-section .cta-left .wpo-section-title-s2 h2,
.wpo-cta-section .cta-left .wpo-section-title-s2 p,
.wpo-faq-section .wpo-section-title-s3 span,
.wpo-faq-section-s2 .wpo-section-title-s3 span,
.wpo-faq-section .wpo-section-title-s3 h2,
.wpo-faq-section .wpo-section-title-s3 p,
.wpo-faq-section-s2 .wpo-section-title-s3 h2,
.wpo-faq-section-s2 .wpo-section-title-s3 p {
  color: #F5F1EA !important;
}

/* — Fun-fact tag verdoso del About-s2 → neutro — */
.wpo-about-section-s2 .about-middle .wpo-fun-fact-grids .grid .tag,
.wpo-about-section-s3 .about-middle .wpo-fun-fact-grids .grid .tag {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}

/* — client-team estrellita del hero-s2 (era #C8F8A9) — */
.wpo-hero-static-s2 .hero-right-image .client-team ul li:last-child {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}

/* — Contact form placeholder gris verdoso → gris neutro — */
.contact-left .wpo-contact-form-area .form-control,
.wpo-blog-single-section .comment-respond form input,
.wpo-blog-single-section .comment-respond form textarea {
  color: #6b7280;
}
.contact-left .wpo-contact-form-area .form-control::-moz-placeholder,
.contact-left .wpo-contact-form-area .form-control::placeholder,
.wpo-blog-single-section .comment-respond form input::-moz-placeholder,
.wpo-blog-single-section .comment-respond form input::placeholder,
.wpo-blog-single-section .comment-respond form textarea::-moz-placeholder,
.wpo-blog-single-section .comment-respond form textarea::placeholder {
  color: #9ca3af !important;
}
.wpo-pricing-section .pricing-card .pricing-item .pricing-money span {
  color: #6b7280 !important;
}

/* ═══════════════════════════════════════════════════════════════
   :visited REFORZADO — a:link/:visited/:active con MISMO color por contexto
   ═══════════════════════════════════════════════════════════════ */
a, a:link, a:visited, a:active { color: inherit; }
a[href^="mailto:"], a[href^="mailto:"]:link, a[href^="mailto:"]:visited, a[href^="mailto:"]:active,
a[href^="tel:"], a[href^="tel:"]:link, a[href^="tel:"]:visited, a[href^="tel:"]:active { color: inherit !important; }

/* Nav: color oscuro; hover/active gana la regla de marca de arriba */
.wpo-site-header #navbar > ul > li > a,
.wpo-site-header #navbar > ul > li > a:link,
.wpo-site-header #navbar > ul > li > a:visited,
.wpo-site-header #navbar > ul > li > a:active,
.sticky-header #navbar > ul > li > a,
.sticky-header #navbar > ul > li > a:link,
.sticky-header #navbar > ul > li > a:visited,
.sticky-header #navbar > ul > li > a:active { color: var(--brand-text); }

/* Footer: crema neutra */
.wpo-site-footer a, .wpo-site-footer a:link, .wpo-site-footer a:visited, .wpo-site-footer a:active,
.wpo-site-footer-s2 a, .wpo-site-footer-s2 a:link, .wpo-site-footer-s2 a:visited, .wpo-site-footer-s2 a:active { color: #F5F1EA; }

/* Botones con color propio */
.btn-wa-header, .btn-wa-header:link, .btn-wa-header:visited, .btn-wa-header:active,
.whatsapp-float-widget, .whatsapp-float-widget:link, .whatsapp-float-widget:visited, .whatsapp-float-widget:active { color: #fff !important; }
.btn-phone-compact, .btn-phone-compact:link, .btn-phone-compact:visited, .btn-phone-compact:active { color: var(--brand-red) !important; }
.nav-brand-link, .nav-brand-link:link, .nav-brand-link:visited, .nav-brand-link:active { color: var(--brand-red) !important; }

/* Enlaces de la sección de contacto: correos y teléfonos en rojo de marca */
.wpo-contact-section a[href^="mailto:"],
.wpo-contact-section a[href^="mailto:"]:visited,
.wpo-contact-section a[href^="tel:"],
.wpo-contact-section a[href^="tel:"]:visited { color: var(--brand-red) !important; }

.text-brand-red, .text-brand-red:visited { color: var(--brand-red) !important; }
.text-brand-green, .text-brand-green:visited { color: var(--brand-green) !important; }

/* ═══════════════════════════════════════════════════════════════
   PULIDO 5 — Familia completa de verdes del template (COSIMEX)
   Erradica #202E05 (texto), #265215 (bordes/textos verdes),
   #F1FEE7 (textos claros), rgba(241,254,231,*), rgba(32,46,5,*), #E0FBCC.
   ═══════════════════════════════════════════════════════════════ */

/* — #202E05: color base de TEXTO del template → gris de marca (SIN !important:
     así los textos que legítimamente van blancos, en footers, header, botones y
     cards oscuras, ganan por especificidad natural). — */
body {
  color: var(--brand-text);
}
/* Título/párrafo dentro de secciones con fondo CLARO → texto oscuro de marca */
.wpo-hero-static p,
.wpo-hero-static h1, .wpo-hero-static h2, .wpo-hero-static h3,
.wpo-about-section h2, .wpo-about-section h3, .wpo-about-section p,
.wpo-service-section h2, .wpo-service-section h3, .wpo-service-section p,
.wpo-why-choose-section h2, .wpo-why-choose-section h3, .wpo-why-choose-section p,
.wpo-problem-solve-section h2, .wpo-problem-solve-section h3, .wpo-problem-solve-section p,
.wpo-contact-section h2, .wpo-contact-section h3, .wpo-contact-section p,
.wpo-section-title .title-top span,
.wpo-section-title-s2 .title-top span,
.wpo-section-title-s3 .title-top span,
.wpo-page-title .wpo-breadcumb-wrap .top-title span,
.wpo-page-title-s2 .wpo-breadcumb-wrap .top-title span,
.pagination-wrapper .pg-pagination li a,
.pagination-wrapper .pg-pagination li:last-child a:hover {
  color: var(--brand-text);
}

/* — #202E05 como BACKGROUND — */
.preloader {
  background-color: var(--brand-slate) !important;
}
.wpo-site-header .mobail-menu button span {
  background-color: #fff !important;
}
.header-style-s2 #navbar,
.header-style-s3 #navbar {
  background-color: transparent !important;
}
/* Mobile menu panel */
.theme-btn-s3 span,
.theme-btn-s3 i {
  background: var(--brand-red) !important;
  color: #fff !important;
}

/* — #265215: bordes y textos secundarios verdes → neutros de marca — */
.wpo-site-footer-s2 .wpo-topbar-footer,
.wpo-site-footer-s2 .wpo-lower-footer {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.contact-left .wpo-contact-form-area select.form-control,
.team-card .team-bottom .team-list .team-text span,
.wpo-case-section-s2 .case-left .case-item .case-content .text span,
.wpo-blog-section .blog-item .blog-bottom .blog-content .blog-text span {
  color: var(--brand-red) !important;
}

/* — #E0FBCC (fondo verde muy claro why-choose-list) → neutro cálido — */
.wpo-why-choose-section-s2 .why-choose-right .why-choose-item .why-choose-list,
.wpo-why-choose-section-s3 .why-choose-right .why-choose-item .why-choose-list {
  background-color: #F7F5F3 !important;
}

/* — rgba(241,254,231, *): fondos y textos con opacidad → neutros — */
.wpo-site-footer-s2 .wpo-lower-footer .copyright,
.wpo-site-footer-s2 .wpo-lower-footer .right li a {
  color: rgba(245, 241, 234, 0.7) !important;
}
.wpo-about-section-s2 .about-middle .wpo-fun-fact-grids .grid,
.wpo-about-section-s3 .about-middle .wpo-fun-fact-grids .grid,
.wpo-service-section-s2 .service-item .service-bottom .service-content,
.team-card .team-bottom .team-list,
.cta-card .cta-item,
.wpo-blog-section .blog-item .blog-bottom .blog-content,
.wpo-blog-section .blog-item .blog-tag li,
.wpo-portfolio-section .portfolio-all-items .portfolio-wrap .portfolio-items .image:before {
  background: rgba(247, 245, 243, 0.9) !important;
}

/* — rgba(32,46,5, *): bordes y tags → gris de marca con opacidad — */
.wpo-testimonial-section .testimonial-slide .testimonial-card .client,
.wpo-testimonial-section-s2 .testimonial-slide .testimonial-card .client,
.wpo-case-single-section .case-single-item .case-single-content .case-single-bottom .case-card .client,
.wpo-blog-single-section .blog-card-bottom .blog-card .client {
  border-top-color: rgba(57, 60, 62, 0.1) !important;
}
.wpo-problem-solve-section-s2 .problem-solve-right .problem-solve-tag li,
.wpo-service-single-section .service-single-item .service-top-img .service-single-tag li,
.wpo-case-single-section .image .case-tag li,
.wpo-contact-map-section .wpo-contact-map .cta-card {
  background: rgba(193, 39, 45, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Menú móvil (panel deslizante) — COSIMEX
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Fondo del panel móvil → blanco (paleta clara COSIMEX) */
  .wpo-site-header #navbar {
    background: #fff !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
  }
  /* Texto legible sobre blanco */
  .wpo-site-header #navbar ul a,
  .wpo-site-header #navbar > ul > li a {
    color: var(--brand-text) !important;
  }
  /* Activo/hover en rojo de marca */
  .wpo-site-header #navbar ul a:hover,
  .wpo-site-header #navbar ul a.active,
  .wpo-site-header #navbar ul li.current a,
  .wpo-site-header #navbar > ul > li a:hover,
  .wpo-site-header #navbar > ul > li a.active {
    color: var(--brand-red) !important;
    background-color: rgba(193, 39, 45, 0.06) !important;
  }
  /* nav-brand-link (Apoyo Legal) siempre destacado */
  .wpo-site-header #navbar .nav-brand-link {
    color: var(--brand-red) !important;
    font-weight: 700 !important;
  }
  /* Close button del panel */
  .wpo-site-header .menu-close {
    color: var(--brand-text) !important;
    border-color: var(--brand-text) !important;
  }
  .wpo-site-header #navbar .close-navbar {
    background-color: var(--brand-red) !important;
    color: #fff !important;
  }
  /* Header móvil: evitar solape logo/botones */
  .wpo-site-header .header-right {
    gap: 4px !important;
    flex-wrap: nowrap;
  }
  .wpo-site-header .navbar-brand img {
    max-height: 40px !important;
    max-width: 130px !important;
  }
  .btn-phone-compact,
  .btn-wa-header {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
  /* Ocultar texto del btn de teléfono en pantallas MUY chicas, dejar solo el ícono */
  @media (max-width: 480px) {
    .btn-phone-compact {
      font-size: 0 !important;
      padding: 8px !important;
    }
    .btn-phone-compact i {
      font-size: 16px !important;
      margin: 0 !important;
    }
    .btn-wa-header {
      font-size: 0 !important;
      padding: 8px !important;
      gap: 0 !important;
    }
    .btn-wa-header .wa-icon-mini {
      width: 16px;
      height: 16px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   Back-to-top: ocultar (se encima con el WhatsApp float widget)
   ═══════════════════════════════════════════════════════════════ */
.back-to-top,
.back-to-top-wraper,
#back-to-top,
.scroll-top {
  display: none !important;
}

/* Imágenes stock temporales: cubrir el marco sin deformar */
img[src*="/stock/"] {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.image-bg img[src*="/stock/"],
.right-image img[src*="/stock/"],
.image-2 img[src*="/stock/"],
.bg-left-image .image img[src*="/stock/"],
.contact-bg-image .image img[src*="/stock/"] {
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   PULIDO 8 — HERO a sangre completa con texto encima
   El template original usa .wpo-hero-static { background-image: shape.png }
   como fondo de la SECCIÓN. Aquí sustituimos ese background por la foto
   stock + overlay oscuro. La <div class="image"><img></div> del template
   es una silueta decorativa z-index:-1: se neutraliza (con foto real no
   aporta y estorba). Se anulan los parches previos que ponían la imagen
   como panel lateral.
   ═══════════════════════════════════════════════════════════════ */
.wpo-hero-static {
  position: relative;
  background-image: url("../images/stock/cosimex-hero.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  height: 720px;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wpo-hero-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(36, 91, 78, 0.55) 100%);
  z-index: 1;
}
.wpo-hero-static .container-fluid,
.wpo-hero-static .hero-item,
.wpo-hero-static .hero-content {
  position: relative;
  z-index: 3;
  padding-inline: unset;
  max-width: 100%;
}
.wpo-hero-static .hero-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding-block: 40px;
}
.wpo-hero-static .hero-content p,
.wpo-hero-static .hero-content h2 {
  color: #ffffff !important;
}
.wpo-hero-static .hero-content p {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.wpo-hero-static .hero-content p span {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Silueta decorativa del template: se neutraliza porque estorba con foto real */
.wpo-hero-static .image {
  display: none !important;
}

@media (max-width: 991px) {
  .wpo-hero-static {
    height: auto;
    min-height: 500px;
    padding-block: 80px;
  }
}
@media (max-width: 767px) {
  .wpo-hero-static {
    min-height: 440px;
    padding-block: 60px;
  }
  .wpo-hero-static .hero-content { padding-block: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PULIDO 8 — Sección propia de aliados JUSTO DEBAJO DEL HERO
   ═══════════════════════════════════════════════════════════════ */
.aliados-strip-section {
  background: #F8FAFC;
  padding-block: 48px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.aliados-title {
  color: var(--brand-text);
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  opacity: 0.75;
  margin-bottom: 28px;
  text-align: center;
}
.aliados-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 0;
}
.aliados-list li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 60px;
}
.aliados-list img {
  max-height: 52px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.35);
  opacity: 0.88;
  transition: filter 200ms ease, opacity 200ms ease;
}
.aliados-list li:hover img {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 767px) {
  .aliados-list {
    gap: 20px;
  }
  .aliados-list li {
    height: 46px;
  }
  .aliados-list img {
    max-height: 38px;
    max-width: 110px;
  }
  .aliados-strip-section {
    padding-block: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PULIDO 7 — Barrido final de verdes remanentes (COSIMEX)
   Cubre bordes, tags, dots, service-tags y cualquier acento que
   el template pinte con rgba/hex de la familia verde-oliva/lima
   que no se haya interceptado en pulidos previos.
   ═══════════════════════════════════════════════════════════════ */

/* Tags de servicio/case/blog (bg rgba oscuro del template) → rojo suave */
.wpo-problem-solve-section .problem-solve-right .problem-solve-tag li,
.wpo-service-single-section .service-single-item .service-top-img .service-single-tag li,
.wpo-case-single-section .image .case-tag li,
.wpo-blog-section .blog-item .blog-tag li,
.wpo-blog-pg-section .wpo-blog-wrap .blog-item .blog-content .blog-tag li {
  background: rgba(193, 39, 45, 0.1) !important;
  color: var(--brand-red) !important;
}

/* Bordes verdes remanentes en cards y grids */
.wpo-about-section-s2 .about-middle .wpo-fun-fact-grids .grid,
.wpo-about-section-s3 .about-middle .wpo-fun-fact-grids .grid,
.wpo-service-section-s2 .service-item,
.wpo-service-section-s2 .service-item .service-bottom .service-content,
.wpo-blog-section .blog-item,
.wpo-blog-section .blog-item .blog-bottom {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Borders top de secciones invertidas: rojo de acento */
.wpo-service-section .wpo-service-card .service-item,
.wpo-service-section-s3 .wpo-service-card .service-item {
  border-top: 4px solid var(--brand-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PULIDO 8 — Fondos de SECCIÓN verde oscuro del template → claros
   Culpable identificado en sass:
     .wpo-service-section, .wpo-service-section-s3 { background-color: #202E05 }
   Se aclaran a #F8FAFC con texto oscuro legible.
   Otros bg #202E05 de sección (page-title si se usara) también neutralizados.
   Footers y preloader se mantienen (bloques específicos previos).
   ═══════════════════════════════════════════════════════════════ */
.wpo-service-section,
.wpo-service-section-s3 {
  background-color: #F8FAFC !important;
}
/* Textos de section-title-s2 que el template pinta crema para leerse sobre verde
   ahora sobre claro → texto oscuro/rojo (acorde a marca). */
.wpo-service-section .wpo-section-title-s2 .title-top span,
.wpo-service-section-s3 .wpo-section-title-s2 .title-top span {
  color: var(--brand-red) !important;
}
.wpo-service-section .wpo-section-title-s2 h2,
.wpo-service-section-s3 .wpo-section-title-s2 h2 {
  color: var(--brand-text) !important;
}
.wpo-service-section p,
.wpo-service-section-s3 p {
  color: var(--brand-text);
}

/* Otras posibles secciones oscuras del template (por si se activan a futuro) */
.wpo-page-title,
.wpo-page-title-s2 {
  background-color: #F7F5F3 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CIERRE FINAL — middle-img del footer + contraste cards con foto
   ═══════════════════════════════════════════════════════════════ */

/* Silueta decorativa del footer del template (footer-bg.png verde oliva)
   estorba visualmente. Ocultar. */
.wpo-site-footer .wpo-upper-footer .middle-img,
.wpo-site-footer-s2 .wpo-upper-footer .middle-img {
  display: none !important;
}

/* Contraste texto sobre foto oscura — cards del banner-fraude
   .problem-solve-right-content sale sobre .bg-right-image (foto).
   Añadir overlay sutil + texto blanco legible en h3/p de esas cards. */
.wpo-problem-solve-section .problem-solve-right .image {
  position: relative;
}
.wpo-problem-solve-section .problem-solve-right .image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.wpo-problem-solve-section .problem-solve-right .problem-solve-item,
.wpo-problem-solve-section .problem-solve-right .problem-solve-right-content,
.wpo-problem-solve-section .problem-solve-right .problem-solve-list {
  position: relative;
  z-index: 2;
}
.wpo-problem-solve-section .problem-solve-right .problem-solve-list h3,
.wpo-problem-solve-section .problem-solve-right .problem-solve-list p {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.wpo-problem-solve-section .problem-solve-right .problem-solve-list .icon {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px;
}

/* Igual para el card izquierdo (Cobranza Abusiva) */
.wpo-problem-solve-section .problem-solve-left .problem-solve-bottom {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.wpo-problem-solve-section .problem-solve-left .problem-solve-bottom h3,
.wpo-problem-solve-section .problem-solve-left .problem-solve-bottom p {
  color: #ffffff !important;
}

/* Dots del owl carousel: contorno rojo cuando NO activo */
.owl-dots button {
  border-color: rgba(193, 39, 45, 0.3) !important;
}

/* Cualquier :before de section-title verde → rojo */
[class*="wpo-section-title"] .title-top span::before,
[class*="wpo-section-title"] .title-top span::after {
  background: var(--brand-red) !important;
  color: var(--brand-red) !important;
}

/* Cards con clase card-uav-light dentro de COSIMEX (por si alguna quedó) → aspecto claro */
body:not(.uav-theme) .card-uav-light {
  background: #fff !important;
  border-top-color: var(--brand-red) !important;
  color: var(--brand-text) !important;
}