/* =========================================================
   ZGZWEB - CAPA RESPONSIVE GLOBAL
   Cargar DESPUES de global.css, home.css y los CSS de pagina.
   ========================================================= */

/* Evita el scroll lateral provocado por 100vw, sombras y elementos decorativos. */
html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Medios y contenido incrustado nunca pueden superar su contenedor. */
img,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  width: 100%;
}

/* Raices conocidas de las landings. */
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) {
  max-width: 100vw;
  overflow-x: clip;
}

:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
),
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) *,
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) *::before,
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) *::after {
  box-sizing: border-box;
}

/* Esta es una causa habitual de desbordamiento en Grid y Flex. */
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) :where(
  [class*="__grid"],
  [class$="-grid"],
  [class*="-grid "],
  [class*="__layout"],
  [class$="-layout"],
  [class*="-layout "],
  [class*="__columns"],
  [class$="-columns"]
) > * {
  min-width: 0;
  max-width: 100%;
}

/* Permite que palabras largas, URLs y textos dinámicos partan línea. */
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, summary, figcaption, blockquote, a, button) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Formularios seguros en movil y sin zoom automatico de iOS. */
:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) :where(input, select, textarea, button) {
  max-width: 100%;
  font: inherit;
}

:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) :where(pre, code) {
  max-width: 100%;
}

:where(
  .zgz-home-v7,
  .zgz-dwz-page,
  .zgz-auto,
  .zgz-comercios,
  .zgz-rest,
  .zgz-maint,
  .zgz-pages,
  .zgz-bruno,
  .zgz-contact,
  main[class^="zgz-"],
  main[class*=" zgz-"]
) pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablet estrecha: apila los layouts principales antes de que se compriman. */
@media (max-width: 900px) {
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) :where(
    [class*="hero__grid"],
    [class*="hero__layout"],
    [class*="faq__grid"],
    [class*="__split"],
    [class$="-split"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Movil. */
@media (max-width: 760px) {
  :where(
    .zgz-v7-container,
    .zgz-dwz-container,
    .zgz-auto-container,
    .zgz-comercios-container,
    .zgz-rest-container,
    .zgz-maint-container,
    .zgz-pages-container,
    .zgz-bruno-container,
    .zgz-contact-container,
    .zgz-container
  ) {
    width: calc(100% - 30px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* En movil, cualquier rejilla estructural pasa a una sola columna. */
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) :where(
    [class*="__grid"],
    [class$="-grid"],
    [class*="-grid "],
    [class*="__layout"],
    [class$="-layout"],
    [class*="-layout "]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Botoneras en vertical y botones utilizables con el pulgar. */
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) :where([class$="-actions"], [class*="-actions "]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) :where([class$="-actions"], [class*="-actions "]) > :where(a, button) {
    width: 100% !important;
    white-space: normal !important;
    text-align: center;
  }

  /* Titulares fluidos con limites reales para pantallas pequenas. */
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) h1 {
    font-size: clamp(2.1rem, 10vw, 3.15rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) h2 {
    font-size: clamp(1.75rem, 8.2vw, 2.45rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }

  /* Evita que etiquetas cortas obligadas a nowrap saquen la pagina del viewport. */
  .zgz-comercios-table a,
  .zgz-comercios-routes em,
  .zgz-dwz-project-list em,
  .zgz-v7-service-rows strong,
  .zgz-v7-route-list em {
    white-space: normal !important;
  }

  /* Las barras superiores de paneles pueden saltar de linea. */
  :where(
    .zgz-auto-desk__top,
    .zgz-comercios-window__bar,
    .zgz-rest-ticket__top,
    .zgz-rest-ticket__bottom,
    .zgz-maint-monitor__top,
    .zgz-pages-board__top,
    .zgz-bruno-browser__top
  ) {
    flex-wrap: wrap;
  }

  /* Formularios: 16px evita el zoom automatico de Safari en iPhone. */
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) :where(input, select, textarea) {
    font-size: 16px !important;
  }

  /* Tablas HTML reales: se desplazan dentro de su bloque, no toda la pagina. */
  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  :where(
    .zgz-v7-container,
    .zgz-dwz-container,
    .zgz-auto-container,
    .zgz-comercios-container,
    .zgz-rest-container,
    .zgz-maint-container,
    .zgz-pages-container,
    .zgz-bruno-container,
    .zgz-contact-container,
    .zgz-container
  ) {
    width: calc(100% - 24px) !important;
  }

  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) h1 {
    font-size: clamp(2rem, 10.5vw, 2.7rem) !important;
  }

  :where(
    .zgz-home-v7,
    .zgz-dwz-page,
    .zgz-auto,
    .zgz-comercios,
    .zgz-rest,
    .zgz-maint,
    .zgz-pages,
    .zgz-bruno,
    .zgz-contact,
    main[class^="zgz-"],
    main[class*=" zgz-"]
  ) h2 {
    font-size: clamp(1.65rem, 8.5vw, 2.2rem) !important;
  }
}

/* Respeta accesibilidad y ahorra bateria en movil. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}