@charset "UTF-8";

/* =========================================================
   Colinas del Oso: Official Theme (Bootstrap 5.3 override)
   Source of truth: ui-palette tokens (--ui-*)
   ========================================================= */

/* ---------------------------------------------------------
   1) UI tokens (ideally these live in ui-palette.css)
   If you already load ui-palette.css, you can remove this block.
   --------------------------------------------------------- */
  :root{

    .cdo-theme {

      --ui-bg-main: #F6F7F4;
      --ui-bg-card: #FFFFFF;
      --ui-border: #D6DBDF;

      --ui-text-primary: #1F2933;
      --ui-text-secondary: #5F6B7A;
      --ui-text-muted: #9AA5B1;

      --ui-brand-primary: #2F5D50;
      --ui-brand-hover: #244B40;
      --ui-brand-light: #8FB7A2;

      --ui-accent-gold: #C9A24D;
      --ui-accent-soft: #F2E3B3;

      --ui-success: #2E7D32;
      --ui-info: #4A6FA5;
      --ui-warning: #E0A800;
      --ui-danger: #B23A48;
      --cdo-ink:#F6F7F4;

      --ui-focus-ring: rgba(143,183,162,.45);

      /* RGB helpers */
      --ui-bg-main-rgb: 246,247,244;
      --ui-bg-card-rgb: 255,255,255;
      --ui-border-rgb: 214,219,223;

      --ui-text-primary-rgb: 31,41,51;
      --ui-text-secondary-rgb: 95,107,122;
      --ui-text-muted-rgb: 154,165,177;

      --ui-brand-primary-rgb: 47,93,80;
      --ui-brand-hover-rgb: 36,75,64;
      --ui-brand-light-rgb: 143,183,162;

      --ui-accent-gold-rgb: 201,162,77;
      --ui-success-rgb: 46,125,50;
      --ui-info-rgb: 74,111,165;
      --ui-warning-rgb: 224,168,0;
      --ui-danger-rgb: 178,58,72;



    /* ---------------------------------------------------------
       2) Bootstrap variable mapping (UI palette -> Bootstrap)
       --------------------------------------------------------- */

      --bs-body-bg: var(--ui-bg-main);
      --bs-body-bg-rgb: var(--ui-bg-main-rgb);
      --bs-body-color: var(--ui-text-primary);
      --bs-body-color-rgb: var(--ui-text-primary-rgb);

      --bs-emphasis-color: var(--ui-text-primary);
      --bs-emphasis-color-rgb: var(--ui-text-primary-rgb);

      --bs-secondary-color: var(--ui-text-secondary);
      --bs-secondary-color-rgb: var(--ui-text-secondary-rgb);

      --bs-tertiary-color: var(--ui-text-muted);
      --bs-tertiary-color-rgb: var(--ui-text-muted-rgb);

      --bs-heading-color: var(--ui-text-primary);

      --bs-border-color: var(--ui-border);
      --bs-border-color-translucent: rgba(var(--ui-border-rgb), .55);

      --bs-light: var(--ui-bg-card);
      --bs-light-rgb: var(--ui-bg-card-rgb);

      --bs-dark: var(--ui-text-primary);
      --bs-dark-rgb: var(--ui-text-primary-rgb);

      --bs-primary: var(--ui-brand-primary);
      --bs-primary-rgb: var(--ui-brand-primary-rgb);

      --bs-secondary: var(--ui-text-secondary);
      --bs-secondary-rgb: var(--ui-text-secondary-rgb);

      --bs-success: var(--ui-success);
      --bs-success-rgb: var(--ui-success-rgb);

      --bs-info: var(--ui-info);
      --bs-info-rgb: var(--ui-info-rgb);

      --bs-warning: var(--ui-warning);
      --bs-warning-rgb: var(--ui-warning-rgb);

      --bs-danger: var(--ui-danger);
      --bs-danger-rgb: var(--ui-danger-rgb);

      --bs-link-color: var(--ui-brand-primary);
      --bs-link-color-rgb: var(--ui-brand-primary-rgb);
      --bs-link-hover-color: var(--ui-brand-hover);
      --bs-link-hover-color-rgb: var(--ui-brand-hover-rgb);

      --bs-focus-ring-color: var(--ui-focus-ring);
      --bs-focus-ring-width: .25rem;
      --bs-focus-ring-opacity: 1;

      --bs-primary-bg-subtle: rgba(var(--ui-brand-primary-rgb), .12);
      --bs-success-bg-subtle: rgba(var(--ui-success-rgb), .12);
      --bs-info-bg-subtle: rgba(var(--ui-info-rgb), .12);
      --bs-warning-bg-subtle: rgba(var(--ui-warning-rgb), .14);
      --bs-danger-bg-subtle: rgba(var(--ui-danger-rgb), .12);

      --bs-primary-border-subtle: rgba(var(--ui-brand-primary-rgb), .28);
      --bs-success-border-subtle: rgba(var(--ui-success-rgb), .28);
      --bs-info-border-subtle: rgba(var(--ui-info-rgb), .28);
      --bs-warning-border-subtle: rgba(var(--ui-warning-rgb), .32);
      --bs-danger-border-subtle: rgba(var(--ui-danger-rgb), .28);

      --bs-primary-text-emphasis: var(--ui-brand-hover);
      --bs-success-text-emphasis: #1E5A24;
      --bs-info-text-emphasis: #2E4A71;
      --bs-warning-text-emphasis: #6A4D00;
      --bs-danger-text-emphasis: #7A1E28;



    }
  
}

