/* ═══════════════════════════════════════════════════════════
   SoulsGuides — Unidades de AdSense responsive
   ═══════════════════════════════════════════════════════════ */

.sg-responsive-ad {
  width: min(100%, 970px);
  margin: clamp(40px, 5vw, 64px) auto clamp(14px, 2.5vw, 28px);
  padding-top: 12px;
  border-top: 1px solid rgba(196,163,90,.14);
  text-align: center;
}

.sg-responsive-ad__label {
  display: block;
  margin-bottom: 6px;
  color: rgba(176,168,152,.48);
  font-family: var(--ff);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sg-responsive-ad__unit {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 100px;
  margin-inline: auto;
}

/*
 * Formatos horizontales exactos por breakpoint. Al fijar la proporción
 * evitamos que una unidad responsive de ancho completo se convierta en un
 * bloque casi cuadrado en pantallas estrechas.
 */
@media (min-width: 500px) {
  .sg-responsive-ad__unit {
    max-width: 468px;
    height: 60px;
  }
}

@media (min-width: 800px) {
  .sg-responsive-ad__unit {
    max-width: 728px;
    height: 90px;
  }
}

@media (max-width: 700px) {
  .sg-responsive-ad {
    width: 100%;
    margin-top: 34px;
    padding-top: 10px;
  }
}