/* =========================================================
   RXGLOBE — estilos del sitio (cargados por el plugin "RXGLOBE Styles")

   Convive con el "CSS adicional" del diseñador original, que NO hay que
   borrar: da estilo a las páginas interiores. Esta hoja se carga después
   y gana donde chocan. Donde el CSS antiguo usa !important o selectores
   largos, aquí se usa #main-content (o el ID de la sección) + !important
   para tener más especificidad.
   Selectores verificados contra rx-globe.com (WoodMart + WPBakery).
   ========================================================= */

:root{
  --rx-navy:    #1e2472;  /* mismo azul que el footer: une hero, títulos y pie */
  --rx-ink:     #1f2937;  /* texto principal                                */
  --rx-text:    #4b5563;  /* texto secundario (antes #a8a8a8, ilegible)      */
  --rx-gold:    #f5b301;  /* ámbar de las luces del mapa: acento / CTA       */
  --rx-gold-lt: #ffd24d;
  --rx-bg:      #f4f6fb;  /* fondo de secciones alternas                     */
  --rx-line:    #e3e7f0;
  --rx-radius:  12px;
  --rx-shadow:  0 12px 32px rgba(30,36,114,.10);
}

/* ---------- 0. Header ---------- */
#menu-main-menu > li > a,
#menu-main-menu .nav-link-text,
.whb-general-header .wd-tools-element > a{ color:#fff !important; }
#menu-main-menu > li > a:hover .nav-link-text,
#menu-main-menu > li.current-menu-item .nav-link-text{ color:var(--rx-gold-lt) !important; }

/* Escritorio (WoodMart cambia al header móvil por debajo de 1025px) */
@media (min-width:1025px){
  /* Logo algo separado del borde izquierdo */
  .whb-general-header .site-logo{ padding-left:clamp(12px, 2vw, 36px); }
  /* Menú un poco más compacto */
  ul#menu-main-menu{ gap:6px 26px; margin-left:0; }
  #menu-main-menu .nav-link-text{ font-size:14px !important; }
  .whb-header .whb-general-header .wd-button-wrapper a.btn{   /* más específico que la regla general de botones (sección 3) */
    padding:11px 22px !important; font-size:14px !important;
  }
}
@media (min-width:1025px) and (max-width:1399px){
  ul#menu-main-menu{ gap:6px 16px; margin-left:0; }   /* el CSS antiguo ponía margin-left:-40px */
  #menu-main-menu .nav-link-text{ font-size:13px !important; }
}
/* Portátiles pequeños / tablet horizontal: antes el menú se partía en dos líneas */
@media (min-width:1025px) and (max-width:1199px){
  ul#menu-main-menu{ gap:6px 10px; }
  #menu-main-menu .nav-link-text{ font-size:12px !important; }
  .whb-general-header .site-logo img{ max-width:120px !important; height:auto; }   /* WoodMart pone max-width en línea */
  .whb-header .whb-general-header .wd-button-wrapper a.btn{   /* más específico que la regla general de botones (sección 3) */
    padding:9px 16px !important; font-size:13px !important;
  }
}

/* ---------- 1. Texto legible en todo el contenido ---------- */
.wd-page-content p,
.wd-page-content li{ color:var(--rx-text); }
.wd-page-content h2,
.wd-page-content h3,
.wd-page-content h4{ color:var(--rx-navy); }
#main-content .where-x h2{ color:var(--rx-navy) !important; }   /* "Whom We Serve" */

/* ---------- 2. HERO: texto centrado, titular ámbar, botón debajo ---------- */
#top_sec #sec_0{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
#top_sec #sec_0::before, #top_sec #sec_0::after{ display:none; }
#top_sec #sec_0 > .wpb_column{ width:100%; max-width:820px; float:none; }
#top_sec #sec_0 > .wpb_column:first-child{ order:2; }   /* EXPLORE MORE va debajo del texto */
#top_sec .wd-text-block{ text-align:center !important; padding-left:0 !important; }

section#top_sec h4{
  color:var(--rx-gold-lt) !important;
  font-size:clamp(28px, 4vw, 52px) !important;
  line-height:1.15 !important; font-weight:700;
  text-align:center !important;
  margin-bottom:20px;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
section#top_sec p{
  color:#eef1f8 !important;
  font-size:clamp(16px, 1.4vw, 19px) !important;
  text-align:center !important;
  max-width:62ch; margin-inline:auto;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
#top_sec .wd-button-wrapper{ display:block; text-align:center; margin-top:8px; }

/* ---------- 3. Botones: un solo estilo primario en ámbar ----------
   Neutraliza los estilos antiguos: píldora negra, círculo blanco (::after),
   flecha de fondo y "Read More" como icono de 75x75 con texto transparente. */
#main-content .wd-button-wrapper a.btn.btn-style-default,
.whb-header .wd-button-wrapper a.btn,
.fluentform button.ff-btn-submit{
  background:var(--rx-gold) !important;      /* el shorthand quita también la flecha de fondo */
  color:#1a1a2e !important;
  border:0 !important;
  border-radius:var(--rx-radius) !important;
  padding:14px 30px !important;
  width:auto !important; height:auto !important;
  font-size:15px !important; font-weight:700 !important;
  line-height:1.2 !important;
  text-transform:capitalize !important;   /* "Explore More", "Read More", "Contact Us", "Send" */
  letter-spacing:.03em;
  box-shadow:0 6px 18px rgba(245,179,1,.30);
  transition:transform .2s, filter .2s;
}
#main-content .wd-button-wrapper a.btn.btn-style-default::after,
#main-content .wd-button-wrapper a.btn.btn-style-default::before{
  display:none !important; content:none !important;
}
#main-content .wd-button-wrapper a.btn.btn-style-default:hover,
.whb-header .wd-button-wrapper a.btn:hover,
.fluentform button.ff-btn-submit:hover{
  background:var(--rx-gold) !important; filter:brightness(1.07); transform:translateY(-2px);
}
.fluentform button.ff-btn-submit{ width:100% !important; }

