/* ==============================
   CUSTOM HIOSSEN STYLES
   ============================== */

/* 1. Variable de color primario */
:root {
  /* Reemplaza #E30613 por el hex exacto de tu rojo de logo */
  --primary-color: #E30613;
}

/* 2. Logo más pequeño en el nav */
#header #logo img.logo-default {
  max-height: 50px;
  /* ajústalo a tu gusto */
  width: auto;
}

/* 3. Enlaces del menú en color primario */
.primary-menu .menu-link div {
  color: var(--primary-color);
  transition: color 0.3s ease;
}

/* 4. Hover y estado “current” */
.primary-menu .menu-link:hover div,
.menu-item.current .menu-link div {
  color: var(--primary-color);
  font-weight: bold;
}

/* 5. Botones principales */
.button,
.button.button-rounded,
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* 6. Bordes y líneas destacadas */
.feature-box.fbox-plain .fbox-icon a i,
.feature-box.fbox-plain .fbox-content h3 {
  color: var(--primary-color);
}

/* 7. Contadores (si usas el counter small del demo) */
.counter-small span[data-to] {
  color: var(--primary-color);
}

/* 8. Enlaces destacados */
a,
a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

/* Asegura algo de padding y esquinas redondeadas */
.primary-menu .menu-link div {
  padding: 0.5em 1em;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

/* Estado “activo” (current) */
.primary-menu .menu-item.current .menu-link div {
  background-color: var(--primary-color);
  color: #fff;
}

/* Hover sobre cualquier enlace del menú */
.primary-menu .menu-link:hover div {
  background-color: var(--primary-color);
  color: #fff;
}

/* ————————————————————————————————
   Ajustes de menú Hiossen
   ———————————————————————————————— */

/* 1) Quitar el fondo por defecto del demo en la <a> activa y en hover */
.primary-menu.style-3 .menu-item.current>.menu-link,
.primary-menu.style-3 .menu-link:hover {
  background: transparent !important;
}

/* 2) Pintar sólo el <div> interno de cada enlace */
.primary-menu .menu-item.current .menu-link div,
.primary-menu .menu-link:hover div {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* 3) Padding más ajustado en los <div> de los links */
.primary-menu .menu-link div {
  padding: 0.4em 0.8em !important;
  border-radius: 4px;
}

/* 4) Márgenes reducidos entre items */
.primary-menu .menu-container .menu-item {
  margin: 0 0.5rem !important;
}

/* 5) Prevenir que el menú “salte” de línea */
.primary-menu {
  white-space: nowrap;
}

/* Fuerza proporción 4:3 en las imágenes de producto */
.product-card .card-img-top {
  width: 100%;
  height: 200px;
  /* 4:3 ratio para 300px ancho */
  object-fit: cover;
  border-bottom: 2px solid var(--primary-color);
}

/* Estilo dinámico de las cards */
.product-card {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform .3s, box-shadow .3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

/* Tipografía más atractiva */
.product-card .card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--primary-color);
}

.product-card .product-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  color: #555;
}

/* Botón principal adaptado */
.product-card .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  font-weight: 500;
}

/* Spacing de la lista */
.product-card .list-unstyled li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.3em;
}

.product-card .list-unstyled li:before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

/* Ajustes generales */
#productos .nav-pills .nav-link {
  font-weight: 500;
  margin: 0 0.5rem;
}

#productos .nav-pills .nav-link.active {
  background-color: var(--primary-color);
  color: #fff;
}

/* Sección “Acerca de” */
#acerca .lead {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

#acerca .rounded.shadow {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Valores */
.feature-box.center .fbox-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.feature-box.center .fbox-content h3 {
  color: var(--primary-color);
}

/* Timeline */
.timeline {
  border-left: 3px solid var(--primary-color);
  padding-left: 1.5rem;
}

.timeline-year {
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* ---------- Nuestra Historia ---------- */
#historia .history-image {
  position: relative;
  width: 100%;
  padding-bottom: 86.6%; /* ancho:alto ≈ 1 : 0.866 (hexágono “estirado”) */
}

#historia .history-image::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  z-index: 1;
}
#historia .history-image img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  z-index: 2;
}


/* Ícono flotante en hexágono */
#historia .history-icon {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 60px; height: 60px;
  background: var(--primary-color);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Texto con barra de acento */
#historia .history-text h3 {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  position: relative;
  padding-left: 1rem;
}
#historia .history-text h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--primary-color);
}
#historia .history-text p {
  font-family: 'Lato', sans-serif;
  color: #555;
  margin-top: 1rem;
  line-height: 1.6;
}
#historia .history-text .iconlist li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.5em;
  color: #555;
}
#historia .history-text .iconlist li:before {
  content: "✔";
  position: absolute; left:0;
  color: var(--primary-color);
}

