@charset "UTF-8";

/* =========================================================
   PokéCards — style.css (ESTABLE / RESPONSIVE / NO VACÍO)
   ========================================================= */

/* ============== RESET ============== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
html,body{overflow-x:hidden}

/* ============== VARIABLES ============== */
:root{
  --text:#f0f6fc;

  --glass: rgba(18,20,26,.55);
  --glass-strong: rgba(10,12,16,.85);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --radius: 18px;

  --gold:#f3c316;
  --gold-soft: rgba(243,195,22,.22);
}

/* ============== BASE ============== */
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  min-height:100vh;
  background:none;
}

/* ============== FONDO + OVERLAY (sin niebla) ============== */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("../assets/img/pikachu-bg.jpg") no-repeat center top / cover;
  transform:translate3d(0,0,0);
  will-change:transform;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: rgba(10,12,16,.28);
  pointer-events:none;
}

/* ============== FIX “SE VE VACÍO” (AOS) ============== */
/* Si AOS no inicia, deja cosas invisibles. Esto lo evita SIEMPRE. */
[data-aos]{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============== LAYOUT ============== */
header{position:sticky;top:0;z-index:1000}

/* SOLO navbar del header */
header .navbar{
  padding:.6rem 1rem;
  background: rgba(18,20,26,.45);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-brand{font-weight:800;color:#fff}
.navbar-nav .nav-link{font-weight:600;color:rgba(255,255,255,.85)}
.navbar-nav .nav-link.active{color:var(--gold)}

/* offcanvas */
.offcanvas.text-bg-dark{
  background: rgba(10,12,16,.96) !important;
}

/* Contenido por arriba del fondo */
main, footer{position:relative;z-index:1}

main{padding:2rem 0}
footer{padding:2rem;text-align:center;margin-top:3rem}

/* ============== HERO / BANNERS ============== */
.hero,
.hero-banner{
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

h1,h2,h3{
  color:#fff;
  text-shadow:0 6px 18px rgba(0,0,0,.45);
}

/* ============== TITULOS / SECTIONS ============== */
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}

/* ============== CARDS ============== */
.card-custom{
  background: var(--glass-strong);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  padding:1rem;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:.25s ease;
}

.card-custom p{color:rgba(255,255,255,.78)}

.card-custom:hover{
  transform: translateY(-6px);
  border-color: rgba(243,195,22,.45);
  box-shadow: var(--shadow);
}

.card-frame{
  width:100%;
  aspect-ratio:63/88;
  border-radius:16px;
  padding:6px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
  transition:.25s ease;
}

.card-custom:hover .card-thumb{transform:scale(1.04)}

/* ============== BADGES / BOTONES ============== */
.badge-custom{
  background: rgba(255,255,255,.10);
  padding:.3rem .65rem;
  border-radius:999px;
  font-size:.82rem;
  border:1px solid rgba(255,255,255,.10);
}

.btn-primary-custom{
  display:inline-block;
  background: var(--gold);
  color:#161616;
  border:none;
  padding:.55rem 1.6rem;
  border-radius:12px;
  font-weight:800;
  margin-top:auto;
  text-decoration:none;
  transition:.25s ease;
}

.btn-primary-custom:hover{filter:brightness(1.08)}

.btn-soft{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  padding:.55rem .95rem;
  border-radius:12px;
  font-weight:800;
  transition:.18s ease;
}

.btn-soft:hover{
  border-color: rgba(243,195,22,.55);
  transform: translateY(-1px);
}

/* ============== FILTROS ============== */
.filters-panel{
  background: rgba(12,14,18,.75);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  padding:1.5rem;
  margin-bottom:1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.filters-panel .form-label,
.filters-panel label{
  color: rgba(255,255,255,.92);
  font-weight:800;
}

.filters-panel .form-control,
.filters-panel .form-select{
  background: rgba(10,12,16,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:14px;
  padding:.7rem .9rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.filters-panel .form-control::placeholder{
  color: rgba(255,255,255,.55);
}

.filters-panel .form-control:focus,
.filters-panel .form-select:focus{
  border-color: rgba(243,195,22,.75);
  box-shadow: 0 0 0 .22rem rgba(243,195,22,.18);
  outline:none;
}

.filter-pill{
  cursor:pointer;
  background: rgba(10,12,16,.45);
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
  font-weight:800;
  padding:.42rem .85rem;
  border-radius:999px;
  transition:.18s ease;
}

.filter-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(243,195,22,.55);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.filter-pill.is-active{
  background: var(--gold-soft);
  border-color: rgba(243,195,22,.75);
  box-shadow: 0 0 0 3px rgba(243,195,22,.18);
}

/* ============== MOBILE ============== */
@media (max-width:768px){
  main{padding:1.2rem 0}

  .hero,
  .hero-banner{padding:1.2rem}

  .card-frame{padding:4px}
  .card-custom:hover{transform:none}

  /* performance */
  header .navbar,
  .hero,.hero-banner,
  .filters-panel{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ============== REDUCE MOTION ============== */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  body::after{transform:none!important}
}
/* =====================================
   FIX: TODAS LAS CARTAS MISMO TAMAÑO
===================================== */

/* el contenedor de imagen SIEMPRE mismo ratio */
.card-frame,
.card-media,
.card-media--featured {
  width: 100%;
  aspect-ratio: 63 / 88;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* la imagen siempre ajustada */
.card-frame img,
.card-media img,
.card-media--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* evita que featured sea más alto */
.card-media--featured {
  padding: 6px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.02)
  );
  border: 1px solid rgba(255,255,255,.14);
}