/* ==========================================================================
   VARIABLES GLOBALES (PALETA DE COLORES ESTILO AMAZON)
   Definición de propiedades dinámicas reutilizables en toda la hoja de estilos
   ========================================================================== */
:root {
  --azul-oscuro: #232f3e;  /* Tono azul oscuro/navy clásico para componentes principales */
  --blanco: #ffffff;        /* Color blanco puro para textos, fondos y contenedores limpios */
  --naranja-amz: #febd69;   /* Color naranja brillante de la marca para llamadas a la acción */
  --gris-fondo: #eaeded;    /* Color de fondo general de la web, gris claro para dar contraste */
  --texto-oscuro: #0f1111;  /* Color gris casi negro para máxima legibilidad de los textos */
}

/* ==========================================================================
   CONFIGURACIÓN BASE DEL DOCUMENTO (BODY)
   ========================================================================== */
body {
  margin: 0;                                                    /* Elimina los márgenes exteriores predeterminados del navegador */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Define una tipografía moderna, limpia y legible */
  background-color: var(--gris-fondo);                          /* Aplica el color gris claro configurado globalmente al fondo */
  color: var(--texto-oscuro);                                   /* Asigna el color oscuro por defecto para todo el texto */
  display: flex;                                                /* Activa Flexbox en el cuerpo de la página */
  flex-direction: column;                                       /* Apila los bloques principales (header, main, footer) verticalmente */
  min-height: 100vh;                                            /* Garantiza que el body ocupe como mínimo el 100% de la altura de la pantalla */
}

/* ==========================================================================
   HEADER: CONFIGURACIÓN, ALINEACIÓN Y DISEÑO FLEXIBLE
   ========================================================================== */
header {
  display: flex;                          /* Organiza los elementos internos del menú en una sola fila elástica */
  justify-content: space-between;         /* Separa los bloques: Logo a la izquierda, Buscador en medio, Nav a la derecha */
  align-items: center;                    /* Centra de forma vertical todos los elementos dentro de la barra */
  padding: 10px 25px;                     /* Añade 10px de margen interno arriba/abajo y 25px a los laterales */
  background-color: var(--azul-oscuro);  /* Aplica el color navy oscuro como fondo del menú superior */
  color: var(--blanco);                   /* Configura el color de texto blanco para los elementos del contenedor */
  position: sticky;                       /* Convierte la barra en flotante/fija al hacer scroll vertical */
  top: 0;                                 /* Indica que se ancle exactamente en la parte superior de la pantalla */
  z-index: 1000;                          /* Prioriza la capa del header para que siempre se vea por encima del contenido */
  gap: 20px;                              /* Añade una separación de seguridad entre el logo, buscador y navegación */
}

/* ==========================================================================
   ESTILO DEL LOGOTIPO (LADO IZQUIERDO DEL HEADER)
   Configuración del contenedor del logo para albergar la imagen corporativa
   ========================================================================== */
.logo {
  flex-shrink: 0;                           /* Evita que el contenedor del logo se deforme o comprima si falta espacio */
  display: flex;                            /* Activa Flexbox para alinear perfectamente la caja de forma interna */
  align-items: center;                      /* Centra verticalmente el enlace y la imagen dentro de la cabecera */
}

/* --- Comportamiento del enlace que envuelve al logo --- */
.logo a {
  display: flex;                            /* Permite que el enlace HTML se adapte exactamente al tamaño de la imagen */
  align-items: center;                      /* Mantiene la imagen perfectamente centrada en el eje vertical */
  text-decoration: none;                    /* Elimina cualquier subrayado o decoración residual del hipervínculo */
}

/* --- Control, dimensiones y ajuste de la Imagen del Logo --- */
.logo a img {
  height: 42px;                             /* Define una altura fija idónea para que encaje de forma estética en la barra blanca */
  width: auto;                              /* Hace que el ancho se calcule automáticamente manteniendo la proporción original */
  max-width: 200px;                         /* Limita el ancho máximo para evitar que invada el espacio del buscador central */
  display: block;                           /* Elimina el espacio en blanco o margen invisible que los navegadores añaden debajo de las imágenes */
  object-fit: contain;                      /* Garantiza que la imagen se escale perfectamente sin distorsionarse ni recortarse */
}

/* ==========================================================================
   CHAT-BUSCADOR (BLOQUE CENTRAL DEL MENÚ)
   ========================================================================== */
