/** INICIO HERO **/
     .hero-wrapper {
         background-image: url(../img/background/black-luxury-jeep-driving-highway.webp);
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
         max-height: 675px;
         font-family: Poppins, sans-serif;
         position: relative;
     }

     .permiso-a1-a2 {
         background-image: url(../img/background/moto.webp) !important;
     }

     .permiso-c1-c,
     .permiso-e {
         background-image: url(../img/background/camion.webp) !important;
     }

     .permiso-d1-d {
         background-image: url(../img/background/view-city-with-motion-effect.webp) !important;
     }

     .permiso-b-e {
         background-image: url(../img/background/coche-remolque-paisaje.webp) !important;
     }

     .permiso-adr-cisternas {
         background-image: url(../img/background/camion-cisterna.webp) !important;
     }

     .permiso-consejero-seguridad-adr {
         background-image: url(../img/background/casco-mesa-trabajo-portatil.webp) !important;
     }

     .permiso-competencia-mer {
         background-image: url(../img/background/mesa-trabajo-con-portatil.webp) !important;
     }

     .permiso-adr-basico {
         background-image: url(../img/background/camion-etiqueta-azul.webp) !important;
     }

     .permiso-cap-viajeros {
         background-image: url(../img/background/interior-autobus.webp) !important;
     }

     .permiso-cap-mercancias {
         background-image: url(../img/background/camion-paisaje.webp) !important;
     }

     .permiso-am {
         background-image: url(../img/background/vespa-mujer-paisaje.webp) !important;
     }

     .hero-wrapper::before {
         background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
         content: '';
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
     }

     .hero-container {
         width: 100%;
         padding-top: 114px;
         max-width: 1140px;
         position: relative;
         /*z-index: 2;*/
     }

     .hero-inner {
         display: flex;
         animation: fadeInUp 0.8s ease;
     }

     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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

     .hero-image {
         width: 33.3333%;
         min-width: 190px;
     }

     .hero-img {
         width: 100%;
         animation: fadeInLeft 1s ease;
     }

     @keyframes fadeInLeft {
         from {
             opacity: 0;
             transform: translateX(-30px);
         }

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

     .hero-text {
         width: 100%;
     }

     @media (min-width: 860px) {
         .hero-text {
             width: 70%;
         }
     }

     @media (min-width: 650px) {
         .hero-text {
             margin-left: 50px;
         }
     }

     @media (max-width: 650px) {
         .hero-img {
             display: none;
         }

         .hero-image {
             width: 5%;
             min-width: 0px;
         }
     }

     .hero-subtitle {
         color: #EE730A;
         font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 2px;
         margin-bottom: 9px;
         font-style: normal;
         font-weight: 600;
         line-height: 24px;
         text-shadow: 0 2px 12px rgba(238, 115, 10, 0.5);
         animation: fadeIn 1.2s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     .hero-title {
         color: #FFFFFF;
         font-size: 40px;
         font-weight: 800;
         line-height: 67px;
         letter-spacing: 0.6px;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(238, 115, 10, 0.3);
         animation: fadeIn 1.2s ease 0.2s backwards;
     }

    /* .hero-container .btn-purchase {
         top: 20px;
     }*/
     .container-purchase {
         top: 20px;
         position: relative;
     }

     @media(min-width: 0px) and (max-width: 860px) {
         .hero-container .btn-purchase {
             padding: 8px 50px 8px 50px !important;
             top: 0px;
         }
         .container-purchase {
         top: 0px;
        }
          
     }

     @media(min-width: 790px) and (max-width: 965px) {
         .hero-title {
             font-size: 35px !important;
             line-height: 45px !important;
         }

     }

     @media(min-width: 0px) and (max-width: 790px) {
         .hero-title {
             font-size: 25px !important;
             line-height: 35px !important;
         }
         .text-subhero {
            font-size: 1em!important;
        }
     }

     /** FIN HERO**/

     /**INICIO COURSE SECTION**/
     @media (min-width: 1000px) {
         .course-section {
             padding-left: 10%;
             padding-right: 10%;
         }
     }

     @media (max-width: 1000px) {
         .course-section {
             padding-left: 30px;
             padding-right: 30px;
         }
     }

     .course-section {
         text-align: center;
         max-width: 1300px;
         justify-self: anchor-center;
     }

     /*.course-section h2 {
         color: #EE730A;
         font-size: 17px;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 1.2px;
         margin-bottom: 13px;
         margin-top: 50px;
         text-shadow: 0 2px 8px rgba(238, 115, 10, 0.3);
     }*/

     .course-section h3,
     .course-section h2 {
         /*color: #000000;
         font-family: "Poppins", Sans-serif;
         font-size: 36px;
         line-height: 48px;
         margin-bottom: 0px;
         font-weight: 600;*/
     }

     .course-description,
     .course-footer {
         color: #000000;
         font-size: 18px;
         margin-top: 20px;
         line-height: 39px;
     }

     .feature-icon {
         height: 100px;
         width: 100px;
         font-size: 40px;
         border-radius: 100px;
         color: #ee730a;
         background: linear-gradient(135deg, #1a1c23 0%, #252830 100%);
         margin: 0 auto 24px auto;
         position: relative;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .feature-icon:hover {
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         color: #fff;
         transform: translateY(-8px) scale(1.05);
         box-shadow: 0 12px 32px rgba(238, 115, 10, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
     }

     .feature-icon i {
         position: absolute;
         top: 20px;
         left: 30px;
         transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .feature-icon:hover i {
         transform: scale(1.1) rotate(5deg);
     }

     .course-features {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         justify-content: center;
         max-width: 100%;
     }

     .course-features .h5 {
         color: black;
     }

     @media (max-width: 550px) {
         .course-features {
             grid-template-columns: repeat(1, 1fr);
         }
     }

     @media (min-width: 550px) and (max-width: 900px) {
         .course-features {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     .feature-step {
         height: 30px;
         width: 30px;
         line-height: 30px;
         border-radius: 30px;
         font-size: 15px;
         font-weight: 600;
         color: #fff;
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         position: absolute;
         bottom: 12px;
         left: -12px;
         box-shadow: 0 4px 12px rgba(238, 115, 10, 0.5);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .feature-icon:hover .feature-step {
         background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
         color: #ee730a;
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
         transform: scale(1.15);
     }


     .feature-step-top {
         bottom: auto;
         top: 6px;
         left: -10px;
     }

     .feature-card {
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .feature-card:hover {
         transform: translateY(-4px);
     }

     .feature-card h3 {
         font-size: 24px;
         margin-bottom: 15px;
         font-weight: 600;
         color: black;
         transition: color 0.3s ease;
     }

     .feature-card:hover h3 {
         color: #ee730a;
     }

     .course-purchase {
         background-image: url(../img/background/woman-with-headset-video-call-laptop.webp);
         background-position: center center;
         background-repeat: no-repeat;
         background-size: cover;
         padding: 44px 40px 55px 40px;
         margin-top: 18px;
         margin-bottom: 18px;
         border-radius: 16px;
         width: 100%;
         position: relative;
         text-align: left;
         overflow: hidden;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     }

     .purchase-background-overlay {
         border-radius: 16px;
         /*background: linear-gradient(135deg, rgba(27, 27, 27, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);*/
         background: linear-gradient(135deg, rgba(47, 47, 47, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
         backdrop-filter: blur(0px);
         transition: all 0.3s ease;
         inset: 0;
         position: absolute;
     }

     .course-purchase:hover .purchase-background-overlay {
         /*background: linear-gradient(135deg, rgba(27, 27, 27, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);*/
         background: linear-gradient(135deg, rgba(27, 27, 27, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
         backdrop-filter: blur(3px);
     }

     .course-container {
         position: relative;
     }

     .course-container h4 {
         font-size: 30px;
         line-height: 38px;
         color: #FFFFFF;
         font-weight: 600;
         margin-bottom: 39px;
         text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
     }


     .btn-purchase {
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         border: none;
         padding: 15px 58px 15px 58px;
         border-radius: 50px;
         font-family: "Poppins", Sans-serif;
         font-size: 17px;
         font-weight: 600;
         text-transform: uppercase;
         line-height: 58px;
         letter-spacing: 1.2px;
         color: #fff;
         box-shadow: 0 8px 24px rgba(238, 115, 10, 0.4);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
     }

    /* Quitar la sobra, bigSEo indicaciones 
    .btn-purchase:before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         transition: left 0.5s ease;
     }

     .btn-purchase:hover:before {
         left: 100%;
     }*/

     .text-subhero {
        font-size: 1.2em;
     }

     .btn-purchase:hover {
         background: linear-gradient(135deg, #F98D2C 0%, #ee730a 100%);
         transform: translateY(-3px) scale(1.02);
         box-shadow: 0 12px 32px rgba(238, 115, 10, 0.5);
         color: #fff !important;
     }

     /**FIN COURSE SECTION**/



     /** INICIO PLAN COMPRA */
     .plan-card {
         background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
         box-shadow: 0 20px 60px rgba(22, 22, 22, .15);
         padding: 35px 30px 40px 30px;
         margin-left: auto;
         margin-right: auto;
         /*margin-bottom: 40px;*/
         /*margin-top: 40px;*/
         text-align: center;
         max-width: 900px;
         justify-self: anchor-center;
         border-radius: 20px;
         border: 1px solid rgba(238, 115, 10, 0.1);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
     }

     .plan-card:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: linear-gradient(90deg, #ee730a 0%, #F98D2C 50%, #ee730a 100%);
         background-size: 200% 100%;
         animation: shimmer 3s linear infinite;
     }

     .plan-card-col-left {
         min-width: 150px;
         margin-left: 20px;
     }

     .plan-card-col-right {
         max-width: 90%;
         margin-left: 20px;
         flex: 1 1 0 !important;
     }

     @media(min-width: 0px) and (max-width: 590px) {
         .plan-card-col-left {
             width: 100%;
             justify-content: center;
              margin-left: 0px;

         }

         .plan-card-col-right {
             width: 100%;
             max-width: 100%;
         }
     }

     @keyframes shimmer {
         0% {
             background-position: -200% 0;
         }

         100% {
             background-position: 200% 0;
         }
     }

     .plan-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 24px 70px rgba(238, 115, 10, 0.2), 0 10px 40px rgba(0, 0, 0, 0.15);
         border-color: rgba(238, 115, 10, 0.3);
     }

     .plan-price {
         position: relative;
         width: 120px;
         height: 120px;
         line-height: 120px;
         font-size: 33px;
         font-weight: 700;
         color: #0a0a0a;
         display: inline-flex;
         justify-content: center;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         filter: drop-shadow(0 8px 28px rgba(238, 115, 10, 0.15));
     }

     .plan-price:before {
         content: '';
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 100%;
         background: #fff;
         z-index: -1;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .plan-price cite {
         font-size: 18px;
         font-style: normal;
         position: relative;
         top: 4px;
         z-index: 1;
     }

     .plan-price span {
         position: absolute;
         right: -34px;
         line-height: 58px;
         font-size: 22px;
         padding-right: 10px;
     }

     .plan-price span:before {
         content: '';
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 58px;
         background: #fff;
         z-index: -1;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }


     .plan-card:hover .plan-price {
         filter: drop-shadow(0 12px 40px rgba(238, 115, 10, 0.3));
     }

     .plan-card:hover .plan-price:before,
     .plan-card:hover .plan-price span:before {
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
     }

     .plan-card:hover .plan-price {
         color: #fff;
         transform: scale(1.08);
     }

     .plan-features {
         font-size: 17px;
         font-weight: 400;
         letter-spacing: 0.8px;
         color: #000;
         margin-top: 20px;
         list-style: none;
         padding: 0;
     }

     .plan-features li {
         transition: all 0.3s ease;
         padding: 5px 0;
     }

     .plan-features li:hover {
         color: #ee730a;
         transform: translateX(5px);
     }

     .plan-features li+li {
         margin-top: 10px;
     }

     .plan-feature-icon {
         color: #ee730a;
         margin-right: 10px;
         font-size: 18px;
         transition: all 0.3s ease;
     }

     .plan-features li:hover .plan-feature-icon {
         transform: scale(1.2);
     }

     .plan-features-footer{
        width: 90%;
     }

     .pricing-features-intro {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
    margin-top: 0;
    font-family: "Poppins", Sans-serif;
    font-weight: 700;
    padding-right: 30px;
    padding-left: 30px;

}

     .button-black {
         font-size: 17px;
         font-weight: 400;
         line-height: 45px;
         letter-spacing: .1em;
         text-transform: uppercase;
     }

     .button-black a {
         color: white !important;
         padding: 10px 20px 10px 20px;
         background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
         border-radius: 50px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         display: inline-block;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     }

     .button-black a:hover {
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         color: #fff;
         transform: translateY(-2px);
         box-shadow: 0 8px 24px rgba(238, 115, 10, 0.4);
     }

     /** FIN PLAN COMPRA */


     /**INICIO BLOQUE VIDEO**/
     .highlight-block {
         background-color: white;
         text-align: center;
         padding: 40px;
         margin-bottom: 40px;

     }

     .highlight-block h3 {
         color: #EE730A;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 1.2px;
         margin-bottom: 13px;
     }

     .highlight-block h4 {
         color: #000000;
         font-weight: 600;
         font-size: 36px;
         line-height: 52px;
         margin-bottom: 30px;
     }

     .highlight-video {
         position: relative;
     }

     .highlight-video img {
         max-width: 1100px;
     }

     /**FIN BLOQUE VIDEO**/


     .intro-title {
         color: #000000;
         font-family: "Poppins", Sans-serif;
         font-size: 36px;
         line-height: 52px;
         margin-bottom: 0px;
         font-weight: 600;
     }

     /* Casos de éxito - Testimonios */
     .casos-exito-section .caja-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 30px;
     }

     .alumno-card {
         display: flex;
         flex-direction: row;
         align-items: center;
         padding: 25px;
         background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
         border-radius: 20px;
         box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         gap: 20px;
         border: 1px solid rgba(238, 115, 10, 0.1);
     }

     .alumno-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 12px 40px rgba(238, 115, 10, 0.15), 0 6px 24px rgba(0, 0, 0, 0.1);
         border-color: rgba(238, 115, 10, 0.3);
     }

     .alumno-avatar {
         flex-shrink: 0;
     }

     .alumno-avatar img {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         object-fit: cover;
         border: 3px solid transparent;
         background: linear-gradient(white, white) padding-box,
             linear-gradient(135deg, #EE730A 0%, #F98D2C 100%) border-box;
         box-shadow: 0 6px 20px rgba(238, 115, 10, 0.3);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .alumno-card:hover .alumno-avatar img {
         transform: scale(1.05);
         box-shadow: 0 8px 28px rgba(238, 115, 10, 0.4);
     }

     .alumno-card .test-item-content {
         flex: 1;
     }

     .alumno-testimonio {
         font-style: italic;
         color: #555;
         font-size: 15px;
         line-height: 1.7;
         margin-bottom: 12px;
         position: relative;
     }

     .alumno-testimonio::before {
         content: '\201C';
         color: rgba(238, 115, 10, 0.5);
         font-family: Georgia, serif;
         font-size: 24px;
         margin-right: 2px;
     }

     .alumno-testimonio::after {
         content: '\201D';
         color: rgba(238, 115, 10, 0.5);
         font-family: Georgia, serif;
         font-size: 24px;
         margin-left: 2px;
     }

     .alumno-card .test-item-title {
         color: #EE730A;
         font-weight: 600;
         font-size: 16px;
         text-align: center;
     }

     @media (max-width: 500px) {
         .alumno-card {
             flex-direction: column;
             text-align: center;
         }

         .alumno-avatar {
             margin-top: 10px;
         }
     }

     /* Temario Section */
     .temario-section {
         padding: 0px 15px;
     }

     .temario-section .caja {
         background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
         border-radius: 20px;
         padding: 40px;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
     }

     /* Temario Accordion Styles */
     #accordion_temario .caja-grid {
         display: flex !important;
         flex-direction: column !important;
         gap: 1rem;
     }

     #accordion_temario .caja-item-card {
         display: block !important;
         padding: 0 !important;
     }

     #accordion_temario .caja-item-card .faq-question {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         padding: 1.25rem 1.5rem;
         text-decoration: none;
         color: inherit;
         cursor: pointer;
     }

     #accordion_temario .caja-item-card .faq-question:hover {
         text-decoration: none;
     }

     #accordion_temario .faq-icon {
         flex-shrink: 0;
         margin-left: 1rem;
     }

     #accordion_temario .faq-icon .indicator {
         color: #C25200;
         font-size: 1rem;
         transition: transform 0.3s ease;
     }

     #accordion_temario .faq-answer {
         padding: 0 1.5rem 1.25rem 1.5rem;
         border-top: 1px solid #e8ecf1;
     }

     #accordion_temario .faq-answer p {
         color: #555;
         line-height: 1.7;
         margin: 0;
         padding-top: 1rem;
     }


     /* Test Status Badges */
     .test-status-badge {
         display: inline-block;
         padding: 3px 10px;
         border-radius: 12px;
         font-size: 12px;
         font-weight: 600;
         margin-left: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         transition: all 0.3s ease;
     }

     .badge-success {
         background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
         color: white;
         box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
     }

     .badge-danger {
         background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
         color: white;
         box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
     }

     .badge-warning {
         background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
         color: #000;
         box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
     }

     .test-status-badge i {
         margin-right: 4px;
         font-size: 11px;
     }

     .caja-item-card:hover .test-status-badge {
         transform: scale(1.05);
     }

     /* Training Section Styles - Optimized to reuse base styles */
     .testCarrusel {
         margin-top: 40px;
         /* Espacio entre secciones */
     }

     /* Solo animación del icono bolt */
     .training-icon i {
         animation: boltPulse 1.5s ease-in-out infinite;
     }

     @keyframes boltPulse {

         0%,
         100% {
             transform: scale(1);
             filter: brightness(1);
         }

         50% {
             transform: scale(1.1);
             filter: brightness(1.3);
         }
     }


     /** INICIO COURSE PRICING SECTION - Nuevo Diseño **/
     .course-pricing-section {
         padding: 60px 15px;
         background: #f8f9fa;
     }




     /** Botón de Compra **/
     .pricing-cta {
         text-align: center;
         margin-top: auto;
     }

     .btn-pricing-purchase {
         display: inline-block;
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         color: #ffffff !important;
         padding: 16px 60px;
         border-radius: 50px;
         font-family: "Poppins", Sans-serif;
         font-size: 16px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         text-decoration: none;
         box-shadow: 0 8px 24px rgba(238, 115, 10, 0.35);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
     }

     .btn-pricing-purchase:before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         transition: left 0.5s ease;
     }

     .btn-pricing-purchase:hover:before {
         left: 100%;
     }

     .btn-pricing-purchase:hover {
         background: linear-gradient(135deg, #F98D2C 0%, #ee730a 100%);
         transform: translateY(-4px) scale(1.02);
         box-shadow: 0 12px 36px rgba(238, 115, 10, 0.45);
         color: #ffffff !important;
     }

     /** Card de Video (Columna Derecha) **/
     .pricing-video-card {
         background: linear-gradient(135deg, #1a1c23 0%, #0f1014 100%);
         border-radius: 24px;
         padding: 60px 40px;
         height: 100%;
         min-height: 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .pricing-video-card:before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: radial-gradient(circle at center, rgba(238, 115, 10, 0.1) 0%, transparent 70%);
         opacity: 0;
         transition: opacity 0.4s ease;
     }

     .pricing-video-card:hover:before {
         opacity: 1;
     }

     .pricing-video-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 16px 56px rgba(0, 0, 0, 0.35);
     }

     /** Botón de Play **/
     .video-play-button {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.1);
         border: 3px solid rgba(255, 255, 255, 0.3);
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 40px;
         cursor: pointer;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         backdrop-filter: blur(10px);
     }

     .video-play-button:before {
         content: '';
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 50%;
         border: 3px solid rgba(255, 255, 255, 0.2);
         animation: pulse 2s ease-in-out infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             transform: scale(1);
             opacity: 1;
         }

         50% {
             transform: scale(1.15);
             opacity: 0.5;
         }
     }

     .video-play-button i {
         font-size: 32px;
         color: #ffffff;
         margin-left: 5px;
         transition: all 0.3s ease;
     }

     .pricing-video-card:hover .video-play-button {
         background: linear-gradient(135deg, #ee730a 0%, #F98D2C 100%);
         border-color: #ee730a;
         transform: scale(1.1);
         box-shadow: 0 8px 32px rgba(238, 115, 10, 0.4);
     }

     .pricing-video-card:hover .video-play-button:before {
         border-color: #ee730a;
     }

     .pricing-video-card:hover .video-play-button i {
         transform: scale(1.1);
     }

     /** Contenido del Video **/
     .video-content {
         text-align: center;
     }

     .video-label {
         display: block;
         color: #ee730a;
         font-size: 12px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 2px;
         margin-bottom: 12px;
         font-family: "Poppins", Sans-serif;
     }

     .video-title {
         color: #ffffff;
         font-size: 26px;
         font-weight: 600;
         line-height: 1.4;
         margin: 0;
         font-family: "Poppins", Sans-serif;
     }

     @media (max-width: 768px) {
         .video-title {
             font-size: 22px;
         }
     }

     /** Responsive **/
     @media (max-width: 991px) {


         .pricing-video-card {
             min-height: 350px;
             margin-top: 30px;
         }
     }

     @media (max-width: 576px) {

         .pricing-video-card {
             padding: 40px 30px;
             min-height: 300px;
         }

         .video-play-button {
             width: 80px;
             height: 80px;
             margin-bottom: 30px;
         }

         .video-play-button i {
             font-size: 26px;
         }
     }

     /** FIN COURSE PRICING SECTION **/


/* ======================================================
   INICIO ESTILOS INFO-PERMISO-PREMIUM
   (migrado desde infoPermisoPremium.blade.php)
   ====================================================== */

/* --- Utilidades generales --- */
.w-min-content { width: min-content !important; }
.fa-xl { font-size: 1.8em !important; }
.badge-lg { transform: scale(1.25); transform-origin: center; }
.cursor-pointer { cursor: pointer; }

/* --- Tipografía acotada a la página premium --- */
.premium-permiso h3 {
    font-weight: 900;
    font-size: 1.5em;
}

/* --- Botones de acción rápida --- */
.premium-permiso .buttondriven2 { position: relative; }
.premium-permiso .buttondriven2:hover {
    background-color: #f06400;
    color: #FFFFFF;
}
@media (max-width: 420px) {
    .premium-permiso .buttondriven2 { font-size: 18px; }
}

/* --- Iconbutton acotado --- */
.premium-permiso .iconbutton { font-size: 1.7em; }
.premium-permiso .ti-hand-point-up { color: #333; }

/* --- Card-body responsive (acotado) --- */
@media (max-width: 440px) {
    .premium-permiso .card-body {
        padding-right: 0.35rem !important;
        padding-left: 0.35rem !important;
    }
}

/* --- Tabla collapse (acotado) --- */
.premium-permiso tr.collapse td {
    border-top: none;
    background: #fafafa;
}
.premium-permiso .card.border-danger { background: #fffafa; }
.premium-permiso .card.border-danger:hover {
    box-shadow: 0 0 0 2px rgba(220,53,69,.15);
}
.premium-permiso .caja-naranja small {
    color: black;
    font-weight: 600;
}

/* --- Esquina inferior botón flotante --- */
.esquina-derecha-inferior {
    right: -3px;
    position: absolute;
    margin-top: 29px;
}

/* --- Chevron toggle --- */
:not(.collapsed).chevron-toggle,
.collapsed.chevron-toggle {
    transition: transform .2s ease;
}
.collapsed .chevron-toggle { transform: rotate(180deg); }

/* --- Burbuja conversación profesor --- */
.burbuja-conversacion { min-height: 150px !important; }

/* --- Container queries: acciones rápidas --- */
.acciones-rapidas-container { container-type: inline-size; }
.acciones-rapidas-container .accion {
    width: 100%;
    margin-bottom: 10px;
}
@container (min-width: 600px) {
    .acciones-rapidas-container .accion {
        width: 50%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --- Grid 2 columnas para tarjeta suscripción activa --- */
.premium-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
@media (max-width: 767px) {
    .premium-compact-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* --- Tarjeta suscripción activa --- */
.suscripcion-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 16px;
}
.suscripcion-card-header {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.suscripcion-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.suscripcion-card-title {
    color: #1a1a2e;
    font-weight: 800;
    font-size: 1.25em;
}
.suscripcion-badge-active {
    background: #28a745;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}
.suscripcion-card-body { padding: 12px 16px; }
.suscripcion-card-data-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.suscripcion-card-data-emoji {
    font-size: 1.2em;
    line-height: 1;
    margin-top: 2px;
}
.suscripcion-card-plan-name {
    font-weight: 700;
    font-size: 0.9em;
    color: #1a1a2e;
}
.suscripcion-card-plan-date {
    font-size: 0.76em;
    color: #888;
    margin-top: 1px;
}
.suscripcion-card-validity {
    font-weight: 600;
    font-size: 0.88em;
    color: #333;
}
.suscripcion-card-ampliado {
    font-size: 0.78em;
    color: #28a745;
    margin-left: 4px;
}
.suscripcion-time-bar-track {
    background: #f0f0f0;
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    margin-top: 5px;
}
.suscripcion-time-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .6s;
}
.suscripcion-days-left {
    font-size: 0.72em;
    color: #999;
    margin-top: 3px;
}
.suscripcion-divider {
    border-top: 1px solid #f0f0f0;
    margin-bottom: 10px;
}
.suscripcion-invitaciones {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 7px 10px;
}
.suscripcion-invitar-btn {
    background: #F06400;
    color: #fff !important;
    font-size: 0.75em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 16px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.suscripcion-ampliar {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: #fffbf5;
    border-radius: 8px;
    padding: 7px 10px;
}
.suscripcion-ampliar-text { flex: 1; }
.suscripcion-ampliar-title {
    font-weight: 700;
    font-size: 0.77em;
    color: #c45000;
    line-height: 1.3;
}
.suscripcion-ampliar-sub {
    font-size: 0.7em;
    color: #888;
}
.suscripcion-historico-link {
    font-size: 0.73em;
    color: #888;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Overlay sobre secciones bloqueadas (no premium) --- */
.premium-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- Progreso del permiso (lista) --- */
.progreso-permiso li {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}
.progreso-permiso li:last-child { border-bottom: none; }
.progreso-permiso .badge {
    font-size: 1.1em;
    padding: 10px;
    border-radius: 50%;
}
.estado-icono {
    min-width: 45px;
    text-align: center;
}



/* ===== Panel Corcho del Profesor ===== */
.panel-corcho {
    background-color: #c4956a;
    background-image:
        repeating-radial-gradient(circle at 17% 32%, rgba(139,90,43,0.12) 0px, transparent 1px),
        repeating-radial-gradient(circle at 62% 75%, rgba(100,60,20,0.10) 0px, transparent 2px),
        repeating-radial-gradient(circle at 85% 15%, rgba(160,110,60,0.08) 0px, transparent 1px),
        linear-gradient(145deg, #c4956a 0%, #b8864f 30%, #d4a574 60%, #c08e5a 100%);
    border: 8px solid #8B6914;
    border-image: linear-gradient(180deg, #a07828 0%, #7a5a18 40%, #604810 100%) 1;
    border-radius: 4px;
    padding: 18px 14px 14px 14px;
    position: relative;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.15),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 -1px 3px rgba(255,255,255,0.08);
}
.panel-corcho::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.06) 0%, transparent 40%);
    pointer-events: none;
}
.chincheta {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 40% 35%, #ff4444 0%, #cc0000 60%, #990000 100%);
    border-radius: 50%;
    box-shadow:
        0 3px 6px rgba(0,0,0,0.4),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255,150,150,0.4);
}
.chincheta::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    background: radial-gradient(circle, #e0e0e0 0%, #999 100%);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.nota-clavada {
    position: relative;
    transform: rotate(-0.8deg);
    box-shadow: 3px 4px 8px rgba(0,0,0,0.25);
}

/* ======================================================
   FIN ESTILOS INFO-PERMISO-PREMIUM
   ====================================================== */