/* ---------------------------------------------------------
   3) Global base polish (applies on ALL breakpoints)
   --------------------------------------------------------- */

    /* Spinner: JS toggles .show, CSS obeys */
      .cdo-theme  #spinner {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
      }

      .cdo-theme  #spinner.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .25s ease;
      }

      .btn-light 

        color:-ui-brand-primary;
        
      }

    .cdo-theme #spinner:not(.show){
      display: none;
    }

    /* Spinner overlay - consistent everywhere */
    .spinner-overlay{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(246,247,244,.75); /* ui-bg-main-ish */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .spinner-overlay.show{ display: flex; }

    .spinner-inner{
      background: var(--ui-bg-card, #fff);
      border: 1px solid var(--ui-border, #d6dbdf);
      border-radius: 18px;
      padding: 18px 22px;
      box-shadow: 0 12px 28px rgba(0,0,0,.08);
    }



    /* General in Page */
      .cdo-theme html, body { height: 100%; }

      .cdo-theme body{
        background: var(--ui-bg-main);
        color: var(--ui-text-primary);
      }

      .cdo-theme a{ color: var(--ui-brand-primary); }
      .cdo-theme a:hover, a:focus{ color: var(--ui-brand-hover); }

      .cdo-theme .card{
        background: var(--ui-bg-card);
        border-color: var(--ui-border);
        box-shadow: 0 4px 14px rgba(0,0,0,0.04);
      }

      .cdo-theme .badge{ font-weight: 600; }

      .form-control,
      .cdo-theme .form-select{
        border-color: var(--ui-border);
      }

      .form-control:focus,
      .cdo-theme .form-select:focus{
        border-color: var(--ui-brand-light) !important;
        box-shadow: 0 0 0 .2rem var(--ui-focus-ring) !important;
      }

      /* Buttons */
      .cdo-theme .btn-primary{
        background-color: var(--ui-brand-primary) !important;
        border-color: var(--ui-brand-primary) !important;
        color: #fff !important;
      }
      .btn-primary:hover,
      .cdo-theme .btn-primary:focus{
        background-color: var(--ui-brand-hover) !important;
        border-color: var(--ui-brand-hover) !important;
      }

      .cdo-theme .btn-outline-primary{
        color: var(--ui-brand-primary) !important;
        border-color: var(--ui-brand-primary) !important;
      }
      .btn-outline-primary:hover,
      .cdo-theme .btn-outline-primary:focus{
        background-color: var(--ui-brand-primary) !important;
        border-color: var(--ui-brand-primary) !important;
        color: #fff !important;
      }

      /* Alerts (use UI palette, not undefined vars) */
      .cdo-theme .alert-success{
        background-color: rgba(var(--ui-success-rgb), .10) !important;
        border-color: rgba(var(--ui-success-rgb), .20) !important;
        color: var(--ui-success) !important;
      }
      .cdo-theme .alert-danger{
        background-color: rgba(var(--ui-danger-rgb), .10) !important;
        border-color: rgba(var(--ui-danger-rgb), .20) !important;
        color: var(--ui-danger) !important;
      }
      .cdo-theme .alert-warning{
        background-color: rgba(var(--ui-warning-rgb), .12) !important;
        border-color: rgba(var(--ui-warning-rgb), .22) !important;
        color: #6A4D00 !important;
      }

      .cdo-phone-modal{
        max-width: 360px;      /* tweak: 320–420 */
      }

      .cdo-ratio-9x16{
        position: relative;
        width: 100%;
        padding-top: 177.7778%; /* 16/9 * 100% */
        background: #000;       /* optional: letterbox background */
        overflow: hidden;
      }

      .cdo-ratio-9x16 > video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;      /* fills the phone frame */
        display: block;
      }


      .footer .footer-link{
        display: inline-block;
        color: rgba(255,255,255,.70);
        text-decoration: none;
        margin-bottom: .35rem;
        transition: color .15s ease, text-decoration-color .15s ease;
      }

      .footer .footer-link:hover,
      .footer .footer-link:focus{
        color: #fff;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(255,255,255,.85);
      }


      /* ================================
   CDO Buttons (consistent CTAs)
   ================================ */

/* Primary CTA */
.btn-cdo-primary{
  background: var(--ui-brand-primary);
  border-color: var(--ui-brand-primary);
  color: #fff;
  border-radius: 1rem;            /* matches your rounded-4 vibe */
  padding: .65rem 1.05rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.btn-cdo-primary:hover,
.btn-cdo-primary:focus{
  background: var(--ui-brand-hover);
  border-color: var(--ui-brand-hover);
  color: #fff;
}
.btn-cdo-primary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--ui-focus-ring);
}

/* Secondary CTA */
.btn-cdo-secondary{
  background: #fff;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-primary);
  border-radius: 1rem;
  padding: .65rem 1.05rem;
  font-weight: 700;
}
.btn-cdo-secondary:hover,
.btn-cdo-secondary:focus{
  background: var(--ui-bg-main);
  color: var(--ui-text-primary);
  border-color: var(--ui-border);
}
.btn-cdo-secondary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--ui-focus-ring);
}

