/* Pagina /unity -- se apoya en guia.css para el armazon (capa, indice,
   marca, cuerpo). Aqui solo lo que guia.css no tiene ya: el subtitulo
   en verde, la ficha de descarga, la lista de /tactil y los trucos de
   interfaz. Ni un color, tamaño o sombra fuera de los tokens de
   styles.css. */

.un-guia-verde {
  color: var(--android-verde);
}

.un-hero {
  margin-bottom: 8px;
}

.un-hero-ficha {
  background: var(--sup-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 28px;
  box-shadow: var(--luz-superior), var(--sombra-tarjeta);
}

.un-hero-ficha h2 {
  margin-top: 0;
}

.un-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--fondo);
  border: 1.5px solid var(--android-verde);
  border-radius: var(--radio-chico);
  padding: 11px 20px 11px 16px;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
}

.un-play:hover,
.un-play:focus-visible {
  transform: translateY(-2px);
  background: var(--fondo-tarjeta-hover);
  box-shadow: 0 10px 24px -10px rgba(120, 194, 87, 0.45);
}

.un-play svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.un-play-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.un-play-texto small {
  font-size: var(--t-micro);
  color: var(--texto-apagado);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.un-play-texto strong {
  font-size: var(--t-medio);
  color: var(--texto);
  font-weight: 700;
}

/* Boton de la web del launcher, debajo del de Google Play -- mismo
   molde que .un-play pero en borde/tinta neutros (--borde en vez de
   --android-verde) para que no compita con la descarga, que es la
   accion principal. */
.un-web {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--fondo);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 11px 20px 11px 16px;
  margin-top: 10px;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

.un-web:hover,
.un-web:focus-visible {
  transform: translateY(-2px);
  border-color: var(--android-verde);
  box-shadow: var(--sombra-elevada);
}

.un-web-icono {
  font-size: 20px;
  flex: none;
  width: 26px;
  text-align: center;
}

.un-tactil-lista {
  list-style: none;
  margin: 14px 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.un-tactil-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-base);
  color: var(--texto-tenue);
  background: var(--sup-hundida);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 11px 14px;
}

.un-estado {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  flex: none;
  margin-left: auto;
}

.un-estado-listo {
  color: var(--exito);
  background: var(--exito-tenue);
  border: 1px solid var(--exito-borde);
}

.un-estado-pronto {
  color: var(--texto-apagado);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde);
}

.un-trucos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.un-truco {
  background: var(--sup-hundida);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.un-truco-icono {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 155, 213, 0.14);
  border: 1px solid rgba(90, 155, 213, 0.32);
  color: var(--azul);
  font-size: var(--t-medio);
}

.un-truco p {
  margin: 3px 0 0;
  font-size: var(--t-chico);
  color: var(--texto-tenue);
  line-height: 1.55;
}

.un-truco strong {
  display: block;
  color: var(--texto);
  font-size: var(--t-base);
}

@media (max-width: 560px) {
  .un-hero-ficha { padding: 20px 18px; }
  .un-play { width: 100%; justify-content: center; }
}