/* Globales + responsive. Los estilos de cada bloque van inline en el HTML
   (vienen del diseño original); aquí solo lo común y los ajustes móviles. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #FAF6F3; }
::selection { background: var(--brand); color: #fff; }
@keyframes hxspin { to { transform: rotate(360deg); } }
@keyframes hxpop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
input, select, textarea, button { font-family: 'Hanken Grotesk', sans-serif; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Lang switch pills */
#langFR, #langES { border: none; padding: 7px 13px; cursor: pointer; background: transparent; color: var(--muted); font-weight: 700; font-size: 12.5px; }
#langFR.active, #langES.active { background: var(--brand); color: var(--onBrand); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hl-nav { display: none !important; }
  .hl-hero { grid-template-columns: 1fr !important; gap: 28px !important; padding-top: 36px !important; }
  .hl-hero h1 { font-size: 44px !important; }
  .hl-grid4 > div[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .hl-fleet > div[style*="repeat(3"],
  .hl-reviews > div[style*="repeat(3"] { grid-template-columns: 1fr !important; }
  .hl-cov > div[style*="grid"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .hl-grid4 > div[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .hl-hero h1 { font-size: 38px !important; }
  section h2 { font-size: 34px !important; }
}