/* ============================================================
   css/layout.css
   Estructura macro: hero banner, creator panel, footer.
   ============================================================ */


/* ============================================================
   1. HERO BANNER  (imagen fija + contenido superpuesto)
   ============================================================ */
.hero-banner{
  position:relative;
  overflow:hidden;
  border-radius:1.25rem;
  border:1px solid rgba(67,56,202,.5);
  /* Degradado de reserva por si aún no hay imagen */
  background:
    radial-gradient(120% 160% at 12% 10%, rgba(99,102,241,.35), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(45,212,191,.18), transparent 55%),
    linear-gradient(135deg,#1a1440 0%,#2a1e5c 50%,#0f0a2e 100%);
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(45,212,191,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  min-height:220px;
  isolation:isolate;
}
@media (min-width:768px){
  .hero-banner{ min-height:280px; }
}
@media (min-width:1024px){
  .hero-banner{ min-height:320px; }
}

/* Imagen de fondo */
.hero-banner__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  display:none;
}
.hero-banner.has-image .hero-banner__img{
  display:block;
}

/* Overlay para legibilidad */
.hero-banner__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(13,11,33,.94) 0%,
      rgba(13,11,33,.78) 32%,
      rgba(13,11,33,.35) 60%,
      rgba(13,11,33,.05) 100%),
    linear-gradient(180deg,
      rgba(13,11,33,.15) 0%,
      rgba(13,11,33,0) 45%,
      rgba(13,11,33,.6) 100%);
}
.hero-banner:not(.has-image) .hero-banner__overlay{
  opacity:.35;
}

/* Contenido encima */
.hero-banner__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:1.5rem;
  min-height:inherit;
}
@media (min-width:1024px){
  .hero-banner__content{ padding:2rem 2.5rem; }
}

/* Esquina superior derecha (idiomas + crédito) */
.hero-banner__corner{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  align-items:flex-start;
}
@media (min-width:1024px){
  .hero-banner__corner{
    align-items:flex-end;
    align-self:flex-end;
  }
}

/* Bloque principal (abajo-izquierda) */
.hero-banner__main{
  margin-top:auto;
  max-width:46rem;
}

/* Botón flotante del creador */
.hero-banner__edit{
  position:absolute;
  right:.85rem;
  bottom:.85rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .75rem;
  border-radius:.6rem;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#c7d2fe;
  background:rgba(8,7,24,.78);
  border:1px solid rgba(99,102,241,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  opacity:.6;
  transition:.18s;
}
.hero-banner__edit:hover{
  opacity:1;
  color:#fff;
  border-color:rgba(129,140,248,.95);
}


/* ============================================================
   2. CREATOR TOOLS (panel colapsable <details>)
   ============================================================ */
details.card > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  font-weight:800;
  color:#fff;
}
details.card > summary::-webkit-details-marker{
  display:none;
}
details.card > summary::after{
  content:"▾";
  margin-left:auto;
  font-size:.85rem;
  color:#a5b4fc;
  transition:transform .25s;
}
details.card[open] > summary::after{
  transform:rotate(180deg);
}

/* Fila de acciones del panel */
.brand-row{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}


/* ============================================================
   3. FOOTER
   ============================================================ */
footer{
  user-select:none;
}