:root{
      --rojo: #C8102E;
      --rojo-oscuro:#6e0d1a;
      --negro:#121212;
      --dorado:#D4AF37;
      --marfil:#f7f1e8;
    }
    body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}
    h1,h2,h3,h4{font-family:"Playfair Display", serif;}

    /* Navbar */
    .navbar-brand img{height:40px;}
    .navbar-glass{backdrop-filter:saturate(180%) blur(10px); background-color:rgba(18,18,18,.35);} 
    .navbar.scrolled{background: #1c1c1c !important; box-shadow:0 6px 20px rgba(0,0,0,.35);} 

    /* Hero */
    .hero{
      min-height: 86vh;
      color:#fff;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.7)), url('https://mariachisprecio.com.mx/imagenes/29.jpg') center/cover no-repeat fixed;
      position:relative;
      display:flex; align-items:center; 
    }
    .hero .badge-gold{background:rgba(212,175,55,.15); color:#fff; border:1px solid rgba(212,175,55,.6);} 
    .hero .cta-btn{padding:.9rem 1.2rem; font-weight:700; border-radius:1rem;}
    .btn-gold{background:var(--dorado); border:none; color:#121212;}
    .btn-gold:hover{filter:brightness(.95);} 

    /* Section decorations */
    .section-heading{position:relative; display:inline-block;}
    .section-heading:after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px; width:90px; height:3px; background:linear-gradient(90deg, transparent, var(--dorado), transparent);} 

    /* Cards de precios */
    .price-card{border:0; border-radius:1.25rem; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.08);} 
    .price-card .topbar{height:6px; background:linear-gradient(90deg, var(--dorado), #ffd36b);} 
    .price-card .icon{font-size:1.4rem; color:var(--dorado);} 
    .price{font-size:2rem; font-weight:800;}

    /* Zonas */
    .zones-list .badge{background:rgba(200,16,46,.12); color:#7a0f1e; border:1px solid rgba(200,16,46,.25);} 

    /* Testimonios */
    .testimonial-card{border:0; border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.08);} 

    /* FAQ */
    .accordion-button{font-weight:600;}
    .accordion-button:not(.collapsed){background:rgba(212,175,55,.08); color:#000;}

    /* Footer */
    footer{background:#0f0f0f; color:#ddd;}
    footer a{color:#ddd; text-decoration:none;}
    footer a:hover{color:#fff;}

    /* Floating WhatsApp */
    .wa-float{position:fixed; right:16px; bottom:16px; z-index:1040;}
    .wa-float .btn{border-radius:999px; padding:.9rem 1rem; box-shadow:0 16px 30px rgba(0,0,0,.25);} 

    /* Utility */
    .bg-rojo{background:var(--rojo);} .bg-oscuro{background:#1c1c1c;} .text-gold{color:var(--dorado);} .bg-marfil{background:var(--marfil);} 

    #precios {
        background: #CC6633
    }
    #precios .section-heading {
        color: #fff
    }
    #precios .mt-3 {
        color: #fff!important
    }
    .bg-rojo {
        background: #CC6633
    }
    .rounded-pill {
        background: #fff!important;
        font-size: 1em
    }
    .btn-gold.cta-btn {
        color: #fff;
        background: #FF0000
    }

    .btn-gold.cta-btn:hover {
        color: #fff;
        background: #be0202
    }
    .btn-gold {
        color: #fff;
        background: #FF0000
    }

    .btn-gold:hover{
        color: #fff;
        background: #be0202
    }
    .card-body {
        text-align: center
    }
    #faq {
        background: #FE9900
    }
    .hero .badge-gold {
        background: #FE9900!important
    }

    .gap-2 img {
        height: 80px;
        border-radius: 5px
    }

    .price-card .icon{
      background:#1C1C1C;
      border-radius:50%;
      width:80px;
      height:80px;
      font-size:2rem;
      display:flex;
      align-items:center; 
      justify-content:center; 
      margin:0 auto; 
      margin-bottom: 15px
    }

    .rounded-pill a{
        color: #7a0f1e;
        text-decoration: none;
    }

    .rounded-pill a:hover{
        text-decoration: underline;
    }

    /* =========================
       SECCIÓN PRECIOS
    ========================= */

    .tabla-precios{
      display:flex;
      gap:25px;
      margin:35px 0 45px 0;
      flex-wrap:wrap;
      justify-content:center;
    }

    .precio-card{
      flex:1 1 260px;
      background:#fff;
      padding:30px 25px;
      border-radius:14px;
      text-align:center;
      box-shadow:0 12px 30px rgba(0,0,0,.08);
      transition:all .25s ease;
      border:1px solid rgba(0,0,0,.05);
    }

    .precio-card:hover{
      transform:translateY(-5px);
      box-shadow:0 18px 40px rgba(0,0,0,.12);
    }

    .precio-card h3{
      font-size:18px;
      margin-bottom:15px;
      font-weight:700;
    }

    .precio-card .rango{
      font-size:24px;
      font-weight:800;
      margin-bottom:15px;
      color:#FE9900;
    }

    .precio-card.destacado{
      border:2px solid #FE9900;
      background:linear-gradient(180deg,#fff,#fff7f7);
    }

    /* =========================
       FAQ ACORDEÓN
    ========================= */

    .faq-item{
      border:1px solid rgba(0,0,0,.1);
      border-radius:8px;
      margin:12px 0;
      overflow:hidden;
    }

    .faq-q{
      width:100%;
      padding:15px;
      background:#f8f8f8;
      border:0;
      text-align:left;
      font-weight:600;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .faq-q span.num{
      background:#FE9900;
      color:#fff;
      padding:4px 8px;
      border-radius:50%;
      margin-right:10px;
      font-size:13px;
    }

    .faq-a{
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease;
      padding:0 15px;
      background:#fff;
    }

    .faq-a .inner{
      padding:15px 0;
      line-height:1.7;
      color:#444;
    }

    .faq-item.active .faq-a{
      max-height:600px;
    }

    @media(max-width:768px){
      .tabla-precios{
        flex-direction:column;
      }
    }

    .col-lg-10 .videofacebook{
        width: 100%;
        max-width: 500px;   /* controla el tamaño máximo */
        margin: 0 auto;     /* centra horizontalmente */
        display: block;
    }

    .col-lg-10 .videofacebook iframe,
    .col-lg-10 .videofacebook video{
        width: 100%;
        max-width: 500px;
        height: auto;
    }

    /* Área principal del artículo */
    .landings {
        background: #f7f5f1;
        padding-top: 65px !important;
        padding-bottom: 75px !important;
    }

    .landings .col-lg-10 {
        max-width: 1050px;
        margin: 0 auto;
        background: #ffffff;
        padding: 50px 60px;
        border-radius: 18px;
        box-shadow: 0 10px 35px rgba(0,0,0,.07);
    }

    .landings h1 {
        font-size: clamp(30px, 4vw, 46px);
        line-height: 1.15;
        font-weight: 700;
        color: #181818;
        margin: 0 0 8px;
        letter-spacing: -1px;
    }

    .landings h1::after {
        content: "";
        display: block;
        width: 75px;
        height: 4px;
        margin-top: 18px;
        border-radius: 10px;
        background: #d3692e;
    }

    .landings h2 {
        font-size: 23px;
        line-height: 1.3;
        font-weight: 500;
        color: #666;
        margin: 15px 0 30px;
    }

    .landings h2 + img {
        display: block;
        width: 100%;
        max-width: 760px;
        height: auto;
        object-fit: cover;
        margin: 0 auto 35px;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0,0,0,.15);
    }

    .landings .col-lg-10 > p:not([align]) {
        max-width: 900px;
        margin: 0 auto 20px;
        font-size: 16px;
        line-height: 1.8;
        color: #454545;
    }

    .landings .col-lg-10 > p:not([align]) strong {
        color: #242424;
        font-weight: 700;
    }

    .landings .col-lg-10 > p:not([align]) a {
        color: #c45b25;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(196,91,37,.35);
        transition: .2s ease;
    }

    .landings .col-lg-10 > p:not([align]) a:hover {
        color: #9d421b;
        border-bottom-color: #9d421b;
    }

    .landings h3 {
        position: relative;
        max-width: 900px;
        margin: 42px auto 0;
        padding: 18px 25px;
        background: #1c1c1c;
        color: #fff;
        font-size: 21px;
        line-height: 1.3;
        font-weight: 600;
        border-radius: 12px 12px 0 0;
        border-left: 5px solid #d3692e;
    }

    .landings h3 p {
        margin: 0;
        padding: 0;
        color: inherit;
        font-size: inherit;
    }

    .landings p[align="center"] {
        max-width: 900px;
        margin: 0 auto 30px !important;
        padding: 25px 30px;
        background: #fff;
        border: 1px solid #e8e4dd;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 22px rgba(0,0,0,.06);
        text-align: left !important;
    }


    /* El enlace se convierte en un bloque moderno */
    .landings p[align="center"] > a {
        display: flex;
        align-items: center;
        gap: 30px;
        color: #c15828;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all .25s ease;
    }


    /* Imagen de cada sitio */
    .landings p[align="center"] img {
        display: block;
        width: 330px;
        max-width: 48%;
        height: 180px;
        object-fit: contain;
        background: #f5f5f5;
        padding: 8px;
        border-radius: 9px;
        border: 1px solid #eee;
        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }


    /* Hover */
    .landings p[align="center"]:hover {
        border-color: #ddc2b4;
        box-shadow: 0 12px 28px rgba(0,0,0,.10);
    }

    .landings p[align="center"]:hover img {
        transform: scale(1.02);
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
    }

    .landings p[align="center"] > a:hover {
        color: #9e431b;
    }

    .landings p[align="center"] > a::after {
        content: "  →";
        font-size: 20px;
        margin-left: auto;
        color: #d3692e;
    }

    @media (max-width: 991px) {

        .landings {
            padding-top: 40px !important;
            padding-bottom: 50px !important;
        }

        .landings .col-lg-10 {
            padding: 40px;
            border-radius: 14px;
        }

        .landings h1 {
            font-size: 36px;
        }

    }

        .landings {
            padding: 30px 0 !important;
        }

        .landings .container {
            padding-left: 15px;
            padding-right: 15px;
        }

        .landings .col-lg-10 {
            padding: 28px 20px;
            border-radius: 12px;
        }

        .landings h1 {
            font-size: 30px;
            letter-spacing: -.5px;
        }

        .landings h2 {
            font-size: 19px;
            margin-bottom: 25px;
        }

        .landings .col-lg-10 > p:not([align]) {
            font-size: 15.5px;
            line-height: 1.75;
        }

        .landings h3 {
            margin-top: 32px;
            padding: 16px 18px;
            font-size: 18px;
        }

        .landings p[align="center"] {
            padding: 18px;
        }

        .landings p[align="center"] > a {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
            word-break: break-word;
        }

        .landings p[align="center"] img {
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 240px;
        }

        .landings p[align="center"] > a::after {
            display: none;
        }

    }


    @media (max-width: 420px) {

        .landings .col-lg-10 {
            padding: 24px 16px;
        }

        .landings h1 {
            font-size: 27px;
        }

    }

    .mapa{
      max-width:300px!important
    }