/* ---------- marcas ---------- */
.brands{background:var(--stone);padding:52px 0;border-top:1px solid var(--line);overflow:hidden}
.brands-l{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mid);text-align:center;margin-bottom:22px}
.track-vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track-vp::-webkit-scrollbar{display:none}
.track{display:flex;gap:46px;align-items:center}
.bmark{flex:0 0 auto;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:700;
  color:var(--ink);opacity:.4;letter-spacing:-.02em;white-space:nowrap;padding:8px 0;transition:opacity var(--t-slow) var(--ease)}
.bmark:hover{opacity:.85}

/* ---------- franja de confianza + pie ---------- */
.strip{background:var(--deep-3);color:var(--stone);padding:38px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.tr b{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--glow);
  display:block;margin-bottom:6px;letter-spacing:.05em}
.tr span{font-size:14px;color:rgba(235,233,226,.78)}
/* Medido: rgba(235,233,226,.55) (el color base del pie, texto Y enlaces
   — ver .foot-nav a abajo) da 4.55:1 sobre --deep y 4.96:1 sobre --ink
   (calculadora.html, ver body.pg-calc .foot más abajo en el archivo).
   Pasa 4.5:1 en los dos fondos, aunque el margen sobre --deep es angosto
   — no bajarle más opacidad sin remedir. */
.foot{background:var(--deep);color:rgba(235,233,226,.55);padding:34px 0;font-size:13px}
/* Un solo renglón en escritorio (2026-10-13): .wrap sin flex-wrap para que
   .foot-left y .foot-nav nunca bajen a dos filas — eso lo resuelve ya el
   quiebre de 639px, más abajo. .foot-left sí lleva su propio flex-wrap: si
   el ancho aprieta (ver rango medido en el comentario de .foot-left), es
   su segunda línea ("Envíos...") la que baja, nunca .foot-nav partiéndose
   a la mitad — por eso .foot-nav lleva flex-shrink:0. align-items:center
   para que, con las dos en una sola línea (caso normal), sus tops queden
   a la misma altura. */
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap}
/* Quiebre medido en navegador (iframe de ancho exacto, no el resize de
   ventana): a 1090px de ventana "Piscina Go · Equipo para alberca" y
   "Envíos a toda la República..." todavía caben en una línea junto a los
   5 elementos de .foot-nav; a 1089px ya no — ahí es cuando el flex-wrap
   de esta regla baja la segunda frase a su propio renglón, sin tocar
   .foot-nav (confirmado: su alto se queda en una sola línea en todo el
   rango 641-1089px, sin overflow horizontal). Por debajo de ~900px el
   propio texto de "Envíos..." puede bajar a una tercera línea si el
   espacio que le deja .foot-nav ya no alcanza ni para esa frase sola —
   no es un error, es el mismo wrap haciendo su trabajo con menos aire.
   Bajo 640px rige el otro layout, apilado, del media query de abajo. */
.foot-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;min-width:0}
.foot-nav{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;flex-shrink:0}
.foot-nav a{color:inherit;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
@media(max-width:639px){
  /* Relleno y espacio entre bloques más justos SOLO aquí: con las dos
     columnas del menú (abajo) el pie ya no necesita el aire de escritorio
     para caber en 250px a 390px de ancho. .foot (relleno) y .foot .wrap
     (espacio entre el bloque de marca y el menú) no se tocan en su regla
     base, que sigue rigiendo a 1440px. */
  .foot{padding:28px 0}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-left{flex-direction:column;gap:6px}
  /* Dos columnas (Catálogo/Calculadora/Mantenimiento/Precio instalador)
     en vez de una sola fila apilada: 5 renglones de 44px (220px) eran
     media pierna de pie. #footWa (WhatsApp) es el quinto hijo, con texto
     más largo que los otros cuatro — se deja en su propio renglón a todo
     el ancho (grid-column:1/-1) en vez de repartirlo a la fuerza en la
     rejilla de 2, que lo partiría en dos líneas a 360px. */
  .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%}
  .foot-nav #footWa{grid-column:1/-1}
  /* Área táctil de 44px solo hace falta apilado: en escritorio los
     enlaces van en una fila angosta, no botones. Cubre también el <a>
     que app.js inserta dentro de #footWa (bloque 12), por herencia del
     selector descendiente. */
  .foot-nav a{display:flex;align-items:center;min-height:44px}
}