/* Small link-style CTA (for “more info”) */
.cdo-link{
  color: var(--ui-brand-primary);
  text-decoration: none;
  font-weight: 700;
}
.cdo-link:hover{
  color: var(--ui-brand-hover);
  text-decoration: underline;
}

/* Optional: icon button look */
.btn-cdo-pill{
  border-radius: 999px;
}



    /* Barra Imortants Pantalla Grandes*/
          .cdo-theme .header-top{
            min-height: 170px;
            background: var(--ui-brand-primary) !important;
          }
          .cdo-theme .header-top .topbar{
            background: rgba(255,255,255,.06) !important;
          }
          .header-top .navbar-brand h1.text-primary,
          .cdo-theme .header-top .navbar-brand-2 h1.text-primary{
            color: var(--ui-text-primary) !important;
            font-size: 1.6em !important;
            padding-top: 15px;
          }
          .header-top .navbar-brand img,
          .cdo-theme .header-top .navbar-brand-2 img{
            height: 70px;
            width: auto;
          }

          .cdo-theme .navbar-brand::before{          
              content: "";
              position: absolute !important;
              top: -60px !important;
              left: -30px !important;
              overflow: hidden !important;
              height: 300px !important;
              width: 400px !important;
              padding-bottom: 200px !important;
              padding-right: 300px !important;
              background-color: white; !important;
              transform: rotate(-18deg) !important;
              z-index:-1 !important;
            }

          .cdo-theme .navbar-brand::after{
            content: "" !important;
            position: absolute !important;
            overflow: hidden !important;
            width: 5px !important;
            height: 200px !important;
            top: -25px !important;
            left: 258px !important;
            background-color: var(--ui-brand-primary) !important;
            transform: rotate(-18deg) !important;
            z-index:-1 !important;
          }

          .cdo-theme .header-top .dropdown-item{
            color: var(--ui-text-primary) !important;
            font-weight: 650;
            border-radius: 10px;
            padding: 10px 12px;
          }


          /* Dropdown */
            .cdo-theme .header-top .dropdown-menu{
              background: var(--ui-brand-primary);
              border: 1px solid rgba(var(--ui-border-rgb), .9);
              border-radius: 14px;
              box-shadow: 0 18px 60px rgba(0,0,0,.18);
              padding: 10px;
            }
            .cdo-theme .header-top .dropdown-divider{
              border-color: rgba(var(--ui-border-rgb), .9);
              border-top-color: rgba(255,255,255,.18);
            }
            .header-top .dropdown-item:hover,
            .cdo-theme .header-top .dropdown-item:focus{
              background: rgba(var(--ui-brand-light-rgb), .20);
              color: var(--ui-text-primary) !important;
            }

    /* Topbar strip */

      .cdo-theme .header-top .topbar{
        background: rgba(255,255,255,.06) !important;
        padding-left: 30px;
      }

    /* “text-muted” inside topbar becomes readable on dark bg */
      .cdo-theme .header-top .topbar a.text-muted{
        color: rgba(255,255,255,.88) !important;
      }
      .header-top .topbar a.text-muted:hover,
      .cdo-theme .header-top .topbar a.text-muted:focus{
        color: var(--ui-accent-gold) !important;
      }
      .cdo-theme .header-top .topbar .border-end.border-primary{
        border-color: rgba(255,255,255,.18) !important;
      }

      .header-top .topbar a.btn.text-primary,
      .cdo-theme .header-top .topbar i.text-primary{
        color: var(--ui-accent-gold) !important;
      }

    /* Decorative ribbons behind brand (fixed syntax) */

      /* Nav links */
        .header-top .navbar .nav-link,
        .header-top .navbar .navbar-brand,
        .cdo-theme .header-top .navbar .navbar-text{
          color: rgba(255,255,255,.92) !important;
          font-weight: 700;
          opacity: 1 !important;
        }

        .header-top .navbar .nav-link:hover,
        .cdo-theme .header-top .navbar .nav-link:focus{
          color: var(--ui-accent-gold) !important;
        }

        .header-top .navbar .nav-link.active,
        .cdo-theme .header-top .navbar .nav-link[aria-current="page"]{
          color: #fff !important;
          text-decoration: underline;
          text-underline-offset: 7px;
          text-decoration-thickness: 2px;
        }
      /* Toggler */
        .cdo-theme .header-top .navbar-toggler{
          border-color: rgba(255,255,255,.30) !important;
        }
        .cdo-theme .header-top .navbar-toggler .fa-bars{
          color: #fff !important;
        }
        .cdo-theme .header-top .navbar-toggler:focus{
          box-shadow: 0 0 0 .2rem var(--ui-focus-ring) !important;
        }
      /* Badge in the nav */
        .cdo-theme .header-top .badge.bg-light.text-dark.border{
        background: rgba(255,255,255,.92) !important;
        border-color: rgba(255,255,255,.35) !important;
        color: var(--ui-text-primary) !important;
        font-weight: 800;
      }


