/* Source: page/canaleselec.php */
/* HERO */
            .hero-section {
                background: linear-gradient(135deg, #00a75d, #28a745, #007bff);
                color: #fff;
                padding: 70px 0 45px;
                text-align: center;
            }
            .hero-section h1 {
                font-size: 3.2rem;
                font-weight: 500;
            }
            .hero-section p {
                font-size: 1.3rem;
                opacity: .95;
            }
            /* SECCIONES  */
            .section{
                padding:90px 0;
            }
            .section-light{ background:#ffffff; }
            .section-gray{ background:#f4f6f9; }

            /* TITULOS  */
            .section-title{
                font-size:2.3rem;
                font-weight:600;
                color:#0a4f6d;
                margin-bottom:10px;
            }
            .section-subtitle{
                font-size:1.05rem;
                color:#6c757d;
                margin-bottom:25px;
            }
            .line{
                width:70px;
                height:3px;
                background:#00a75d;
                margin-bottom:25px;
            }

            /* BOTÓN  */
            .btn-coac {
                background: linear-gradient(135deg, #00a75d, #28a745);
                border: none;
                border-radius: 30px;
                padding: 12px 30px;
                font-weight: 600;
                font-size: 1rem;
                color: white !important;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                margin-top: 15px;
                margin-bottom: 15px; 
                box-shadow: 0 8px 25px rgba(0,167,93,0.3);
                transition: all 0.3s ease;
                text-align: center;
            }
            .btn-coac:hover {
                color: white !important;
                transform: translateY(-2px);
                box-shadow: 0 12px 35px rgba(0,167,93,0.4);
                text-decoration: none;
            }
            .btn-coac i {
                font-size: 1.1rem;
            }
            .btn-coac:active {
                transform: translateY(0);
            }

            /* TEXTO */
            .texto-justificado{
                text-align:justify;
                line-height:1.8;
            }

            /* IMAGEN CANALES  */
            .channel-photo{
                max-width:100%;
                border-radius:18px;
                box-shadow:0 20px 60px rgba(0,0,0,.15);
                object-fit:cover;
            }

            /* BENEFICIOS */
            .benefits-list{
                padding-left:0;
                margin-top:15px;
            }
            .benefits-list li{
                list-style:none;
                padding:6px 0;
                font-size:0.97rem;
            }
            .benefits-list li i{
                color:#00a75d;
                margin-right:8px;
            }

            /* MODAL */
            .modal-content{
                border-radius:20px;
                border: none;
                box-shadow: 0 25px 70px rgba(0,0,0,0.25);
            }
            .modal-header{
                background: linear-gradient(135deg, #00a75d, #28a745);
                color: #ffffff !important;
                border-radius:20px 20px 0 0 !important;
                border-bottom: none;
            }
            .modal-title{
                color: #ffffff !important;
                font-weight: 600;
            }
            .modal-title i{
                margin-right: 10px;
                color: #ffffff !important;
            }
            .modal-body{
                padding: 30px;
                color: #2c3e50 !important;
                background-color: #ffffff !important;
            }
            .modal-body p{
                color: #2c3e50 !important;
                font-size: 1.05rem;
                margin-bottom: 20px;
            }
            .modal-body p strong{
                color: #1a1a1a !important;
            }
            .requisitos-list{
                list-style: none;
                padding-left: 0;
            }
            .requisitos-list li{
                padding: 12px 0;
                border-bottom: 1px solid #e9ecef;
                position: relative;
                padding-left: 40px;
                color: #2c3e50 !important;
                font-size: 1rem;
                font-weight: 500;
            }
            .requisitos-list li:last-child{
                border-bottom: none;
            }
            .requisitos-list li::before{
                content: "✓";
                position: absolute;
                left: 0;
                color: #00a75d;
                font-weight: bold;
                font-size: 18px;
            }
            .btn-close{
                filter: invert(1) !important;
                opacity: 1 !important;
            }
            .text-muted{
                color: #6c757d !important;
            }

            /* RESPONSIVE */
            
            @media (max-width: 576px) {
            .hero-section {padding: 60px 15px 50px }
            .hero-section h1 {font-size: 1.9rem;}
            .hero-section p {font-size: 1.05rem;}
            .section { padding: 45px 0;}
            .section-title { font-size: 1.6rem; text-align: center;}
            .section-subtitle {text-align: center;}
            .line {margin: 0 auto 20px;}
            .texto-justificado {text-align: left; /* mejora lectura en móvil */font-size: 0.95rem;}
            .btn-coac {width: 100%;justify-content: center;margin-top: 10px;}
            .channel-photo {margin-top: 25px;border-radius: 14px;}
            .benefits-list li {font-size: 0.95rem;}
            }
            @media (max-width: 576px) {         
            }

            /* CARDS  */
            .service-card-pro{
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                align-items:center;
                text-align:center;
                padding:24px 20px;
                border-radius:18px;
                background:#ffffff;
                text-decoration:none;
                color:#0a4f6d;
                box-shadow:0 8px 25px rgba(0,0,0,0.06);
                transition:all .3s ease;
                height:100%;          
                min-height:200px;
                min-height:180px;
                position:relative;
                overflow:hidden;
            }
            .service-card-pro:hover{
                transform:translateY(-5px);
                box-shadow:0 15px 35px rgba(0,0,0,0.12);
                background:#00a75d;   
                color:#ffffff;
            }

            /* Icono */
            .icon-wrapper{
                width:60px;
                height:60px;
                border-radius:16px;
                background:#e9f9f1;   
                display:flex;
                align-items:center;
                justify-content:center;
                margin-bottom:14px;
                transition:all .3s ease;
            }

            .icon-wrapper i{
                font-size:1.5rem;
                color:#00a75d;   
            }

            .service-card-pro:hover .icon-wrapper{
                background:#ffffff;
            }

            .service-card-pro:hover .icon-wrapper i{
                color:#00a75d;
            }

            /* Texto */
            .service-card-pro h4{
                font-size:1rem;
                font-weight:600;
                margin-bottom:6px;
            }

            .service-card-pro p{
                font-size:0.85rem;
                opacity:0.9;
            }

            .service-card-pro,
            .service-card-pro:hover,
            .service-card-pro:focus,
            .service-card-pro:active{
                text-decoration:none !important;
            }
            #servicios-resumen{
                padding-top:40px !important;
                margin-top:0 !important;
            }


            @media (max-width: 576px){

                .service-card-pro{
                    padding:18px 10px;
                    min-height:140px;
                }
                .service-card-pro h4{
                    font-size:0.85rem;
                }
                .icon-wrapper{
                    width:50px;
                    height:50px;
                }
            }