/* Mobile layer for the vinaquito design.
   The source bundle carries ALL layout as inline styles and zero media
   queries, so overrides here match on the style attribute and have to win
   with !important — there is no class to hook. */

/* ---- Header: brand + flags on one row, links wrap under, CTA drops
        (the fixed WhatsApp button already covers that action). ---- */
@media (max-width: 780px) {
  header nav { flex-wrap: wrap !important; gap: 10px 14px !important; padding: 10px 16px !important; }
  header nav > div[style*="flex:1"] { display: none !important; }
  header nav > a { flex: 1 1 auto !important; }
  header nav > div[style*="gap:26px"] {
    width: 100% !important; gap: 16px !important; justify-content: center !important;
    flex-wrap: wrap !important; font-size: 14px !important;
  }
  /* the WhatsApp pill in the nav */
  header nav a[href^="https://wa.me"] { display: none !important; }
  header nav span[data-swap]:last-child { display: none !important; }
}

/* ---- Grids: every auto-fit track whose floor is wider than a phone
        would otherwise force the page min-width past the viewport. ---- */
@media (max-width: 780px) {
  [style*="minmax(300px"], [style*="minmax(320px"],
  [style*="minmax(340px"], [style*="minmax(360px"] {
    grid-template-columns: 1fr !important;
  }
  /* hero: headline over the service-times card */
  [style*="minmax(0,1.35fr)"] { grid-template-columns: 1fr !important; align-items: start !important; }
}
@media (max-width: 560px) {
  [style*="minmax(160px"], [style*="minmax(240px"],
  [style*="minmax(250px"], [style*="minmax(260px"] {
    grid-template-columns: 1fr !important;
  }
  /* the address/phone/email cards were leaving a ragged empty cell */
  [style*="minmax(160px"] > div { align-self: stretch !important; }
}

/* ---- "LO QUE HACEMOS" cards: fixed 2 rows of 3 on desktop (grid-template-
        columns:repeat(3,1fr) has no minmax() for the rules above to match),
        one column on mobile. ---- */
@media (max-width: 780px) {
  #hacemos [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---- Flex rows that have no wrap of their own. ---- */
@media (max-width: 780px) {
  [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-wrap"]) {
    flex-wrap: wrap !important;
  }
}

/* ---- Tap targets and text. ---- */
@media (max-width: 780px) {
  a, button { -webkit-tap-highlight-color: rgba(95,44,80,.15); }
  section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Nothing should be able to scroll the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }