* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', system-ui, sans-serif;
            overflow-x: hidden;
        }

        :root {
            --vino-oscuro: #8B1E2C;
            --vino-claro: #8F1D3A;
            --oliva: #C0B585;
            --oliva-soft: rgba(192, 181, 133, 0.2);
            --shadow-card: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
        }

        /* Pantalla de entrada */
        .entrada-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: overlayClose 0.9s ease-in-out forwards;
            animation-delay: 1.6s;
        }

        .entrada-overlay img {
            width: auto;
            height: auto;
            max-width: 70%;
            max-height: 70%;
            object-fit: contain;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            animation: logoIntro 0.9s cubic-bezier(.2,.9,.2,1) both, logoFloat 3s ease-in-out 0.9s infinite alternate;
            transform-origin: center center;
        }

        @keyframes logoIntro {
            0% { transform: scale(0.6) rotate(-6deg); opacity: 0; filter: blur(6px); }
            60% { transform: scale(1.06) rotate(4deg); opacity: 1; filter: blur(0); }
            100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
        }

        @keyframes logoFloat {
            from { transform: translateY(0); }
            to { transform: translateY(-10px); }
        }

        @keyframes overlayClose {
            0% { opacity: 1; visibility: visible; }
            60% { opacity: 0.9; }
            100% { opacity: 0; visibility: hidden; }
        }

        .contenido-principal {
            opacity: 0;
            transition: opacity 220ms ease-in;
        }

        /* Navbar */
        .navbar {
            background: linear-gradient(135deg, var(--vino-oscuro) 0%, var(--vino-claro) 100%) !important;
            padding: 15px 0 !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            margin-right: auto;
            padding-left: 20px;
        }

        .logo-img {
            height: 80px;
            width: auto;
            transition: transform 0.3s ease;
        }

        .logo-img:hover {
            transform: scale(1.05);
        }

        @media (min-width: 992px) {
            .navbar-brand { margin-left: 50px; }
            .navbar-nav { margin-right: 50px; }
        }

        .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            margin: 0 5px;
            padding: 8px 15px !important;
            transition: color 0.3s ease;
            position: relative;
        }

        .navbar-nav .nav-link:hover {
            color: var(--oliva) !important;
        }

        .navbar-nav .nav-link.active {
            color: var(--oliva) !important;
        }

        .navbar-nav .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background-color: var(--oliva);
            border-radius: 2px;
        }

        .contact-btn-nav {
            display: inline-block !important;
            background: transparent !important;
            border: 2px solid var(--oliva) !important;
            border-radius: 30px !important;
            padding: 8px 25px !important;
            margin-left: 15px !important;
            color: white !important;
            font-weight: 600 !important;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        }

        .contact-btn-nav::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: rgba(192, 181, 133, 0.5);
            backdrop-filter: blur(3px);
            transition: width 0.35s ease;
            z-index: -1;
            border-radius: 30px;
        }

        .contact-btn-nav:hover::before {
            width: 100%;
        }

        .contact-btn-nav:hover {
            color: white !important;
            border-color: var(--oliva) !important;
            transform: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.18);
        }

        .navbar-toggler {
            background-color: var(--oliva);
            border: none;
            margin-right: 15px;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Carrusel */
        .carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .carousel-item-custom {
            position: relative;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .carousel-item-custom img,
        .carousel-item-custom video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .carousel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(139, 30, 44, 0.7) 0%, rgba(143, 29, 58, 0.7) 100%);
            z-index: 1;
        }

        .carousel-caption-custom {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            max-width: 800px;
            padding: 20px;
            animation: fadeInUp 0.8s ease-out;
        }

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

        .carousel-caption-custom h4 {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 15px;
            color: var(--oliva);
        }

        .carousel-caption-custom h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .carousel-caption-custom p {
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

        .btn-carousel {
            display: inline-block;
            background: var(--oliva);
            color: var(--vino-oscuro);
            padding: 12px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .btn-carousel:hover {
            background: transparent;
            color: var(--oliva);
            border-color: var(--oliva);
            transform: translateY(-3px);
            text-decoration: none;
        }

        .owl-nav button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(192, 181, 133, 0.8) !important;
            width: 50px;
            height: 50px;
            border-radius: 50% !important;
            color: var(--vino-oscuro) !important;
            font-size: 24px !important;
            transition: all 0.3s ease;
        }

        .owl-nav button:hover {
            background: var(--oliva) !important;
            transform: translateY(-50%) scale(1.1);
        }

        .owl-nav .owl-prev { left: 20px; }
        .owl-nav .owl-next { right: 20px; }

        .owl-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .owl-dot span {
            background: rgba(255, 255, 255, 0.5) !important;
        }

        .owl-dot.active span {
            background: var(--oliva) !important;
        }

        /* Stats */
        .stats-section {
            background-color: #f8f9fa !important;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--vino-oscuro);
            margin-bottom: 10px;
        }

        .rating-stars {
            color: #ffc107;
        }

        /* CURSOS - IMÁGENES RESPONSIVAS MEJORADAS */
        .courses-section {
            padding: 70px 0 80px !important;
            background: linear-gradient(0deg, #fefcf7 0%, #ffffff 100%);
        }

        .section-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #2c2a29;
            letter-spacing: -0.3px;
        }

        .section-pill {
            background: var(--oliva-soft);
            padding: 6px 24px;
            border-radius: 60px;
            font-weight: 600;
            color: var(--vino-oscuro);
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .section-white {
            background: #ffffff;
        }

        .course-card-modern {
            background: white;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
            height: 100%;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(192, 181, 133, 0.2);
        }

        .course-card-modern:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 45px -18px rgba(0, 0, 0, 0.2);
            border-color: rgba(192, 181, 133, 0.5);
        }

        .course-img-wrapper {
            position: relative;
            overflow: hidden;
            /* Relación de aspecto 4:3 para que todas las imágenes tengan la misma forma */
            aspect-ratio: 4 / 3;
            background-color: #f0ede5;
        }

        .course-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block; /* elimina espacio extra */
        }

        .course-card-modern:hover .course-img {
            transform: scale(1.05);
        }

        .course-badge {
            position: absolute;
            top: 16px;
            left: 18px;
            background: rgba(139, 30, 44, 0.9);
            backdrop-filter: blur(4px);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 5px 14px;
            border-radius: 40px;
            letter-spacing: 0.3px;
            z-index: 2;
        }

        .course-info {
            padding: 24px 20px 26px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .course-info h4 {
            font-size: 1.55rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: #1f1e1d;
        }

        .course-desc {
            color: #5b5b5b;
            font-size: 0.95rem;
            line-height: 1.45;
            margin-bottom: 24px;
            flex: 1;
        }

        .btn-course {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--vino-oscuro);
            background: transparent;
            padding: 8px 0;
            border-bottom: 2px solid var(--oliva);
            width: fit-content;
            text-decoration: none;
            transition: gap 0.2s, color 0.2s;
            font-size: 0.9rem;
        }

        .btn-course:hover {
            gap: 12px;
            color: #6b1622;
            text-decoration: none;
            border-bottom-color: var(--vino-oscuro);
        }

        /* Modalidades Cards con botones clickeables */
        .modalidad-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            height: 100%;
            border: 1px solid rgba(192,181,133,0.2);
            cursor: pointer;
        }
        .modalidad-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        .modalidad-card i {
            color: var(--vino-oscuro);
        }

        /* TESTIMONIOS - imagen y texto en tarjeta de igual altura */
        .testimonial-carousel-horizontal .testimonial-horizontal {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin: 10px 0;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 0;
            min-height: 340px;
        }
        .testimonial-carousel-horizontal .testimonial-img-left {
            width: 300px;
            min-width: 220px;
            flex: 0 0 300px;
            height: auto;
            object-fit: cover;
            display: block;
            background: #f0ede5;
        }
        .testimonial-carousel-horizontal .testimonial-content {
            padding: 28px 28px 28px 28px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #fefcf7;
        }
        .testimonial-carousel-horizontal .rating-stars { margin-bottom: 12px; color: #ffc107; }
        .testimonial-carousel-horizontal .testimonial-content p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #4a4a4a;
            margin-bottom: 14px;
            font-style: italic;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .testimonial-carousel-horizontal .testimonial-content h5 {
            font-weight: 700;
            color: #2c2a29;
            margin-bottom: 6px;
        }
        .testimonial-carousel-horizontal .testimonial-content small { color: #888; }

        @media (max-width: 992px) {
            .testimonial-carousel-horizontal .testimonial-img-left { width: 220px; flex: 0 0 220px; }
        }
        @media (max-width: 768px) {
            .testimonial-carousel-horizontal .testimonial-horizontal {
                flex-direction: column;
                min-height: auto;
            }
            .testimonial-carousel-horizontal .testimonial-img-left {
                width: 100%;
                height: 350px;
                flex: none;
            }
            .testimonial-carousel-horizontal .testimonial-content { padding: 18px; }
            .testimonial-carousel-horizontal .testimonial-content p {
                -webkit-line-clamp: 4;
            }
        }

        /* FAQ - dos columnas con mejor integración */
        .faq-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: stretch;
        }
        .faq-left {
            flex: 1.2;
            min-width: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #fefaf0;
            border-radius: 28px;
            padding: 32px 28px;
            border: 1px solid rgba(192,181,133,0.3);
        }
        .faq-right {
            flex: 1.2;
            min-width: 260px;
            background: #fefaf0;
            border-radius: 28px;
            padding: 32px 28px;
            border: 1px solid rgba(192,181,133,0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .faq-right h4 {
            color: var(--vino-oscuro);
            margin-bottom: 16px;
            font-weight: 600;
        }
        .faq-right p {
            color: #4f4a3e;
            line-height: 1.5;
        }
        .faq-logo {
            width: 180px;
            max-width: 100%;
            display: block;
            margin: 0 auto 18px auto;
        }
        .faq-intro {
            color: #4f4a3e;
            font-size: 1.05rem;
            line-height: 1.6;
            margin-top: 8px;
            text-align: center;
        }
        .faq-right i {
            font-size: 2rem;
            color: var(--oliva);
            margin-bottom: 20px;
        }

        .faq-item {
            background: white;
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .faq-question {
            padding: 18px 24px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            background: white;
            transition: 0.2s;
            color: #2c3e50;
        }
        .faq-question:hover {
            background: #faf9f5;
        }
        .faq-answer {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            color: #6c757d;
            border-top: 0px solid #eee;
        }
        .faq-item.active .faq-answer {
            padding: 18px 24px;
            max-height: 300px;
            border-top: 1px solid #eee;
        }
        .faq-question i {
            transition: transform 0.2s;
        }
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        /* Beneficios */
        .bg-primary {
            background: linear-gradient(105deg, var(--vino-oscuro) 0%, #79222e 100%) !important;
        }
        .benefit-icon {
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 20px;
            transition: 0.2s;
        }

        /* Footer */
        .btn-square {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .btn-outline-primary {
            border-color: var(--oliva);
            color: var(--oliva);
        }
        .btn-outline-primary:hover {
            background: var(--oliva);
            border-color: var(--oliva);
            color: var(--vino-oscuro);
        }
        .footer-logo-img {
            height: 110px;
            width: auto;
            margin-bottom: 15px;
            margin-left: 50px;
        }
        .footer-container {
            padding-top: 18px;
            padding-bottom: 18px;
        }
        
        /* Media Queries Mejoradas para Responsividad de Imágenes */
        @media (max-width: 992px) {
            .navbar-brand { margin-left: 15px; }
            .logo-img { height: 64px; }
            .navbar-collapse {
                background: linear-gradient(135deg, var(--vino-oscuro), var(--vino-claro));
                border-radius: 28px;
                margin-top: 14px;
                padding: 16px !important;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .navbar-nav {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
            }
            .navbar-nav .nav-link {
                font-size: 1.05rem !important;
                padding: 10px 18px !important;
            }
            .contact-btn-nav {
                margin-left: 0 !important;
                margin-top: 6px;
                width: auto;
            }
            .footer-container .col-lg-4 {
                text-align: center;
            }
            .footer-container .col-lg-4 .footer-logo-img {
                margin-left: auto !important;
                margin-right: auto !important;
                display: inline-block !important;
                height: 95px;
            }
            .carousel-caption-custom h1 { font-size: 2rem; }
            .section-title { font-size: 1.8rem; }
            .courses-section .row {
                row-gap: 1rem;
                column-gap: 1rem;
            }
            .course-card-modern { margin-bottom: 12px; }
            /* Ajuste de aspecto para tablets */
            .course-img-wrapper { aspect-ratio: 16/9; }
        }
        
        @media (max-width: 768px) {
            .courses-section { padding: 50px 0 60px !important; }
            .faq-wrapper { flex-direction: column; }
            .faq-left, .faq-right { flex: 1 1 auto; }
            .footer-logo-img { 
                margin-left: 0 !important; 
                margin-right: 0 !important; 
                display: block; 
                margin: 0 auto 12px; 
                height: 90px; 
            }
            .footer-container .row { align-items: center; }
            .courses-section .row {
                row-gap: 1.25rem;
                column-gap: 0.75rem;
            }
            .course-card-modern { margin-bottom: 18px; }
            /* En móviles, las imágenes ocupan todo el ancho manteniendo la relación 4:3 */
            .course-img-wrapper { 
                aspect-ratio: 4 / 3; 
                width: 100%;
            }
            .course-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .course-info { padding: 16px 14px 18px; }
            .carousel-item-custom { min-height: 350px; }
        }
        
        @media (max-width: 480px) {
            .carousel-item-custom { min-height: 280px; }
            .carousel-caption-custom h1 { font-size: 1.6rem; }
            .carousel-caption-custom p { font-size: 0.9rem; }
            .btn-carousel { padding: 10px 25px; font-size: 0.9rem; }
            .owl-nav button { width: 35px; height: 35px; font-size: 16px !important; }
            .owl-nav .owl-prev { left: 5px; }
            .owl-nav .owl-next { right: 5px; }
            .course-img-wrapper { aspect-ratio: 4/3; }
            .stat-number { font-size: 1.8rem; }
        }

        .text-primary {
            color: var(--vino-oscuro) !important;
        }
        .video-wrapper-full {
            max-width: 1000px;
            margin: 0 auto;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 35px -10px rgba(0,0,0,0.2);
        }
        .video-wrapper-full video { width: 100%; display: block; }
        /* WhatsApp flotante */
        .whatsapp-float {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 1060;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #25D366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(37,211,102,0.22);
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        .whatsapp-float i { font-size: 28px; color: #fff !important; }
        .whatsapp-float:focus,
        .whatsapp-float:active,
        .whatsapp-float:visited,
        .whatsapp-float:link {
            outline: none;
            box-shadow: 0 10px 30px rgba(37,211,102,0.22);
            color: #fff;
            background: #25D366;
            text-decoration: none;
        }
        .whatsapp-float:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 40px rgba(37,211,102,0.28); }
        @media (max-width: 768px) {
            .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
            .whatsapp-float i { font-size: 26px; }
        }