/* ---------- 4. Antetítulos "Who We Are / Why Us / Let's Connect" ----------
   En el CSS antiguo eran una píldora negra con un círculo (::after).
   Solo los H1 de WPBakery (.h1-0111): el título de página (h1.entry-title)
   de las páginas interiores no se toca. */
#main-content .vc_row h1.vc_custom_heading.vc_do_custom_heading.h1-0111{
  background:none !important;
  color:var(--rx-navy) !important;
  font-family:Poppins, Arial, sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  padding:0 !important; border-radius:0 !important;
  width:fit-content !important;
  display:flex !important; align-items:center; gap:10px;
  margin-bottom:14px !important;
}
#main-content .vc_row h1.vc_custom_heading.vc_do_custom_heading.h1-0111::after{
  display:none !important; content:none !important;
}
#main-content .vc_row h1.vc_custom_heading.vc_do_custom_heading.h1-0111::before{
  content:""; flex:0 0 28px; height:3px; border-radius:2px; background:var(--rx-gold);
}

/* "About RXGLOBE" y "Why Partner With RXGLOBE?" pasaban de 80px */
#main-content #sec_1 h2.vc_custom_heading.vc_do_custom_heading,
#main-content #why-01 h2.vc_custom_heading.vc_do_custom_heading{
  font-size:clamp(30px, 3.6vw, 48px) !important;
  line-height:1.15 !important; letter-spacing:-.01em;
  color:var(--rx-navy) !important;
}

/* ---------- 5. Servicios: tarjetas blancas iguales ----------
   El CSS antiguo las hacía negras con texto blanco y alturas fijas. */
