/* ==================== VARIABLES Y RESET ==================== */
/* Definición de colores principales del sitio */
:root {
    --color-negro: #000000;
    --color-gris-oscuro: #333333;
    --color-gris: #707792;
    --color-gris-claro: #E8E8E8;
    --color-amarillo: #F2BD57;
    --color-rosa: #E89090;
    --color-plateado: #C0C0C0;
    --color-blanco: #FFFFFF;
}

/* Reset de estilos predeterminados del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Eliminar espacios en html y body */
html {
    margin: 0;
    padding: 0;
}

/* Estilos base del body */
body {
    font-family: Arial, sans-serif;
    background-color: var(--color-blanco);
    color: var(--color-negro);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Configuración de imágenes responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Asegurar que todas las imágenes dentro de contenedores se adapten correctamente */
.card img,
.product-card img,
.service-card img,
.oferta-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==================== NAVBAR CON FORMA DE LÁPIZ ==================== */
/* Contenedor principal del navbar con diseño de lápiz */
nav.navbar-lapiz {
    display: flex;
    align-items: center;
    position: relative; /* No se superpone, ocupa su espacio */
    top: 0;
    width: 100%;
    height: 3.75rem;
    z-index: 1000;
    box-shadow: none;
    margin: 0;
}

/* Goma del lápiz (parte rosa del extremo) */
.goma {
    width: 2.5rem;
    height: 100%;
    background-color: var(--color-rosa);
    margin-top: 0;
}

/* Metal del lápiz (parte plateada entre goma y cuerpo) */
.metal {
    width: 1.25rem;
    height: 100%;
    background-color: var(--color-plateado);
    margin-top: 0;
}

/* Cuerpo principal del lápiz donde va el logo y menú */
.cuerpo {
    flex-grow: 1;
    height: 100%;
    background-color: #E7BB5E; /* Color del panel de administrador */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    margin-top: 0;
    gap: 1.5rem;
    padding-left: 1rem;
}

/* Punta de madera del lápiz (triángulo café) */
.punta-madera {
    width: 0;
    height: 0;
    border-top: 1.875rem solid transparent;
    border-bottom: 1.875rem solid transparent;
    border-right: 1.875rem solid #EED09D; 
    margin-top: 0;
}

/* Punta de grafito del lápiz (triángulo negro) */
.punta-grafito {
    width: 0;
    height: 0;
    border-top: 0.9375rem solid transparent;
    border-bottom: 0.9375rem solid transparent;
    border-right: 0.9375rem solid var(--color-negro); 
    position: relative;
    right: -0.9375rem; 
    z-index: 2;
    margin-top: 0;
}

/* Contenedor del logo en el navbar */
.logo-navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    margin-left: -5rem;
    margin-top: 0;
}

/* Imagen del logo con tamaño fluido responsivo */
.logo-img {
    height: clamp(5rem, 15vw, 15rem); /* Tamaño adaptable según viewport */
    width: auto;
    max-width: clamp(20rem, 38vw, 38rem);
    object-fit: contain;
    display: flex;
    align-items: center;
}

/* Contenedor de enlaces del menú */
.enlaces {
    display: flex;
    gap: 2.5rem;
    margin-left: auto;
    padding-right: 1rem;
    transition: all 0.3s ease;
}

/* Estilo de los enlaces del menú */
.enlaces a {
    text-decoration: none;
    color: #131313; /* Color claro para contraste con fondo oscuro */
    font-size: 1.125rem;
    font-weight: 550;
    transition: all 0.3s;
    position: relative;
}

/* Línea animada debajo de los enlaces */
.enlaces a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-negro);
    transition: width 0.3s ease;
}

/* Animación de la línea al pasar el mouse */
.enlaces a:hover::after {
    width: 100%;
}

/* Cambio de color al pasar el mouse */
.enlaces a:hover {
    color: var(--color-negro);
}

/* Botón de menú hamburguesa (oculto en desktop) */
.boton-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    gap: 0.25rem;
    z-index: 10;
}

/* Líneas del menú hamburguesa */
.boton-menu span {
    display: block;
    height: 0.25rem;
    width: 1.875rem;
    background: var(--color-negro);
    border-radius: 0.125rem;
    transition: all 0.3s;
}

/* Animación de las líneas cuando el menú está activo */
/* Primera línea: rotación 45° */
.boton-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.5rem, 0.5rem);
}

/* Segunda línea: ocultar */
.boton-menu.active span:nth-child(2) {
    opacity: 0;
}

/* Tercera línea: rotación -45° */
.boton-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.5rem, -0.5rem);
}


/* ==================== FOOTER ==================== */
.footer {
    background-color: #3b7dd4;
    color: white;
    padding: 50px 20px 30px;
    margin-top: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 30px;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.footer-section-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.footer-section a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.footer-section a:hover {
    opacity: 0.8;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 20px 0;
}

.footer-copyright {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

/* ==================== RESPONSIVE DESIGN - TABLET ==================== */
/* Adaptaciones para dispositivos tablet (menor a 768px) */
@media (max-width: 48rem) {
    /* Reducción de altura del navbar */
    nav.navbar-lapiz {
        height: 3.5rem;
    }
    
    /* Ajuste de punta de grafito para tablet */
    .punta-grafito {
        border-top: 0.625rem solid transparent;
        border-bottom: 0.625rem solid transparent;
        border-right: 0.625rem solid var(--color-negro);
        right: -0.625rem;
        margin-top: 0;
    }
    
    /* Ajuste de punta de madera para tablet */
    .punta-madera {
        border-top: 1.25rem solid transparent;
        border-bottom: 1.25rem solid transparent;
        border-right: 1.25rem solid #EED09D;
        margin-top: 0;
    }
    
    /* Ajuste de metal para tablet */
    .metal {
        width: 0.875rem;
        margin-top: 0;
    }
    
    /* Ajuste de goma para tablet */
    .goma {
        width: 1.875rem;
        margin-top: 0;
    }
    
    /* Ajuste del cuerpo del lápiz para tablet */
    .cuerpo {
        margin-top: 0;
        gap: 0.5rem;
        padding-left: 0.5rem;
    }
    
    /* Ajuste del logo para tablet - centrado */
    .logo-navbar {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        justify-content: center;
    }
    
    /* Tamaño del logo en tablet - totalmente responsivo */
    .logo-img {
        height: auto;
        width: 100%;
        max-width: 60rem;
        max-height: 18.75rem;
        object-fit: contain;
    }
    
    /* Menú convertido a dropdown en tablet */
    .enlaces {
        display: none; /* Oculto por defecto */
        position: fixed;
        top: 3.5rem;
        left: 1.88rem;
        right: 2.752rem;
        width: auto;
        max-height: auto;
        flex-direction: column;
        background-color: #E7BB5E;
        padding: 0;
        margin: 0;
        margin-left: 10;
        padding-right: 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        animation: slideDown 0.3s ease-out;
        border-radius: 0;
        gap: 0;
    }
    
    /* Animación de deslizamiento del menú */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Estilo de enlaces en menú móvil */
    .enlaces a {
        padding: 1rem 1rem;
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #131313;
        font-size: 1.125rem;
        font-weight: 550;
        transition: all 0.3s ease;
        background-color: transparent;
        line-height: 1;
    }
    
    /* Hover de enlaces en menú móvil */
    .enlaces a:hover {
        background-color: rgba(0, 0, 0, 0.1);
        padding-left: 1.25rem;
        color: var(--color-negro);
    }
    
    /* Desactivar línea animada en móvil */
    .enlaces a::after {
        display: none;
    }
    
    /* Quitar borde del último enlace */
    .enlaces a:last-child {
        border-bottom: none;
    }

    /* Mostrar menú cuando está activo */
    .enlaces.activo {
        display: flex;
    }

    /* Mostrar botón hamburguesa en tablet */
    .boton-menu {
        display: flex;
        right: 0.75rem;
    }
    
    /* Ajuste de líneas del hamburguesa */
    .boton-menu span {
        width: 1.5rem;
        height: 0.2rem;
    }

    /* Logo completamente responsivo en tablet/móvil */
    .logo-img {
        height: auto;
        width: 100%;
        max-width: 90vw;
        max-height: 15rem;
        object-fit: contain;
    }
    
    /* Ajuste final de hamburguesa */
    .boton-menu span {
        width: 1.25rem;
    }
}

/* ==================== LAYOUT PRINCIPAL ==================== */
/* Contenedor principal de contenido con altura mínima */
.main-content {
    min-height: calc(100vh - 3.75rem); /* Altura completa menos navbar */
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Contenedor centrado con ancho máximo */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Título de secciones */
.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: var(--color-negro);
}

/* ==================== HERO/BANNER PRINCIPAL ==================== */
/* Sección del banner principal con espacio para carrusel */
.hero-banner {
    width: 100%;
    padding: 4rem 1.5rem;
    margin-bottom: 0;
    background-color: var(--color-gris-claro);
}

/* Contenedor del contenido del hero */
.hero-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 450px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--color-blanco);
    border: none;
    border-radius: 10px;
    padding: 2rem;
}

