/* =====================================================================
   Sitio público de EventoPro · Tema oscuro (copia exacta, usada también por TiendaZ)
   Fondo oscuro, paneles blancos para el contenido, títulos en mayúsculas
   y el color principal de Configuración › Empresa como acento.
   ===================================================================== */

body.sitio {
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    background: #1c1c1c radial-gradient(ellipse at top, #2e2e2e 0%, #1c1c1c 55%) no-repeat;
    background-attachment: fixed;
}

.sitio a {
    color: var(--sitio-primario);
}

.sitio .ligero {
    font-weight: 300;
}

.sitio .text-primario {
    color: var(--sitio-primario) !important;
}

.sitio .bg-primario {
    background: var(--sitio-primario) !important;
    color: #fff;
}

/* ---------- Botones ---------- */
.sitio .sitio-btn,
.sitio .btn-primary {
    background: var(--sitio-primario);
    border: 0;
    color: #fff;
    border-radius: 3px;
    padding: .55rem 1.4rem;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

    .sitio .sitio-btn:hover,
    .sitio .btn-primary:hover {
        filter: brightness(1.12);
        color: #fff;
    }

.sitio .sitio-btn-claro {
    background: linear-gradient(#fafafa, #e6e6e6);
    border: 1px solid #d0d0d0;
    color: #333;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .sitio .sitio-btn-claro:hover {
        background: var(--sitio-primario);
        border-color: var(--sitio-primario);
        color: #fff;
    }

.sitio .btn-outline-primary {
    color: var(--sitio-primario);
    border-color: var(--sitio-primario);
}

    .sitio .btn-outline-primary:hover {
        background: var(--sitio-primario);
        color: #fff;
    }

.sitio-enlace {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-decoration: none;
}

/* ---------- Encabezado ---------- */
.sitio-header {
    background: linear-gradient(#2b2b2b, #161616);
    border-bottom: 1px solid #000;
}

.sitio-logo img {
    max-height: 56px;
    width: auto;
}

.sitio-logo span {
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: .02em;
}

.sitio-header-tel {
    color: #fff !important;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
}

.sitio-header-links {
    font-size: 11px;
    color: #777;
}

    .sitio-header-links a {
        color: #aaa !important;
        text-decoration: none;
    }

        .sitio-header-links a:hover {
            color: #fff !important;
        }

    .sitio-header-links span {
        margin: 0 .4rem;
    }

/* ---------- Menú ---------- */
.sitio-nav {
    background: linear-gradient(#232323, #111);
    border-top: 1px solid #333;
    padding: 0;
}

    .sitio-nav .navbar-toggler {
        color: #fff;
        font-size: 26px;
        border: 0;
        padding: .4rem 0;
    }

    .sitio-nav .nav-link {
        color: #e8e8e8 !important;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        padding: 15px 16px !important;
        border-right: 1px solid #000;
        box-shadow: 1px 0 0 #2f2f2f;
    }

        .sitio-nav .nav-link:hover,
        .sitio-nav .nav-link.active {
            background: linear-gradient(#3a3a3a, #1d1d1d);
            color: #fff !important;
            box-shadow: inset 0 -3px 0 var(--sitio-primario);
        }

.sitio-nav-wa {
    color: #fff !important;
    font-size: 12px;
    text-decoration: none;
    padding: 6px 14px;
    margin: 8px 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    display: inline-block;
}

    .sitio-nav-wa:hover {
        background: #25D366;
    }

/* ---------- Contenedor general ---------- */
.sitio-contenido {
    padding-top: 28px;
    padding-bottom: 40px;
}

/* ---------- Carrusel ---------- */
.sitio-carrusel {
    margin-bottom: 0;
}

    .sitio-carrusel .carousel-item {
        height: 440px;
        background: #2a2a2a center / cover no-repeat;
        position: relative;
    }

        .sitio-carrusel .carousel-item::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .75) 60%);
        }

.sitio-slide-texto {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 520px;
    text-align: right;
    color: #fff;
}

    .sitio-slide-texto .ligero,
    .sitio-slide-texto strong {
        display: block;
        text-transform: uppercase;
        line-height: 1.05;
    }

    .sitio-slide-texto .ligero {
        font-size: clamp(22px, 3.2vw, 36px);
    }

    .sitio-slide-texto strong {
        font-size: clamp(30px, 5vw, 58px);
        font-weight: 700;
        margin-bottom: 12px;
    }

    .sitio-slide-texto p {
        font-size: 15px;
        font-weight: 300;
        opacity: .9;
    }

.sitio-carrusel .carousel-indicators {
    justify-content: flex-end;
    margin-right: 3%;
}

    .sitio-carrusel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: transparent;
        opacity: .8;
    }

    .sitio-carrusel .carousel-indicators .active {
        background: #fff;
    }

.sitio-tachado {
    text-decoration: line-through;
    opacity: .6;
    font-size: .85em;
    margin-left: .4rem;
}

/* ---------- Franja de promociones ---------- */
.sitio-promos {
    background: linear-gradient(#262626, #121212);
    border: 1px solid #000;
    margin-bottom: 24px;
}

.sitio-promo {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    color: #9a9a9a !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

    .sitio-promo + .sitio-promo {
        border-left: 1px solid #000;
        box-shadow: inset 1px 0 0 #333;
    }

    .sitio-promo strong {
        color: #fff;
        font-size: 24px;
        font-weight: 300;
        text-transform: none;
        letter-spacing: 0;
    }

        .sitio-promo strong.grande {
            font-size: 38px;
            white-space: nowrap;
        }

    .sitio-promo:hover strong {
        color: var(--sitio-primario);
    }

/* ---------- Paneles blancos ---------- */
.sitio-panel {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    margin-bottom: 24px;
    overflow: hidden;
}

.sitio-panel-titulo {
    padding: 18px 26px;
    background: linear-gradient(#fff, #ececec);
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    letter-spacing: .02em;
}

.sitio-panel-subtitulo {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    letter-spacing: .05em;
}

.sitio-panel-cuerpo {
    padding: 26px;
}

.sitio-panel-lectura {
    max-width: 860px;
    margin: 0 auto;
}

/* Título de páginas internas (sobre el fondo oscuro) */
.sitio-titulo-pagina {
    color: #fff;
    padding: 10px 0 26px;
}

    .sitio-titulo-pagina h1 {
        text-transform: uppercase;
        font-size: clamp(26px, 4vw, 40px);
        font-weight: 700;
        margin-bottom: 4px;
    }

    .sitio-titulo-pagina p {
        color: #aaa;
        margin: 0;
    }

.sitio-nota {
    color: #8a8a8a;
    font-size: 12px;
    text-align: center;
    margin: 0;
}

    .sitio-nota a {
        color: #ccc;
    }

/* ---------- Vitrina (paquetes destacados del inicio) ---------- */
.sitio-vitrina-item {
    text-align: center;
    padding: 24px 18px;
    border-right: 1px solid #ececec;
}

    .sitio-vitrina-item:last-child {
        border-right: 0;
    }

.sitio-vitrina-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 14px;
    color: #ccc;
    font-size: 64px;
    text-decoration: none;
}

    .sitio-vitrina-img img {
        max-height: 150px;
        max-width: 100%;
        object-fit: contain;
        transition: transform .2s;
    }

    .sitio-vitrina-img:hover img {
        transform: scale(1.04);
    }

.sitio-vitrina-nombre {
    font-size: 13px;
    color: #333;
    min-height: 38px;
}

.sitio-vitrina-precio {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 6px 0 10px;
}

    .sitio-vitrina-precio .sitio-tachado {
        color: #c0392b;
        opacity: 1;
        font-weight: 400;
    }

/* ---------- Categorías (inicio) ---------- */
.sitio-categoria {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #2a2a2a;
    aspect-ratio: 4 / 3;
    text-decoration: none;
}

    .sitio-categoria img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s;
    }

    .sitio-categoria:hover img {
        transform: scale(1.06);
    }

.sitio-categoria-texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 14px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    color: #fff;
}

    .sitio-categoria-texto strong {
        display: block;
        text-transform: uppercase;
        font-size: 14px;
    }

    .sitio-categoria-texto small {
        opacity: .8;
    }

/* ---------- Así de fácil ---------- */
.sitio-pasos {
    background: linear-gradient(#262626, #121212);
    border: 1px solid #000;
    margin-bottom: 24px;
    color: #9a9a9a;
}

    .sitio-pasos > div {
        padding: 26px 22px;
    }

        .sitio-pasos > div + div {
            border-left: 1px solid #000;
            box-shadow: inset 1px 0 0 #333;
        }

    .sitio-pasos strong {
        display: block;
        color: #fff;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: .05em;
        margin-bottom: 6px;
    }

    .sitio-pasos p {
        margin: 0;
        font-size: 13px;
    }

.sitio-paso-num {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sitio-primario);
    color: var(--sitio-primario);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}

/* ---------- Chips ---------- */
.sitio-chip {
    display: inline-block;
    padding: .35rem .9rem;
    margin: .25rem;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #444 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    background: linear-gradient(#fff, #f1f1f1);
}

    .sitio-chip:hover {
        border-color: var(--sitio-primario);
        color: var(--sitio-primario) !important;
    }

/* ---------- Tarjeta de paquete (/paquetes) ---------- */
.sitio-tarjeta {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    box-shadow: none;
}

.sitio-tarjeta-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    background: #eee;
}

