/* 
 * ARCHIVO CSS PRINCIPAL PARA PÁGINA WEB RESPONSIVE
 * Este archivo utiliza principalmente unidades rem para el escalado responsivo
 * La unidad rem se basa en el tamaño de fuente del elemento raíz (html)
 */

/* 
 * RESET Y CONFIGURACIÓN BASE
 * Establecemos valores predeterminados y reset para normalizar el comportamiento entre navegadores
 */
 *, *::before, *::after {
    box-sizing: border-box; /* Incluye padding y border en el ancho total del elemento */
    margin: 0;
    padding: 0;
}

/* 
 * VARIABLES CSS (PROPIEDADES PERSONALIZADAS)
 * Definimos variables globales para colores, espaciado y otros valores reutilizables
 * Esto mejora la mantenibilidad y coherencia del código
 */
:root {
    /* Paleta de colores principal */
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --color-accent: #e74c3c;
    --color-dark: #2c3e50;
    --color-light: #ecf0f1;
    --color-gray: #95a5a6;
    
    /* Colores de texto */
    --text-dark: #333;
    --text-light: #fff;
    
    /* Tamaños base para cálculos rem */
    --base-font-size: 16px;      /* Tamaño base de fuente para cálculos rem */
    --base-line-height: 1.5;     /* Altura de línea para mejorar legibilidad */
    
    /* Espaciado (usando rem para mantener proporciones) */
    --space-xs: 0.25rem;         /* 4px */
    --space-sm: 0.5rem;          /* 8px */
    --space-md: 1rem;            /* 16px */
    --space-lg: 2rem;            /* 32px */
    --space-xl: 3rem;            /* 48px */
    
    /* Bordes y sombras */
    --border-radius: 0.25rem;    /* 4px - esquinas redondeadas */
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sombra sutil para elementos */
    
    /* Breakpoints para diseño responsive */
    --breakpoint-sm: 576px;      /* Móviles pequeños */
    --breakpoint-md: 768px;      /* Tablets y móviles en horizontal */
    --breakpoint-lg: 992px;      /* Laptops y tablets grandes */
    --breakpoint-xl: 1200px;     /* Desktops */
    
    /* Transiciones */
    --transition-fast: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* 
 * CONFIGURACIÓN HTML Y BODY
 * Establecemos el tamaño de fuente base y estilos generales
 */
html {
    font-size: var(--base-font-size); /* Define el tamaño base para cálculos rem */
    /* En diseños responsive, podemos ajustar este valor con media queries */
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: var(--base-line-height);
    color: var(--text-dark);
    background-color: var(--color-light);
    overflow-x: hidden; /* Previene scroll horizontal */
}

/* 
 * CONTENEDOR PRINCIPAL
 * Class .container para controlar el ancho máximo y centrar contenido
 */
.container {
    width: 100%;
    max-width: 75rem; /* 1200px - ancho máximo en pantallas grandes */
    margin: 0 auto; /* Centra el contenedor */
    padding: 0 var(--space-md); /* Padding horizontal para evitar que el contenido toque los bordes */
}

/* 
 * TIPOGRAFÍA
 * Establecemos tamaños de texto usando rem para escalabilidad
 */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--space-md);
    line-height: 1.2; /* Altura de línea más ajustada para títulos */
    font-weight: 700; /* Negrita */
    color: var(--color-dark);
}

h1 {
    font-size: 2.5rem; /* 40px basado en 16px de tamaño base */
}

h2 {
    font-size: 2rem; /* 32px */
}

h3 {
    font-size: 1.5rem; /* 24px */
}

h4 {
    font-size: 1.25rem; /* 20px */
}

p {
    margin-bottom: 1rem;
    font-size: 1rem; /* 16px - tamaño base */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: darken(var(--color-primary), 10%);
}

/* 
 * BOTONES
 * Estilos para botones usando rem para consistencia
 */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: #2980b9; /* Versión más oscura de var(--color-primary) */
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--text-light);
}

.btn-secondary:hover {
    background-color: #27ae60; /* Versión más oscura de var(--color-secondary) */
}

/* 
 * HEADER Y NAVEGACIÓN
 * Estilos para la cabecera y menú de navegación
 */
.header {
    padding: 1rem 0;
    background-color: var(--color-dark);
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegura que el header esté sobre otros elementos */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
}

.nav-list li {
    margin-left: 1.5rem;
}

.nav-list a {
    color: var(--text-light);
    font-size: 1rem;
    position: relative;
}

.nav-list a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-primary);
    transition: width var(--transition-fast);
}

.nav-list a:hover::after {
    width: 100%;
}

/* Botón de menú para móviles (hamburguesa) */
.menu-toggle {
    display: none; /* Oculto en desktop, visible en móviles */
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 1.5rem;
    height: 0.2rem;
    margin: 0.3rem 0;
    background-color: var(--text-light);
    transition: all var(--transition-fast);
}

/* 
 * SECCIÓN HERO
 * Estilo para la sección destacada de inicio
 */
.hero {
    padding: 5rem 0;
    background-color: var(--color-primary);
    color: var(--text-light);
    text-align: center;
}

.hero-content {
    max-width: 50rem; /* 800px */
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem; /* 48px */
    margin-bottom: 1rem;
    color: var(--text-light);
}

.hero p {
    font-size: 1.25rem; /* 20px */
    margin-bottom: 2rem;
}

/* 
 * SECCIONES GENERALES
 * Estilos comunes para todas las secciones
 */
section {
    padding: 5rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 5rem;
    height: 0.25rem;
    background-color: var(--color-primary);
    margin: 1rem auto 0;
}

/* 
 * SECCIÓN SERVICIOS
 * Organiza las tarjetas de servicios en grid
 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); /* Grid responsive */
    gap: 2rem;
}

.service-card {
    background-color: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: transform var(--transition-fast);
}

.service-card:hover {
    transform: translateY(-0.5rem); /* Efecto de elevación al pasar el cursor */
}

.service-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* 
 * SECCIÓN PRODUCTOS
 * Organiza los productos en grid
 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 2rem;
}

.product {
    background-color: #fff;
    border-radius: var(--border-radius);
    overflow: hidden; /* Para que la imagen no desborde el border-radius */
    box-shadow: var(--box-shadow);
}

.product-image img {
    width: 100%;
    height: 15rem;
    object-fit: cover; /* Mantiene la proporción de la imagen */
}

.product-info {
    padding: 1.5rem;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 1rem 0;
}

/* 
 * SECCIÓN CONTACTO
 * Organiza el formulario y la información de contacto
 */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 para info, 2/3 para formulario */
    gap: 2rem;
}

.contact-info {
    background-color: var(--color-dark);
    color: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius);
    font-family: inherit;
}

/* 
 * FOOTER
 * Estilos para el pie de página
 */
.footer {
    padding: 3rem 0 1.5rem;
    background-color: var(--color-dark);
    color: var(--text-light);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo a {
    color: var(--text-light);
    font-size: 1.5rem;
    font-weight: 700;
}

.footer-links h4,
.footer-social h4 {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--color-gray);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--text-light);
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-light);
    transition: background-color var(--transition-fast);
}

.social-icons a:hover {
    background-color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 
 * MEDIA QUERIES PARA RESPONSIVE DESIGN
 * Adaptamos el diseño a diferentes tamaños de pantalla
 */

/* Móviles pequeños y medianos */
@media (max-width: 767px) {
    /* Ajustamos el tamaño base de la fuente para dispositivos pequeños */
    html {
        font-size: 14px; /* Reducimos tamaño base a 14px para móviles */
    }
    
    /* Menú de navegación móvil */
    .menu-toggle {
        display: block; /* Mostramos el botón hamburguesa */
    }
    
    .nav-list {
        display: none; /* Ocultamos el menú por defecto */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--color-dark);
        padding: 1rem 0;
        box-shadow: var(--box-shadow);
    }
    
    /* Clase que se agrega con JavaScript al hacer clic en el botón */
    .nav-list.active {
        display: flex;
    }
    
    .nav-list li {
        margin: 0;
    }
    
    .nav-list a {
        display: block;
        padding: 0.75rem 1.5rem;
    }
    
    /* Ajustes para sección hero */
    .hero h1 {
        font-size: 2.25rem; /* 36px en 16px base, pero con 14px base = 31.5px */
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    /* Ajustes de contacto */
    .contact-content {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}

/* Tablets y pantallas medianas */
@media (min-width: 768px) and (max-width: 991px) {
    html {
        font-size: 15px; /* 15px como base para tablets */
    }
    
    /* Ajustes para grids en pantallas medianas */
    .services-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

/* Pantallas grandes */
@media (min-width: 992px) {
    /* Mantenemos el tamaño base de 16px para pantallas grandes */
    
    /* Podemos agregar optimizaciones específicas para pantallas grandes si es necesario */
    .hero h1 {
        font-size: 3.5rem; /* 56px - más grande en pantallas desktop */
    }
    
    /* Más espacio en secciones para pantallas grandes */
    section {
        padding: 6rem 0;
    }
}

/* Pantallas extra-grandes */
@media (min-width: 1200px) {
    .container {
        padding: 0 var(--space-lg); /* Más padding horizontal en contenedores */
    }
}

/* 
 * UTILIDADES
 * Clases útiles para aplicar estilos comunes
 */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primary);
}

.bg-light {
    background-color: var(--color-light);
}

.bg-dark {
    background-color: var(--color-dark);
    color: var(--text-light);
}

.mb-1 {
    margin-bottom: var(--space-sm);
}

.mb-2 {
    margin-bottom: var(--space-md);
}

.mb-3 {
    margin-bottom: var(--space-lg);
}

.py-1 {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.py-2 {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.py-3 {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* Animaciones */
.fade-in {
    animation: fadeIn var(--transition-slow);
}

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

/* Accesibilidad - Ocultar elementos visualmente pero mantenerlos para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}