/* Imagen del hero (oculta, preparada para carrusel futuro) */
.hero-image {
    display: none;
}

/* Contenedor de texto del hero */
.hero-text {
    text-align: center;
    width: 100%;
    padding: 0 2rem 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Título principal del hero */
.hero-title {
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 0;
    color: var(--color-negro);
    letter-spacing: 2px;
    line-height: 1.1;
}

/* Descripción del hero */
.hero-description {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--color-negro);
    text-transform: uppercase;
    line-height: 1.2;
}

/* ==================== SECCIONES GENERALES ==================== */
/* Secciones de: Destacados, Ofertas, Servicios y Productos */
.section-destacado,
.section-ofertas,
.section-servicios,
.section-productos {
    padding: 3rem 0;
    background-color: #f5f5f5; /* Fondo gris claro */
    margin-bottom: 0;
}

/* Contenedores de secciones con fondo específico */
.section-destacado .container,
.section-ofertas .container,
.section-servicios .container,
.section-productos .container {
    background-color: #FBFBFB; /* Fondo casi blanco */
    padding: 2rem;
    border-radius: 10px;
}

/* ==================== SISTEMA DE TARJETAS ==================== */
/* Grid principal para las tarjetas */
.cards-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
    justify-items: center;
}

/* Grid de 5 columnas para destacados y ofertas */
.section-destacado .grid-4,
.section-ofertas .grid-4 {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1400px;
    margin: 0 auto 2rem;
}

.section-destacado .card,
.section-ofertas .card {
    width: 100%;
    max-width: 250px;
}

/* Cuando hay solo 1 item, centrarlo */
.section-destacado .grid-4 .card:first-child:last-child,
.section-ofertas .grid-4 .card:first-child:last-child {
    grid-column: 3;
}

/* Grid de 4 columnas (Productos - 4 columnas fijas) */
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid de 5 columnas (Servicios - 5 columnas fijas) */
.grid-5 {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid de 2 columnas (Ofertas) */
.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Tarjeta individual de producto/servicio */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Efecto hover en tarjetas */
.card:hover {
    transform: translateY(-5px); /* Elevar tarjeta */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada */
}

/* Contenedor de imagen de la tarjeta */
.card-image {
    width: 100%;
    height: 180px; /* Altura reducida */
    background-color: #ffffff; /* Fondo blanco */
    border: none;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* Tarjetas grandes (ofertas) con proporción diferente */
.card-large .card-image {
    height: 220px; /* Altura reducida para ofertas */
}

/* Imagen dentro de la tarjeta */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Contener toda la imagen sin recortar */
    object-position: center;
    display: block;
}

/* Descripción de la tarjeta */
.card-description {
    display: -webkit-box;
    text-align: center;
    padding: 0.75rem;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Contenido de tarjeta (cuando tiene título y descripción) */
.card .card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: #ffffff;
    flex: 1;
    align-items: center;
}

.card .card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

.card .card-content .card-description {
    padding: 0;
    flex: 1;
}

.card-category {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #3b7dd4;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0.5rem;
    width: auto;
}

/* ==================== BOTONES ==================== */
/* Contenedor de acción con botón centrado */
.section-action {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Botón principal (Ver más, etc.) */
.btn-primary {
    display: inline-block;
    background-color: #3b7dd4; /* Color azul del footer */
    color: var(--color-blanco);
    border: none;
    padding: 0.75rem 2.5rem;
    font-size: 1rem;
    border-radius: 25px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    text-align: center;
}

/* Efecto hover del botón */
.btn-primary:hover {
    background-color: #2c5aa0; /* Azul más oscuro */
    transform: scale(1.05); /* Aumentar tamaño ligeramente */
}

/* Efecto al hacer clic */
.btn-primary:active {
    transform: scale(0.98); /* Reducir tamaño ligeramente */
}

/* ==================== FOOTER ==================== */
.footer {
    background-color: #3b7dd4;
    color: white;
    padding: 50px 20px 30px;
    margin-top: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 30px;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.footer-section-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.footer-section a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.footer-section a:hover {
    opacity: 0.8;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 20px 0;
}

.footer-copyright {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

/* ==================== PÁGINAS INTERNAS ==================== */
/* Contenedor de páginas internas (Nosotros, Contacto, etc.) */
.page-content {
    padding: 3rem 0;
    background-color: var(--color-blanco);
    min-height: calc(100vh - 3.75rem - 180px); /* Altura completa menos navbar y footer */
    flex: 1;
}

/* Título de página interna */
.page-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2.5rem;
    color: var(--color-negro);
    text-align: center;
}

/* ==================== PÁGINA NOSOTROS ==================== */
/* Layout de dos columnas para Nosotros */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Contenedor de imagen en Nosotros */
.about-image {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: var(--color-gris-claro);
    border: 3px solid var(--color-negro);
    border-radius: 8px;
    overflow: hidden;
}

/* Imagen en página Nosotros */
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Subtítulos en texto de Nosotros */
.about-text h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-negro);
}

/* Párrafos en texto de Nosotros */
.about-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: var(--color-gris-oscuro);
}

