/* ---------- botón de cuenta de instalador ----------
   Arriba de 880px: "PRECIO INSTALADOR" en texto dentro de .mast-r, igual
   que siempre — .util-b no cambia arriba de ese ancho. Abajo de 880px el
   texto no cabe junto al logo sin arruinarlo, así que se oculta y en su
   lugar se muestra .util-ico: un círculo coral de 22×22 (el tamaño del
   dibujo, no el de la caja de 40×40 de la hamburguesa), solo ícono, mismo
   destino, aria-label para quien usa lector de pantalla. El ajuste real
   de ambos vive al final del archivo, junto con el resto de los cambios
   de abajo de 880px, para que el orden de cascada les gane a estas
   reglas base. */
.util-b{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;background:var(--coral);
  color:#fff;padding:6px 13px;border-radius:2px;text-decoration:none;letter-spacing:.04em;
  white-space:nowrap;transition:background var(--t-fast) var(--ease)}
.util-b:hover{background:var(--coral-dk)}
.util-ico{display:none}

/* ---------- cabecera ---------- */
.mast{background:var(--deep);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line-lt)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.brand{display:flex;align-items:center;gap:var(--logo-gap);text-decoration:none;flex:0 0 auto}
.brand svg{width:var(--logo-w);height:var(--logo-w);flex-shrink:0;color:var(--stone)}
.brand-tx b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;
  color:var(--stone);letter-spacing:-.02em;line-height:1.15}
.brand-tx span{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  color:var(--glow);text-transform:uppercase}
/* Agrupa el botón coral y la hamburguesa para que queden pegados,
   como único elemento del lado derecho de la fila del encabezado. */
.mast-r{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;justify-content:flex-end}

/* ---------- menú (hamburguesa, en todos los anchos) ----------
   El nav vive DENTRO de .mast-r, entre el botón coral y la hamburguesa. No es
   un dropdown que tapa la página: se expande en fila empujando el coral hacia
   la izquierda por el propio flujo flex. Cerrado no ocupa espacio (max-width:0)
   y sus enlaces no reciben foco (visibility:hidden); abierto se despliega en
   fila. El margin negativo de -7px cuando está cerrado cancela un gap de
   .mast-r (14px) para que el coral y la hamburguesa queden a la misma
   distancia que antes; al abrir vuelve a 0. */
.nav-tgl{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;
  color:var(--stone);border-radius:3px;flex:0 0 auto}
.nav-tgl:hover{background:rgba(235,233,226,.1)}
.nav-mob{display:flex;align-items:center;gap:20px;min-width:0;max-width:0;overflow:hidden;
  visibility:hidden;margin-inline:-7px;transition:max-width var(--t-slow) var(--ease),margin-inline var(--t-slow) var(--ease)}
.nav-mob.is-open{max-width:640px;overflow-x:auto;visibility:visible;margin-inline:0;
  scrollbar-width:none}
.nav-mob.is-open::-webkit-scrollbar{display:none}
.nav-mob a{white-space:nowrap;padding:6px 0;font-size:14px;font-weight:500;text-decoration:none;
  color:rgba(235,233,226,.9)}
.nav-mob a:hover,.nav-mob a:focus-visible{color:var(--stone)}
.nav-mob-precio{display:none}

/* ---------- carrito en la cabecera (todas las páginas) ----------
   Ícono de línea, mismo tamaño y color (stone) que la hamburguesa, a su
   izquierda. El contador es una burbuja glow —acento sobre fondo oscuro, NO
   coral (el coral es exclusivo del instalador)— con número en IBM Plex Mono.
   Sin piezas, el <span> va con [hidden] y la guarda global lo oculta. */
.cart-lnk{position:relative;display:inline-flex;width:40px;height:40px;align-items:center;
  justify-content:center;color:var(--stone);border-radius:3px;flex:0 0 auto;text-decoration:none;
  transition:background var(--t-fast) var(--ease)}
