body {
        font-family: Arial, sans-serif;
    }

    .navbar {
        background: #020024;
        background: #0a708a;
        background: linear-gradient(90deg, rgba(10, 112, 138, 1) 0%, rgba(4, 146, 181, 1) 57%, rgba(0, 212, 255, 1) 100%);
        max-width: 100%;
    }

    .navbar-brand {
        color: white;
    }

    /* Ajusta el logo dentro del navbar */
    .logo-nav {
        max-height: 40px;
        /* subido de 25px → más grande */
        width: auto;
        /* que escale de forma natural */
        height: auto;
        display: block;
    }



    .btn-publicar {

        background: linear-gradient(135deg, #4facfe, #00f2fe);
        color: #fff;
        font-weight: bold;
        padding: 12px 20px;
        border-radius: 30px;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }


    /* Hover efecto */
    .btn-publicar:hover {
        background: linear-gradient(135deg, #43e97b, #38f9d7);
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    }

    .btn-publicar:active {
        transform: translateY(1px);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    }

    /* En móviles: botón flotante */
    @media (max-width: 768px) {
        .btn-publicar {
            position: fixed;
            bottom: 20px;
            /* separación desde abajo */
            right: 20px;
            /* separación desde la derecha */
            z-index: 1000;
            padding: 14px 22px;
            border-radius: 50px;
            font-size: 0.9rem;
        }
    }

    .info-section {
        background: linear-gradient(135deg, #0088cc, #2ea6d3);
    }

    /* ===== Footer simple y elegante ===== */
    .footer-simple {
        background: #1e2c3a;
        color: #ffffff;
    }

    .footer-simple .footer-logo {
        background: #ffffff;
        padding: 3px;
    }

    .footer-simple .footer-link {
        color: #ffffff;
        text-decoration: none;
        opacity: .95;
        transition: opacity .15s ease, border-color .15s ease;
        border-bottom: 2px solid transparent;
        padding-bottom: 2px;
    }

    .footer-simple .footer-link:hover {
        opacity: 1;
        border-color: #bde0f1;
    }

    .text-footer-muted {
        color: #bcd0dc !important;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .1);
        padding: 8px 0;
        font-size: 13px;
    }

    @media (max-width:767.98px) {
        .footer-simple .col-md-4 {
            text-align: center;
        }

        .footer-bottom {
            text-align: center;
        }
    }


    .promo-popup {
        position: fixed;
        bottom: 20px;
        left: 20px;
        ;
        max-width: 260px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        z-index: 2000;
        animation: slideIn 0.6s ease-out;
    }

    .promo-popup-content {
        position: relative;
        padding: 15px;
        font-size: 14px;
        text-align: center;
    }

    .promo-popup-close {
        position: absolute;
        top: 5px;
        right: 8px;
        border: none;
        background: transparent;
        font-size: 18px;
        cursor: pointer;
        color: #888;
    }

    .promo-popup-close:hover {
        color: #000;
    }

    /* Animación de entrada */
    @keyframes slideIn {
        from {
            transform: translateY(100px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @media (max-width: 576px) {
        .promo-popup {
            right: 10px;
            left: 10px;
            max-width: 100%;
        }
    }


    /*----------------------------- INDEX----------------------------------------*/

    #header {
        background: linear-gradient(135deg, #0088cc, #2ea6d3);
        color: white;
        padding: 30px 0;
        text-align: center;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .logo {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .logo i {
        margin-right: 10px;
    }

    .divLogo {
        position: relative;
        width: 100%;
        padding: 10px;
    }

    .divLogo img {
        position: absolute;
        /* fijo a la izquierda */
        left: 80px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* --- Móviles --- */
    @media (max-width: 768px) {
        .logo {
            font-size: 1.7rem;
            margin-bottom: 10px;
        }

        .divLogo {
            flex-direction: column;
            /* logo arriba, texto abajo */
            text-align: center;
        }

        .divLogo .logo-img {
            width: 100px;
            /* más pequeño en móvil */
            height: 100px;
            margin-bottom: 10px;
        }

        .divLogo .container {
            flex-grow: 0;
            /* evita que intente ocupar todo */
        }
    }

    #card-ads {
        font-size: 0.85rem;
        /* tamaño más pequeño general */
    }

    #card-ads .card-title {
        font-size: 1rem;
        /* título un poco más grande que el resto */
    }

    #card-ads .btn {
        font-size: 0.8rem;
        /* botón más compacto */
    }

    .btn-ads-premium {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background-color: #0d6efd;
        /* azul Bootstrap */
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        /* quitar subrayado */
        margin-left: auto;
        /* se pega a la derecha */
        cursor: pointer;
        transition: background-color 0.2s;
    }

    /*.tagline {
        font-size: 1.2rem;
        opacity: 0.9;
    }*/
    /* Cursor parpadeante */
    .typewriter::after {
        content: "|";
        margin-left: 5px;
        animation: blink 0.7s infinite;
        color: #bde0f1;
        /* puedes cambiar el color del cursor */
    }

    @keyframes blink {

        0%,
        50% {
            opacity: 1;
        }

        51%,
        100% {
            opacity: 0;
        }
    }



    .nav-link {
        color: white;
    }

    .hero-section {
        background-color: #0088CC;
        color: white;
        padding: 20px 0;
        text-align: center;
        height: 300px;
    }

    .search-section {
        background-color: #f8f9fa;
        padding: 20px 0;
    }

    #main-web {
        background-color: #e5ebef;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    @media (max-width: 768px) {
        #main-web {
            padding-left: 5%;
            padding-right: 5%;
        }
    }

    .card {
        margin-bottom: 20px;
        background: linear-gradient(1deg, #d4af37, #fce68b, #d4af37);
        color: #111;
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    #card-ads {
        border: 2px solid #f39c12;
        /* borde naranja/dorado */
        box-shadow: 0 0 12px rgba(243, 156, 18, 0.5);
        /* brillo suave */
        border-radius: 12px;
        position: relative;
    }

    #card-ads::before {
        content: "Publicidad";
        position: absolute;
        top: -12px;
        left: 15px;
        background: #f39c12;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 2px 8px;
        border-radius: 4px;
        text-transform: uppercase;
    }

    .ads-wrapper {
        border: 2px solid #f39c12;
        box-shadow: 0 0 18px rgba(243, 156, 18, 0.6);
        border-radius: 14px;
        position: relative;
        padding: 12px;
        background: #fff8e6;
        /* leve dorado para diferenciar */
    }

    .ads-wrapper::before {
        content: "Ads";
        position: absolute;
        top: -12px;
        left: 20px;
        background: #f39c12;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        padding: 3px 10px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .ads-wrapper {
        animation: glow 2s infinite alternate;
    }

    @keyframes glow {
        from {
            box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
        }

        to {
            box-shadow: 0 0 22px rgba(243, 156, 18, 0.9);
        }
    }


    .d-flex.position-relative:hover {
        cursor: pointer;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 6px;
    }



    #enlace-canales a {
        display: block;
        background-image: url('/static/img/satellite.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
        overflow: hidden;
    }

    .category-card {
        text-align: center;
        padding: 15px;
        height: 160px;
        background: transparent;
    }

    .info-section {
        background-color: #1e2c3a;
        padding: 40px 0;
    }

    .info-section h2,
    .info-section h5,
    .info-section p {
        color: white !important;
    }

    .benefit-item {
        margin-bottom: 30px;
    }

    .div-section1 .col>div {
        background-color: #fff;
        border-radius: 8px;
        padding: 15px;
        height: 100%;
    }

    .card-custom {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .card-header img {
        max-height: 50px;
        width: auto;
        border-radius: 30px;
    }

    .text-break {
        display: flex;
        justify-content: center;
    }

    .card-custom a.btn {
        width: 100%;
        margin-top: auto;
    }

    .footer {
        background-color: #1e2c3a;
        color: white;
        padding: 30px 0;
    }

    .footer a {
        color: white;
        text-decoration: none;
    }

    .footer-links h6 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .footer-links ul {
        list-style: none;
        padding-left: 0;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        color: inherit;
        text-decoration: none;
        transition: all 0.2s ease-in;
    }

    .footer-links a:hover {
        text-decoration: underline !important;
        text-decoration-color: white;
        text-decoration-thickness: 2px;
    }

    .disclaimer {
        background-color: #1e2c3a;
        color: #adb5bd;
        padding: 10px 0;
        font-size: 12px;
    }

    .online-badge {
        background-color: #28a745;
        color: white;
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 12px;
    }

    .ranking-badge {
        background-color: #007bff;
        color: white;
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 12px;
    }

    .trending-badge {
        background-color: #dc3545;
        color: white;
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 12px;
    }

    .btn-search {
        background-color: #17a2b8;
        color: white;
        border: none;
    }

    .btn-lucky {
        background-color: #ffc107;
        color: #212529;
        border: none;
    }

    .alert-info {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        color: #495057;
    }

    .channel-card {
        border-left: 4px solid #ffc107;
    }

    .blog-card {
        border-radius: 10px;
        overflow: hidden;
    }

    .blog-icon {
        background-color: #17a2b8;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    .top-100-btn {
        background-color: #ffc107;
        color: #212529;
        border-radius: 20px;
        padding: 5px 15px;
        font-size: 14px;
        font-weight: bold;
        border: none;
    }

    .enlace-a-base {
        text-decoration: none;
        color: white;
    }

    /*------------------------------------ GRUPO ------------------------------------------------*/

    body {
        background-color: #e6f0fa;
    }

    #section-grupo {
        margin-top: 30px;
    }

    .main-container {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
    }

    .sidebar-ad {
        position: absolute;
        width: 150px;
        height: 400px;
        background-color: black;
        color: white;
        text-align: center;
        padding: 10px;
    }

    .left-sidebar {
        left: -170px;
    }

    .right-sidebar {
        right: -170px;
    }

    .device-ip-box {
        border: 1px solid white;
        padding: 2px 5px;
        margin: 5px auto;
        font-size: 14px;
        width: 90px;
    }

    .free-text {
        color: #00ffff;
    }

    .content-box {
        background-color: white;
        border-radius: 5px;
        margin-bottom: 15px;
        padding: 15px;
    }

    .job-box {
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    .job-title {
        color: red;
        font-weight: bold;
        font-size: 14px;
    }

    .telegram-icon {
        background-color: #0088cc;
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .link-input {
        width: 100%;
        border: 1px solid #0088cc;
        padding: 5px;
        margin: 10px 0;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;
    }

    .social-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .fb {
        background-color: #3b5998;
    }

    .twitter {
        background-color: #1da1f2;
    }

    .whatsapp {
        background-color: #25d366;
    }

    .gmail {
        background-color: #ea4335;
    }

    .telegram-share {
        background-color: #0088cc;
    }

    .linkedin {
        background-color: #0077b5;
    }

    .btn-volver {
        color: #0088cc;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    .content-box {
        padding: 0;
    }


    #divTexto-card {
        padding: 15px;
    }

    .divReport-roto {
        height: 50px;

    }

    .btn-reportar i,
    .btn-enlace-roto i {
        font-size: 1em;
        margin-right: 6px;
    }

    .btn-reportar {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(180, 180, 9, 0.749);
    }

    .btn-enlace-roto {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(144, 2, 2, 0.749);
    }

    .btn.disabled {
        pointer-events: none;
        opacity: .6;
    }

    .btn-enlace-roto.disabled {
        pointer-events: none;
        opacity: .6;
    }


    .ad-container {
        margin: 20px 0;
        text-align: center;
    }

    .btn-acceder {
        background-color: #0088cc;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: bold;
        width: 100%;
    }

    .social-icons a {
        text-decoration: none;
        /* quita la línea debajo */
    }

    .footer-btn {
        background-color: #0088cc;
        color: white;
        text-align: center;
        padding: 15px;
        margin-top: 20px;
    }

    .page-personnel {
        text-align: right;
        font-size: 14px;
    }

    .page-personnel span {
        color: red;
    }

    .inscribirse-btn {
        background-color: #ff5a5a;
        color: white;
        border: none;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
    }

    .collapse-icon {
        text-align: center;
        margin-top: 5px;
        color: #999;
    }


    .badge-premium {
        background: linear-gradient(90deg, #ffd700, #ffa500);
        color: #111;
        border: 1px solid #e0b400
    }

    .badge-estandar {
        background: #efe6ff;
        color: #6b2cff;
        border: 1px solid #dfccff
    }

    .badge-basico {
        background: #e6f0ff;
        color: #1a4fff;
        border: 1px solid #cfe0ff
    }

    .ad-card .btn {
        white-space: nowrap;
    }

    .ad-cta {
        transition: box-shadow .2s ease, border-color .2s ease;
    }

    .ad-cta:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
        border-color: #bdbdbd;
    }