/* =========================================================
   TOP CÚCUTA
   HALLOWEEN EDITION
   SOLO CAPA VISUAL
   ========================================================= */


/* =========================================================
   01. ATMÓSFERA GENERAL
   ========================================================= */

html {
    background: #07080b;
}

body {
    background: #07080b !important;
    color: #f2f2f2;
}

.page-background {

    position: relative;

    min-height: 100vh;

    /*
       La imagen será la encargada de crear la atmósfera.
       No agregamos lunas ni elementos artificiales mediante CSS.
    */
    background-image:
        linear-gradient(
            rgba(5, 7, 11, .30),
            rgba(5, 7, 11, .48)
        ),
        url("../images/cucuta-bg-halloween.jpg") !important;

    background-size: cover !important;

    background-position: center top !important;

    background-repeat: no-repeat !important;

    background-attachment: fixed !important;

    background-color: #07080b !important;

    overflow: hidden;
}


/* =========================================================
   02. CONTENIDO SOBRE EL FONDO
   ========================================================= */


/* =========================================================
   03. HEADER
   ========================================================= */

header {
    padding-top: 28px;
}

.logo-text {
    color: #ffffff !important;

    text-shadow:
        0 2px 14px rgba(0, 0, 0, .65);
}

.logo-text span {
    color: #ff3b18 !important;

    text-shadow:
        0 0 14px rgba(255, 59, 24, .12);
}

.subtitle {
    color: #d0d0d0 !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .55);
}


/* =========================================================
   04. INFORMACIÓN SUPERIOR
   ========================================================= */

.public-info {
    color: #d1d1d1 !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .55);
}

.public-info a {
    color: #ff6030 !important;
}

.public-info a:hover {
    color: #ff8a55 !important;
}

.live-dot {
    background: #ff4a1a !important;

    box-shadow:
        0 0 0 3px rgba(255, 74, 26, .12),
        0 0 12px rgba(255, 74, 26, .40);
}


/* =========================================================
   05. HERO
   ========================================================= */

.hero {
    position: relative;
}

.hero::before {
    content: "HALLOWEEN EDITION";

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 14px;

    border: 1px solid rgba(255, 93, 45, .45);

    border-radius: 30px;

    background: rgba(12, 9, 9, .72);

    color: #ff713f;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .20);
}

.hero h1 {
    color: #ffffff !important;

    text-shadow:
        0 3px 24px rgba(0, 0, 0, .72);
}

.hero h1 span {
    color: #ff421d !important;

    text-shadow:
        0 0 18px rgba(255, 66, 29, .20);
}

.hero p {
    color: #e1e1e1 !important;

    text-shadow:
        0 1px 7px rgba(0, 0, 0, .60);
}

.hero-note {
    color: #c2c2c2 !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .60);
}


/* =========================================================
   06. BOTÓN PRINCIPAL
   ========================================================= */

.primary-btn {
    background:
        linear-gradient(
            135deg,
            #f13518,
            #c20d0d
        ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 126, 72, .28);

    box-shadow:
        0 9px 25px rgba(120, 15, 5, .30),
        0 0 20px rgba(255, 55, 25, .08);
}

.primary-btn:hover {
    background:
        linear-gradient(
            135deg,
            #ff4a24,
            #d70d0d
        ) !important;

    box-shadow:
        0 11px 30px rgba(150, 20, 5, .38);
}


/* =========================================================
   07. MENSAJE BAJO CTA
   ========================================================= */

.help-line {
    color: #b7b7b7 !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .60);
}


/* =========================================================
   08. BUSCADOR DE NEGOCIO
   ========================================================= */

.find-business {

    background:
        linear-gradient(
            145deg,
            rgba(18, 19, 23, .97),
            rgba(9, 10, 13, .98)
        ) !important;

    border-color:
        rgba(255, 255, 255, .10) !important;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .38),
        0 0 30px rgba(255, 65, 25, .035) !important;
}

.find-business-header h2 {
    color: #ffffff !important;
}

.find-business-header p {
    color: #a8a8a8 !important;
}

.find-business-search label {
    color: #d2d2d2 !important;
}

.find-business-input-wrap input {

    background: #0e0f12 !important;

    border-color: #36383e !important;

    color: #ffffff !important;
}

