/* Escalado por espacio disponible: CSS nativo, sin detectar modelos de equipos
   ni escalar la página con transform/zoom. Respeta zoom y tamaños del usuario. */
:root {
  --max-width: clamp(75rem, 82vw, 100rem);
  --page-gutter: clamp(1.125rem, 3vw, 2.5rem);
  --header-height: 104px;
}
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
.container {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
.section { padding-block: clamp(3rem, 5vw, 5.5rem); }
section[id], #contact-form { scroll-margin-top: calc(var(--header-height) + 24px); }
.hero__content {
  container: hero-content / inline-size;
  padding-top: calc(var(--header-height) + clamp(2rem, 5vh, 5rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero__content h1 { font-size: clamp(2rem, 1.25rem + 2.5vw, 4rem); max-width: 22ch; }
.hero__content > p { max-width: 60ch; }
/* Mantiene el buscador aprobado; sólo cambia la distribución al faltar espacio. */
.hero__search { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.hero__search button { grid-column: auto; }
@container hero-content (max-width: 850px) {
  .hero__search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__search button { grid-column: 1 / -1; }
}
@container hero-content (max-width: 540px) {
  /* Categoría+Subcategoría comparten fila (antes 3 filas apiladas, cada una
     con su label arriba, ocupaba media pantalla). El label de texto de cada
     campo ya queda dicho por la opción placeholder del combo ("Elegí una
     categoría", etc.), así que pasa a sólo-lectores en vez de sumar una
     línea más por campo. */
  .hero__search { grid-template-columns: 1fr 1fr; }
  .hero__search-title { font-size: .875rem; margin-bottom: 0; }
  .hero__search-field:nth-child(2) { grid-column: 1; }
  .hero__search-field:nth-child(3) { grid-column: 2; }
  .hero__search-field:nth-child(4) { grid-column: 1 / -1; }
  .hero__search-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  /* Sin font-size acá a propósito: la regla de abajo (media 767px) ya fuerza
     1rem en los <select> de mobile para que iOS Safari no haga zoom
     automático al enfocar un campo con texto menor a 16px — iba a quedar
     pisada igual, mejor no competir con eso. */
  .hero__search select { height: 34px; padding: 0 26px 0 10px; }
}
.video-transition__quick-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 32px; }
.video-transition__quick-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 54px; padding: 13px 30px; border-radius: 10px;
  border: 1px solid #f4f8fa66; background: linear-gradient(145deg, #edf2f6, #cbd7e0);
  color: #174968; text-decoration: none; font-size: 1.075rem; font-weight: 650;
  box-shadow: 5px 5px 12px #07152280, -3px -3px 9px #ffffff25, inset 2px 2px 4px #ffffffd9, inset -2px -2px 4px #9cacbb80;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.video-transition__quick-link:hover, .video-transition__quick-link:active {
  box-shadow: inset 2px 2px 5px #a6b8c873, inset -2px -2px 5px #fff9;
}
.site-header__inner { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
.site-header__nav a, .site-header__login { white-space: nowrap; }
.site-header__search-toggle { width: 44px; height: 44px; flex-basis: 44px; }
.site-header__search-form input { min-height: 44px; font-size: 1rem; }
.site-header__menu-toggle { display: none; }
.mobile-menu {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(380px, calc(100% - 24px));
  max-width: none; height: 100dvh; max-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 24px;
  border: 0; border-left: 1px solid #dae4eb; color: var(--grafito); background: #f0f4f7;
  box-shadow: -16px 0 48px #071c3233; overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu::backdrop { background: #091c32a8; }
.mobile-menu[open] { display: flex; flex-direction: column; animation: menu-enter .24s ease-out; }
.mobile-menu__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid #c9d8e3; }
.mobile-menu__heading h2 { margin: 0; font-size: 1.35rem; color: var(--azul-profundo); }
.mobile-menu__close, .site-header__menu-toggle { align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; cursor: pointer; }
.mobile-menu__close { display: flex; border: 1px solid #c5d4df; background: #e5edf3; color: var(--azul-profundo); }
.mobile-menu__nav { display: grid; gap: 4px; padding-block: 20px; }
.mobile-menu__nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; text-decoration: none; color: #153d59; font-weight: 500; border-radius: 6px; }
.mobile-menu__nav a:hover { background: #dce8f0; }
.mobile-menu__nav [data-shop="products"] { background: #005695; color: white; margin-top: 8px; }
.mobile-menu__foot { margin: auto 0 0; padding-top: 20px; font-size: .8125rem; color: #566c7b; }
html.menu-open { overflow: hidden; }
@keyframes menu-enter { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .site-header__nav, .site-header__login { display: none; }
  .site-header__menu-toggle { display: flex; border: 1px solid #ffffff70; background: #ffffff12; color: white; }
  .site-header__logo img { width: clamp(135px, 22vw, 180px); }
  .site-header__inner { gap: 16px; }
  .site-header__actions { gap: 14px; }
}
@media (max-width: 767px) {
  .site-header__cta { display: none; }
  .hero__search select { font-size: 1rem; }
  .hero__content { padding-top: calc(var(--header-height) + 28px); }
  .about__badge { width: min(360px, 85%); }
  .location__details dd { font-size: 1rem; overflow-wrap: anywhere; }
  .site-footer__inner { flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .site-header__actions { gap: 10px; }
  .site-header__inner { gap: 10px; }
}
/* Los bloques de contacto se adaptan a su ancho, también en tablet vertical. */
.contact__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); }
.contact__form-area { container: contact-form / inline-size; }
@container contact-form (max-width: 440px) {
  .contact__form { grid-template-columns: 1fr; padding: 20px; }
}
@media (max-width: 800px) {
  .contact__grid, .location__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__info h2 { max-width: 22ch; }
}
.about__content { max-width: 48rem; }
.about { padding-block: 0; }
.location__grid > *, .contact__grid > * { min-width: 0; }
.whatsapp-float { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
@media (pointer: coarse) {
  .video-transition__quick-link, .hero__search button { min-height: 44px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero__content { padding-top: calc(var(--header-height) + 24px); }
  .hero__content h1 { font-size: clamp(1.875rem, 4vw, 2.6rem); }
  .hero__content > p { margin-top: 14px; }
  .hero__search { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu[open] { animation: none; }
  .video-transition__quick-link { transition: none; }
}