:root{
  --bg:#0f1f24; --panel:#122a2e; --surface:#143338; --muted:#9cc6c1; --text:#e8f6f3;
  --outline:#1f3c41; --accent:#22d3c5; --accent-2:#7de3bf;
  --ok:#22c55e; --warn:#ffd166; --err:#ff6b6b; --sidebar:#0d1b1f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}

/* layout helpers */
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 16px}
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.hidden{display:none !important}

/* header */
.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--outline)
}
.brand{font-weight:800; letter-spacing:.3px; font-size:18px}
.accent{color:var(--accent)}
.top-actions .link{color:var(--muted); text-decoration:none; margin-left:14px; font-size:13px}
.top-actions .link:hover{color:var(--text)}

/* ===== Banner superior: mostrar COMPLETO sin recortes en todos los tamaños ===== */
.header .hero-banner{
  padding:0;
  background:#000; /* bandas negras si el ratio no llena */
  border-top:1px solid var(--outline);
  border-bottom:1px solid var(--outline);
}
.hero-banner .wrap{
  max-width:1180px;          /* centrado del contenedor en desktop */
  margin:0 auto;
  padding:0 16px;
}

/* El video nunca se recorta */
.hero-video{
  display:block;
  width:100%;
  height:auto;               /* clave: sin altura fija */
  object-fit:contain;        /* siempre mostrar completo */
  object-position:center center;
  background:#000;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  margin:0 auto;
  /* Si sabes el ratio real de tu banner (p.ej. 3/1), ponlo aquí:
     aspect-ratio:3/1;  (opcional; mejora la carga mientras llega el metadata) */
}

/* En móviles muy pequeños, sin bordes ni sombra para ganar alto útil */
@media (max-width:640px){
  .hero-banner .wrap{max-width:none; padding:0}
  .hero-video{
    border-radius:0;
    box-shadow:none;
  }
}


.field{background:var(--panel); border:1px solid var(--outline); color:var(--text);
  border-radius:12px; padding:10px 12px; font-size:14px; width:100%}
.field::placeholder{color:var(--muted)}
.icon-left{position:relative}
.icon-left .icon{position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.6}

/* grid y cards */
.grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:700px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .grid{grid-template-columns:1fr 1fr 1fr} }

.card{background:var(--panel); border:1px solid var(--outline); border-radius:18px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.20)}


.badge{position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:8px; font-size:11px; font-weight:700}
.badge.warn{background:var(--warn); color:#000}
.badge.err{background:var(--err); color:#fff}

.card .body{padding:14px}
.title{font-size:18px; font-weight:700; line-height:1.25; margin:0 0 6px}
.meta{color:var(--muted); font-size:13px}
.chip{display:inline-block; margin-top:10px; font-size:12px; background:var(--surface); color:var(--accent-2);
  border-radius:999px; padding:4px 8px}
.price-line{display:flex; justify-content:space-between; align-items:center; margin:10px 0 0}
.price-line small{color:var(--muted)}
.price-line b{color:#fff}

.card .actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px}
.btn{border-radius:12px; padding:10px 12px; font-weight:700; text-align:center; text-decoration:none}
.btn.primary{background:var(--warn); color:#000}
.btn.primary:disabled{background:#6b7280; color:#1f2937; cursor:not-allowed}
.btn.ghost{background:var(--sidebar); border:1px solid var(--outline); color:#fff}

/* estado vacío */
.empty{opacity:.8; text-align:center; padding:36px 0}

/* footer */
.footer{border-top:1px solid var(--outline); color:var(--muted); text-align:center; padding:24px 0; margin-top:20px}

/* Mostrar el póster completo (square 1:1) sin recortar */
.grid .card .cover{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;              /* cuadrado */
  background-size: contain !important; /* sin recorte */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--panel);    /* “barras” laterales si no es exacto */
  border-radius: 14px 14px 0 0;
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .grid .card .cover{
    height: 0;
    padding-top: 100%;               /* mantiene 1:1 */
  }
}
.grid .card .cover img{
  width:100%;
  height:100%;
  object-fit: contain;               /* sin recorte */
  aspect-ratio: 1 / 1;
  background: var(--panel);
  display:block;
}
/* --- Mostrar el póster completo 1:1 y la info debajo --- */
.card .hero{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* cuadrado */
  height: auto;          /* sin altura fija */
  background: var(--panel);
  overflow: hidden;
}

.card .hero img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;   /* sin recorte */
  background: var(--panel);
}

/* Fallback si no hay soporte de aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .card .hero{ height: 0; padding-top: 100%; }
  .card .hero img{ position: absolute; inset: 0; }
}