.find-business-input-wrap input::placeholder {
    color: #707070 !important;
}


/* =========================================================
   09. CABECERA DEL RANKING
   ========================================================= */

.ranking-head h2 {
    color: #ffffff !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .50);
}

.ranking-head p {
    color: #b0b0b0 !important;
}


/* =========================================================
   10. TARJETAS DEL RANKING
   ========================================================= */

.top-card {

    background:
        linear-gradient(
            135deg,
            #151619,
            #0c0d10
        ) !important;

    border-color: #2c2e33 !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .34) !important;
}

.top-card:hover {

    border-color:
        rgba(255, 76, 35, .38) !important;

    box-shadow:
        0 11px 30px rgba(0, 0, 0, .42),
        0 0 18px rgba(255, 65, 25, .05) !important;
}


/* =========================================================
   11. PRIMER LUGAR
   ========================================================= */

.top-card-first {

    border-color: #e8391b !important;

    background:
        linear-gradient(
            135deg,
            #191313,
            #0d0d10
        ) !important;

    box-shadow:
        0 9px 30px rgba(0, 0, 0, .40),
        0 0 24px rgba(232, 57, 27, .08) !important;
}


/* =========================================================
   12. INFORMACIÓN DEL NEGOCIO
   ========================================================= */

.top-business-name {
    color: #ffffff !important;
}

.top-business-category {
    color: #a8a8a8 !important;
}

.top-business-meta {
    color: #969696 !important;
}

.top-business-meta strong {
    color: #d7d7d7 !important;
}

.top-verified {
    background: #e9381b !important;
}


/* =========================================================
   13. PUBLICIDAD ACTIVA
   ========================================================= */

.top-active {
    color: #45c96a !important;
}

.top-active-dot {

    background: #45c96a !important;

    box-shadow:
        0 0 0 3px rgba(69, 201, 106, .11),
        0 0 10px rgba(69, 201, 106, .24);
}


/* =========================================================
   14. OFERTA
   ========================================================= */

.top-card-offer {

    background:
        linear-gradient(
            145deg,
            #1c1d21,
            #131417
        ) !important;

    border-color: #303238 !important;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .24) !important;
}

.top-offer-label {

    background: #411a12 !important;

    color: #ff713d !important;
}

.top-card-first .top-offer-label {

    background: #e83b1a !important;

    color: #ffffff !important;
}

.top-offer-title {
    color: #ffffff !important;
}

.top-offer-description {
    color: #a7a7a7 !important;
}


/* =========================================================
   15. INVERSIÓN
   ========================================================= */

.top-investment-label {
    color: #858585 !important;
}

.top-investment-value {
    color: #eeeeee !important;
}

.top-card-first .top-investment-value {

    color: #ff4c23 !important;

    text-shadow:
        0 0 16px rgba(255, 76, 35, .13);
}


/* =========================================================
   16. CAJAS SUPERAR / LÍDER
   ========================================================= */

.top-overtake,
.top-leader-box {

    background: #141c17 !important;

    border-color: #2b4934 !important;
}

.top-overtake {
    color: #51c96b !important;
}

.top-overtake span {
    color: #969696 !important;
}

.top-overtake strong {
    color: #51c96b !important;
}

.top-leader-box {
    color: #51c96b !important;
}

.top-leader-box strong {
    color: #51c96b !important;
}

.top-leader-box small {
    color: #858585 !important;
}


/* =========================================================
   17. BOTÓN CONTACTAR
   ========================================================= */

.top-contact-button {

    background:
        linear-gradient(
            135deg,
            #e63a1a,
            #b71c0d
        ) !important;

    box-shadow:
        0 6px 16px rgba(180, 35, 15, .22);
}

.top-contact-button:hover {

    background:
        linear-gradient(
            135deg,
            #ff4b22,
            #cf230f
        ) !important;
}


/* =========================================================
   18. MEDALLAS
   ========================================================= */

.rank-medal-gold .rank-medal-circle {

    box-shadow:
        0 5px 16px rgba(247, 185, 0, .28),
        0 0 18px rgba(255, 157, 0, .08);
}


/* =========================================================
   19. SECCIÓN CÓMO PROMOCIONAR
   ========================================================= */

