:root {
  --azul: #0061A8;
  --azul-oscuro: #003C6B;
  --dorado: #E8B43B;
  --dorado-suave: #FFE08A;
  --blanco: #ffffff;
  --negro: #101216;
  --gris: #EEF3F8;
  --sombra: 0 18px 50px rgba(0, 30, 70, .18);
  --radio: 28px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  color: var(--negro);
  background:
    radial-gradient(circle at top left, rgba(232,180,59,.34), transparent 28rem),
    radial-gradient(circle at 80% 10%, rgba(0,97,168,.26), transparent 22rem),
    linear-gradient(135deg, #f8fbff 0%, #eaf2f9 100%);
  min-height: 100vh;
}
.app-shell { width: min(1440px, calc(100% - 32px)); margin: auto; padding: 28px 0 60px; }
.hero {
  display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center;
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  border-radius: var(--radio); padding: 26px; color: var(--blanco); box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.hero::after { content: ""; position: absolute; inset: auto -10% -45% 20%; height: 280px; background: rgba(232,180,59,.22); transform: rotate(-8deg); border-radius: 999px; }
.logo-card { position: relative; z-index: 1; background: var(--blanco); border-radius: 24px; padding: 16px; display: grid; place-items: center; min-height: 190px; }
.brand-logo { width: 100%; max-width: 180px; height: auto; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 8px; color: var(--dorado-suave); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
h1, h2 { font-family: Montserrat, sans-serif; margin: 0; line-height: .95; }
h1 { font-size: clamp(42px, 8vw, 92px); text-transform: uppercase; font-weight: 900; }
.hero p:last-child { max-width: 720px; font-size: 18px; }
main { display: grid; grid-template-columns: 1fr 390px; gap: 22px; margin-top: 22px; align-items: start; }
.panel { background: rgba(255,255,255,.9); border: 1px solid rgba(0,97,168,.11); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; backdrop-filter: blur(10px); }
.step-panel, .selector-panel, .poster-panel { grid-column: 1 / 2; }
.summary-panel { grid-column: 2 / 3; grid-row: 1 / span 2; position: sticky; top: 18px; }
.section-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.section-title span { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--dorado); color: var(--azul-oscuro); font-weight: 900; font-family: Montserrat; }
.section-title h2 { font-size: 28px; color: var(--azul-oscuro); }
.section-title p { margin: 6px 0 0; color: #53616f; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
label { display: grid; gap: 8px; font-weight: 700; color: var(--azul-oscuro); }
input, select { width: 100%; border: 2px solid #dbe6ef; border-radius: 18px; padding: 14px 16px; font: inherit; background: #fff; outline: none; }
input:focus, select:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(0,97,168,.12); }
.file-drop { border: 2px dashed rgba(0,97,168,.35); border-radius: 22px; min-height: 128px; padding: 18px; place-items: center; text-align: center; background: #f6fbff; cursor: pointer; }
.file-drop input { display: none; }
.preview-card { grid-column: span 2; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border-radius: 24px; padding: 16px; background: linear-gradient(135deg, rgba(0,97,168,.08), rgba(232,180,59,.14)); }
.comic-frame { width: 128px; height: 128px; border-radius: 26px; overflow: hidden; background: #fff; border: 4px solid var(--dorado); display: grid; place-items: center; position: relative; }
.comic-frame img { width: 100%; height: 100%; object-fit: cover; display: none; }
.comic-frame.has-image img { display: block; }
.comic-frame.has-image span { display: none; }
.comic-frame span { color: #718091; text-align: center; font-size: 13px; padding: 10px; }
.hint { color: #596979; max-width: 520px; }
.btn { border: 0; border-radius: 999px; padding: 13px 20px; font: 800 14px Montserrat, sans-serif; text-transform: uppercase; cursor: pointer; transition: transform .2s, opacity .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--dorado), #ffd66d); color: #10233a; box-shadow: 0 10px 30px rgba(232,180,59,.28); }
.btn-secondary { background: var(--azul); color: #fff; box-shadow: 0 10px 30px rgba(0,97,168,.22); }
.btn-ghost { background: #edf4fb; color: var(--azul-oscuro); }
.wide { width: 100%; margin-top: 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tab { border: 0; padding: 11px 16px; border-radius: 999px; background: #edf4fb; color: var(--azul-oscuro); font-weight: 800; cursor: pointer; }
.tab.active { background: var(--azul); color: #fff; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.counter-pill { background: var(--negro); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 900; font-family: Montserrat; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.player-card { border: 2px solid transparent; border-radius: 24px; padding: 12px; background: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.06); transition: .2s; position: relative; overflow: hidden; }
.player-card:hover { transform: translateY(-3px); border-color: rgba(0,97,168,.28); }
.player-card.selected { opacity: .38; filter: grayscale(1); pointer-events: none; }
.player-avatar { height: 130px; border-radius: 18px; background: linear-gradient(135deg, var(--azul), var(--dorado)); display: grid; place-items: center; overflow: hidden; color: #fff; font: 900 36px Montserrat; }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-card h3 { margin: 10px 0 4px; font: 800 15px Montserrat; color: var(--azul-oscuro); }
.player-card p { margin: 0; color: #596979; font-size: 13px; }
.formation-board { min-height: 650px; border-radius: 26px; padding: 14px; background:
    linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)),
    linear-gradient(180deg, #0061A8, #003C6B);
  display: grid; gap: 12px; align-content: space-between; color: #fff; }
.line { display: grid; gap: 10px; justify-content: center; }
.line.gk { grid-template-columns: 120px; }
.line.def { grid-template-columns: repeat(4, 78px); }
.line.mid { grid-template-columns: repeat(3, 86px); }
.line.fwd { grid-template-columns: repeat(3, 86px); }
.slot { min-height: 104px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.45); background: rgba(255,255,255,.12); display: grid; place-items: center; text-align: center; padding: 7px; font-size: 11px; }
.slot.filled { border-style: solid; background: rgba(255,255,255,.22); }
.slot img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dorado); margin-bottom: 5px; }
.slot strong { display: block; line-height: 1.1; }
.slot small { color: var(--dorado-suave); }
.poster-panel { display: none; }
.poster-panel.visible { display: block; }
#posterCanvas { display: none; }
#posterFinal { width: min(100%, 430px); border-radius: 26px; display: none; box-shadow: 0 20px 50px rgba(0,0,0,.2); margin: auto; }
#posterFinal.visible { display: block; }
.poster-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .hero, main { grid-template-columns: 1fr; }
  .summary-panel, .step-panel, .selector-panel, .poster-panel { grid-column: auto; grid-row: auto; position: static; }
  .logo-card { max-width: 240px; }
}
@media (max-width: 620px) {
  .app-shell { width: min(100% - 18px, 1440px); padding-top: 10px; }
  .hero { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .preview-card { grid-column: auto; }
  .players-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .line.def { grid-template-columns: repeat(2, 86px); }
}