/* =========================================================================
   enlazado.css — bloques de enlazado interno para maquinariaalimentaria.net
   -------------------------------------------------------------------------
   Hoja ADITIVA. No redefine ni una sola regla de assets/css/style.css: todas
   las clases llevan el prefijo .ma- y las unicas reglas que descienden de una
   clase del sitio (.amz-header .ma-mega-panel a) existen precisamente para
   que la cascada del sitio no pinte de blanco los enlaces del panel.

   Reutiliza las variables de style.css (--amz-*) con valor de respaldo, para
   que el bloque siga siendo legible aunque style.css no llegue a cargar.

   Principio de diseno: ningun bloque puede desplazar el hero. El panel del
   megamenu es una capa absoluta anclada al pie de la cabecera sticky
   (top:100%), que conserva sus 60+39 px intactos; el boton que lo abre es un
   elemento en linea mas de la barra de navegacion, con la misma metrica que
   los enlaces que ya habia. El resto de bloques vive al pie de la pagina.
   ========================================================================= */

/* Contenedor comun: la misma caja que usa el sitio (max-w-[1500px] px-4). */
.ma-w {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---- 1. Megamenu de cabecera ------------------------------------------ */
/* .amz-header ya es position:sticky, o sea un elemento posicionado, asi que
   sirve de bloque contenedor del panel absoluto. El panel se ancla a top:100%
   (por debajo de las dos barras) y flota sobre el contenido sin empujarlo. */

.ma-mega { display: inline-flex; align-items: center; }

.ma-mega-btn {
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.ma-mega-btn:hover { border-color: #fff; color: var(--amz-orange, #ff9900); }
.ma-mega-btn[aria-expanded="true"] { border-color: #fff; color: var(--amz-orange, #ff9900); }

/* Punta del desplegable: gira al abrir, sin ocupar mas alto. */
.ma-mega-btn::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.ma-mega-btn[aria-expanded="true"]::after { transform: translateY(0.0625rem) rotate(-135deg); }

/* Variante para el menu movil que ya trae el sitio (#mobile-menu). */
.ma-mega-btn--mob {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border: 0;
  border-radius: 0;
}
.ma-mega-btn--mob:hover { border: 0; }

.ma-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--amz-white, #fff);
  color: var(--amz-text, #0f1111);
  border-bottom: 3px solid var(--amz-orange, #ff9900);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  max-height: min(72vh, 40rem);
  overflow-y: auto;
  z-index: 5;
  animation: maMegaIn 0.14s ease-out;
}
@keyframes maMegaIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .ma-mega-panel { animation: none }
  .ma-mega-btn::after { transition: none }
}
.ma-mega-panel[hidden] { display: none; }

.ma-mega-in { padding: 1.25rem 1rem 1rem; }
.ma-mega-in > h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--amz-text, #0f1111);
}
.ma-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 2rem;
}
.ma-mega-list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.1875rem 0;
}

/* .amz-header a{color:#fff} pintaria de blanco sobre blanco. Se sube la
   especificidad lo justo para ganar dentro del panel, sin tocar esa regla. */
.amz-header .ma-mega-panel a {
  color: var(--amz-link, #007185);
  text-decoration: none;
  font-size: 0.875rem;
}
.amz-header .ma-mega-panel a:hover {
  color: var(--amz-link-hover, #c7511f);
  text-decoration: underline;
}
.ma-n {
  color: var(--amz-text-light, #565959);
  font-size: 0.75rem;
  white-space: nowrap;
}

.ma-mega-foot {
  border-top: 1px solid var(--amz-border, #d5d9d9);
  background: #f7fafa;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.amz-header .ma-mega-panel .ma-mega-foot a { font-weight: 700; }

@media (max-width: 900px) { .ma-mega-list { columns: 2 } }
@media (max-width: 640px) { .ma-mega-list { columns: 1 } }

/* ---- 2. Indice de maquinas (home y hub) ------------------------------- */

.ma-idx {
  background: var(--amz-white, #fff);
  border-top: 1px solid var(--amz-border, #d5d9d9);
  padding: 2.5rem 0;
}
.ma-idx--home { background: #f7fafa; }

.ma-idx h2 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--amz-text, #0f1111);
}
.ma-sub {
  margin: 0 0 1.5rem;
  color: var(--amz-text-light, #565959);
  font-size: 0.875rem;
  max-width: 70ch;
}

.ma-idx-cols { columns: 4; column-gap: 2rem; }
@media (max-width: 1200px) { .ma-idx-cols { columns: 3 } }
@media (max-width: 900px)  { .ma-idx-cols { columns: 2 } }
@media (max-width: 640px)  { .ma-idx-cols { columns: 1 } }

.ma-g {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 0 0 0.125rem;
}
.ma-g > h3 {
  margin: 0 0 0.375rem;
  padding: 0 0 0.3125rem;
  border-bottom: 1px solid var(--amz-border, #d5d9d9);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.ma-g > h3 > a { color: var(--amz-text, #0f1111); text-decoration: none; }
.ma-g > h3 > a:hover { color: var(--amz-link-hover, #c7511f); text-decoration: underline; }
.ma-g ul { list-style: none; margin: 0; padding: 0; }
.ma-g li { line-height: 1.5; }
.ma-g li a {
  display: block;
  padding: 0.125rem 0;
  color: var(--amz-link, #007185);
  text-decoration: none;
  font-size: 0.8125rem;
}
.ma-g li a:hover { color: var(--amz-link-hover, #c7511f); text-decoration: underline; }

/* ---- 3. Maquinas relacionadas (pie de cada ficha) --------------------- */

.ma-rel {
  background: #f7fafa;
  border-top: 1px solid var(--amz-border, #d5d9d9);
  padding: 2.5rem 0;
}
.ma-rel h2 {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--amz-text, #0f1111);
}
.ma-rel-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .ma-rel-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .ma-rel-grid { grid-template-columns: 1fr } }

/* La misma tarjeta que .card-product del sitio: fondo blanco, borde
   --amz-border, radio 4px y la misma sombra al pasar por encima. */
.ma-rel-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  background: var(--amz-white, #fff);
  border: 1px solid var(--amz-border, #d5d9d9);
  border-radius: 4px;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.ma-rel-grid a:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.ma-rel-t {
  color: var(--amz-link, #007185);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.ma-rel-grid a:hover .ma-rel-t { color: var(--amz-link-hover, #c7511f); }
.ma-rel-d {
  color: var(--amz-text-light, #565959);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ma-more { margin: 1.25rem 0 0; font-size: 0.875rem; }
.ma-more a { color: var(--amz-link, #007185); font-weight: 700; text-decoration: none; }
.ma-more a:hover { color: var(--amz-link-hover, #c7511f); text-decoration: underline; }

/* ---- 4. Banda de sectores sobre el pie -------------------------------- */
/* Va justo encima de <footer class="amz-footer">, con su mismo fondo, para
   que se lea como la primera fila del pie y no como un bloque pegado. */

.ma-secband {
  background: var(--amz-dark2, #232f3e);
  color: #ddd;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ma-secband h2 {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.ma-secband ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: 2rem;
}
@media (max-width: 900px) { .ma-secband ul { columns: 2 } }
@media (max-width: 560px) { .ma-secband ul { columns: 1 } }
.ma-secband li { break-inside: avoid; line-height: 1.9; }
.ma-secband a { color: #ddd; font-size: 0.8125rem; text-decoration: none; }
.ma-secband a:hover { color: #fff; text-decoration: underline; }
.ma-secband .ma-n { color: #999; }

/* Las fichas de maquina abren el pie con <footer class="amz-footer mt-12">: ese
   margen dejaria una franja del fondo de la pagina entre la banda y el pie, y
   se leerian como dos bloques oscuros sueltos. Regla nueva, no se toca .mt-12:
   solo se anula en el unico caso en que la banda es el hermano anterior. */
.ma-secband + footer.amz-footer { margin-top: 0; }