/* productos.css — Sorteo + Contacto */

/* ── SORTEO ── */
.sorteo-section {
  background: var(--color-sorteo-blue);
  color: white;
  overflow: hidden;
  position: relative;
}

/* Decos de fondo */
.sorteo-deco {
  position: absolute;
  width: 384px; height: 384px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.sorteo-deco--right { right: -80px; top: -80px; background: rgba(255,107,0,0.3); }
.sorteo-deco--left  { left: -80px; bottom: -80px; background: rgba(26,62,191,0.5); }

/* Grid */
.sorteo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
  opacity: 0;
}

@media (min-width: 1024px) {
  .sorteo-grid { grid-template-columns: 1fr 1fr; }
}

/* Info */
.sorteo-info { display: flex; flex-direction: column; gap: 24px; }

.sorteo-badge {
  display: inline-block;
  padding: 4px 16px;
  background: rgba(255,255,255,0.1);
  color: var(--color-sorteo-yellow);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 100px;
  width: max-content;
}

.sorteo-title {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  color: var(--color-sorteo-yellow);
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.sorteo-title-white { color: white; }

.sorteo-desc  { font-size: 1.125rem; line-height: 1.7; }
.sorteo-price { color: var(--color-sorteo-yellow); font-size: 1.5rem; }

/* Premios box */
.premios-box {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(255,107,0,0.5);
  box-shadow: 0 0 20px rgba(255,107,0,0.2);
}

.premios-title { font-size: 1.875rem; margin-bottom: 16px; color: var(--color-sorteo-yellow); border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 8px; }
.premios-list  { display: flex; flex-direction: column; gap: 12px; }

.premios-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
}

.premios-num {
  width: 32px; height: 32px;
  background: var(--color-sorteo-orange);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.sorteo-tickets-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-sorteo-orange);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* Visual mascota */
.sorteo-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-ping {
  position: absolute;
  width: 384px; height: 384px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: ping 1s ease infinite;
}
.visual-glow {
  position: absolute;
  width: 320px; height: 320px;
  background: var(--color-sorteo-orange);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
}
.visual-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.visual-icon { font-size: clamp(8rem, 15vw, 12.5rem); color: white; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.visual-badge {
  background: white;
  color: var(--color-primary-dark);
  font-size: 1.5rem;
  padding: 8px 24px;
  border-radius: 100px;
  margin-top: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: 2px solid var(--color-sorteo-yellow);
  transform: rotate(-3deg);
}

/* ── CONTACTO ── */
.contact-section { background: var(--color-background); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* Info */
.contact-info { display: flex; flex-direction: column; gap: 32px; opacity: 0; }

.contact-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.contact-desc   { font-size: 1.125rem; color: var(--color-on-surface-variant); line-height: 1.7; }

.contact-items { display: flex; flex-direction: column; gap: 24px; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-item-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon span { font-size: 1.5rem; }
.contact-item-icon--primary { background: rgba(21,101,192,0.1); color: var(--color-primary); }
.contact-item-icon--accent  { background: rgba(212,160,23,0.2);  color: var(--color-accent); }

.contact-item-title      { font-weight: 700; font-size: 0.875rem; color: var(--color-primary-dark); margin-bottom: 2px; }
.contact-item-text       { color: var(--color-on-surface-variant); }
.contact-item-text--bold { font-weight: 700; font-size: 1.125rem; }

/* Formulario */
.contact-form-wrap {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border: 1px solid rgba(21,101,192,0.1);
  opacity: 0;
}

.contact-form-title { font-size: 1.875rem; color: var(--color-primary-dark); margin-bottom: 24px; }
.contact-form       { display: flex; flex-direction: column; gap: 20px; }

.form-group  { display: flex; flex-direction: column; gap: 8px; }
.form-label  { font-weight: 700; font-size: 0.875rem; color: var(--color-primary-dark); }

.contact-submit {
  width: 100%;
  margin-top: 16px;
  border-radius: 12px;
  padding: 16px;
  font-size: 1rem;
  justify-content: center;
}
.contact-submit span { font-size: 0.875rem; }