/* ==================== PÁGINA CONTACTO ==================== */
/* Layout de dos columnas para Contacto */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Info de contacto */
.contact-info {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Títulos de secciones de Contacto */
.contact-info h2,
.contact-form h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-negro);
}

/* Ítem individual de información */
.info-item {
    margin-bottom: 1.5rem;
}

/* Etiqueta de información */
.info-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-negro);
}

/* Texto de información */
.info-item p {
    color: var(--color-gris-oscuro);
    word-wrap: break-word;
}

/* Mapa responsive */
.map-container {
    margin-top: 2rem;
    width: 100%;
    max-width: 100%;
}

.google-map {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.google-map iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 350px;
    border: none;
}

/* Grupo de formulario */
.form-group {
    margin-bottom: 1.25rem;
}

/* Inputs y textareas del formulario */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--color-gris-claro);
    border-radius: 5px;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    transition: border-color 0.3s ease;
}

/* Estado focus de inputs y textareas */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #5B7FDB; /* Color azul al enfocar */
}

/* Textarea con redimensión vertical */
.form-group textarea {
    resize: vertical;
}

/* ==================== RESPONSIVE DESIGN - TABLET (768px) ==================== */
/* Adaptaciones para pantallas medianas (tablets) */
@media (max-width: 768px) {
    /* Reducción de padding en hero */
    .hero-banner {
        padding: 2rem 1rem;
    }

    /* Ajuste de contenido del hero */
    .hero-content {
        padding: 2rem 1.5rem;
        min-height: 250px;
    }

    /* Reducción de tamaño del título principal */
    .hero-title {
        font-size: 2.5rem;
    }

    /* Reducción de tamaño de descripción */
    .hero-description {
        font-size: 1.3rem;
    }

    /* Ajuste de títulos de sección */
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

    /* Reducción de espacio entre tarjetas */
    .cards-grid {
        gap: 1.5rem;
    }

    /* Destacados y ofertas a 3 columnas en tablet */
    .section-destacado .grid-4,
    .section-ofertas .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-destacado .grid-4 .card:first-child:last-child,
    .section-ofertas .grid-4 .card:first-child:last-child {
        grid-column: 2;
    }

    /* Grid de 4 columnas adaptado a 2 columnas en tablet */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid de 5 columnas adaptado a 2 columnas en tablet */
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Ajustar tamaño máximo en tablets */
    .card {
        max-width: 100%;
    }
    
    /* Ajustar altura de imágenes en tablets */
    .card-image {
        height: 160px;
    }
    
    .card-large .card-image {
        height: 180px;
    }
    
    /* Ajustar descripción en tablets */
    .card-description {
        height: 100px;
        padding: 1.2rem;
    }

    /* Grid de 2 columnas a 1 columna en tablet */
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Reducción de padding en secciones */
    .section-destacado,
    .section-ofertas,
    .section-servicios,
    .section-productos {
        padding: 2rem 0;
    }

    /* Footer en columna vertical */
    .footer-nav {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

/* ==================== RESPONSIVE DESIGN - MÓVIL (480px) ==================== */
/* Adaptaciones para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    /* Mayor reducción de padding en hero */
    .hero-banner {
        padding: 1.5rem 0.75rem;
    }

    /* Ajuste de contenido del hero para móvil */
    .hero-content {
        padding: 1.5rem 1rem;
        min-height: 200px;
    }

    /* Título más pequeño para móvil */
    .hero-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }

    /* Descripción más pequeña para móvil */
    .hero-description {
        font-size: 1rem;
    }
    
    /* Contacto más compacto */
    .contact-container {
        padding: 0 0.5rem;
        gap: 1rem;
    }
    
    .contact-info h2 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .info-item {
        margin-bottom: 0.85rem;
    }
    
    .info-item strong {
        font-size: 0.9rem;
    }
    
    .info-item p {
        font-size: 0.85rem;
    }
    
    .map-container h2 {
        font-size: 1.1rem;
    }
    
    .google-map iframe {
        height: 220px;
    }

    /* Destacados y ofertas a 2 columnas en móvil */
    .section-destacado .grid-4,
    .section-ofertas .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-destacado .grid-4 .card:first-child:last-child,
    .section-ofertas .grid-4 .card:first-child:last-child {
        grid-column: 1 / -1;
        max-width: 280px;
    }

    /* Mantener 2 columnas en móvil para tarjetas */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid de 5 columnas adaptado a 2 columnas en móvil */
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Ajustar tamaño en móviles */
    .card {
        max-width: 100%;
    }
    
    /* Ajustar altura de imágenes en móviles */
    .card-image {
        height: 150px;
    }
    
    .card-large .card-image {
        height: 170px;
    }
    
    /* Ajustar descripción en móviles */
    .card-description {
        height: 90px;
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Ajuste de botón para móvil */
    .btn-primary {
        padding: 0.6rem 2rem;
        font-size: 0.9rem;
    }

    /* Layouts a una columna en móvil */
    .about-content,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 0.75rem;
    }
    
    .contact-info {
        width: 100%;
    }
    
    .contact-info h2 {
        font-size: 1.25rem;
    }
    
    .info-item {
        margin-bottom: 1rem;
    }
    
    .info-item strong {
        font-size: 0.95rem;
    }
    
    .info-item p {
        font-size: 0.9rem;
    }
    
    .map-container h2 {
        font-size: 1.25rem;
    }
    
    .google-map iframe {
        height: 280px;
    }
    
    /* Ajustar altura de imágenes en móviles */
    .card-image {
        height: 140px;
    }
    
    .card-large .card-image {
        height: 160px;
    }
    
    /* Ajustar altura mínima de tarjetas en móviles */
    .card {
        min-height: auto;
    }
    
    /* Ajustar padding de descripción */
    .card-description {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Título de página más pequeño */
    .page-title {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }
}
/* Estado vac�o cuando no hay productos/servicios */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #e0e0e0;
    border-radius: 1rem;
    margin: 2rem 0;
}
.empty-message {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}
.empty-submessage {
    font-size: 1rem;
    color: #7f8c8d;
}

