/* Estilos personalizados para la elegancia y fuentes */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f7f7;
            overflow-x: hidden; /* Oculta el scroll horizontal generado por el transform inicial */
        }
        .font-display {
            font-family: 'Playfair Display', serif;
        }

        /* --- EFECTO DE ESCALA EN ENCABEZADOS --- */
        .text-grow-hover {
            transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
            display: inline-block; /* Necesario para que funcione la transformación de escala */
            cursor: pointer;
        }
        .text-grow-hover:hover {
            transform: scale(1.05); /* Aumenta el tamaño un 5% */
            color: #312e81; /* Cambia ligeramente el color al hacer hover */
        }

        /* --- Estilo de Zoom al Pasar el Cursor (Hover) --- */
        .zoom-hover {
            transition: transform 0.4s ease-in-out;
            cursor: pointer;
        }
        .zoom-hover:hover {
            transform: scale(1.05); /* Zoom de 5% */
        }
        
        /* Estilo para el fondo del hero */
        #hero {
            background-image: url('company/invitacionppal.jpg');
            background-size: cover;
            background-position: center;
        }
        
        /* Estilo para el menú responsivo (oculto por defecto en móvil) */
        #mobile-menu {
            transition: max-height 0.3s ease-in-out;
            overflow: hidden;
            max-height: 0;
        }
        #mobile-menu.open {
            max-height: 300px; 
        }

        /* --- ESTILOS DE ANIMACIÓN DE ENTRADA --- */
        .slide-in {
            opacity: 0;
            transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .slide-left {
            transform: translateX(-100px); /* Sale desde la izquierda */
        }
        .slide-right {
            transform: translateX(100px); /* Sale desde la derecha */
        }
        .slide-in.active {
            opacity: 1;
            transform: translateX(0); /* Vuelve a la posición normal */
        }

        /* --- ESTILOS PARA TARJETAS DE PRECIOS --- */
        .price-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .price-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        /* Etiquetas de Color Base */
        .tag-basic { background-color: #A0A0A0; } /* Gris */
        .tag-medida { background-color: #5A5A5A; } /* Gris oscuro para A la Medida */
        .tag-web { background-color: #3B82F6; }  /* Azul */
        .tag-premium { background-color: #FBBF24; } /* Dorado */

        /* ESTILO DISTINTO PARA DELUX PLATINUM */
        .price-card.gold {
            background-color: #1a1a1a; /* Fondo negro para contraste */
            color: #fff;
            border: 4px solid #FBBF24; /* Borde dorado */
            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.5);
        }
        .price-card.gold .gold-text {
            color: #FBBF24; /* Texto dorado */
        }
        .price-card.gold .text-gray-500, .price-card.gold .text-gray-900, .price-card.gold .text-gray-600 {
            color: #ccc !important;
        }
        .price-card.gold .fa-check {
            color: #FBBF24 !important; /* Checks dorados */
        }

        /* Estilo para la tabla comparativa */
        .comparison-table th, .comparison-table td {
            padding: 12px;
            text-align: center;
        }
        .comparison-table th {
            background-color: #1f2937; /* Gris oscuro para encabezado */
            color: white;
            font-weight: 700;
        }
        .comparison-table tr:nth-child(even) {
            background-color: #f3f4f6; /* Rayado suave */
        }
        /* Estilo para la sección de ejemplos */
        .example-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }



         /* Info del evento */
         .evento {
           background: #fff0f6;
           border-radius: 20px;
           box-shadow: 0 0 15px rgba(0,0,0,0.1);
           margin: 40px auto;
           padding: 30px;
           width: 90%;
           animation: scaleIn 1.5s ease-in-out;
         }
         
        video{
        display:block;
        width:100%;
        height:auto;
        vertical-align:middle;
        border-radius:25px;
        }

           /* --- 1. Estilo del Contenedor (La Ventana) --- */
        .video-container {
            width: 400px; /* Ancho fijo para el ejemplo */
            height: 200px; /* Altura que es 5% menor a la altura real del video */
            position: relative;
            overflow: hidden; /* **Clave:** Oculta cualquier contenido que se salga de este div */
            /* border: 4px solid #333;*/
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* --- 2. Estilo del Video (El Contenido a Mover) --- */
        .video-content {
            width: 100%; /* El video ocupa todo el ancho del contenedor */
            height: 100%; /* Altura base igual al contenedor */
            object-fit: cover; /* Asegura que el video cubra el área sin distorsionarse */

            /* --- 3. El Recorte del 5% --- */
            /* Mueve el video hacia arriba (negativo) el 5% de su altura.
               El 5% inferior queda fuera del área de visualización del .video-container. */
            transform: translateY(-5%); 
        }

        .etiqueta-recorte {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            padding: 5px;
            font-size: 12px;
            z-index: 10;
        }