#main-content #service-01 .wd-info-box{
  background:#fff !important;
  border:1px solid var(--rx-line); border-radius:var(--rx-radius) !important;
  overflow:hidden; height:100% !important;
  padding:0 0 18px !important;
  transition:transform .25s, box-shadow .25s;
}
#main-content #service-01 .wd-info-box:hover{
  background:#fff !important; transform:translateY(-6px); box-shadow:var(--rx-shadow);
}
#main-content #service-01 .info-box-icon img{
  width:100%; height:auto !important;
  aspect-ratio:16/10; object-fit:cover; display:block;
}
#main-content #service-01 .info-box-content{ padding:0 18px; }
#main-content #service-01 h4.info-box-title{
  color:var(--rx-navy) !important; margin:16px 0 0 !important;
}
#main-content #service-01 .info-box-inner{ color:var(--rx-text) !important; }

/* ---------- 6. Why Us: cada valor como tarjeta con borde ámbar ---------- */
#main-content #why-01 .wd-info-box.text-left{
  background:#fff;
  border:0 !important; border-left:4px solid var(--rx-gold) !important;
  border-radius:0 var(--rx-radius) var(--rx-radius) 0;
  padding:16px 20px !important; margin-bottom:14px !important;
  box-shadow:0 2px 10px rgba(30,36,114,.05);
}
#main-content #why-01 .wd-info-box.text-left h4.info-box-title{
  font-size:18px !important; line-height:1.3 !important;
  color:var(--rx-navy) !important; text-align:left !important;
  margin-bottom:4px;
}
#main-content #why-01 .wd-info-box.text-left p{ text-align:left !important; }
#why-01 .vc_empty_space{ display:none; }   /* hueco de 160px bajo "Why Us" */

/* ---------- 7. Secciones: fondo general y ritmo ---------- */
body.home .main-page-wrapper{ background:var(--rx-bg); }
body.home #main-content.wd-content-layout{ padding-bottom:0 !important; }  /* banda gris sobre el footer */
#sec_4 p{ color:var(--rx-ink); font-weight:500; }

/* Hero: funde el borde inferior del mapa con el fondo */
#top_sec{ position:relative; }
#top_sec::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:35%;
  background:linear-gradient(to bottom, rgba(5,8,40,0), #050828);
  pointer-events:none;
}
#top_sec > .vc_row{ position:relative; z-index:1; }

/* ---------- 8. Formulario ---------- */
.fluentform .ff-el-form-control{
  border:1.5px solid var(--rx-line) !important;
  border-radius:10px !important; padding:13px 15px !important;
}
textarea#ff_3_description.ff-el-form-control{   /* "Message": el CSS antiguo le quitaba el relleno */
  padding:13px 15px !important; margin-top:0 !important;
}
.fluentform .ff-el-form-control:focus{
  border-color:var(--rx-navy) !important;
  box-shadow:0 0 0 3px rgba(30,36,114,.15) !important;
}

/* ---------- 9. Footer: enlaces legibles sobre el azul ---------- */
#footer-main-01 a{ color:#c9cdf0 !important; }
#footer-main-01 a:hover{ color:var(--rx-gold-lt) !important; }
#footer-main-01 p, #footer-main-01 li{ color:#d6d9f2; }
.wd-copyrights.copyrights-wrapper.wd-layout-two-columns{
  background:#161b5a !important; border-top:1px solid rgba(255,255,255,.08);
}
.wd-copyrights.copyrights-wrapper.wd-layout-two-columns,
.wd-copyrights.copyrights-wrapper.wd-layout-two-columns a{ color:#c9cdf0 !important; }

/* ---------- 10. Accesibilidad: foco visible ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--rx-gold); outline-offset:3px;
}

/* ---------- 11. Móvil ---------- */
@media (max-width:767px){
  section#top_sec h4{ font-size:28px !important; }
  #main-content #sec_1 h2.vc_custom_heading.vc_do_custom_heading,
  #main-content #why-01 h2.vc_custom_heading.vc_do_custom_heading{ font-size:30px !important; }
}
@media (max-width:575px){
  /* El CSS antiguo centra el bloque "About" en móvil: el antetítulo también */
  #main-content .vc_row h1.vc_custom_heading.vc_do_custom_heading.h1-0111{ margin-inline:auto !important; }
}