/* Grid de 2 columnas para ofertas - tama�os iguales */
.grid-ofertas {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}

/* Carrusel de ofertas - 2 columnas visibles */
.ofertas-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4rem;
}

.ofertas-carousel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    overflow: hidden;
}

.ofertas-carousel .card {
    width: 100%;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #2c3e50;
    border: 2px solid #e0e0e0;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background: #3b7dd4;
    color: white;
    border-color: #3b7dd4;
    box-shadow: 0 4px 12px rgba(59, 125, 212, 0.3);
}

.carousel-btn-prev {
    left: 0.5rem;
}

.carousel-btn-next {
    right: 0.5rem;
}

@media (max-width: 768px) {
    .ofertas-carousel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ofertas-carousel {
        grid-template-columns: 1fr;
    }
    
    .ofertas-carousel-wrapper {
        padding: 0 2.5rem;
    }
}

/* ==================== FILTRO DE CATEGORÍAS - PRODUCTOS ==================== */
.filter-container {
    margin-bottom: 2rem;
    text-align: center;
}

.category-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    background: #f0f0f0;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: inline-block;
}

.filter-btn:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.filter-btn.active {
    background: #3b7dd4 !important;
    color: white !important;
    border-color: #2c5aa0;
    box-shadow: 0 4px 12px rgba(59, 125, 212, 0.3);
}

