/* =========================================================
   Ajustes a BUYEO – Vehiculos
   ========================================================= */

/* =========================
   Helpers / Variables
   ========================= */

:root{
  --buyeo-green-dark: 29, 110, 91;
}

/* Ocultar switcher */
#style-switcher{
  display: none !important;
}

/* =========================
  Formularios
   ========================= */

.container.job-post-form,
.container.job-post-form-ofertas,
.container.job-post-form-ver-mas{
  margin-top: -170px;
  background-color: #fff;
  padding: 32px;
  border-radius: 32px;
}

.container.job-post-form{ width: 800px; }
.container.job-post-form-ofertas{ width: 1140px; }
.container.job-post-form-ver-mas{ width: auto; }

@media (max-width: 767.98px){
  .container.job-post-form,
  .container.job-post-form-ofertas,
  .container.job-post-form-ver-mas{
    width: auto;
  }
}

/* =========================
   Botón secundario BUYEO
   ========================= */

.btn-buyeo-secondary{
  background-color: rgb(var(--bs-green-dark-rgb, var(--buyeo-green-dark)));
  color: #fff;
  border: none;
}

.btn-buyeo-secondary:hover,
.btn-buyeo-secondary:focus{
  background-color: rgba(var(--bs-green-dark-rgb, var(--buyeo-green-dark)), .85);
  color: #fff;
}

/* =========================
  WhatsApp flotante
   ========================= */

