/* Botones de Google Play y App Store (functions/app-tiendas.php). Mismo alto para los dos:
   cada archivo viene recortado a la tinta, así que el alto de la caja es el del botón. */
.gp-tiendas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.gp-tiendas__boton{display:inline-flex;line-height:0;border-radius:8px;transition:transform .15s ease}
.gp-tiendas__boton img{display:block;height:48px;width:auto}
.gp-tiendas__boton:hover{transform:translateY(-2px)}
.gp-tiendas__boton:focus-visible{outline:3px solid #F9CA24;outline-offset:3px}

/* Recuadro del home: termina donde termina el contenido y los botones van debajo de la frase,
   centrados en el recuadro (Kevin, 13-oct). Con el panda encima (por debajo de 1280) el recuadro va
   centrado; con el panda al lado del titular (desde 1280, como only-desktop-xl), alineado con él. */
.text-globe--app{width:fit-content;max-width:100%;align-self:center;right:auto}
.gp-tiendas--recuadro{margin-top:16px;justify-content:center}
@media (min-width:1280px){.text-globe--app{align-self:flex-start}}
/* Teléfono: lado a lado a 40 px (el mínimo de Apple); a 48 no caben y se apilan. */
@media (max-width:480px){.gp-tiendas--recuadro{gap:8px}.gp-tiendas--recuadro .gp-tiendas__boton img{height:40px}}

/* Pie: en columna y centrados, donde ya estaba el hueco de las tiendas. Uno encima del otro se
   igualan por el ANCHO (Kevin, 13-oct): a igual alto, Google sale más ancho y la columna se ve dispareja. */
.gp-tiendas--pie{flex-direction:column;gap:10px}
.gp-tiendas--pie .gp-tiendas__boton img{width:150px;height:auto}

@media (prefers-reduced-motion:reduce){.gp-tiendas__boton{transition:none}.gp-tiendas__boton:hover{transform:none}}