.how-to {

    background:
        linear-gradient(
            145deg,
            rgba(20, 21, 25, .98),
            rgba(10, 11, 14, .98)
        ) !important;

    border-color: #2d2f34 !important;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .30);
}

.how-to h2 {
    color: #ffffff !important;
}

.how-to-intro {
    color: #aaaaaa !important;
}

.step {

    background: #17181c !important;

    border-color: #2e3035 !important;
}

.step-number {

    background:
        linear-gradient(
            135deg,
            #ef401c,
            #b91a0d
        ) !important;
}

.step h3 {
    color: #ffffff !important;
}

.step p {
    color: #999999 !important;
}


/* =========================================================
   20. MÉTRICAS
   ========================================================= */

.platform-stats {

    background: #121317 !important;

    border-color: #2c2e33 !important;
}

.platform-stat {
    border-color: #2c2e33 !important;
}

.platform-stat-label {
    color: #bdbdbd !important;
}

.platform-stat-extra {
    color: #777777 !important;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.footer {

    border-top-color: #282a2e !important;

    color: #777777 !important;
}

.footer a {
    color: #a7a7a7 !important;
}

.footer a:hover {
    color: #ff6336 !important;
}


/* =========================================================
   22. MODALES
   ========================================================= */

.modal {
    background: rgba(0, 0, 0, .82) !important;
}

.modal-box {

    background: #151619 !important;

    color: #ffffff !important;

    border: 1px solid #303238;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .60);
}

.modal-box h2 {
    color: #ffffff !important;
}

.modal-description {
    color: #aaaaaa !important;
}

.close-btn {

    background: #282a2f !important;

    color: #ffffff !important;
}

.modal-box input,
.modal-box select,
.modal-box textarea {

    background: #0e0f12 !important;

    border-color: #383a40 !important;

    color: #ffffff !important;
}

.modal-box input::placeholder,
.modal-box textarea::placeholder {
    color: #747474 !important;
}

.field-label {
    color: #d2d2d2 !important;
}


/* =========================================================
   23. WIZARD
   ========================================================= */

.wizard-kicker {
    color: #ff5a2d !important;
}

.wizard-step {
    color: #777777 !important;
}

.wizard-step.active {
    color: #ffffff !important;
}

.wizard-step.active span {
    background: #e83b1a !important;
}

.wizard-step.done span {

    background: #3b2019 !important;

    color: #ff743e !important;
}

.wizard-line {
    background: #323439 !important;
}

.wizard-note {

    background: #1e2024 !important;

    color: #999999 !important;
}

.presence-option {

    background: #17181c !important;

    border-color: #33353a !important;

    color: #ffffff !important;
}

.presence-option:hover {
    border-color: #e04724 !important;
}

.presence-option strong {
    color: #ffffff !important;
}

.presence-option small {
    color: #888888 !important;
}

.review-card {
    border-color: #33353a !important;
}

.review-head {

    background: #1e2024 !important;

    color: #ffffff !important;
}

.review-item {
    color: #999999 !important;
}

.review-item strong {
    color: #ffffff !important;
}


/* =========================================================
   24. RESUMEN / INVERSIÓN
   ========================================================= */

.bid-summary {

    background: #271b17 !important;

    color: #ffb08c !important;
}

.investment-box {

    background: #181d1a !important;

    border-color: #304c36 !important;
}

.investment-box .amount {
    color: #58ca70 !important;
}


/* =========================================================
   25. BOTONES SECUNDARIOS
   ========================================================= */

.secondary-btn {

    background: #292b30 !important;

    color: #dddddd !important;
}

.secondary-btn:hover {

    background: #36383e !important;

    color: #ffffff !important;
}


/* =========================================================
   26. BOTÓN COMPARTIR
   ========================================================= */

.top-share-button {

    background: #17181c !important;

    border-color: #34363b !important;

    color: #dddddd !important;
}

.top-share-button:hover {

    background: #222429 !important;

    border-color: #484b51 !important;
}


/* =========================================================
   27. ESTADO VACÍO
   ========================================================= */

.empty-ranking {

    background: #17181c !important;

    border-color: #35373c !important;

    color: #aaaaaa !important;
}