.sitio-paquete {
    position: relative;
}

    .sitio-paquete.destacado {
        border-color: var(--sitio-primario);
        box-shadow: 0 0 0 1px var(--sitio-primario);
    }

.sitio-paquete-cinta {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--sitio-primario);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .3rem .6rem;
    border-radius: 2px;
}

.sitio-paquete h3 {
    text-transform: uppercase;
    font-size: 15px !important;
    letter-spacing: .02em;
}

.sitio-precio {
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

.sitio-precio-chico {
    font-weight: 700;
    color: #222;
}

.sitio-badge-ahorro {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

.sitio-incluye li {
    margin-bottom: .3rem;
}

/* ---------- Servicios por categoría (/paquetes) ---------- */
.sitio-categoria-lista {
    padding: 18px 0;
    border-top: 1px solid #eee;
    scroll-margin-top: 20px;
}

    .sitio-categoria-lista h2 {
        text-transform: uppercase;
        font-size: 15px !important;
        font-weight: 600;
    }

.sitio-cat-icono {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    object-fit: cover;
}

/* ---------- Contacto ---------- */
.sitio-contacto {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #333 !important;
    text-decoration: none;
}

    .sitio-contacto strong {
        display: block;
    }

    .sitio-contacto small {
        color: #888;
    }

    .sitio-contacto:hover strong {
        color: var(--sitio-primario);
    }

.sitio-contacto-icono {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--sitio-primario);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sitio-contacto-mapa {
    border-left: 1px solid #eee;
}

.sitio-mapa {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
}

/* ---------- Términos ---------- */
.sitio-legal {
    white-space: pre-line;
    line-height: 1.75;
    color: #444;
}

/* ---------- Pie de página ---------- */
.sitio-footer {
    background: #141414;
    border-top: 1px solid #000;
    color: #8c8c8c;
    font-size: 13px;
}

    .sitio-footer h6 {
        color: #fff;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 15px;
        letter-spacing: .03em;
        margin-bottom: 14px;
    }

    .sitio-footer li {
        margin-bottom: 6px;
    }

    .sitio-footer a {
        color: #b5b5b5 !important;
        text-decoration: none;
    }

        .sitio-footer a:hover {
            color: #fff !important;
        }

.sitio-footer-fin {
    border-top: 1px solid #262626;
    color: #6d6d6d;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.sitio-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    z-index: 1030;
    text-decoration: none;
}

    .sitio-whatsapp:hover {
        transform: scale(1.06);
    }

/* ---------- Celular ---------- */
@media (max-width: 991.98px) {
    .sitio-nav .nav-link {
        border-right: 0;
        box-shadow: none;
        border-bottom: 1px solid #222;
    }

    .sitio-vitrina-item:nth-child(2n) {
        border-right: 0;
    }

    .sitio-vitrina-item {
        border-bottom: 1px solid #ececec;
    }

    .sitio-contacto-mapa {
        border-left: 0;
        border-top: 1px solid #eee;
    }
}

@media (max-width: 767.98px) {
    .sitio-carrusel .carousel-item {
        height: 340px;
    }

    .sitio-slide-texto {
        left: 6%;
        right: 6%;
        text-align: left;
    }

    .sitio-carrusel .carousel-item::before {
        background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .75));
    }

    .sitio-promo {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 20px;
    }

        .sitio-promo strong {
            font-size: 20px;
        }

            .sitio-promo strong.grande {
                font-size: 28px;
            }

        .sitio-promo br {
            display: none;
        }

    .sitio-promo + .sitio-promo,
    .sitio-pasos > div + div {
        border-left: 0;
        box-shadow: none;
        border-top: 1px solid #000;
    }
}

