/* ===== PRICING PAGE: Brand mapping (Bootstrap-friendly) ===== */
  :root {
    --bs-primary: var(--ui-brand-primary);
    --bs-primary-rgb: 47, 93, 80; /* for Bootstrap utilities */
  }

  /* Ensure text-primary uses your brand, not Bootstrap blue */
  .text-primary { color: var(--ui-brand-primary) !important; }

  /* Background of the pricing section */
  .container-fluid.service {
    background: var(--ui-bg-main);
  }

  /* Header typography polish */
  .container-fluid.service h1,
  .container-fluid.service .display-4 {
    color: var(--ui-text-primary);
  }
  .container-fluid.service p {
    color: var(--ui-text-secondary);
  }

  /* ===== Tabs (left menu) ===== */
  .container-fluid.service .nav a {
    display: block;
    text-decoration: none;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-bg-card);
    color: var(--ui-text-primary);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }

  .container-fluid.service .nav a:hover {
    transform: translateY(-1px);
    border-color: var(--ui-brand-soft);
    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  }

  .container-fluid.service .nav a.active {
    border-color: var(--ui-brand-primary);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    position: relative;
  }

  .container-fluid.service .nav a.active::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: var(--ui-accent-gold);
  }

  /* ===== Service items (carousel cards) ===== */
  .service-item {
    border-radius: 18px;
    overflow: hidden;
    background: var(--ui-bg-card);
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
    border: 1px solid var(--ui-border);
  }

  .service-item img {
    filter: saturate(1.03) contrast(1.02);
  }

  /* Replace the template border block feel */
  .service-item .border.border-top-0 {
    border: 0 !important;
    border-top: 1px solid var(--ui-border) !important;
    position: relative;
  }

  /* Tiny premium accent line */
  .service-item .border.border-top-0::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(201, 162, 77, 0.55); /* gold, subtle */
  }

  /* Titles and prices */
  .service-item h4 {
    color: var(--ui-text-primary);
  }
  .service-item p {
    color: var(--ui-text-secondary);
  }

  /* Your dynamic price "Desde —" should pop but not scream */
  .service-item h4[id^="precio"] {
    color: var(--ui-brand-primary);
  }

  /* ===== Buttons ===== */
  .btn-primary {
    background-color: var(--ui-brand-primary);
    border-color: var(--ui-brand-primary);
  }
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--ui-brand-hover);
    border-color: var(--ui-brand-hover);
  }

  /* A friendlier secondary (still secondary, but premium) */
  .btn-secondary {
    background-color: #EEF1F0;
    border-color: #EEF1F0;
    color: var(--ui-text-primary);
  }
  .btn-secondary:hover,
  .btn-secondary:focus {
    background-color: #E5EAE8;
    border-color: #E5EAE8;
  }

  /* Optional: your btn-custom should become brand-outline */
  .btn-custom {
    background: transparent;
    border: 1px solid var(--ui-brand-primary);
    color: var(--ui-brand-primary);
  }
  .btn-custom:hover {
    background: var(--ui-brand-primary);
    color: #fff;
  }

  /* ===== Modals: match portal palette ===== */
  .modal-content {
    border-radius: 18px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  }

  .modal-header .modal-title {
    color: var(--ui-text-primary);
  }

  .modal-body {
    color: var(--ui-text-secondary);
  }

  .modal-body strong,
  .modal-body .text-dark {
    color: var(--ui-text-primary) !important;
  }

  .alert-danger {
    background-color: rgba(178, 58, 72, 0.10);
    color: var(--ui-danger);
    border-color: rgba(178, 58, 72, 0.20);
  }

  /* Office pick prices: make Mediana/Premium visually distinct */
  .oficinaMediana { color: var(--ui-brand-primary); font-weight: 700; }
  .oficinaPremium { color: var(--ui-accent-gold); font-weight: 800; }

  /* ===== Owl Carousel layout stability ===== */
  .service-carousel .owl-stage-outer {
    padding: 10px 0;        
    overflow: hidden;
  }

  .service-carousel .owl-item {
    display: block; 
     padding: 10px;    
  }

  .service-carousel .service-item {
    width: 100%;
    height: 100%;
  }

  #pricingTabs{
    position: relative;
    z-index: 2;
  }

  .service-carousel{
    position: relative;
    z-index: 1;
  }

  .service-item img {
    display: block;
    width: 100%;
    height: 240px;            /* pick a consistent height */
    object-fit: cover;
  }

  /* The text block should fill naturally */
  .service-item .border.border-top-0 {
    background: var(--ui-bg-card);
  }

  /* CDO Cards: same “index.php cards” feel */
  .cdo-card{
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
  }

  .cdo-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
  }

  .cdo-card-media{
    height: 190px;
    background: #000;
  }

  .cdo-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cdo-card-body{
    padding: 18px;
  }

  .cdo-card-title{
    color: var(--ui-text-primary);
    font-weight: 800;
  }

  .cdo-card-text{
    color: var(--ui-text-secondary);
  }

  .cdo-card-price{
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--ui-brand-primary);
    line-height: 1.1;
  }

  /* keeps carousel inside its column */
    .cdo-services-pane {
      overflow: hidden;
    }

    /* ensure nav column stays clickable */
    .cdo-services-nav {
      position: relative;
      z-index: 5;
    }

    /* carousel column under the nav if overlap happens */
    .cdo-services-content {
      position: relative;
      z-index: 1;
    }

    /* prevent huge width spill if owl mis-measures */
    .cdo-carousel .owl-stage-outer {
      overflow: hidden !important;
    }











}