/* ============================================
   header-main-vodafone_promo.css
   Mobile First — base 360px
   ============================================ */

/* ---------- CONTENEDOR PRINCIPAL ---------- */
.vodafone-promo-logos-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 0 0 16px;
  background-color: #ffffff;
}

/* ---------- LOGO IBERDROLA ---------- */
.vodafone-promo-logos-header .logo-iberdrola {
  display: flex;
  align-items: center;
}

.vodafone-promo-logos-header .logo-iberdrola picture img {
  height: 64px;
}

/* ---------- DIVIDER ---------- */
.vodafone-promo-logos-header .logos-divider {
  width: 1px;
  height: 40px;
  align-self: center;
  margin-left: 8px;
  margin-right: 16px;
  background: var(--Color-Border-General-1, #C8D9D0);
}

/* ---------- LOGO VODAFONE ---------- */
.vodafone-promo-logos-header .logo-vodafone {
  display: flex;
  align-items: center;
}

.vodafone-promo-logos-header .logo-vodafone picture img {
  height: 32px;
  width: 40px;
  padding: 4px;
}

/* ---------- LOGO CASCOS ---------- */
.vodafone-promo-logos-header .logo-cascos {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

/* ---------- WRAPPER CASCOS (fondo verde) ---------- */
.vodafone-promo-logos-header .logo-cascos-wrapper {
  display: flex;
  padding: var(--size-space-12, 12px) var(--size-space-32, 32px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-4, 4px);
  align-self: stretch;
  border-radius: var(--border-radius-none, 0) var(--border-radius-none, 0) var(--border-radius-none, 0) var(--border-radius-l, 16px);
  background: var(--Color-Surface-General-2, #DCEBE1);
}

.vodafone-promo-logos-header .logo-cascos-wrapper picture img {
  display: block;
  height: 24px;
}

/* ============================================
   MOBILE — 576px
   ============================================ */
@media (min-width: 576px) {

  .vodafone-promo-logos-header {
    justify-content: flex-start;
    align-items: center;
    padding: 12px 16px;
    padding-left: 42px;
  }

  .vodafone-promo-logos-header .logo-cascos {
    display: none;
  }

  .vodafone-promo-logos-header .logo-iberdrola picture img {
    height: 64px;
  }

  .vodafone-promo-logos-header .logo-vodafone picture img {
    height: 40px;
    padding: 4px;
  }

}

/* ============================================
   TABLET — 768px
   ============================================ */
@media (min-width: 768px) {

  .vodafone-promo-logos-header {
    padding: 8px;
    padding-left: 48px;
  }

  .vodafone-promo-logos-header .logos-divider {
    height: 44px;
    margin: 0 20px;
  }

  .vodafone-promo-logos-header .logo-iberdrola picture img {
    height: 64px;
  }

  .vodafone-promo-logos-header .logo-vodafone picture img {
    height: 40px;
    padding: 4px;
  }

}

/* ============================================
   DESKTOP — 992px
   ============================================ */
@media (min-width: 992px) {

  .vodafone-promo-logos-header {
    padding: 8px;
    padding-left: 82px;
  }

  .vodafone-promo-logos-header .logo-iberdrola picture img {
    width: 169px;
    height: 52px;
  }

  .vodafone-promo-logos-header .logo-vodafone picture img {
    height: 52px;
    width: 184px;
    padding: var(--size-space-8, 8px);
  }

}

/* ============================================
   DESKTOP — 1200px
   ============================================ */
@media (min-width: 1200px) {

  .vodafone-promo-logos-header {
    padding: 8px;
    padding-left: 102px;
  }

  .vodafone-promo-logos-header .logo-iberdrola picture img {
    width: 169px;
    height: 52px;
  }

  .vodafone-promo-logos-header .logo-vodafone picture img {
    height: 52px;
    width: 184px;
    padding: var(--size-space-8, 8px);
  }

}

/* ============================================
   DESKTOP — 1920px
   ============================================ */
@media (min-width: 1920px) {

  .vodafone-promo-logos-header {
    padding: 8px;
    padding-left: 102px;
  }

  .vodafone-promo-logos-header .logo-iberdrola picture img {
    width: 169px;
    height: 52px;
  }

  .vodafone-promo-logos-header .logo-vodafone picture img {
    height: 52px;
    width: 184px;
    padding: var(--size-space-8, 8px);
  }

}