/* ===================== Paso 36: newsletter y formulario de contacto ===================== */
.boletin {
    background: var(--sitio-primario);
    color: #fff;
    padding: 46px 0;
}

    .boletin h3 {
        font-weight: 600;
        margin: 0;
        font-size: 24px;
        color: #fff;
    }

    .boletin p {
        margin: 4px 0 0;
        opacity: .85;
    }

    .boletin .form-control {
        border: 0;
        border-radius: 3px 0 0 3px;
        padding: 12px 16px;
    }

    .boletin .btn {
        background: #151515;
        color: #fff;
        border-radius: 0 3px 3px 0;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .06em;
        padding: 0 24px;
        white-space: nowrap;
    }

    .boletin .form-respuesta.text-success,
    .boletin .form-respuesta.text-danger {
        color: #fff !important;
        font-weight: 600;
    }

.contacto-form .form-control {
    background: #f1f1f1;
    border: 0;
    border-radius: 0;
    padding: 14px 18px;
    font-size: 13px;
}

.contacto-form h3 {
    color: #151515;
    font-weight: 400;
    font-size: 28px;
    margin: 0;
}

.contacto-form .sub {
    border-left: 1px solid #ccc;
    padding-left: 18px;
    margin-left: 6px;
    color: #333;
    font-size: 14px;
}