.chat-buscador {
  display: flex;                          /* Une horizontalmente la barra de texto con el botón de buscar */
  flex: 1;                                /* Permite que el buscador se expanda para rellenar el espacio central */
  max-width: 600px;                       /* Limita el tamaño de anchura máxima en monitores muy grandes */
  justify-content: center;                /* Centra el contenido en su propio espacio asignado */
}

/* --- Campo de entrada de texto (Input) --- */
.chat-buscador input {
  width: 100%;                            /* El input consume todo el espacio horizontal de su contenedor */
  padding: 10px 15px;                     /* Agrega un relleno interno cómodo para la visualización del texto */
  border: none;                           /* Elimina cualquier tipo de borde o contorno por defecto */
  border-radius: 4px 0 0 4px;              /* Redondea las esquinas superiores e inferiores únicamente de la izquierda */
  outline: none;                          /* Desactiva la línea de enfoque brillante propia de los navegadores */
  font-size: 14px;                        /* Establece el tamaño de letra del texto que escribe el usuario */
}

/* --- Botón de búsqueda (Button) --- */
.chat-buscador button {
  padding: 10px 20px;                     /* Configura el espaciado interno del botón */
  border: none;                           /* Elimina los bordes por defecto del botón */
  background-color: var(--naranja-amz);   /* Aplica el color naranja de contraste corporativo */
  cursor: pointer;                        /* Transforma el puntero en mano interactiva al pasar por encima */
  border-radius: 0 4px 4px 0;              /* Redondea las esquinas superiores e inferiores únicamente de la derecha */
  font-weight: bold;                      /* Aplica texto en negrita al botón */
  color: #111;                            /* Cambia el color del texto interno "Buscar" a un gris muy oscuro */
}

/* ==========================================================================
   NAVEGACIÓN (BLOQUE DERECHO DEL MENÚ DE ACCESOS)
   ========================================================================== */
nav {
  display: flex;                          /* Alinea de forma horizontal todos los enlaces del menú */
  align-items: center;                    /* Asegura que los enlaces se centren perfectamente en vertical */
  gap: 15px;                              /* Crea una separación uniforme de 15px entre enlace y enlace */
  flex-shrink: 0;                         /* Previene que el menú colapse u oculte letras si la pantalla se achica */
}

/* --- Enlaces de secciones (Links) --- */
nav a {
  color: var(--blanco);                   /* Aplica el color blanco para los textos de navegación */
  text-decoration: none;                  /* Quita la línea inferior decorativa de los enlaces */
  font-size: 14px;                        /* Ajusta el tamaño de la fuente a una escala estándar de lectura */
  white-space: nowrap;                    /* Fuerza a que el texto de cada sección se mantenga en una sola palabra/línea */
  font-weight: 500;                       /* Da un grosor medio a la tipografía para que se vea estilizada */
}

/* --- Efecto interactivo al pasar el ratón (Hover) --- */
nav a:hover {
  color: var(--naranja-amz);              /* Cambia el color del enlace a naranja cuando el usuario pasa el puntero */
}

/* --- Mensaje de sesión de usuario (Bienvenida) --- */
nav span {
  font-size: 13px;                        /* Disminuye ligeramente el tamaño de la fuente del mensaje */
  color: var(--naranja-amz);              /* Destaca el nombre de usuario usando el color naranja corporativo */
  margin-left: 5px;                       /* Genera un pequeño espacio a la izquierda para separarlo del icono o texto anterior */
}

/* ==========================================================================
   SECCIÓN HERO (VISTA HOME - BANNER PRINCIPAL DE BIENVENIDA)
   ========================================================================== */
.hero {
  height: 420px;                          /* Fija la altura total del bloque publicitario de la portada */
  /* Aplica una capa oscura translúcida combinada con la imagen de portada para asegurar la lectura del texto blanco */
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
              url('../img/hero-home.png'); 
  background-size: cover;                 /* Escala y estira la imagen adaptándola proporcionalmente a todo el recuadro */
  background-position: center;            /* Centra el enfoque de la imagen tanto vertical como horizontalmente */
  display: flex;                          /* Convierte la sección en un contenedor flexible */
  flex-direction: column;                 /* Alinea verticalmente los elementos internos (Título -> Párrafo -> Botones) */
  justify-content: center;                /* Centra los textos en el eje vertical de la sección */
  align-items: center;                    /* Centra los textos en el eje horizontal de la sección */
  color: var(--blanco);                   /* Pinta toda la tipografía interna en color blanco */
  text-align: center;                     /* Centra los textos en el bloque */
  padding: 0 20px;                        /* Previene que el contenido toque las esquinas laterales en pantallas chicas */
}

