/* Estilos extraídos de index.html */
body {
    font-family: 'Manrope', sans-serif;
    min-height: max(884px, 100dvh);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Añade aquí más reglas CSS personalizadas si es necesario */

/* Tailwind `primary` actualizado en el inline config a #6699cc */
/* Video wrapper para MP4 local: que ocupe ancho completo y no recorte el contenido */
.video-wrapper {
    width: 100%;
    max-width: 1100px; /* ajustable: pon full-width si lo deseas */
    margin: 0 auto;
    background: #ffffff; /* fondo blanco solicitado */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: none; /* sombra eliminada */
    border: none; /* borde eliminado */
}

/* Clase para asegurar que cualquier contenedor marcado no muestre sombra ni borde */
.no-shadow {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Asegurar que el elemento video no muestre borde/outline */
.video-wrapper video {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.video-wrapper video {
    width: auto !important;
    /* Reducción del tamaño: mostrar el vídeo al 70% (30% más pequeño) */
    max-width: 70% !important;
    max-height: 80vh !important; /* permite que el vídeo vertical se vea completo */
    height: auto !important;
    display: block;
    border: 0;
    background: #ffffff;
    object-fit: contain; /* muestra el vídeo completo sin recortar */
}

@media (max-width: 768px) {
    /* En móvil usamos más espacio disponible y mayor anchura relativa */
    .video-wrapper video { max-height: 60vh !important; max-width: 85% !important; }
}

/* Potenciado: enfatizar títulos dentro de las tarjetas */
.potenciado .grid h4,
.potenciado h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 800; /* extra bold */
    color: #ffffff; /* asegurar contraste con bg-primary */
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.potenciado .grid p,
.potenciado p { color: rgba(255,255,255,0.8); }

/* Increase star size slightly for feature ratings */
.feature-rating span {
    font-size: 1.125rem; /* ~18px, a bit larger than text-sm */
    line-height: 1;
}