/* =========================================================
   RESET BÁSICO 
   esto sirve para eliminar los márgenes y rellenos predeterminados de los navegadores,
    y para asegurarnos de que el tamaño de los elementos se calcule de forma más intuitiva.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla.
     o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   VARIABLES GLOBALES DEL SITIO
   aqui se encuentran todas las variables de colores, fuentes, tamaños, espacios, y otros valores que se utilizan en todo el sitio.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla para asegurarte de que todo sigue viéndose bien.
   o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
:root {
  --primary: #0f4ea8;
  --primary-dark: #0b3f88;
  --primary-soft: #eaf2ff;
  --secondary-bg: #f7faff;
  --text: #1d2736;
  --text-soft: #5c6775;
  --white: #ffffff;
  --border: #d8e4f3;
  --shadow: 0 12px 30px rgba(15, 78, 168, 0.08);
  --shadow-soft: 0 8px 18px rgba(15, 78, 168, 0.06);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: 1200px;
  --transition: 0.3s ease;
}

/* =========================================================
   CONFIGURACIÓN GENERAL
   aqui esta la configuración general del sitio, como la fuente, colores de fondo y texto, 
   estilos de imágenes y enlaces, y algunos estilos básicos para contenedores y secciones.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla
========================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: min(92%, var(--max-width));
  margin: 0 auto;
}

.section {
  padding: 90px 0;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

.section-text {
  color: var(--text-soft);
  font-size: 1.05rem;
  max-width: 820px;
}

.section-text--center {
  text-align: center;
  margin: 0 auto 40px;
}

.badge {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* =========================================================
   BOTONES
   estos son los estilos para los botones del sitio, 
   como el botón de contacto rápido en el header, los botones de llamada a la acción en el hero 
   y la sección de CTA, y los botones de solicitud de presupuesto en la sección de productos.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla
========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn--outline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn--outline:hover {
  background: var(--primary-soft);
  transform: translateY(-2px);
}

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

.btn--light:hover {
  background: #eef4ff;
  transform: translateY(-2px);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--white);
  background: transparent;
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* =========================================================
   HEADER
   como su nombre lo indica, esto es lo que configura el encabezado del sitio,
    donde se muestra el logo de la empresa, el menú de navegación, y un botón de contacto rápido (WhatsApp).
    si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla
========================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 228, 243, 0.85);
}

.header__container {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__logo {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.brand__text h1 {
  font-size: 1.1rem;
  color: var(--primary-dark);
}

.brand__text p {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  font-weight: 600;
  color: var(--text);
  transition: var(--transition);
}

.nav a:hover {
  color: var(--primary);
}

.menu-toggle {
  display: none;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary-dark);
  font-size: 1.4rem;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}

/* =========================================================
   HERO
   como su nombre lo indica, esto es lo que configura la sección principal del sitio,
========================================================== */
.hero {
  padding: 80px 0 50px;
  background: linear-gradient(135deg, #eef5ff 0%, #ffffff 100%);
}

.hero__container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

.hero__title {
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  line-height: 1.04;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

.hero__description {
  color: var(--text-soft);
  font-size: 1.08rem;
  max-width: 670px;
  margin-bottom: 28px;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.hero__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.highlight-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  font-weight: 700;
  color: var(--primary-dark);
  box-shadow: var(--shadow-soft);
}

.hero__image-wrapper {
  position: relative;
}

.hero__image {
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.hero__location-card {
  position: absolute;
  left: -18px;
  bottom: 18px;
  max-width: 270px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow);
}

.hero__location-card h3 {
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.hero__location-card p {
  color: var(--text-soft);
  font-size: 0.96rem;
}

/* =========================================================
   ABOUT / NOSOTROS
    Diseño de la sección de "Nosotros" o "Acerca de", donde se muestra una imagen representativa de la empresa,
     junto con una breve descripción de la historia, misión, visión, y valores de la empresa.
========================================================== */
.about {
  background: var(--secondary-bg);
}

.about__container {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: center;
}

.about__image {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.about__cards {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.info-card h3 {
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.info-card p {
  color: var(--text-soft);
}

/* =========================================================
   PRODUCTOS
   Aqui va el diseño de la sección de productos,
    donde se muestran las carretillas y pestillos que ofrece la empresa, con su respectiva imagen, nombre,
     descripción, y un botón para solicitar más información o un presupuesto.
========================================================== */
.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card__image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.product-card__content {
  padding: 24px;
}

.product-card__content h3 {
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.product-card__content p {
  color: var(--text-soft);
  margin-bottom: 18px;
}

/* =========================================================
   FEATURES / VENTAJAS
   Diseño de las ventajas competitivas de la empresa,
    que es esa sección donde se muestran las características o beneficios principales de los productos 
    o servicios que ofrece la empresa.
========================================================== */
.features {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}

/* =========================================================
   REDES SOCIALES
   Aqui estan todas las redes sociales de la empresa, con su respectivo icono, nombre, y una breve descripción.
========================================================== */
.social__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  min-height: 190px;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: #a7c1ec;
}

.social-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-card__icon svg {
  width: 30px;
  height: 30px;
}

.social-card h3 {
  color: var(--primary-dark);
  margin-bottom: 0;
}

.social-card p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* =========================================================
   CONTACTO
========================================================== */
.contact {
  background: var(--secondary-bg);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow);
}

.contact-card h3 {
  color: var(--primary-dark);
  margin-bottom: 16px;
}

.contact-card__info {
  display: grid;
  gap: 14px;
}

.contact-item {
  background: #fbfdff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.contact-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-dark);
}

.contact-item span,
.contact-item a {
  color: var(--text-soft);
}

.map-embed {
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
}

/* =========================================================
   CTA
   esto es lo que configura la sección de llamada a la acción (CTA) del sitio, 
   que es esa parte al final donde se invita a los visitantes a tomar una acción específica, como contactarse o solicitar un presupuesto.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla para asegurarte de que todo sigue viéndose bien.
   o si no sabes que hacer, mejor no toques nada aquí y avísame para  ayudarte. 829-576-4509 ROMEL
========================================================== */
.cta {
  padding-top: 70px;
}

.cta__box {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  border-radius: 28px;
  padding: 48px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
}

.cta__content h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 12px;
}

.cta__content p {
  opacity: 0.94;
}

.cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* =========================================================
   FOOTER
   como su nombre lo indica, esto es lo que configura el pie de página del sitio, 
   donde se muestra información de contacto, enlaces importantes, y un mensaje de agradecimiento a los visitantes.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla para asegurarte de que todo sigue viéndose bien.
   o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
.footer {
  background: #0c1931;
  color: #d9e3f3;
  padding-top: 55px;
}

.footer__container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 28px;
  margin-bottom: 28px;
}

.footer__column h3 {
  color: var(--white);
  margin-bottom: 14px;
}

.footer__column p,
.footer__column li,
.footer__column a {
  color: #d9e3f3;
}

.footer__column ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0 26px;
  text-align: center;
  color: #b7c7e3;
}

.footer__blessing {
  margin-top: 8px;
  font-weight: 600;
  color: #ffffff;
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Este es el boton verde que aparece en la esquina inferior derecha de la pantalla,
    y que al hacer clic te lleva a chatear por WhatsApp con el número de contacto de la empresa.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla
    para asegurarte de que el botón sigue siendo visible y fácil de usar en todas las situaciones.
   o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1001;
  background: #25d366;
  color: white;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.28);
  transition: var(--transition);
}

.whatsapp-float:hover {
  transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE / TABLET
   Esto es lo que permite que el sitio se vea bien en pantallas medianas, como tablets o laptops pequeñas.
   ajusta el número de columnas en las secciones de productos, características y redes sociales a
    2 columnas para que todo se vea bien sin importar el tamaño de la pantalla.

========================================================== */
@media (max-width: 1100px) {
  .products__grid,
  .features__grid,
  .social__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   RESPONSIVE / MENOR A 900PX
   Esto es lo que permite que el sitio se vea bien en pantallas más pequeñas, como teléfonos grandes o tablets pequeñas.
   ajusta el diseño del header para que el menú se convierta en un menú hamburguesa (tengo hambre),
     y se muestre de forma vertical cuando se active.
      también hace que las secciones principales del sitio se conviertan en una sola columna para
       que todo se vea bien sin importar el tamaño de la pantalla.
     si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla para asegurarte de que todo sigue viéndose bien.
      o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
@media (max-width: 900px) {
  .header__container {
    flex-wrap: wrap;
    padding: 16px 0;
  }

  .menu-toggle {
    display: block;
  }

  .nav {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 12px;
  }

  .nav.nav--open {
    display: flex;
  }

  .header__whatsapp {
    display: none;
  }

  .hero__container,
  .about__container,
  .contact__grid,
  .cta__box,
  .footer__container {
    grid-template-columns: 1fr;
  }

  .hero__highlights {
    grid-template-columns: 1fr;
  }

  .hero__location-card {
    position: static;
    margin-top: 16px;
    max-width: 100%;
  }

  .cta__buttons {
    justify-content: flex-start;
  }
}

/* =========================================================
   RESPONSIVE / MÓVIL
   Esto es lo que permite que el sitio se vea bien en pantallas pequeñas, como teléfonos móviles.
   y tambien ajusta algunos tamaños y espacios para que todo se vea proporcionado en pantallas menores a 640px.
   si vas a tocar algo aquí, hazlo con cuidado y prueba en diferentes tamaños de pantalla para asegurarte de que todo sigue viéndose bien.
   o si no sabes que hacer, mejor no toques nada aquí y avísame para ayudarte. 829-576-4509 ROMEL
========================================================== */
@media (max-width: 640px) {
  .section {
    padding: 70px 0;
  }

  .products__grid,
  .features__grid,
  .social__grid {
    grid-template-columns: 1fr;
  }

  .hero__image {
    min-height: 320px;
  }

  .about__image {
    min-height: 300px;
  }

  .map-embed,
  .map-embed iframe {
    min-height: 320px;
  }
}