.card-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #3b7dd4;
    color: #ffffff;
    border-radius: 15px;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .category-filter {
        gap: 0.75rem;
    }
    
    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .category-filter {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .card-category {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
}

/* ==================== ESTILOS PARA OFERTAS ==================== */
/* Contenedor de precios */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
}

/* Precio original (tachado) */
.price-original {
    text-decoration: line-through;
    color: #999;
    font-size: 0.95rem;
}

/* Precio de oferta (destacado) */
.price-offer {
    color: #e74c3c;
    font-size: 1.4rem;
    font-weight: bold;
}

/* Precio normal (para 2x1 y 3x2) */
.price-normal {
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Badge de descuento */
.discount-badge {
    background-color: #e74c3c;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Badge de oferta (2x1, 3x2) */
.offer-badge {
    background-color: #27ae60;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Fechas de oferta */
.offer-dates {
    text-align: center;
    padding: 0.5rem;
    color: #666;
    font-size: 0.85rem;
}

/* Contenido de tarjeta de oferta */
.card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
}

/* Texto descriptivo para promociones */
.offer-text {
    color: #555;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

/* ==================== TARJETAS CLICKEABLES ==================== */
.card-clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(59, 125, 212, 0.25);
}

.card-clickable:active {
    transform: translateY(-4px);
}

/* ==================== MODAL FICHA DE PRODUCTO/SERVICIO ==================== */
.modal-ficha {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.modal-ficha.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-ficha-content {
    background: white;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: row;
    position: relative;
}

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

.modal-ficha-header {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.modal-ficha-close {
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
    line-height: 1;
}

.modal-ficha-close:hover {
    background: #e74c3c;
}

.modal-ficha-image-container {
    width: 40%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.modal-ficha-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

.modal-ficha-body {
    flex: 1;
    padding: 1.25rem 1.5rem;
    padding-right: 2.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #f8f9fa;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-ficha-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.modal-ficha-category {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: #3b7dd4;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.modal-ficha-description {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ==================== ESTILOS ESPECIALES PARA OFERTAS ==================== */
.modal-ficha-oferta-info {
    display: none;
    margin-bottom: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fff8e7 0%, #fff3d6 100%);
    border-radius: 8px;
    border: 1px solid #f2bd57;
}

.oferta-precios {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.precio-normal {
    font-size: 1rem;
    color: #888;
    text-decoration: line-through;
}

.precio-oferta {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e63946;
}

.descuento-badge {
    display: none;
    background: linear-gradient(135deg, #e63946 0%, #c92a2a 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(230, 57, 70, 0.3);
}

.promocion-info {
    display: none;
    background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.promocion-info strong {
    display: block;
    margin-bottom: 0.25rem;
}

.vigencia-info {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #f2bd57;
    font-size: 0.85rem;
    color: #666;
}

.vigencia-info strong {
    color: #333;
}

/* Tarjeta de oferta especial */
.card-oferta {
    position: relative;
}

/* Responsive modal ficha */
@media (max-width: 768px) {
    .modal-ficha-content {
        flex-direction: column;
        max-width: 95%;
        max-height: 90vh;
    }
    
    .modal-ficha-image-container {
        width: 100%;
        min-height: 200px;
        max-height: 250px;
    }
    
    .modal-ficha-body {
        padding: 1.25rem;
    }
    
    .modal-ficha-title {
        font-size: 1rem;
    }
    
    /* Ofertas responsive */
    .modal-ficha-oferta-info {
        padding: 0.75rem;
    }
    
    .precio-oferta {
        font-size: 1.2rem;
    }
    
    .descuento-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .modal-ficha {
        padding: 0.5rem;
    }
    
    .modal-ficha-content {
        max-width: 100%;
        border-radius: 8px;
    }
    
    .modal-ficha-image-container {
        min-height: 180px;
    }
    
    .modal-ficha-close {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
    
    .modal-ficha-body {
        padding: 1rem;
    }
    
    .modal-ficha-title {
        font-size: 0.95rem;
        padding-right: 1.5rem;
    }
    
    .modal-ficha-description {
        font-size: 0.85rem;
    }
    
    .modal-ficha-category {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
}