/* ==========================================================================
   style.css - limpio y organizado
   - Sección A: Variables y estilos globales (aplican en todas las resoluciones)
   - Sección B: Estilos por defecto (desktop)
   - Sección C: Estilos para mobile (max-width: 920px)
   ========================================================================== */

/* ==========================================================================
   A. VARIABLES Y ESTILOS GLOBALES
   ========================================================================= */
:root {
  --bg: #000000;
  --card-bg: #0f2a31;
  --panel-bg: rgba(15,42,49,0.96);
  --accent: #ffd54f;
  --muted: #bfcfd3;
  --input-bg: #fff;
  --input-color: #0b2024;
  --card-border: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reglas comunes para formularios y componentes */
label { 
	display: block; 
	font-weight: 600; 
	color: ffffff; 
	margin-bottom: 6px; 
	text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}
input[type="text"],
input[type="email"],
input[type="number"],
select,
input[type="file"],
input[readonly] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--input-bg);
  color: var(--input-color);
  font-size: 14px;
  outline: none;
}
input:focus, select:focus {
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}

/* Contenedores genéricos */
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hero { width: 100%;}

/* ==========================================================================
   B. ESTILOS POR DEFECTO (DESKTOP / TABLET GRANDES)
   -------------------------------------------------------------------------- 
   (estas reglas funcionan como "desktop" por defecto; se simplificaron)
   ========================================================================= */
.hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 20px; }

.hero .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
}

/* COLUMNA IZQUIERDA (info: logo, título, meta, lead) */
.left {
  flex: 1.3 1 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  color: #fff;
  margin-bottom: 0;
}
.band-logo {max-width: 100%; height: auto; display: block; 
    margin-left: auto;
    margin-right: auto;
}

.band-foto{
  width: 600px; 
  overflow: hidden;
  margin: 0 auto;
}

.band-foto img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0px); /* recorte superior */
}


/* Tipografía principal (desktop) */
.left h1 {
  font-size: clamp(48px, 2.6vw, 96px);
  margin: 0;
  color: ffffff;
  font-weight: 700;
  line-height: 1.05;
}
.left .meta {
  font-size: 20px;
  font-weight: 700;
  margin: 2px 0;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
  text-align: justify;
}

.left .meta1 {
  font-size: 25px;
  font-weight: 700;
  margin: 2px 0;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
  text-align: justify;
}
.left .lead {
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0;
}

/* PANEL DERECHO (formulario) */
.signup-panel {
  flex: 0.9 1 320px;
  max-width: 520px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.10);
}

/* FORM (estructura por defecto) */
form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 0; }
.panel-header h2 { margin: 0; font-size: 25px; color: #fff; }
.panel-header p { margin: 4px 0 10px; color: ffffff; font-size: 18px; text-align: justify; text-shadow: 1px 1px 6px rgba(0,0,0,0.6);}

/* PARES piqueo/bebida en dos columnas (desktop) */
.item-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
#itemsContainer { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

/* QR y disclaimers */
.qr-row { display: flex; gap: 12px; margin-top: 8px; align-items: center; justify-content: flex-start; }
.disclaimer { background: rgba(255,255,255,0.02); padding: 12px; border-radius: 8px; display: flex; gap: 10px; align-items: center; text-align: justify; }

/* Botones y estados */
.row { display: flex; gap: 10px; align-items: center; }
.btn { background: var(--card-border); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer; }
.status { font-size: 14px; color: var(--muted); margin-top: 6px; min-height: 20px; }

/* ==========================================================================
   C. ESTILOS PARA MÓVILES (solo aquí, todo lo que sea mobile debe ir dentro)
   --------------------------------------------------------------------------
   - el bloque .left aparece primero
   - se obliga a que .left esté a 10px del inicio de la página
   - se apilan los elementos y el formulario se muestra debajo ocupando ancho completo
   ========================================================================= */

@media (max-width: 920px) {
  /* estructura apilada, sin gaps grandes */
  .hero { min-height: unset; padding: 0; margin-top:50px; }
  .hero .container { display: block; padding: 0; margin: 0; }

  /* .left primero y con separación superior de 10px desde inicio */
  .left {
    order: 1;
    width: 100%;
    padding-top: 10px;   /* <-- 10px desde el inicio de la página solicitado */
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    margin: 0;
  }
  .band-logo { max-width: 100%; }
  
  .band-foto{
    width: 100%;
    max-width: 300px;
  }
  
  .band-foto img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0px); /* recorte superior */
}

  /* Tipografía mobile más compacta */
  .left h1 { font-size: clamp(22px, 6.5vw, 34px); margin: 4px 0; line-height: 1.06; }
  .left .meta { font-size: 20px; margin: 2px 0; }
  .left .meta1 { font-size: 25px; margin: 2px 0; }
  .left .lead { font-size: 13px; margin: 4px 0 8px; text-align: center; }

  /* Form panel debajo, ocupa ancho completo */
  .signup-panel {
    order: 2;
    width: 100%;
    max-width: 100%;
    padding: 16px;
    margin: 0;
	margin-top: -100px; 
    border-radius: 8px;
  }

  /* Pairs stacking in mobile */
  .item-pair { grid-template-columns: 1fr; gap: 8px; }

  /* Compact spacing for mobile */
  .hero .container { gap: 8px; padding-top: 0; padding-bottom: 8px; }
  #itemsContainer { gap: 8px; }
  .panel-header { margin-bottom: 6px; }
  .signup-panel label { margin-top: 6px; margin-bottom: 6px; }

  /* QR centering in mobile */
  .qr-row { justify-content: center; flex-wrap: wrap; gap: 10px; }

  /* Tweak buttons and fonts */
  label { font-size: 16px; }
  .btn { width: auto; padding: 12px 14px; }
}

/* Ajustes pequeños extra para pantallas muy pequeñas */
@media (max-width: 420px) {
  .band-logo { max-width: 100%; }
  
  .band-foto{
    width: 100%;
    max-width: 300px;
    min-width: 0;
  }
  
  .band-foto img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0px); /* recorte superior */
}  
  
  .left h1 { font-size: 30px; }
  .left .meta { font-size: 16px; margin: 2px 0; }
  .left .meta1 { font-size: 18px; margin: 2px 0; }
  .signup-panel { margin-top: 0px; }
  .panel-header h2 { font-size: 18px; }
  label { font-size: 16px; }
  .btn { padding: 12px; font-size: 14px; }
}