/* ============================================================
   RyuDevCode · ajustes visuales de la página principal (index.html)
   Se carga después de los estilos propios de la página. El hero no se modifica.
   ============================================================ */

/* Precios: 3 planes ocupan todo el ancho (antes la grilla tenía 4 columnas y quedaba un hueco) */
@media (min-width: 1101px) {
  .pg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* Logo con fondo oscuro detrás de las llaves blancas: se ve bien en tema claro */
nav .logo-img,
.flogo-img {
  border-radius: 50%;
  background: radial-gradient(circle, #0b0b0b 0 40%, transparent 41%);
}

/* Footer: logo junto a la marca */
.flogo-wrap { display: flex; align-items: center; gap: 12px; }
.flogo-img { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(196, 26, 26, .45)); }

/* Menú cuando hay sesión iniciada */
.nav-actions .nav-user {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.nav-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--R, #c41a1a); color: #fff;
  font: 400 16px var(--heading, 'Bebas Neue', sans-serif);
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Foco visible al navegar con teclado */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--R3, #ff3a3a);
  outline-offset: 3px;
}