.cart-lnk:hover{background:rgba(235,233,226,.1)}
.cart-lnk:focus-visible{outline:none;box-shadow:0 0 0 3px var(--deep),0 0 0 5px var(--glow)}
.cart-count{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--glow);color:var(--deep);
  border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;line-height:1}

/* ---------- cabecera en un renglón bajo 880px ----------
   Va al final a propósito: el orden de cascada le gana a las reglas base
   de arriba (misma especificidad). Tres cambios, todos bajo 880px:
   1. .util-b (texto) se oculta; .util-ico (círculo coral de 22×22, solo
      ícono) lo reemplaza. El hit-area de 44px se logra con ::before, el
      círculo visible no cambia de tamaño.
   2. .nav-mob deja de expandirse EN la fila del encabezado (eso es lo
      que montaba el coral sobre "Piscina Go" al abrir) y pasa a ser un
      panel a todo lo ancho, position:absolute colgado de .mast (ya
      sticky, ya es el ancestro posicionado — por eso .mast-r no lleva
      position:relative aquí, para que el panel no quede angosto). Así
      abrir el menú no mueve nada de la fila.
   3. .nav-mob-precio (mismo ícono + texto) es la primera opción del
      panel, en coral: es uso legítimo del color (cuenta de instalador) y
      explica qué significa el cuadro coral de la cabecera para quien no
      lo reconozca. */
@media(max-width:880px){
  .util-b{display:none}
  /* El círculo visible es de 22×22 (el dibujo, no la caja del botón
     completo); el hit-area de 44px sigue ahí vía ::before, invisible.
     mast-r pasa a gap:1px: a este ancho solo separa el círculo de la
     hamburguesa (util-b está oculto, nav-mob ya no está en flujo), y es
     lo que pide el hueco visible de 10px entre el borde del círculo y el
     de las líneas (la hamburguesa tiene 9px de aire propio entre su caja
     de 40×40 y su ícono de 22×22: 1px de gap + 9px de aire = 10px). Con
     ese gap de 1px, un hit-area simétrico de 11px por lado invadiría la
     caja de la hamburguesa — las CAJAS visibles no se encimAN (1px las
     separa), pero el área de toque sí lo haría. Se resuelve repartiendo
     el ::before asimétrico: a la izquierda (donde sobra espacio) crece
     21px, arriba/abajo 11px, y a la derecha solo 1px — justo hasta tocar
     la caja de la hamburguesa sin entrar en ella. Sigue dando 44×44 de
     hit-area sin restarle nada a la hamburguesa. */
  .mast-r{gap:1px}
  .util-ico{display:inline-flex;align-items:center;justify-content:center;position:relative;
    width:22px;height:22px;background:var(--coral);border-radius:50%;color:var(--deep);
    flex:0 0 auto;transition:background var(--t-fast) var(--ease)}
  .util-ico::before{content:'';position:absolute;top:-11px;right:-1px;bottom:-11px;left:-21px}
  .util-ico svg{width:13px;height:13px}
  .util-ico:hover{background:var(--coral-dk)}
  .util-ico:focus-visible{outline:none;box-shadow:0 0 0 3px var(--deep),0 0 0 5px var(--glow)}

  .nav-mob{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;max-width:none;margin-inline:0;background:var(--deep);border-top:1px solid var(--line-lt);
    max-height:0;visibility:hidden;overflow:hidden;
    transition:max-height var(--t-slow) var(--ease)}
  .nav-mob.is-open{max-height:70vh;overflow-y:auto}
  .nav-mob a{padding:14px var(--wrap-pad);white-space:normal;border-bottom:1px solid var(--line-lt)}
  .nav-mob a:last-child{border-bottom:none}
  .nav-mob a.nav-mob-precio{display:flex;align-items:center;gap:10px;color:var(--coral);font-weight:600}
  .nav-mob-precio svg{flex:0 0 auto}
  .nav-mob a.nav-mob-precio:hover,.nav-mob a.nav-mob-precio:focus-visible{color:var(--coral-dk)}
}