/* ===================== Paso 37: secciones claras del inicio ===================== */
html {
    scroll-behavior: smooth;
}

.sec {
    padding: 80px 0;
    background: #fff;
    color: #555;
    scroll-margin-top: 10px;
}

.sec-alt {
    background: #f6f5f3;
}

.sec-titulo {
    text-align: center;
    margin-bottom: 46px;
}

    .sec-titulo h2 {
        font-size: clamp(26px, 4vw, 36px);
        font-weight: 300;
        color: #151515;
        margin: 0;
    }

        .sec-titulo h2 b {
            font-weight: 700;
        }

    .sec-titulo::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--sitio-primario);
        margin: 18px auto 0;
    }

    .sec-titulo p {
        max-width: 560px;
        margin: 14px auto 0;
    }

/* ---------- Lo que ofrecemos ---------- */
.ofrece-intro, .ofrece-item {
    display: block;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, .08);
    padding: 32px 26px;
    height: 100%;
    text-align: center;
    color: #555 !important;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.ofrece-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.ofrece-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .ofrece-intro h2 {
        font-size: 28px;
        color: #151515;
        font-weight: 300;
    }

        .ofrece-intro h2 b {
            font-weight: 700;
        }

.ofrece-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--sitio-primario);
    background: rgba(var(--bs-primary-rgb), .1);
}

.ofrece-item h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #222;
    margin-bottom: 10px;
}

    .ofrece-item h3::after {
        content: "";
        display: block;
        width: 36px;
        height: 2px;
        background: #ddd;
        margin: 12px auto 0;
    }

.ofrece-item p {
    font-size: 13px;
    margin: 0 0 8px;
}

.ofrece-item small {
    color: var(--sitio-primario);
    font-weight: 600;
}

.ofrece-foto {
    border-radius: 4px;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

/* ---------- Galería ---------- */
.galeria-filtros {
    text-align: center;
    margin-bottom: 30px;
}

    .galeria-filtros button {
        background: none;
        border: 0;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: .06em;
        color: #888;
        padding: 4px 14px;
    }

        .galeria-filtros button + button {
            border-left: 1px solid #ddd;
        }

        .galeria-filtros button.activo {
            color: var(--sitio-primario);
            font-weight: 600;
        }

.galeria-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 6 / 5;
    background: #222;
}

    .galeria-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s;
    }

    .galeria-item .velo {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .3s;
        text-align: center;
        padding: 16px;
    }

        .galeria-item .velo i {
            font-size: 34px;
        }

    .galeria-item:hover img {
        transform: scale(1.08);
    }

    .galeria-item:hover .velo {
        opacity: 1;
    }

.galeria-video {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #fff;
    font-size: 30px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

#visor-contenido img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

#visor-contenido .ratio {
    background: #000;
}