/* ---------------------------------------------------------
   4) Responsive adjustments (ONLY layout changes)
   --------------------------------------------------------- */

      /* Mobile + small screens */
        .cdo-theme @media (max-width: 575.98px){

            .navbar .navbar-collapse {
              background: var(--ui-brand-primary);
              border: 1px solid var(--ui-border);
              border-radius: 1rem;
              padding: .75rem;
              margin-top: .5rem;
            }

            /* Links inside the panel */
            .navbar .navbar-collapse .nav-link {
              color: #fff;
            }
            .navbar .navbar-collapse .nav-link:hover,
            .navbar .navbar-collapse .nav-link:focus {
              color: #fff;
              opacity: .92;
            }

            /* Active link */
            .navbar .navbar-collapse .nav-link.active {
              color: #fff;
              font-weight: 600;
            }

            /* Dropdown menu (inside collapsed panel) */
            .navbar .navbar-collapse .dropdown-menu {
              background: var(--ui-brand-primary);
              border-color: rgba(255,255,255,.18);
            }

          







        .cdo-theme .navbar-collapse{
          background-color: var(--ui-brand-primary);
          border-radius: 16px;
          padding: 12px;
        }
        .cdo-theme .navbar-collapse .navbar-nav{
          align-items: center;
        }
        .cdo-theme .header-top{
            min-height: 110px;
            background: var(--ui-brand-primary) !important;
          }
        .header-top .navbar-brand h1.text-primary,
        .cdo-theme .header-top .navbar-brand-2 h1.text-primary{
          margin-left: 1%;
          top: 1px;
          font-size: 1.6em !important;
          padding-top: 15px;
          padding-right: 70px;
          bottom: 10px;
          left: 20px;
        }
        .header-top .navbar-brand img,
        .cdo-theme .header-top .navbar-brand-2 img{
          height:30px; 
          width:auto;
        }

        /* Dropdown */
        .cdo-theme .header-top .dropdown-menu{
          background: var(--ui-brand-primary);
          border: 1px solid rgba(var(--ui-border-rgb), .9);
          border-radius: 14px;
          box-shadow: 0 18px 60px rgba(0,0,0,.18);
          padding: 10px;
        }

        .cdo-theme .navbar-brand::before{ 
          content: "";
          position: absolute !important;
          overflow: hidden !important;
          width: 400px !important;
          padding-bottom: 200px !important;
          padding-right: 150px !important;
          height: 300px !important;
          top: -60px !important;
          left: 1px !important;
          background-color: white; !important;
          transform: rotate(-18deg) !important;
          z-index:-1 !important;
        }
        .cdo-theme .navbar-brand::after{
          content: "" !important;
          position: absolute !important;
          overflow: hidden !important;
          width: 5px !important;
          height: 200px !important;
          top: -25px !important;
          right: 8px;
          left: 258px !important;
          background-color: var(--bs-primary) !important;
          transform: rotate(-18deg) !important;
          z-index:-1 !important;
        }

        .cdo-theme .header-top::after{
          background-color: var(--ui-brand-primary);
        }

      }

      /* Desktop */
        .cdo-theme @media (min-width: 992px){

          .cdo-theme .header-top{
            min-height: 170px;
            background: var(--ui-brand-primary) !important;
          }
          .cdo-theme .header-top .topbar{
            background: rgba(255,255,255,.06) !important;
          }
          .header-top .navbar-brand h1.text-primary,
          .cdo-theme .header-top .navbar-brand-2 h1.text-primary{
            color: var(--ui-text-primary) !important;
            font-size: 1.6em !important;
            padding-top: 15px;
          }
          .header-top .navbar-brand img,
          .cdo-theme .header-top .navbar-brand-2 img{
            height: 70px;
            width: auto;
          }
          .cdo-theme .header-top .dropdown-item{
            color: var(--ui-text-primary) !important;
            font-weight: 650;
            border-radius: 10px;
            padding: 10px 12px;
          }


          /* Dropdown */
            .cdo-theme .header-top .dropdown-menu{
              background: var(--ui-brand-primary);
              border: 1px solid rgba(var(--ui-border-rgb), .9);
              border-radius: 14px;
              box-shadow: 0 18px 60px rgba(0,0,0,.18);
              padding: 10px;
            }
            .cdo-theme .header-top .dropdown-divider{
              border-color: rgba(var(--ui-border-rgb), .9);
              border-top-color: rgba(255,255,255,.18);
            }
            .header-top .dropdown-item:hover,
            .cdo-theme .header-top .dropdown-item:focus{
              background: rgba(var(--ui-brand-light-rgb), .20);
              color: var(--ui-text-primary) !important;
            }

            .cdo-theme .navbar-brand::before{          
              content: "";
              position: absolute !important;
              overflow: hidden !important;
              width: 400px !important;
              padding-bottom: 200px !important;
              padding-right: 300px !important;
              height: 300px !important;
              top: -60px !important;
              left: -30px !important;
              background-color: white; !important;
              transform: rotate(-18deg) !important;
              z-index:-1 !important;
            }
            .cdo-theme .navbar-brand::after{
              content: "" !important;
              position: absolute !important;
              overflow: hidden !important;
              width: 5px !important;
              height: 200px !important;
              top: -25px !important;
              left: 258px !important;
              background-color: var(--ui-brand-primary) !important;
              transform: rotate(-18deg) !important;
              z-index:-1 !important;
            }




      }