/* ---------- Hexágono para Liderazgo Global ---------- */
#liderazgo .history-image {
  position: relative;
  width: 100%;
  /* Ajusta proporción más alargada */
  aspect-ratio: 1 / 0.866;
}
#liderazgo .history-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; height: 100%;
  background: #f0f0f0;
  clip-path: polygon(
    25% 6.7%, 75% 6.7%,
    100% 50%,
    75% 93.3%, 25% 93.3%,
    0% 50%
  );
  z-index: 1;
}
#liderazgo .history-image img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: polygon(
    25% 6.7%, 75% 6.7%,
    100% 50%,
    75% 93.3%, 25% 93.3%,
    0% 50%
  );
  z-index: 2;
}
/* Ícono flotante */
#liderazgo .history-icon {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 60px; height: 60px;
  background: var(--primary-color);
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%,
    75% 100%, 25% 100%,
    0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Texto con barra de acento */
#liderazgo .history-text h3 {
  position: relative;
  padding-left: 1rem;
  font-family: 'Montserrat', sans-serif;
  color: #333;
}
#liderazgo .history-text h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--primary-color);
}
#liderazgo .history-text p {
  font-family: 'Lato', sans-serif;
  color: #555;
  line-height: 1.6;
  margin-top: 1rem;
}

/* Fuente principal */
body, input, button, textarea {
  font-family: 'Archivo', sans-serif;
}

/* Opcional: estilos para encabezados si queréis un peso concreto */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Mantener todas las imágenes de producto a la misma altura */
.product-card .card-img-top {
  height: 250px;         /* ajústalo a tu gusto */
  object-fit: contain;   /* 'cover' recorta, 'contain' muestra todo */
  background: #fff;      /* opcional, fondo blanco */
}

/* LightGallery thumbnails */
.lg-thumb-outer {
  background: #000;      /* mini-thumbs sobre fondo negro */
}
.lg-outer .lg-thumb .lg-thumb-item img {
  object-fit: cover;
  height: 60px;
  width: 60px;
}

/* Fade-in hacia arriba */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos generales de la ficha de descarga */
.download-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s forwards ease;
}

/* Opcional: retraso escalonado por cada columna */
#descargas .row > .col-md-4:nth-child(3n+1) .download-card { animation-delay: 0.1s; }
#descargas .row > .col-md-4:nth-child(3n+2) .download-card { animation-delay: 0.2s; }
#descargas .row > .col-md-4:nth-child(3n+3) .download-card { animation-delay: 0.3s; }

/* Hover: elevación y sombra más intensa */
.download-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* La propia tarjeta revisada */
.download-card .card-img-top {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 1rem auto 0;
}

/* Título centrado y con espacio */
.download-card .card-title {
  margin: 1rem 0;
  font-weight: 600;
}

/* Enlace de descarga con color fuerte y efecto */
.download-link {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.download-link:hover {
  color: darken(var(--primary-color), 10%);
}

/* Ajuste del cuerpo para que el botón quede al fondo */
.download-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.download-card .card-body > .mt-auto {
  margin-top: auto;
  padding-bottom: 1rem;
}

/* ——— Área de Negocios ——— */
#area-negocios {
  background-color: #f5f5f5;    /* un gris muy claro para diferenciar */
  padding-top: 60px;
  padding-bottom: 60px;
}
#area-negocios .heading-block h2 {
  color: var(--primary-color);  /* mismo rojo corporativo */
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
#area-negocios h3 {
  color: var(--primary-color);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1rem;
}
#area-negocios .negocio-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
#area-negocios .negocio-texto {
  text-align: justify;          /* justifica todo el texto */
  color: #555;
  line-height: 1.6;
}
/* Ajuste de separación entre bloques */
#area-negocios .row.align-items-center {
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  /* en móviles, siempre imagen arriba, texto abajo */
  #area-negocios .flex-row-reverse {
    flex-direction: column !important;
  }
  #area-negocios .flex-row-reverse .col-md-6:first-child {
    order: 0;
  }
}

/* Fondo de la sección Productos */
#productos {
  position: relative;
  background-image: url('../images/backgrounds/productos-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Para asegurar legibilidad, opcional overlay semi-transparente */
#productos::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}
/* Eleva el contenido sobre el overlay */
#productos .container {
  position: relative;
  z-index: 2;
}

/* ——— Mejoras en fichas de Productos ——— */
.product-card {
  /*border: 1px solid var(--primary-color);   /* marco más visible */
  border: 1px solid #847b7b;   /* marco más visible */
  border-radius: 16px;                     /* esquinas más redondeadas */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* sombra más intensa */
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.product-card .card-img-top {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* mantiene object-fit:cover y el mismo height que ya tienes */
}
.product-card .card-body {
  padding: 1.5rem;  /* espaciado interno generoso */
}
/* Ajuste extra a textos si lo necesitas */
.product-card .card-title {
  margin-bottom: 1rem;
}
.product-card .card-text {
  margin-bottom: 1.25rem;
}

/* ——— Alinear botones en la base de la ficha ——— */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card .card-body {
  flex: 1 1 auto;            /* ocupa todo el espacio sobrante */
  display: flex;
  flex-direction: column;
}

.product-card .card-body .btn {
  margin-top: auto;          /* empuja el botón hacia abajo */
}