.empty-ranking strong {
    color: #ffffff !important;
}

.empty-ranking span {
    color: #888888 !important;
}


/* =========================================================
   28. MENSAJES DEL BUSCADOR
   ========================================================= */

.find-business-message {

    background: #18191d !important;

    border-color: #34363b !important;

    color: #999999 !important;
}

.find-business-message.error {

    background: #281617 !important;

    border-color: #623137 !important;

    color: #ff8989 !important;
}


/* =========================================================
   29. CAMPOS Y ESTADOS ADICIONALES
   ========================================================= */

input:focus,
select:focus,
textarea:focus {

    border-color: #d94021 !important;

    box-shadow:
        0 0 0 3px rgba(217, 64, 33, .10) !important;

    outline: none;
}


/* =========================================================
   30. ENLACES
   ========================================================= */

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* =========================================================
   31. SELECCIÓN DE TEXTO
   ========================================================= */

::selection {

    background: #d83a1c;

    color: #ffffff;
}


/* =========================================================
   32. MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .page-background {

        background-attachment: scroll !important;

        background-position: center top !important;
    }

    .hero::before {

        font-size: 9px;

        letter-spacing: 1.4px;

        padding: 6px 11px;
    }

    .hero h1 {

        text-shadow:
            0 3px 18px rgba(0, 0, 0, .75);
    }

    .hero p {

        text-shadow:
            0 1px 6px rgba(0, 0, 0, .65);
    }

    .find-business {

        box-shadow:
            0 10px 28px rgba(0, 0, 0, .35) !important;
    }

    .top-card {

        box-shadow:
            0 7px 20px rgba(0, 0, 0, .32) !important;
    }
}


/* =========================================================
   33. REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   FIN — TOP CÚCUTA HALLOWEEN EDITION
   ========================================================= */
   
   /* =====================================================
   HALLOWEEN — TARJETAS MÓVILES
   ===================================================== */

@media (max-width: 650px) {

    #ranking > .top-card-mobile {
        background: rgba(10, 11, 16, .94) !important;
        border-color: rgba(255, 255, 255, .14) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important;
    }

    .top-card-mobile .mobile-card-offer {
        background: rgba(25, 22, 18, .92) !important;
        border-color: rgba(242, 184, 0, .25) !important;
        box-shadow: none !important;
    }

    .top-card-mobile .mobile-business-name,
    .top-card-mobile .mobile-card-rank .rank-number,
    .top-card-mobile .mobile-card-investment strong,
    .top-card-mobile .mobile-offer-title {
        color: #ffffff !important;
    }

    .top-card-mobile .mobile-business-category,
    .top-card-mobile .mobile-offer-description,
    .top-card-mobile .mobile-card-investment small {
        color: #b9b9b9 !important;
    }

    .top-card-mobile .mobile-card-investment {
        background: rgba(255, 255, 255, .07) !important;
    }

    .top-card-mobile .mobile-card-metrics {
        border-color: rgba(255, 255, 255, .12) !important;
    }

    .top-card-mobile .mobile-share-button {
        background: rgba(255, 255, 255, .06) !important;
        border-color: rgba(255, 255, 255, .16) !important;
        color: #ffffff !important;
    }

}


/* =====================================================
   HALLOWEEN — DETALLES NARANJAS EN TARJETAS MÓVILES
   ===================================================== */

@media (max-width: 650px) {

    /* CONTORNO DE LA OFERTA */
    .top-card-mobile .mobile-card-offer {
        border: 1px solid #f28c28 !important;
    }

    /* ESTADÍSTICAS */
    .top-card-mobile .mobile-card-metrics {
        border-top: 1px solid rgba(242, 140, 40, .65) !important;
        border-bottom: 1px solid rgba(242, 140, 40, .65) !important;
    }

    .top-card-mobile .mobile-metric {
        color: #f28c28 !important;
    }

    .top-card-mobile .mobile-metric strong,
    .top-card-mobile .mobile-metric small {
        color: #f28c28 !important;
    }

    /* SEPARADORES ENTRE ESTADÍSTICAS */
    .top-card-mobile .mobile-metric + .mobile-metric {
        border-left: 1px solid rgba(242, 140, 40, .65) !important;
    }

}