/* ═══════════════════════════════════════════════════════════════════
   WHATSAPP v2 · botón flotante
   Fijo en la esquina inferior derecha, por encima de las secciones y del
   header. El visor de la galería (<dialog>, capa superior) sí lo tapa.

   - Verde de WhatsApp con el logotipo en blanco, que es como se reconoce.
     El nombre accesible va en el aria-label del enlace.
   - .wa.is-off lo esconde y lo saca del orden de tabulación. Lo pone la
     home (js/hero-loop.js) mientras los controles del hero ocupan esa
     esquina: al cargar, ahí están anterior · pausa · siguiente.
   - Al final de la página el pie del footer deja sitio debajo para que
     el botón no tape los enlaces legales (ver abajo).
   - Se carga después de styles.css, desde index-v2 y para-tiendas-v2.
   ═══════════════════════════════════════════════════════════════════ */
:root {
	--wa-gap:clamp(16px,1.6vw,28px);   /* distancia a los bordes de la ventana */
	--wa-size:clamp(52px,3.4vw,60px);
}
.wa {
	position:fixed;
	right:var(--wa-gap);
	bottom:calc(var(--wa-gap) + env(safe-area-inset-bottom,0px));
	z-index:60;
	display:grid;
	place-items:center;
	width:var(--wa-size);
	height:var(--wa-size);
	border-radius:50%;
	background:#25D366;
	color:#fff;
	box-shadow:0 6px 20px rgba(0,0,0,.28);
	transition:background .2s ease,transform .2s ease,opacity .25s ease,visibility .25s;
}
.wa svg {
	width:54%;
	height:54%;
}
.wa:hover {
	background:#1DA851;
	transform:scale(1.06);
}
/* foco: anillo blanco + azul, para que se vea sobre fondo oscuro y sobre blanco */
.wa:focus-visible {
	outline:3px solid var(--navy-d);
	outline-offset:3px;
	box-shadow:0 0 0 3px #fff,0 6px 20px rgba(0,0,0,.28);
}
.wa.is-off {
	opacity:0;
	visibility:hidden;
}

/* ── sitio para el botón al final de la página ──
   Hasta 1680 px de ancho el botón cae encima de la última fila del footer
   (los enlaces legales). Se amplía el padding inferior de .ft__b para que,
   con la página abajo del todo, esa fila quede por encima del botón.
   Más ancho, el botón ya queda fuera del contenedor de 1440 y no hace falta. */
@media (max-width:1679px) {
	.ft__b {
		padding-bottom:calc(var(--wa-gap) + var(--wa-size) + 8px + env(safe-area-inset-bottom,0px));
	}
}
@media (prefers-reduced-motion:reduce) {
	.wa {
		transition:none;
	}
	.wa:hover {
		transform:none;
	}
}