/* Mejoras comunes a todas las páginas de la maqueta. Las pantallas traen
   estilos en línea, por eso algunas reglas necesitan !important. */

/* ── Menú fijo ─────────────────────────────────────────────────────── */
x-dc > div > header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  transition: box-shadow .2s ease;
}
x-dc > div > header > div {
  transition: padding .2s ease;
}
x-dc > div > header img[alt="Mavatec"] {
  /* El logo es isotipo + palabra en una sola imagen de 362×54: el isotipo
     ocupa el cuadrado de la izquierda. Al achicar, se recorta a ese cuadrado. */
  transition: width .2s ease, height .2s ease;
  width: 215px !important;
  object-fit: cover;
  object-position: left center;
}
.menu-compacto x-dc > div > header {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.menu-compacto x-dc > div > header > div {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.menu-compacto x-dc > div > header img[alt="Mavatec"] {
  width: 30px !important;
  height: 30px !important;
}

/* ── WhatsApp flotante ─────────────────────────────────────────────── */
.wa-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  min-width: 60px;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 30px;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  font: 600 15px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: background .15s ease, transform .15s ease;
}
.wa-flotante:hover { background: #1da851; transform: translateY(-2px); }
.wa-flotante:focus-visible { outline: 3px solid #f7a600; outline-offset: 3px; }
.wa-flotante svg { flex: 0 0 auto; }
/* El mensaje se ve al pasar el mouse en escritorio; en el celular, solo el icono. */
.wa-flotante__texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .25s ease, margin-left .25s ease;
}
@media (hover: hover) and (min-width: 768px) {
  .wa-flotante:hover .wa-flotante__texto,
  .wa-flotante:focus-visible .wa-flotante__texto { max-width: 420px; margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flotante, .wa-flotante__texto, x-dc > div > header, x-dc > div > header * { transition: none !important; }
}

/* ── Celular: menú con hamburguesa ─────────────────────────────────────
   Una sola fila: logo, "Cotizar" y el botón. La lista de páginas se abre
   hacia abajo con renglones grandes. Nada se desliza de costado. */
.hamburguesa, .solo-movil { display: none; }
@media (max-width: 767.98px) {
  .solo-escritorio { display: none; }
  .solo-movil { display: inline; }
  x-dc > div > header > div {
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  x-dc > div > header img[alt="Mavatec"] { width: 150px !important; height: 22px !important; }
  x-dc > div > header > div > a:last-of-type {
    order: 2; margin-left: auto;
    font-size: 14px !important; padding: 0 16px !important; min-height: 44px !important;
  }
  .hamburguesa {
    order: 3; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; box-sizing: border-box;
    background: none; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
  }
  .hamburguesa span { display: block; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
  .menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  x-dc > div > header > div > nav { display: none !important; }
  .menu-abierto x-dc > div > header > div > nav {
    order: 4; display: flex !important; flex-direction: column; flex: 1 1 100% !important;
    gap: 0 !important; overflow: visible !important; white-space: normal !important;
    margin-top: 12px; border-top: 1px solid #3d3d3d;
  }
  .menu-abierto x-dc > div > header > div > nav a {
    padding: 15px 0 !important; font-size: 17px !important; border-bottom: 1px solid #333 !important;
  }
  .menu-abierto x-dc > div > header > div > nav a[aria-current] { color: #f7a600 !important; }
  .menu-compacto x-dc > div > header > div { padding-top: 8px !important; padding-bottom: 8px !important; }

  /* Logos: la lista queda para lectores de pantalla y se ve la cinta. */
  .logos-con-cinta {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
  }
  .logos-envuelven { flex-wrap: wrap !important; overflow: visible !important; }
  .logos-envuelven > li { flex: 1 1 40% !important; }
}

/* Cinta de logos (solo en el celular). */
.cinta { display: none; }
@media (max-width: 767.98px) {
  .cinta {
    display: grid; gap: 10px; overflow: hidden;
    margin-inline: calc(-1 * var(--margen, 20px)) !important; width: auto !important; padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .cinta__pista { display: flex; gap: 10px; width: max-content; animation: cinta-avanza 40s linear infinite; }
  .cinta__pista--inversa { animation-direction: reverse; }
  .cinta:active .cinta__pista { animation-play-state: paused; }
  .cinta__logo {
    flex: none; width: 128px; height: 76px; box-sizing: border-box; padding: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; outline: 1px solid rgba(0,0,0,.08);
  }
  .cinta__logo img { max-width: 100%; max-height: 52px; object-fit: contain; }
}
@keyframes cinta-avanza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Con "reducir movimiento": sin cinta, grilla compacta de tres columnas. */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .cinta { display: none; }
  .logos-con-cinta {
    position: static !important; width: auto !important; height: auto !important; clip: auto !important;
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .logos-con-cinta > li { height: 64px !important; padding: 8px !important; }
}

/* ── Pie ──────────────────────────────────────────────────────────────
   Misma estructura que el pie de QuieroMiAutoYA: marca y columnas, banda
   de modelos y tipos de obra, canales de contacto, legal y agencia. */
.mf { background: #1c1c1c; color: #fff; border-top: 4px solid #f7a600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.mf-in { max-width: 1320px; margin: 0 auto; padding: 48px 24px 0; box-sizing: border-box; }
.mf a { text-decoration: none; }
.mf h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin: 0 0 12px; }
.mf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px 34px; padding-bottom: 32px; }
.mf-logo { height: 30px; width: auto; display: block; }
.mf-brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 36ch; margin: 14px 0 0; }
.mf-datos { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; align-items: flex-start; }
.mf-dato { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.74); font-size: 14px; min-height: 24px; }
.mf-dato svg { flex: none; color: rgba(255,255,255,.55); transition: color .15s ease; }
.mf-dato:hover { color: #fff; }
.mf-dato:hover svg { color: #f7a600; }
.mf-col ul { list-style: none; padding: 0; margin: 0; }
.mf-col li { margin-bottom: 9px; }
.mf-col a { font-size: 14px; color: rgba(255,255,255,.74); }
.mf-col a:hover { color: #fff; text-decoration: underline; }

.mf-niveles { background: rgba(255,255,255,.04); padding: 22px 24px; display: grid; gap: 16px; }
.mf-nivel { display: grid; grid-template-columns: 128px 1fr; gap: 8px 18px; align-items: baseline; }
.mf-nivel h2 { margin: 0; }
.mf-inline { display: flex; flex-wrap: wrap; row-gap: 8px; }
.mf-inline a { font-size: 14px; line-height: 1.2; color: rgba(255,255,255,.72); padding: 5px 11px; border-right: 1px solid rgba(255,255,255,.17); }
.mf-inline a:first-child { padding-left: 0; }
.mf-inline a:last-child { border-right: none; padding-right: 0; }
.mf-inline a:hover { color: #fff; text-decoration: underline; }
.mf-inline a.con-pagina { color: #fff; font-weight: 600; }
.mf-inline .mf-todas { color: #f7a600; font-weight: 600; }

.mf-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 30px; padding: 26px 0; }
.mf-canal { display: flex; align-items: flex-start; gap: 11px; color: #fff; }
.mf-canal svg { flex: none; margin-top: 2px; color: rgba(255,255,255,.62); transition: color .15s ease; }
a.mf-canal:hover svg { color: #f7a600; }
.mf-canal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mf-canal-txt b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.mf-canal-txt span { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: rgba(255,255,255,.7); }
a.mf-canal:hover .mf-canal-txt span { color: #fff; }

.mf-legal { border-top: 1px solid rgba(255,255,255,.15); padding: 16px 0 18px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.55); }
.mf-legal b { color: rgba(255,255,255,.8); font-weight: 600; }
.mf-agencia { display: flex; align-items: center; justify-content: center; gap: 10px; background: #f2f2f2; color: #555; font-size: 12.5px; padding: 14px 24px; }
.mf-agencia img { display: block; height: 15px; width: auto; }
.mf-agencia:hover { color: #1c1c1c; }

@media (max-width: 900px) { .mf-grid { grid-template-columns: 1fr 1fr; } .mf-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .mf-niveles { padding: 18px; }
  .mf-nivel { grid-template-columns: 1fr; gap: 6px; }
}
/* El botón flotante de WhatsApp no tapa el cierre del pie en el celular. */
@media (max-width: 767.98px) {
  .mf-agencia { padding-right: 96px; }
  .mf-legal { text-align: left; padding-right: 76px; }
}

/* Con tres productos en el menú ya no hace falta reservarle 520 px: así
   "Pedir cotización" queda en la misma fila también entre 768 y 1000 px. */
@media (min-width: 768px) {
  x-dc > div > header > div > nav { flex: 1 1 auto !important; }
}

/* Con cuatro productos el menú ya no entra en una fila entre 768 y 1279 px
   (tablet, notebook chica): ahí también va la hamburguesa. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  x-dc > div > header > div { flex-wrap: wrap !important; gap: 0 16px !important; }
  x-dc > div > header > div > a:last-of-type { order: 2; margin-left: auto; }
  .hamburguesa {
    order: 3; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; box-sizing: border-box;
    background: none; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
  }
  .hamburguesa span { display: block; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
  .menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  x-dc > div > header > div > nav { display: none !important; }
  .menu-abierto x-dc > div > header > div > nav {
    order: 4; display: flex !important; flex-direction: column; flex: 1 1 100% !important;
    gap: 0 !important; overflow: visible !important; white-space: normal !important;
    margin-top: 12px; border-top: 1px solid #3d3d3d;
  }
  .menu-abierto x-dc > div > header > div > nav a { padding: 15px 0 !important; font-size: 17px !important; border-bottom: 1px solid #333 !important; }
}
/* Desde 1280 px entra en una fila con un poco menos de aire entre ítems. */
@media (min-width: 1280px) {
  x-dc > div > header > div { column-gap: 32px !important; }
  x-dc > div > header > div > nav { gap: 24px !important; }
}

/* Banda del pie: cada fila es una categoría (enlace) y al lado sus modelos.
   Un solo patrón y un solo estilo: sin negritas sueltas. */
.mf-nivel { grid-template-columns: 210px 1fr !important; }
.mf-nivel__cat { font: 500 11.5px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.62); text-decoration: none; padding: 5px 0; }
.mf-nivel__cat:hover { color: #fff; text-decoration: underline; }
.mf-inline a.con-pagina { font-weight: 400; color: rgba(255,255,255,.72); }
@media (max-width: 600px) { .mf-nivel { grid-template-columns: 1fr !important; } }
@media (max-width: 767.98px) { .mf-nivel__cat { display: inline-block; padding: 11px 0; } }

/* Una sola grilla en el pie: las columnas de arriba (marca, Productos,
   Obras) y los canales de contacto comparten las mismas tres columnas, así
   Productos queda sobre "Pedí tu cotización" y Obras sobre "Llamanos".
   La banda de modelos es un bloque aparte, con la categoría y sus modelos
   al lado (estirada a la grilla quedaba un hueco grande en el medio). */
.mf { --mf-cols: 1.5fr 1fr 1fr; --mf-gap: 34px; }
@media (min-width: 900.02px) {
  .mf-grid, .mf-canales { grid-template-columns: var(--mf-cols); column-gap: var(--mf-gap); }
}
@media (min-width: 600.02px) {
  .mf-nivel { grid-template-columns: 210px 1fr !important; }
}

/* Chips del pie: el espacio va solo a la derecha de cada uno, así cuando
   pasan a otra línea arrancan al ras, sin sangría. */
.mf-inline a { padding-left: 0; padding-right: 11px; margin-right: 11px; }
.mf-inline a:last-child { margin-right: 0; padding-right: 0; }