/* ---------- 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)}
/* Nota secundaria, discreta frente a los bloques de confianza: en escritorio
   ocupa su propio renglón a todo el ancho de la franja (grid-column 1/-1),
   para que la columna "Somos tienda" no crezca de alto. El gap del grid la
   separa de la fila; en móvil (una columna) baja y se parte sola. Mismo color
   que .tr span pero más chica. El enlace usa --glow (acento sobre fondo
   oscuro, ya vetted en .tr b sobre --deep-3) — nunca --coral, exclusivo de la
   cuenta de instalador. */
.tr-instala{grid-column:1/-1;margin:0;font-size:12.5px;color:rgba(235,233,226,.68);line-height:1.5}
.tr-instala a{color:var(--glow);font-weight:600;text-decoration:none}
.tr-instala a:hover{text-decoration:underline}
/* 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;
  /* Empuja el pie al fondo de la columna flex de body (css/01-base.css) en
     páginas cortas. En páginas largas no hace nada: no queda espacio libre
     que repartir, así que el margen automático vale 0. */
  margin-top:auto}
/* 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 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.
     min-height bajó de 44px a 34px (2026-10-19): el renglón de 44px dejaba
     demasiado aire vertical entre los cinco enlaces. 34px sigue siendo
     cómodo de tocar porque cada enlace ocupa media fila de ancho, pero
     aprieta el bloque de forma notable. */
  .foot-nav a{display:flex;align-items:center;min-height:34px}
}