/* --- Titular principal del Hero --- */
.hero h1 {
  font-size: 2.8rem;                      /* Define un tamaño de letra grande e impactante */
  margin: 0 0 12px 0;                     /* Elimina márgenes sobrantes y añade 12px de separación inferior */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Agrega una sombra al texto para despegarlo eficazmente del fondo */
}

/* --- Párrafo descriptor del Hero --- */
.hero p {
  font-size: 1.3rem;                      /* Ajusta el tamaño de la fuente del subtítulo */
  margin: 0 0 30px 0;                     /* Añade un espacio de separación de 30px inferior con respecto a los botones */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);  /* Aplica sombra de legibilidad al párrafo */
}

/* --- Envoltura de botones del Hero --- */
.hero-buttons {
  display: flex;                          /* Alinea los dos botones de acción en una sola fila */
  gap: 15px;                              /* Deja una separación física de 15px entre ambos botones */
}

/* --- Botones generales del Hero (Primario y Secundario) --- */
.btn-primary, .btn-secondary {
  padding: 12px 28px;                     /* Aplica relleno cómodo (arriba/abajo y lados) para pulsar con facilidad */
  font-size: 15px;                        /* Regula el tamaño de la tipografía del botón */
  font-weight: bold;                      /* Resalta el texto del botón en formato negrita */
  text-decoration: none;                  /* Retira el subrayado por defecto de la etiqueta de enlace */
  border-radius: 25px;                    /* Redondea las esquinas por completo creando una forma de cápsula/píldora */
  transition: background-color 0.2s, transform 0.1s; /* Suaviza el cambio de color y las microanimaciones */
}

/* --- Botón Destacado (Ver Catálogo) --- */
.btn-primary {
  background-color: var(--naranja-amz);   /* Color naranja brillante de acción prioritario */
  color: #0f1111;                         /* Color oscuro para el texto del botón */
  border: 1px solid #fca22a;              /* Añade un sutil borde naranja algo más intenso */
}
.btn-primary:hover {
  background-color: #f3a847;              /* Cambia a una variante naranja más profunda al posicionarse sobre él */
}

/* --- Botón Alternativo (Personalizar Producto) --- */
.btn-secondary {
  background-color: var(--blanco);        /* Color blanco limpio para diferenciarse del primario */
  color: #0f1111;                         /* Mantiene la lectura del texto en tono oscuro */
  border: 1px solid #cccccc;              /* Define un contorno perimetral gris suave */
}
.btn-secondary:hover {
  background-color: #f7f7f7;              /* Oscurece un ápice el fondo blanco del botón al pasar el mouse */
}

/* ==========================================================================
   SECCIÓN POR QUÉ ELEGIRNOS (VISTA HOME - CONTENEDOR DE BENEFICIOS)
   ========================================================================== */
.por-que {
  max-width: 1100px;                      /* Restringe el ancho máximo de la zona para no estirar las ventajas */
  margin: 40px auto;                      /* Añade margen vertical de 40px y centra horizontalmente el bloque */
  padding: 0 20px;                        /* Espacio de seguridad lateral */
  text-align: center;                     /* Centra los textos y títulos del bloque */
}

.por-que h2 {
  font-size: 1.8rem;                      /* Tamaño destacado para el título de la sección */
  color: var(--texto-oscuro);             /* Utiliza el gris oscuro para el texto */
  margin-bottom: 30px;                    /* Añade una separación de 30px con la rejilla inferior */
}

/* --- Rejilla cuadricular inteligente (Grid) --- */
.features {
  display: grid;                          /* Activa el modelo Grid Layout para controlar las columnas */
  /* Genera columnas dinámicas automáticas según el espacio libre; cada una medirá mínimo 220px */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 20px;                              /* Separa de manera idéntica todas las tarjetas por 20px */
}