/* ---------- Cifras ---------- */
.cifras {
    background: linear-gradient(#262626, #121212);
    color: #9a9a9a;
    padding: 64px 0;
}

.cifras-anios {
    display: flex;
    align-items: center;
    gap: 22px;
}

    .cifras-anios .num {
        font-size: clamp(90px, 14vw, 130px);
        font-weight: 700;
        line-height: .9;
        color: transparent;
        background: linear-gradient(135deg, var(--sitio-primario), var(--sitio-acento));
        -webkit-background-clip: text;
        background-clip: text;
    }

    .cifras-anios h2 {
        color: #fff;
        font-size: 26px;
        font-weight: 300;
        border-left: 3px solid #444;
        padding-left: 14px;
    }

.cifra {
    text-align: center;
    padding: 18px 8px;
}

    .cifra .n {
        font-size: clamp(36px, 6vw, 52px);
        font-weight: 300;
        color: #fff;
        line-height: 1;
    }

    .cifra .t {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .08em;
        margin-top: 6px;
    }

.cifras-grid > div {
    border-color: #333 !important;
}

/* ---------- Equipo ---------- */
.equipo-item {
    position: relative;
    overflow: hidden;
}

    .equipo-item img, .equipo-sin-foto {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

.equipo-sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3e0dc;
    color: #a39c94;
    font-size: 80px;
    font-weight: 300;
}

.equipo-item .cinta {
    position: absolute;
    left: 0;
    bottom: 18px;
    background: rgba(20, 20, 20, .88);
    color: #fff;
    padding: 10px 28px 10px 16px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

    .equipo-item .cinta b {
        display: block;
        font-weight: 600;
        font-size: 15px;
    }

    .equipo-item .cinta small {
        opacity: .8;
    }

/* ---------- Reseñas ---------- */
.testimonio {
    background: #fff;
    border: 1px solid #ececec;
    padding: 26px;
    position: relative;
    height: 100%;
}

    .testimonio::after {
        content: "";
        position: absolute;
        left: 34px;
        bottom: -11px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-right: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        transform: rotate(45deg);
    }

    .testimonio img, .testimonio-inicial {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

.testimonio-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--sitio-primario);
    font-size: 24px;
    font-weight: 600;
}

.testimonio b {
    color: #222;
    font-weight: 600;
    font-size: 16px;
    display: block;
}

.testimonio small {
    color: var(--sitio-primario);
}

.testimonio p {
    font-size: 13px;
    margin: 14px 0 0;
    white-space: pre-line;
}

.estrellas-texto {
    color: #f5a300;
    letter-spacing: 1px;
}

/* ---------- Contacto (inicio) ---------- */
.contacto-dato {
    display: block;
    border: 1px solid #e6e6e6;
    padding: 34px 20px;
    text-align: center;
    height: 100%;
    color: #222 !important;
    text-decoration: none;
    transition: border-color .2s;
}

    .contacto-dato:hover {
        border-color: var(--sitio-primario);
    }

    .contacto-dato i {
        font-size: 40px;
        color: var(--sitio-primario);
    }

    .contacto-dato div {
        margin-top: 10px;
        font-size: 14px;
    }

/* ===================== Paso 38: mapa del inicio y preguntas frecuentes ===================== */
.contacto-mapa {
    position: relative;
    height: 100%;
    min-height: 340px;
    border: 1px solid #e6e6e6;
}

    .contacto-mapa iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .contacto-mapa .btn {
        position: absolute;
        left: 12px;
        bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }

.faq .accordion-item {
    border: 0;
    border-bottom: 1px solid #eee;
}

.faq .accordion-button {
    font-weight: 600;
    color: #222;
    padding: 18px 4px;
    background: transparent;
    box-shadow: none;
}

    .faq .accordion-button:not(.collapsed) {
        color: var(--sitio-primario);
    }

    .faq .accordion-button::after {
        filter: grayscale(1);
    }

.faq .accordion-body {
    padding: 0 4px 20px;
    color: #555;
    line-height: 1.7;
    white-space: pre-line;
}

.faq-buscar {
    max-width: 420px;
    margin: 0 auto 26px;
}

/* =====================================================================
   Cotizador "Arma tu evento" (/cotizar)
   ===================================================================== */

/* ---------- Barra de pasos 1-2-3-4 (sobre el fondo oscuro) ---------- */
.cot-pasos {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    counter-reset: none;
}

    .cot-pasos li {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 4px;
        background: rgba(255, 255, 255, .06);
        color: #8a8a8a;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 3px solid transparent;
    }

        .cot-pasos li span {
            flex: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 2px solid currentColor;
            font-weight: 700;
        }

        .cot-pasos li.activo {
            color: #fff;
            border-bottom-color: var(--sitio-primario);
        }

        .cot-pasos li.hecho {
            color: #ccc;
            cursor: pointer;
        }

            .cot-pasos li.hecho span {
                background: var(--sitio-primario);
                border-color: var(--sitio-primario);
                color: #fff;
            }

/* ---------- Paso 1: tipos de evento (botones grandes) ---------- */
.cot-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.cot-tipo input {
    position: absolute;
    opacity: 0;
}

.cot-tipo span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: linear-gradient(#fff, #f3f3f3);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .03em;
    color: #444;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.cot-tipo:hover span {
    border-color: var(--sitio-primario);
}

.cot-tipo input:checked + span {
    border-color: var(--sitio-primario);
    box-shadow: 0 0 0 2px var(--sitio-primario);
    color: var(--sitio-primario);
}

.cot-tipo input:focus-visible + span {
    outline: 2px solid var(--sitio-primario);
    outline-offset: 2px;
}

/* ---------- Paso 3: paquetes ---------- */
.cot-paquete {
    display: flex;
    gap: 10px;
    height: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

    .cot-paquete:has(input:checked) {
        border-color: var(--sitio-primario);
        box-shadow: 0 0 0 1px var(--sitio-primario);
    }

    .cot-paquete input {
        margin-top: 4px;
        accent-color: var(--sitio-primario);
    }

.cot-paquete-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .cot-paquete-cuerpo .sitio-badge-ahorro {
        align-self: flex-start;
        padding: 1px 8px;
        border-radius: 3px;
        font-size: 11px;
    }

    .cot-paquete-cuerpo small {
        color: #888;
    }

/* ---------- Paso 3: servicios por categoría ---------- */
.cot-categoria {
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 10px;
}

    .cot-categoria summary {
        padding: 12px 14px;
        font-weight: 600;
        cursor: pointer;
        background: #fafafa;
    }

        .cot-categoria summary i {
            color: var(--sitio-primario);
        }

.cot-servicio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #eee;
}

.cot-servicio-texto {
    display: flex;
    flex-direction: column;
}

    .cot-servicio-texto small {
        color: #888;
    }

.cot-cantidad {
    display: flex;
    flex: none;
}

    .cot-cantidad button {
        width: 34px;
        border: 1px solid #ccc;
        background: #f5f5f5;
        font-size: 16px;
        line-height: 1;
    }

        .cot-cantidad button:hover {
            background: var(--sitio-primario);
            border-color: var(--sitio-primario);
            color: #fff;
        }

    .cot-cantidad input {
        width: 62px;
        text-align: center;
        border: 1px solid #ccc;
        border-left: 0;
        border-right: 0;
        -moz-appearance: textfield;
    }

        .cot-cantidad input::-webkit-inner-spin-button,
        .cot-cantidad input::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }

/* ---------- Botones Atrás / Siguiente ---------- */
.cot-navegacion {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .cot-navegacion .form-respuesta {
        flex: 1;
        color: #ff8a8a !important;
    }

    .cot-navegacion #cot-siguiente,
    .cot-navegacion #cot-enviar {
        margin-left: auto;
    }

/* ---------- Resumen ---------- */
.cot-resumen {
    position: sticky;
    top: 16px;
}

.cot-resumen-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin-bottom: 14px;
}

    .cot-resumen-datos dt {
        font-weight: 600;
        color: #888;
        font-size: 12px;
        text-transform: uppercase;
    }

    .cot-resumen-datos dd {
        margin: 0;
        text-align: right;
    }

.cot-resumen-lista {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

    .cot-resumen-lista li {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 3px 0;
    }

.cot-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
}

    .cot-total span {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
    }

    .cot-total strong {
        font-size: 22px;
        color: #222;
    }

/* ---------- Pantalla final ---------- */
.cot-final-icono {
    font-size: 56px;
    color: #198754;
}

.cot-final-folio {
    display: inline-block;
    padding: 6px 16px;
    border: 2px dashed var(--sitio-primario);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .06em;
}

/* ---------- Celular ---------- */
@media (max-width: 767.98px) {
    .cot-pasos li {
        justify-content: center;
        font-size: 0; /* en celular solo se ven los números */
        padding: 8px;
    }

        .cot-pasos li span {
            font-size: 12px;
        }

    .cot-resumen {
        position: static;
    }
}