/* Global footer rhythm. Loaded last so every page keeps the same footer spacing. */
body[data-page]:not([data-page="/portfolio/"]) .site-footer-main {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  display: grid !important;
  grid-template-columns:
    minmax(260px, 0.92fr)
    minmax(148px, 0.54fr)
    minmax(148px, 0.54fr)
    minmax(148px, 0.54fr)
    minmax(280px, 0.9fr) !important;
  column-gap: clamp(2.25rem, 3vw, 4.15rem) !important;
  row-gap: clamp(2.15rem, 3vw, 3rem) !important;
  justify-items: start !important;
  align-items: start !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(1),
body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(2),
body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-legal {
  width: max-content !important;
  max-width: 168px !important;
  justify-self: center !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(1) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(2) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-legal {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-contact {
  grid-column: 5 !important;
  grid-row: 1 / span 2 !important;
  width: min(100%, 300px) !important;
  justify-self: start !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-capabilities {
  grid-column: 1 / 5 !important;
  grid-row: 2 !important;
  justify-self: start !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-group {
  gap: 0.64rem !important;
}

body[data-page]:not([data-page="/portfolio/"]) .site-footer-group h3 {
  min-height: 2.2rem !important;
}

@media (max-width: 1180px) {
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  body[data-page]:not([data-page="/portfolio/"]) .site-footer-intro,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(1),
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-group:nth-of-type(2),
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-legal,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-contact,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main > .site-footer-capabilities {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body[data-page]:not([data-page="/portfolio/"]) .site-footer-main {
    grid-template-columns: 1fr !important;
    width: min(100% - 32px, 720px) !important;
    max-width: min(100% - 32px, 720px) !important;
  }
}

/* ===== Fix movil (anadido): apilar el pie en 1 columna centrada y matar el
   desbordamiento horizontal que cortaba la columna "Servicios" por la derecha.
   Mas especifico (.site-footer) + ultimo en el archivo => gana siempre. ===== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 2.2rem !important;
  }
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: center !important;
  }
  /* Alinear TODOS los bloques del pie a la IZQUIERDA por igual. Esto ANULA el
     `.site-footer-legal { justify-content: end }` de styles.css que dejaba
     "Legal" pegado a la derecha en vez de a la izquierda como "Accesos". */
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-group,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
  }
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main a,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main h3,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main p,
  body[data-page]:not([data-page="/portfolio/"]) .site-footer .site-footer-main span {
    text-align: left !important;
    align-self: flex-start !important;
  }
  /* Video y configurador: forzar 100% de ancho. El aspect-ratio 21/9 + min-height
     forzaba un ancho enorme (~600px) que se desbordaba por la derecha en movil. */
  body[data-page="/"] .hp-player,
  body[data-page="/"] .hp-player-screen,
  body[data-page="/"] .hp-config-embed,
  body[data-page="/"] .hp-config-embed-frame {
    width: 100% !important;
    max-width: 100% !important;
  }
}