/* --- Píldoras/Tarjetas de Ventajas Individuales --- */
.feature-item {
  background-color: var(--blanco);        /* Fondo blanco para aislar el elemento del fondo gris */
  padding: 25px 20px;                     /* Aplica relleno interno proporcional */
  border-radius: 8px;                     /* Redondeado fino y discreto para los bordes */
  border: 1px solid #ddd;                 /* Añade un marco perimetral fino gris claro */
  font-weight: 600;                       /* Aplica un peso seminegrita al texto descriptivo */
  font-size: 15px;                        /* Regula la dimensión de la fuente */
  color: var(--texto-oscuro);             /* Utiliza el color de lectura principal */
  box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Añade una sombra sumamente sutil en la base */
}

/* ==========================================================================
   SECCIÓN HISTORIA HERO (VISTA HISTORIA - ENCABEZADO DE SECCIÓN)
   ========================================================================== */
.historia-hero {
  height: 250px;                          /* Define una altura inferior a la de la Home por ser página informativa */
  /* Aplica un degradado oscuro superpuesto sobre la imagen de fondo dedicada a Historia */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('../img/historia-hero.png');
  background-size: cover;                 /* Adapta la imagen para que rellene todo el espacio disponible */
  background-position: center;            /* Centra el cuadro visual de la foto */
  display: flex;                          /* Usa flexbox interno */
  flex-direction: column;                 /* Alinea el título encima del subtítulo en vertical */
  justify-content: center;                /* Centra verticalmente */
  align-items: center;                    /* Centra horizontalmente */
  color: var(--blanco);                   /* Define la tipografía en color blanco */
  text-align: center;                     /* Centra los renglones */
  padding: 0 20px;                        /* Margen lateral de protección */
}

.historia-hero h1 {
  font-size: 2.5rem;                      /* Define el tamaño del título de historia */
  margin: 0 0 10px 0;                     /* Añade un espacio de separación inferior de 10px */
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);  /* Coloca sombra suave negra para destacar la lectura */
}

.historia-hero p {
  font-size: 1.1rem;                      /* Ajusta la dimensión de la descripción de la historia */
  margin: 0;                              /* Resetea los márgenes por defecto del párrafo */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);  /* Agrega sombra suave de apoyo */
}

/* ==========================================================================
   SECCIÓN TIMELINE / TARJETAS CRONOLÓGICAS (VISTA HISTORIA)
   ========================================================================== */
.timeline {
  max-width: 1000px;                      /* Ancho máximo recomendado para la lectura fluida del timeline */
  margin: 40px auto;                      /* Centra el bloque en el monitor con márgenes verticales de 40px */
  padding: 0 20px;                        /* Espacio de amortiguación lateral */
  display: grid;                          /* Construye una cuadrícula elástica */
  /* Las tarjetas cronológicas se auto-acomodan en columnas midiendo como mínimo 220px cada una */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 20px;                              /* Ajusta la separación física intermedia de las tarjetas */
}

/* --- Tarjeta Individual de Año/Hito Histórico --- */
.timeline .card {
  background-color: var(--blanco);        /* Fondo de contenedor en color blanco puro */
  padding: 25px;                          /* Espaciado interno generoso para que respire el texto */
  border-radius: 8px;                     /* Esquinas redondeadas suaves */
  border: 1px solid #ddd;                 /* Borde gris sutil a juego con las demás tarjetas */
  box-shadow: 0 2px 6px rgba(0,0,0,0.02); /* Sombra base muy ligera */
  transition: transform 0.2s, box-shadow 0.2s; /* Habilita transiciones suaves para animaciones interactivos */
}

/* --- Efecto dinámico de elevación al pasar el ratón (Hover) --- */
.timeline .card:hover {
  transform: translateY(-4px);            /* Eleva físicamente la tarjeta hacia arriba 4 píxeles */
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);/* Intensifica la sombra para simular cercanía o flotabilidad */
}

/* --- Títulos de los años dentro de la tarjeta --- */
.timeline .card h3 {
  font-size: 16px;                        /* Escala de texto estándar para titulares internos */
  color: #007185;                         /* Color azul corporativo limpio, típico para enlaces y destaques de comercio */
  margin: 0 0 12px 0;                     /* Añade separación con el texto explicativo inferior */
  border-bottom: 2px solid var(--naranja-amz); /* Traza una línea decorativa naranja bajo el año */
  display: inline-block;                  /* Adapta la longitud de la línea horizontal al ancho real del texto */
  padding-bottom: 3px;                    /* Separa el texto de la línea inferior */
}

