/* ==========================================================================
   Descanshop — Página «¿Con qué tienda Descanshop desea hablar?»

   No está en el demo: se construye con los tokens y las medidas que el resto
   del sitio ya usa. La banda repite la de `legal.css` —alto por contenido, no
   los 523px de `.hero`, porque no hay fotografía detrás— y las tarjetas repiten
   el fondo y el radio de las cajas de tienda.
   ========================================================================== */

/* La caja va sobre la pista del sitio (`--page`), no sobre una columna de
   lectura: con tres tarjetas por fila, 900px las dejaba de 280 y el botón se
   partía en dos líneas. El `padding-inline` es el mismo cálculo de
   `.section__inner`. */
.wa__band-inner,
.wa__inner{
  width:100%;
  margin:0 auto;
  padding-inline:max(25px,calc((100% - var(--page)) / 2));
}

.wa__band{
  background:var(--azul);
  padding:96px 0 72px;
}
.wa__title{
  margin:0;max-width:650px;
  font-size:48px;font-weight:400;line-height:1.15;color:var(--beige);
}
.wa__lede{
  margin:22px 0 0;
  font-size:22px;font-weight:400;line-height:26px;color:var(--beige);
}

.wa__inner{margin-block:56px 96px}

/* Cuatro columnas. `1fr` y no `auto-fit`: el número de tiendas es corto y fijo,
   y con `auto-fit` la última fila de una sola tarjeta se estiraba a todo lo
   ancho. Los saltos a 2 y a 1 van escritos abajo, uno por breakpoint. */
.wa__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}

/* La tarjeta es el botón con el nombre de la tienda y, debajo, su dirección. */
.wa__item{
  padding:28px;border-radius:9px;
  background:rgba(140,170,201,0.09);
}

/* El encabezado es sólo el envoltorio semántico: todo el aspecto lo pone el
   enlace que lleva dentro. */
.wa__store-name{margin:0;font-weight:400}

.wa__store-address{
  margin:16px 0 0;
  font-size:16px;font-weight:300;line-height:22px;color:var(--azul-oscuro);
}

/* `min-height` y no `height`: el rótulo es ahora el nombre de la tienda, de
   largo variable, y en dos líneas un alto fijo lo desbordaría. */
.wa__cta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 20px;min-height:56px;border-radius:9px;
  background:var(--azul);color:var(--beige);
  font-size:18px;font-weight:400;line-height:normal;text-align:center;
  text-decoration:none;
  transition:background-color .2s ease;
}
.wa__cta:hover{background:var(--azul-hover)}

/* El glifo hereda el color del enlace; su tamaño natural (32px) es el del
   botón flotante y aquí sobra dentro de una caja de 56. */
.wa__cta-icon{flex:0 0 auto;font-size:24px;color:inherit}

.wa__body{margin-top:48px}

/* Tres columnas por debajo de 1200, dos por debajo de 900: el nombre de la
   tienda va dentro del botón y con cuatro columnas empieza a partirse ahí. */
@media (max-width:1200px){
.wa__list{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
.wa__band{padding:56px 0 40px}
.wa__title{font-size:30px}
.wa__lede{font-size:18px;line-height:24px}
.wa__inner{margin-block:32px 56px}
.wa__list{grid-template-columns:repeat(2,1fr);gap:16px}
.wa__item{padding:20px}
.wa__cta{font-size:16px}
}

/* Dos columnas mientras quepan. En un teléfono de 390 la tarjeta queda en
   ~160px, así que lo que se recorta es el aire —hueco, acolchado y el espacio
   entre el icono y el nombre—, no la rejilla. */
@media (max-width:640px){
.wa__list{gap:12px}
.wa__item{padding:14px}
.wa__cta{gap:8px;padding:12px 10px;font-size:15px}
.wa__cta-icon{font-size:20px}
.wa__store-address{margin-top:12px;font-size:15px;line-height:20px}
}

/* Una columna por debajo de 380: ahí la tarjeta baja de 155px y el nombre de
   la tienda ya no cabe ni partido. */
@media (max-width:379.98px){
.wa__list{grid-template-columns:1fr}
}