:root{
    --mx-ink:#1f2937; --mx-muted:#6b7280;
    --mx-primary:#15616d; --mx-secondary:#ff7d00; --mx-accent:#ffb100; --mx-burnt:#78290f;
    --mx-cream:#fffaf3; --mx-bg:#0e0f10;
  }
  .container-xxl{padding:24px}
 body {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
  min-height: 100vh;
  min-height: 100%;

  /* Fondo base animado con gradiente */
  background: linear-gradient(-45deg, #833AB4, #FD1D1D, #FCB045, #FF6B6B, #4ECDC4);
  background-size: 400% 400%;
  animation: fondoAnimado 15s ease infinite;

  /* Añadir textura sutil de talavera */
  position: relative;
  overflow: auto;
}
/* Animación del fondo */
@keyframes fondoAnimado {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M50,15 C60,5 80,10 85,25 C90,40 80,60 65,65 C50,70 30,60 25,45 C20,30 30,20 50,15 Z'/%3E%3C/svg%3E");
  background-size: 150px;
  animation: patrones 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes patrones {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 150px 150px;
  }
}
  
  
  
  
    :root{
      --ink:#1f2937; --cream:#faf7f2; --jade:#0b7d6e; --jadeL:#13a094;
      --magenta:#c2185b; --terracotta:#d86b3c; --amber:#ffb300; --muted:#6b7280;
      --card-r:18px; --shadow:0 10px 24px rgba(2, 22, 19, .08);
    }
 
    .navbar{ backdrop-filter: blur(8px); background: rgba(250,247,242,.6); border-bottom:1px solid #efe9df }
    .navbar .nav-link{ font-weight:600; color:var(--ink) } .navbar .nav-link:hover{ color:var(--jade) }

    /* HERO */
    .hero{ position: relative; min-height: 88vh; display:grid; place-items:center; overflow:hidden; color:#fff;
      background: linear-gradient(120deg, rgba(11,125,110,.85), rgba(194,24,91,.75)),
                  url('../../assets/images/village.png') center/cover no-repeat; isolation:isolate }
    .hero::after{ content:""; position:absolute; inset:0; opacity:.18; pointer-events:none;
      background-image:
        repeating-linear-gradient(45deg, #fff, #fff 2px, transparent 2px, transparent 10px),
        repeating-linear-gradient(-45deg, #fff, #fff 2px, transparent 2px, transparent 10px);
      mix-blend-mode: soft-light; }
    .hero-content{ position:relative; z-index:2; max-width: 980px; padding: 24px; text-align:center }
    .hero h1{ font-weight: 900; letter-spacing:.3px; line-height:1.08 } .hero p{ opacity:.98 }

    /* blobs parallax */
    .blob{ position:absolute; border-radius:50%; filter:blur(20px); opacity:.3; z-index:1; mix-blend-mode:screen; will-change: transform }
    .blob.b1{ width:38vmax; height:38vmax; background:#3fe0c9; top:-10vmax; left:-6vmax }
    .blob.b2{ width:30vmax; height:30vmax; background:#ff9ec8; bottom:-8vmax; right:-10vmax }

    /* Botones */
    .btn-gradient{
      background: linear-gradient(135deg, var(--jade) 0%, var(--jadeL) 100%);
      border:0; color:#fff; font-weight:700; border-radius:12px; padding:.82rem 1.12rem;
      box-shadow: var(--shadow); transition: transform .15s ease;
    }
    .btn-gradient:hover{ transform: translateY(-2px) }
    .btn-outline-light-strong{border:2px solid #ffffffcc; color:#fff; font-weight:700; border-radius:12px; padding:.82rem 1.12rem}

    /* Marquee */
    .rb-marquee{ overflow:hidden; white-space:nowrap; mask-image: linear-gradient(90deg,transparent,black 8%, black 92%, transparent) }
    .rb-marquee-track{ display:inline-block; animation: rb-marquee 24s linear infinite; will-change: transform }
    @keyframes rb-marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    .chip{ display:inline-flex; gap:.5rem; align-items:center; padding:.55rem .9rem; margin:.35rem 1.2rem;
      border-radius:999px; background:#ffffffd9; color:var(--ink); font-weight:700; box-shadow: var(--shadow) }

    /* Cards & sections */
    .section{ padding: 64px 0 } .title{ font-weight:900; letter-spacing:.2px } .subtitle{ color:var(--muted) }
    .cat-card{ border:0; border-radius: var(--card-r); box-shadow: var(--shadow); background:#fff; transition: transform .25s ease, box-shadow .25s ease; overflow:hidden }
    .cat-card:hover{ transform: translateY(-6px); box-shadow:0 18px 36px rgba(2,22,19,.14) }
    .cat-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:26px; background: linear-gradient(135deg, var(--terracotta), #e07c4f) }
    .cat-icon.jade{ background: linear-gradient(135deg, var(--jade), var(--jadeL)) } .cat-icon.magenta{ background: linear-gradient(135deg, var(--magenta), #e23b7b) }
    .tag{display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem}
    .tag.jade{ background:#d7fff6; color:#0b7d6e } .tag.magenta{ background:#ffd9ea; color:#a01347 } .tag.terracotta{ background:#ffe9c7; color:#7a4b00 }

    .exp-card{ border:0; border-radius: var(--card-r); box-shadow: var(--shadow); overflow:hidden; background:#fff; transition: transform .2s ease, box-shadow .2s ease; will-change: transform }
    .exp-img{ aspect-ratio: 16/10; object-fit: cover; width:100% }
    .price{ font-weight:800; color:var(--jade) } .rating{ color:#f6b300; font-weight:800 }

    /* FAQ */
    .faq{ border-radius:14px; background:#fff; box-shadow: var(--shadow) }
    .faq button{ width:100%; text-align:left; background:transparent; border:0; padding:16px; font-weight:700 }
    .faq .content{ overflow:hidden; max-height:0; transition:max-height .36s ease; padding:0 16px }
    .faq.open .content{ max-height:220px; padding: 0 16px 16px }

    /* CTA */
    .cta{ position:relative; border-radius: var(--card-r); color:#fff; overflow:hidden;
      background: linear-gradient(70deg, var(--jade) 0%, var(--jadeL) 35%, var(--magenta) 120%); box-shadow: var(--shadow) }
    .cta::after{ content:""; position:absolute; inset:0; opacity:.13;
      background-image:
        repeating-linear-gradient(45deg, #fff, #fff 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(-45deg, #fff, #fff 2px, transparent 2px, transparent 8px);
      mix-blend-mode: soft-light; }

    /* Reveal */
    .rb-reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform }
    .rb-show{ opacity:1; transform: translateY(0) }

    /* Accesibilidad foco */
    .show-focus-outlines :focus{ outline: 3px solid #13a094; outline-offset:2px }
    @media (prefers-reduced-motion:reduce){ .rb-marquee-track{ animation:none } }
    
    
.navbar {
    backdrop-filter: blur(8px);
    background: rgb(0 0 0);
    border-bottom: 1px solid #000000;
    color: white;
}

.btn-gradient {
    background: linear-gradient(135deg, #7d0b0b 0%, #cd8107 100%);
    border: 0;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: transform .15s ease;
    text-decoration: none;
}

.btn-outline-light-strong {
    border: 2px solid #ffffffcc;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
}
.navbar .nav-link {
    font-weight: 600;
    color: #ffffff;
}
    
    
      /* Profile card */
    .profile-tilt {
        background: #fff;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        padding: 1.5rem;
        text-align: center;
        background: rgb(255 136 0 / 68%);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10.3px);
        -webkit-backdrop-filter: blur(10.3px) !important;
        border: 1px solid rgba(255, 255, 255, 0.51);
    }
      .profile-tilt img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1rem;
      }
      .profile-tilt .name {
        font-weight: 700;
        margin-bottom: 0.25rem;
      }
      .profile-tilt .role {
        font-size: 0.85rem;
        color: var(--pmx-muted);
        margin-bottom: 0.5rem;
      }
      .profile-tilt .tags span {
        display: inline-block;
        background: var(--pmx-terracotta);
        color: #fff;
        padding: 0.25rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.7rem;
        margin: 0.15rem;
      }
      .profile-tilt .rating-stars i {
        color: #d0d4d7;
        margin-right: 0.1rem;
        font-size: 1.25rem;
      }
      .profile-tilt .rating-stars i.active {
        color: #ffc107;
      }
      .profile-tilt .btn {
        margin-top: 1rem;
      }
      
.bg-ocr {
    --bs-bg-opacity: 1;
    background-color: rgb(129 4 0) !important;
    padding: 2pc;
    
    h2 , p{
    color: #fff !important;
  }
    
}
.typed-text {
        display: inline;
        font-size: 2.5rem;
        font-weight: 800;
      }
      
      

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #c52902 #000000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 14px;
  }

  *::-webkit-scrollbar-track {
    background: #000000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #c52902;
    border-radius: 10px;
    border: 3px solid #000000;
  }
    
.brand{display:flex; gap:.6rem; align-items:center;}
  .brand-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background: conic-gradient(from 210deg at 50% 50%, #ffb100, #ff7d00, #15616d, #ffb100);
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }