/*
Theme Name: SurtidoDirecto Theme
Theme URI: https://www.surtidodirecto.com
Author: [Tu Nombre/Empresa]
Author URI: [Tu Web]
Description: Plantilla personalizada para la landing page de SurtidoDirecto con Bootstrap 5.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, bootstrap, landing-page, green
Text Domain: surtidodirecto-theme
*/

/* Aquí va tu CSS personalizado para SurtidoDirecto */
 
/* Pega el CSS de la sección <style> de tu plantilla aquí */
   :root {
            --primary-color: #4CAF50; /* Verde principal */
            --dark-green: #388E3C; /* Verde oscuro para acentos */
            --white: #FFFFFF;
            --light-gray: #f8f9fa;
        }
        body {
            font-family: Arial, sans-serif;
            color: #333;
        }
        .bg-primary-sd {
            background-color: var(--primary-color) !important;
        }
        .text-primary-sd {
            color: var(--primary-color) !important;
        }
        .btn-primary-sd {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--white);
        }
        .btn-primary-sd:hover {
            background-color: var(--dark-green);
            border-color: var(--dark-green);
        }
        .btn-whatsapp {
            background-color: #25D366; /* Verde de WhatsApp */
            border-color: #25D366;
            color: var(--white);
        }
        .btn-whatsapp:hover {
            background-color: #1DA851;
            border-color: #1DA851;
        }
        .hero-section {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 100px 0;
        }
        .features-section .icon {
            font-size: 3rem;
            color: var(--primary-color);
        }
        .cta-section {
            background-color: var(--light-gray);
            padding: 60px 0;
        }
        .footer {
            background-color: var(--dark-green);
            color: var(--white);
            padding: 30px 0;
        }

       /* Estilo específico para el logo de SurtidoDirecto */
        .logo-surtidodirecto {
            width: 300px !important;   /* Forzamos el ancho */
            height: 80px !important;  /* Forzamos el alto */
            object-fit: contain;      /* Mantiene la proporción sin deformar la imagen */
            display: block;
        }


        /* --- Estilos para las Imágenes de Producto --- */

        .product-card-img {
            /* Establecemos una altura fija para forzar el aspecto vertical */
            height: 300px; 
            
            /* Ancho total de la tarjeta */
            width: 100%;
            
            /* MAGIA: Esto asegura que la imagen rellene el espacio sin estirarse ni deformarse. 
            Recortará los bordes si la imagen original no tiene la proporción exacta. */
            object-fit: cover; 
            
            /* Centra la imagen al recortar */
            object-position: center center; 
        }

        /* --- ESTILOS PARA EL HERO SECTION CON IMAGEN --- */

       

        /* Configuración del Fondo Hero */
        .hero-with-bg {
            background-image: url('assets/images/web-hero-section1.png');
            background-size: cover;        /* La imagen cubre todo el espacio */
            background-position: center;   /* La imagen se centra */
            background-repeat: no-repeat;
            min-height: 40vh;              /* Ocupa el 80% de la altura de la pantalla */
            position: relative;
            overflow: hidden;
        }

        /* El filtro oscuro (Overlay) */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 0.5 es el nivel de oscuridad (50%) */
            z-index: 1;
        }

        /* Forzar que el contenido esté sobre el filtro */
        .z-index-2 {
            z-index: 2;
        }

        /* Ajuste para móviles: el logo de 300px es muy grande para un celular */
        @media (max-width: 768px) {
            .logo-surtidodirecto {
                width: 200px !important; /* Lo hacemos más pequeño en pantallas chicas */
                height: auto !important;  /* Que el alto se ajuste solo */
            }
            
            .product-card-img {
                /* En pantallas pequeñas, reducimos un poco la altura para que no ocupe toda la pantalla */
                height: 220px;
            }

            .hero-with-bg {
                min-height: 60vh; /* Un poco más bajo en celulares */
            }

            .display-3 {
                font-size: 2.5rem; /* Título un poco más pequeño en celular */
            }
        }