/* --- Párrafos descriptivos de los hitos --- */
.timeline .card p {
  font-size: 14px;                        /* Tamaño óptimo de lectura */
  line-height: 1.5;                       /* Aumenta el interlineado vertical para evitar la fatiga visual */
  color: #333333;                         /* Tono gris oscuro suavizado para el contenido interior */
  margin: 0;                              /* Limpia márgenes colindantes */
}

/* ==========================================================================
   FOOTER (PIE DE PÁGINA COMÚN GLOBAL)
   ========================================================================== */
footer {
  background-color: var(--azul-oscuro);  /* Usa el color navy oscuro institucional de la web */
  color: var(--blanco);                   /* Color de tipografía blanco para destacar sobre el fondo */
  text-align: center;                     /* Alineación de textos en el centro */
  padding: 20px;                          /* Margen interno para rellenar verticalmente la barra del pie */
  margin-top: auto;                       /* Propiedad elástica: empuja el footer al fondo si el contenido es escaso */
  width: 100%;                            /* Fuerza al elemento a expandirse a lo largo de toda la pantalla */
  box-sizing: border-box;                 /* Asegura que los paddings no sumen anchura extra ni rompan el layout */
  font-size: 14px;                        /* Medida estandarizada de texto institucional */
}

/* ==========================================================================
   RESPONSIVE DESIGN (ADAPTACIÓN AUTOMÁTICA A TELÉFONOS Y TABLETS)
   Punto de ruptura activo para pantallas con un ancho inferior a 850px
   ========================================================================== */
@media (max-width: 850px) {
  
  /* --- Reestructuración vertical del Menú superior --- */
  header {
    flex-direction: column;               /* Pasa de fila a columna; apila verticalmente los componentes */
    padding: 15px;                        /* Reduce levemente el espaciado interno general */
    gap: 12px;                            /* Estrecha la separación entre bloques apilados */
  }

  /* --- Adaptación del bloque de búsqueda --- */
  .chat-buscador {
    width: 100%;                          /* Forza a la barra de búsqueda a ocupar todo el ancho del móvil */
    order: 2;                             /* Reordena visualmente el componente al centro (segundo lugar) */
  }

  /* --- Adaptación del bloque de menús/enlaces --- */
  nav {
    width: 100%;                          /* Ocupa la anchura total de la pantalla táctil */
    justify-content: center;              /* Distribuye y centra horizontalmente los enlaces del menú */
    order: 3;                             /* Ubica los accesos en la base del header (tercer lugar) */
    flex-wrap: wrap;                      /* Permite que los enlaces bajen ordenadamente de línea si no caben juntos */
    gap: 10px;                            /* Reduce el margen de separación entre enlaces */
  }
  
  /* --- Ajuste tipográfico del Hero en móviles --- */
  .hero h1 {
    font-size: 2rem;                      /* Encoje el tamaño del título de portada para que no se corte */
  }
  
  .hero p {
    font-size: 1.1rem;                    /* Equilibra el tamaño de la descripción en pantallas reducidas */
  }
  
  /* --- Reorganización de los botones del Hero --- */
  .hero-buttons {
    flex-direction: column;               /* Apila los dos botones de forma vertical para facilitar el toque táctil */
    width: 100%;                          /* Ocupa el ancho entero disponible */
    max-width: 300px;                     /* Fija un ancho límite cómodo para pulsar con el dedo pulgar */
    gap: 10px;                            /* Espacio intermedio de separación entre los dos botones apilados */
  }

  /* --- Ajuste del Banner de Historia en móviles --- */
  .historia-hero {
    height: 180px;                        /* Reduce la altura del banner para que no ocupe toda la pantalla táctil */
    padding: 0 15px;                      /* Ajusta la amortiguación lateral */
  }

  .historia-hero h1 {
    font-size: 1.8rem;                    /* Encoje el título principal para evitar saltos de línea extraños */
  }

  .historia-hero p {
    font-size: 1rem;                      /* Reequilibra el tamaño de la descripción */
  }

  /* --- Reestructuración de la rejilla cronológica --- */
  .timeline {
    grid-template-columns: 1fr;           /* Fuerza a las tarjetas a apilarse en una sola columna perfecta */
    margin: 25px auto;                    /* Reduce los márgenes verticales excesivos */
    gap: 15px;                            /* Estrecha levemente la separación entre hitos */
  }

  /* --- Optimización de tarjetas individuales --- */
  .timeline .card {
    padding: 18px;                        /* Disminuye el colchón interno para dar más espacio real al texto */
  }
}