/* WhatsApp flotante – LINEA */
.whatsapp-float{
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 58px;
  height: 58px;

  background: linear-gradient(135deg, #25D366 0%, #145D99 100%);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 1050;

  transition: background-color .25s ease, transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float img{
  width: 28px;
  height: 28px;
  filter: none;
}

.whatsapp-float:hover{
  background-color: #25D366;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

.whatsapp-float:hover img{
  filter: brightness(0) invert(1);
}

@media (max-width: 576px){
  .whatsapp-float{
    width: 52px;
    height: 52px;
    bottom: 15px;
    right: 15px;
  }

  .whatsapp-float img{
    width: 24px;
    height: 24px;
  }
}


/* =========================
  Titulo HERO mobile
   ========================= */
@media (max-width: 575.98px){
  .page-title-box{
    padding-top: 72px !important;
    padding-bottom: 32px !important;
  }
  .page-title-box h2{
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  .page-title-box .breadcrumb{
    font-size: 8px;
  }
}

/* =========================
  Preloader
   ========================= */

#preloader{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background: #fff;
}

#preloader[style*="visibility: hidden"]{
  pointer-events: none;
}

/* =========================
  HERO HOME
   ========================= */

.bg-home-vehiculos{
  padding: 80px 0 48px;
  background: linear-gradient(
    to bottom,
    #96160b 10%,
    #bc271a 70%,
    #ffffff 100%
  );
  overflow-x: clip;
}

/* (Lo dejamos tal cual pediste) */
@media (min-width: 1200px){
  .bg-home2{
    padding: 120px 0 72px;
  }
}

/* Copy */
.gp-hero-copy{
  color: rgba(255,255,255,.92);
}

/* Títulos */
.gp-hero-title{
  line-height: 1.1;
  font-weight: 300;
}

.gp-hero-title--mobile{
  font-size: 26px;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.2px;
  color: #fff;
}

/* Checks */
.gp-hero-checks{
  color: rgba(255,255,255,.92);
  font-weight: 400;
}

.gp-hero-checks i{
  font-size: 18px;
  vertical-align: -2px;
}

@media (max-width: 767.98px){
  .gp-hero-checks{
    font-size: 13px;
  }

  .gp-hero-checks i{
    font-size: 16px;
  }
}

/* =========================
   Cards principales / HOME (FIX alturas + layout)
   ========================= */

.section-cards .row.justify-content-center{
  align-items: stretch; /* fuerza misma altura */
}

.section-cards .row.justify-content-center > [class*="col-"]{
  display: flex;         /* cada col estira su card */
}

/* Card */
.section-cards .home-box.card{
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  position: relative;
  overflow: visible;
}

/* Body como columna (NO space-between) */
.section-cards .home-box.card .card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 38px !important; /* deja lugar al icono flotante */
  height: 100%;
}

/* Icono flotante */
.section-cards .home-box .home-icon{
  position: absolute !important;
  top: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 5;

  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-cards .home-box .home-icon img{
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
}

/* CTA siempre abajo sin romper layout */
.section-cards .home-box .card-body > .text-center{
  margin-top: auto !important;
  width: 100%;
}

/* Botón */
.section-cards .home-box .btn{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 575.98px){
  .section-cards .home-box .btn{
    width: 100%;
    display: flex;
  }

  /* dos cards lado a lado en mobile chico */
  .section-cards .row.justify-content-center{
    --bs-gutter-x: 12px;
  }
  .section-cards .row.justify-content-center > [class*="col-"]{
    flex: 0 0 50%;
    max-width: 50%;
  }

  .section-cards .home-box.card{
    margin-top: -32px;
  }

  .section-cards .home-box.card .card-body{
    padding: 16px !important;
    padding-top: 34px !important;
  }
}

/*  HOME – Botones cards (mobile) */
@media (max-width: 575.98px){
  .section-cards .home-box .btn{
    font-size: 13px; 
    line-height: 1.25;   
    padding: 10px 12px;  
    margin-top: 20px;
    text-align: center;
    white-space: normal;
  }
}

/* =========================
  Navbar mobile
   ========================= */

@media (max-width: 991.98px){
  .navbar-collapse .btn-publicar-busqueda{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 999px;
  }
}

/* =========================================================
   NAVBAR - Acciones en el boton LOGIN
   ========================================================= */

.gp-nav-actions{
  gap: 10px;
}

.gp-btn-publish{
  padding: 10px 18px;
  line-height: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* -------- Pill animado (login / perfil) -------- */
.gp-pill-icon{
  --pill-bg: #e9f6ff;
  --pill-border: rgba(0,0,0,.10);
  --pill-shadow: 0 10px 18px rgba(0,0,0,.12);
  --pill-text: #0b0f14;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 44px;
  padding: 0 14px 0 8px;
  border-radius: 999px;

  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);

  text-decoration: none;
  white-space: nowrap;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.gp-pill-icon:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}

.gp-pill-icon__circle{
  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
}

.gp-pill-icon__circle i{
  font-size: 18px;
  line-height: 1;
}

.gp-pill-icon__text{
  font-weight: 600;
  font-size: 14px;
  color: var(--pill-text);

  max-width: 0;
  opacity: 0;
  overflow: hidden;

  transition: max-width .22s ease, opacity .18s ease;
}

@media (min-width: 992px){
  .gp-pill-icon:hover .gp-pill-icon__text{
    max-width: 140px;
    opacity: 1;
  }
}

@media (max-width: 991.98px){
  .gp-pill-icon{
    padding: 0;
    width: 44px;
    justify-content: center;
  }
  .gp-pill-icon__text{
    display: none;
  }
}

/* Login */
.gp-pill-login{
  --pill-bg: rgba(150,22,11,.10);
  --pill-border: rgba(150,22,11,.22);
  --pill-shadow: 0 12px 22px rgba(150,22,11,.20);
}

.gp-pill-login .gp-pill-icon__circle{
  background: #96160b;
  border-color: rgba(0,0,0,.08);
}

.gp-pill-login .gp-pill-icon__circle i{
  color: #fff;
}

.gp-pill-login .gp-pill-icon__text{
  color: #96160b;
}

/* Perfil */
.gp-pill-user{
  --pill-bg: rgba(185,22,15,.10);
  --pill-border: rgba(185,22,15,.22);
  --pill-shadow: 0 12px 22px rgba(185,22,15,.18);
}

.gp-pill-user .gp-pill-icon__circle{
  background: #b9160f;
}

.gp-pill-user .gp-pill-icon__circle i{
  color: #fff;
}

.gp-pill-user .gp-pill-icon__text{
  color: #b9160f;
}

/* ✅ Placeholders inactivos (UNA sola vez) */
.dropdown-menu a[aria-disabled="true"]{
  opacity: .6;
  pointer-events: none;
}

/* =========================================================
   CONTAINER
   ========================================================= */

@media (max-width: 575.98px){
  .container,
  .container-fluid{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   HOTFIX  – Iconos flotantes CARDS (QUEDA SOLO ESTO)
   ========================================================= */

.section-cards .home-box.card{
  position: relative;
  overflow: visible;
}

.section-cards .home-box.card .card-body{
  position: relative;
  padding-top: 28px !important;
}

.section-cards .home-box .home-icon{
  position: absolute !important;
  top: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 5;

  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1200px){
  .section-cards .home-box .home-icon{
    top: -56px !important;
  }
  .section-cards .home-box.card .card-body{
    padding-top: 20px !important;
  }
}

/* =========================================================
   PROCESS (Cómo funciona) – MOBILE UX
   ========================================================= */

.gp-process .section-title{
  max-width: 560px;
}

@media (max-width: 991.98px){

  .gp-process.section{
    padding: 56px 0 36px !important;
  }

  .gp-process .section-title{
    margin-right: 0 !important;
  }

  .gp-process .title{
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .gp-process p.text-muted{
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  .gp-process .tab-content{
    margin-top: 14px;
    margin-bottom: 14px;
    text-align: center;
  }

  .gp-process .tab-content img{
    max-width: 92%;
    height: auto;
  }

  .gp-process .process-menu .nav-link{
    border-radius: 18px;
    padding: 14px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }

  .gp-process .process-menu .nav-link.active{
    border-color: rgba(150,22,11,.30);
    background: rgba(150,22,11,.06);
    box-shadow: 0 10px 22px rgba(150,22,11,.12);
  }

  .gp-process .process-menu .number{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;

    background: rgba(150,22,11,.10);
    color: #96160b;
  }

  .gp-process .process-menu .nav-link.active .number{
    background: #96160b;
    color: #fff;
  }

  .gp-process .process-menu h5{
    font-size: 16px;
    margin-bottom: 4px;
  }

  .gp-process .process-menu p{
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 575.98px){
  .gp-process.section{
    padding: 44px 0 28px !important;
  }

  .gp-process .title{
    font-size: 24px;
  }

  .gp-process .tab-content img{
    max-width: 100%;
  }
}

/* FIX item activo en MOBILE */
@media (max-width: 991.98px){

  .process-menu .nav-link.active{
    background-color: rgba(150, 22, 11, 0.06) !important;
    border-color: rgba(150, 22, 11, 0.25) !important;
  }

  .process-menu .nav-link.active h5{
    color: #96160b !important;
    font-weight: 700;
  }

  .process-menu .nav-link.active p{
    color: #444 !important;
  }

  .process-menu .nav-link.active .number{
    background-color: #96160b !important;
    color: #fff !important;
  }
}

/* =========================================================
   CATEGORIAS
   ========================================================= */

.gp-cats-balanced{
  background: #f7f8fa;
  padding-top: 72px;
  padding-bottom: 72px;
}

.gp-cats-balanced .section-title{
  max-width: 760px;
  margin: 0 auto 48px;
}

.gp-cats-balanced .section-title h3{
  font-size: 32px;
}

.gp-cats-balanced .section-title p{
  font-size: 16px;
}

.gp-cats-balanced .container{
  max-width: 1140px;
}

.gp-cats-balanced .popu-category-box{
  background: #fff;
  border-radius: 18px;
  padding: 18px 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (min-width: 992px){
  .gp-cats-balanced .popu-category-box:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
  }
}

.gp-cats-balanced .popu-category-icon{
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(150,22,11,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.gp-cats-balanced .popu-category-icon img{
  width: 60px !important;
  height: 60px !important;
}

.gp-cats-balanced h5{
  font-size: 15px;
  font-weight: 600;
  margin-top: 12px;
}

/* Desktop grande → 5 columnas */
@media (min-width: 1200px){
  .gp-cats-balanced .row > [class*="col-"]{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Tablet → 4 columnas */
@media (min-width: 768px) and (max-width: 1199.98px){
  .gp-cats-balanced .row > [class*="col-"]{
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Mobile → 2 columnas */
@media (max-width: 575.98px){
  .gp-cats-balanced .row > [class*="col-"]{
    flex: 0 0 50%;
    max-width: 50%;
  }

  .gp-cats-balanced .popu-category-box{
    padding: 14px 10px;
  }
}

.gp-cats-balanced .btn-primary{
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 48px auto 0;
}

/* =========================================================
   TRUST SECTION
   ========================================================= */

.section-trust{
  background: linear-gradient(
    180deg,
    rgba(103,180,229,.28) 0%,
    rgba(103,180,229,.16) 60%,
    rgba(103,180,229,.10) 100%
  ) !important;

  padding: 84px 16px;
  border-top: 1px solid rgba(103,180,229,.25);
}

.section-trust h2{
  color: #1f2937;
  font-weight: 800;
  line-height: 1.25;
}

.section-trust .trust-text{
  color: #6b7280;
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
}

.section-trust .trust-number{
  color: #2585ab;
  font-weight: 900;
  text-shadow: 0 6px 18px rgba(103,180,229,.18);
}

@media (max-width: 767.98px){
  .section-trust{ padding: 64px 16px; }
  .section-trust h2{ font-size: 22px; }
  .section-trust .trust-text{ font-size: 15px; }
}

/* =========================
   CTA animado BUYEO
   ========================= */

.btn-buyeo-cta{
  --cta-red: #b9160f;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;

  height: 48px;
  padding: 0 22px 0 14px;

  background: var(--cta-red);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;

  box-shadow: 0 10px 22px rgba(185,22,15,.25);
  transition: box-shadow .25s ease, transform .2s ease;
}

.btn-buyeo-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(185,22,15,.35);
}

.btn-buyeo-cta .cta-icon{
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  transition: all .35s ease;
}

.btn-buyeo-cta .cta-icon i{
  font-size: 18px;
  color: #fff;
}

.btn-buyeo-cta .cta-text{
  white-space: nowrap;
  transition: transform .35s ease, opacity .25s ease;
}

.btn-buyeo-cta .cta-hover-text{
  position: absolute;
  right: 22px;
  white-space: nowrap;

  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .35s ease;
}

@media (min-width: 992px){
  .btn-buyeo-cta:hover .cta-icon{
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,.25);
  }

  .btn-buyeo-cta:hover .cta-text{
    opacity: 0;
    transform: translateX(-10px);
  }

  .btn-buyeo-cta:hover .cta-hover-text{
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 991.98px){
  .btn-buyeo-cta .cta-hover-text{
    display: none;
  }
}

/* =========================
   Acordion ICONO
   ========================= */

.accordion{
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23b9160f' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.5 6.5a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23b9160f' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M8 1.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-1 0v-12a.5.5 0 0 1 .5-.5z'/%3e%3c/svg%3e");
}

.accordion-button::after{
  filter: brightness(0) saturate(100%) invert(16%) sepia(92%) saturate(4682%) hue-rotate(353deg) brightness(90%) contrast(110%) !important;
}

/* =========================
   Section Espaciado
   ========================= */

.section{ padding: 50px 0; }
.section.section-sm{ padding: 48px 0; }
.section.section-lg{ padding: 120px 0; }

@media (max-width: 991.98px){
  .section{ padding: 36px 0; }
  .section.section-sm{ padding: 32px 0; }
  .section.section-lg{ padding: 72px 0; }
}

@media (max-width: 575.98px){
  .section{ padding: 24px 0; }
  .section.section-sm{ padding: 24px 0; }
  .section.section-lg{ padding: 60px 0; }
}

/* =========================
   Titulares de paginas
   ========================= */

.page-title-box h1,
.page-title-box h2,
.page-title-box h3{
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* =========================================================
   Mobile Dropdown – separadores + caret destacado
   ========================================================= */

@media (max-width: 991.98px){

  .mobile-menu{ gap: 0; }

  .mobile-item{
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .mobile-item:last-of-type{
    border-bottom: 0;
  }

  .mobile-link{
    padding: 12px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-caret{
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #145D99;
    background: rgba(20,93,153,.10);
    border: 1px solid rgba(20,93,153,.25);

    transition: transform .2s ease, background .2s ease, color .2s ease;
    flex: 0 0 auto;
  }

  .nav-item.dropdown.show > .mobile-dropdown-toggle .mobile-caret{
    transform: rotate(180deg);
    background: rgba(20,93,153,.16);
    color: #145D99;
  }

  .mobile-dropdown .dropdown-menu{
    border-radius: 14px;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================================
   NAVBAR MOBILE – dropdowns expandido
   ========================================================= */
@media (max-width: 991.98px){

  #navbarCollapse{
    max-height: none !important;
    overflow: visible !important;
  }

  #navbarCollapse .dropdown-menu{
    position: static !important;
    float: none !important;
    width: 100% !important;

    margin: 10px 0 0 !important;
    transform: none !important;
    inset: auto !important;

    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08);
  }

  #navbarCollapse .dropdown-menu.show{
    display: block;
  }
}

/* =========================================================
   FOOTER – Fix mobile
   ========================================================= */

/* Base */
.bg-footer{
  padding: 60px 0;
}

/* Mobile */
@media (max-width: 991.98px){

  .bg-footer{
    padding: 32px 0 !important; /* baja el alto */
    text-align: center;
  }

  .bg-footer .footer-item{
    margin: 0 auto !important;
    text-align: center !important;
  }

  .bg-footer .logo-white{
    display: block;
    margin: 0 auto 12px !important;
    height: 40px !important;
  }

  .bg-footer p,
  .bg-footer .text-white{
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .bg-footer .row > [class*="col-"]{
    margin-bottom: 18px;
  }
  .bg-footer .row > [class*="col-"]:last-child{
    margin-bottom: 0;
  }

  .bg-footer ul{
    padding-left: 0 !important;
    margin: 0 auto !important;
    list-style: none;
  }
  .bg-footer ul li{
    margin: 8px 0;
  }
  .bg-footer a{
    text-decoration: none;
  }
}

@media (max-width: 575.98px){
  .bg-footer{
    padding: 26px 0 !important;
  }
  .bg-footer .logo-white{
    height: 36px !important;
  }
}

/* =========================================================
   PRICING - PLANES BUYEO
   ========================================================= */

.pricing-plan-code{
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  color: #b9160f;
}

/* Fondo suave para el plan destacado / corroborar si lo desea */
.pricing-section .row > [class*="col-"]:nth-child(2) .pricing-box,
.row > [class*="col-"]:nth-child(2) .pricing-box{
  background: rgba(185,22,15,.10) !important;
}

.pricing-box .pricing-icon{
  width: 72px;
  height: 72px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 10px;

  background: #b9160f !important;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(185,22,15,.18);
}

.pricing-box .pricing-icon i{
  font-size: 32px;
  line-height: 1;
  color: #fff !important;
}

.pricing-box .pricing-icon img{
  width: 52px;
  height: 52px;
  filter: brightness(0) invert(1);
}

.pricing-details{
  display: flex;
  justify-content: center;
  padding-left: 0;
}

.pricing-item{
  list-style: none;
}

.gp-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(185,22,15,.12);
  border: 1px solid rgba(185,22,15,.20);
  color: #96160b;

  font-weight: 600;
  font-size: 13px;
  line-height: 1;

  max-width: 100%;
  white-space: normal;
}

.gp-chip i{
  font-size: 16px;
  color: #96160b;
}

.gp-chip strong{
  font-weight: 800;
}

@media (max-width: 575.98px){
  .gp-chip{
    width: 100%;
    justify-content: center;
  }
}

/* Iconos vectorizados-personalizados */
.pricing-svg{
  width: 34px;
  height: 34px;
  color: #fff;
}

.pricing-icon img.pricing-svg{
  width: 48px;
  height: 48px;
  display: block;
}

.pricing-icon img{
  filter: brightness(0) invert(1);
}


/* =========================================================
   QUIENES SOMOS – Responsive fixes
   ========================================================= */

/* 2) ABOUT: sacar overflow “gigante” y bajar espacios */
@media (max-width: 991.98px){
  /* el overflow-hidden acá genera mucho aire visual */
  section.section.overflow-hidden{
    overflow: visible !important;
  }

  /* bajar padding general de secciones en esta página */
  .section{
    padding: 28px 0 !important;
  }

  /* Título “Quienes Somos” y subtítulo más compactos */
  .section-title .title{
    margin-bottom: 10px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  /* el h6 tiene margin inline, lo ajustamos con !important */
  .section-title h6{
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* el párrafo justificado en mobile suele verse feo, mejor normal */
  .section-title p.text-muted{
    text-align: left !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }
}

/* 3) Ocultar imagen de “about” en mobile */
@media (max-width: 991.98px){
  .about-img{
    display: none !important;
  }
}

/* 4) PROCESO: menos espacio y ocultar imagen grande en mobile */
@media (max-width: 991.98px){
  .gp-process.section{
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  /* ocultamos la columna de imagen del proceso en mobile */
  .gp-process .col-lg-6.order-1.order-lg-2{
    display: none !important;
  }

  /* menú más compacto */
  .gp-process .process-menu .nav-link{
    padding: 12px 12px !important;
    margin-bottom: 10px !important;
  }
  .gp-process .process-menu h5{
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .gp-process .process-menu p{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* 5) CTA COUNTERS: reducir alto en mobile */
@media (max-width: 991.98px){
  .pricing-counter{
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .pricing-counter .counter-box{
    margin-top: 10px !important;
  }
  .pricing-counter h5{
    font-size: 18px !important;
  }
  .pricing-counter h6{
    font-size: 13px !important;
    margin-top: 6px !important;
  }
}

/* 6) ¿Por qué elegirnos? menos padding y cards más compactas */
@media (max-width: 991.98px){
  .service-box .card-body{
    padding: 16px !important;
  }
  .service-box h5{
    margin-bottom: 6px !important;
  }
  .service-box p{
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
    font-size: 13.5px !important;
  }
}

/* =========================================================
   QUIENES SOMOS – FIX DEFINITIVO MOBILE + CTA
   ========================================================= */

/* =========================
   ABOUT – ajustes mobile
   ========================= */
@media (max-width: 991.98px){

  section.section.overflow-hidden{
    overflow: visible !important;
  }

  .section{
    padding: 28px 0 !important;
  }

  .section-title .title{
    margin-bottom: 10px !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .section-title h6{
    margin-bottom: 16px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .section-title p.text-muted{
    text-align: left !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  .about-img{
    display: none !important;
  }
}

/* =========================
   PROCESS – ajustes mobile
   ========================= */
@media (max-width: 991.98px){

  .gp-process.section{
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  .gp-process .col-lg-6.order-1.order-lg-2{
    display: none !important;
  }

  .gp-process .process-menu .nav-link{
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  .gp-process .process-menu h5{
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  .gp-process .process-menu p{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   QUIENES SOMOS – CTA COUNTER (FIX)
   ========================================================= */

.gp-counter{
  position: relative !important;
  z-index: 2 !important;
}

.gp-counter .pricing-counter{
  display: block !important;
  position: relative !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 991.98px){
  .gp-counter .pricing-counter{
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .gp-counter h5{
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  .gp-counter h6{
    font-size: 13px !important;
    margin-top: 6px !important;
  }
}


/* =========================================================
   QUIENES SOMOS – CTA COUNTER (FIX DEFINITIVO)
   Pegar al FINAL del custom.css
   ========================================================= */

/* Asegura que el bloque quede por encima y no se “pierda” */
.gp-counter{
  position: relative !important;
  z-index: 5 !important;
}

/* Forzamos visibilidad del wrapper en cada breakpoint (por si el theme lo pisa) */
.gp-counter.d-block{ display: block !important; }
.gp-counter.d-none{ display: none !important; }

@media (min-width: 992px){
  .gp-counter.d-lg-block{ display: block !important; }
  .gp-counter.d-lg-none{ display: none !important; }
}

/* Blindaje total del contenedor del CTA */
.gp-counter .pricing-counter{
  display: block !important;
  position: relative !important;

  /* algunos themes lo mueven/colapsan */
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  /* evita “altura 0” o recortes */
  height: auto !important;
  min-height: 1px !important;
  max-height: none !important;
  overflow: visible !important;

  /* evita que quede invisible por opacity/visibility */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile layout + compacto */
@media (max-width: 991.98px){
  .gp-counter .pricing-counter{
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .gp-counter .counter-box{
    margin-top: 0 !important;
  }

  .gp-counter h5{
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .gp-counter h6{
    font-size: 13px !important;
    margin-top: 6px !important;
  }
}


/* ==========================================
   CTA COUNTER – FIX VISUAL MOBILE DEFINITIVO
   ========================================== */

@media (max-width: 991.98px){

  /* Fondo visible sí o sí */
  .gp-counter.d-block.d-lg-none .pricing-counter{
    background: linear-gradient(
      135deg,
      #8f140b 0%,
      #b9160f 60%,
      #d12b1f 100%
    ) !important;

    border-radius: 18px !important;
    padding: 18px 14px !important;

    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
  }

  /* Texto blanco forzado */
  .gp-counter.d-block.d-lg-none h5,
  .gp-counter.d-block.d-lg-none h6{
    color: #ffffff !important;
  }

  /* Ajuste interno */
  .gp-counter.d-block.d-lg-none .counter-box{
    padding: 8px 6px !important;
  }
}


/* =========================================================
   BUYEO – Accordion (FAQ + Filtros) CONSISTENTE con el color ROJO
   ========================================================= */

:root{
  --buyeo-red: #BB1818;
  --buyeo-red-dark: #96160b;
  --buyeo-acc-bg: rgba(187, 24, 24, .06);   /* activo (pálido rojo) */
  --buyeo-acc-border: rgba(17, 24, 39, .10);
  --buyeo-acc-shadow: 0 10px 22px rgba(17, 24, 39, .06);
}

/* 1) Variables bootstrap del accordion (para TODAS las páginas) */
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--buyeo-acc-border);
  --bs-accordion-border-radius: 16px;
  --bs-accordion-inner-border-radius: 16px;

  --bs-accordion-btn-color: #314047;
  --bs-accordion-btn-bg: #fff;

  --bs-accordion-active-color: var(--buyeo-red);
  --bs-accordion-active-bg: var(--buyeo-acc-bg);

  --bs-accordion-btn-focus-border-color: rgba(187, 24, 24, .25);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(187, 24, 24, .10);
}

/* 2) Card look (funciona igual para flush o no flush) */
.accordion .accordion-item{
  background: transparent;
  border: 0;
  margin-bottom: 12px;
}

.accordion .accordion-button{
  border-radius: 16px !important;
  border: 1px solid var(--buyeo-acc-border) !important;
  box-shadow: var(--buyeo-acc-shadow);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Hover suave */
@media (hover:hover){
  .accordion .accordion-button:hover{
    border-color: rgba(187, 24, 24, .22) !important;
    transform: translateY(-1px);
  }
}

/* 3) Estado activo: más “BUYEO” */
.accordion .accordion-button:not(.collapsed){
  background: var(--buyeo-acc-bg) !important;
  border-color: rgba(187, 24, 24, .22) !important;
  box-shadow: 0 14px 26px rgba(187, 24, 24, .10);
}

/* 4) El cuerpo del accordion */
.accordion .accordion-body{
  background: #fff;
  border: 1px solid var(--buyeo-acc-border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 16px 18px;
  color: #495057;
}

/* 5) Icono SIEMPRE visible (chevron) */
.accordion .accordion-button::after{
  opacity: 1 !important;
  display: block !important;
  background-size: 14px 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: auto !important;
  filter: none !important; /* evitamos que “desaparezca” por filtros raros */
}

/* Chevron en rojo (normal) */
.accordion{
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23BB1818'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2396160b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 6) Mobile: tap targets más cómodos */
@media (max-width: 575.98px){
  .accordion .accordion-button{
    padding: 16px 16px !important;
    border-radius: 14px !important;
  }
  .accordion .accordion-body{
    padding: 14px 16px !important;
    border-radius: 0 0 14px 14px !important;
  }
}

/* =========================================================
   BUYEO – CONTACTO
   ========================================================= */
.btn-primary {
border-radius: 32px;
 }


/* =========================
   PERFIL – CANDIDATE DETAILS
   ========================= */

.profile-container {
  width: 700px;
  background-color: #fff;
  padding: 32px;
  border-radius: 32px;
  margin-top: -170px; /* DESKTOP */
}

/* PERFIL mobile */
@media (max-width: 991.98px) {
  section.section > .container.job-post-form.shadow {
    width: 100% !important;  
    margin-top: 16px !important;   
    padding: 20px !important;  
    border-radius: 24px !important; 
  }
}


/* MIS VEHÍCULOS BUSCADOS / OFERTAS en mobile */
@media (max-width: 991.98px) {
  .container.job-post-form-ofertas {
    width: 100% !important;  
    max-width: 100% !important;
    margin-top: 16px !important;   
    padding: 20px !important;   
    border-radius: 24px !important;
  }
}


/* PAGIONAS INTERNAS DEL PERFIL cambios mobile */
@media (max-width: 575.98px) {
  .page-title-box{
    padding-top: 84px !important;  
    padding-bottom: 36px !important;
  }

  .page-title-box .col-md-6{
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .page-title-box h1{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}

/* =========================
   PRELOADER - BUYEO - AZUL para que sirva a ambos
   ========================= */

/* fondo del preloader */
#preloader {
    background-color: #ffffff; /* o #000 si lo querés oscuro */
}

/* los puntitos / líneas */
#status ul li {
    background-color: #0c1a6c !important; /* rojo BUYEO */
}

/* si hay animación con border */
#status ul li::before,
#status ul li::after {
    background-color: #1f2a66 !important;
}