/* ===== CSS extraído y ordenado según el DOM del bloque ===== */

/* <a class="c-logo-pages ...> */
.c-logo-pages {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
}

/* <section class="landing-vivo"> */
.landing-vivo {
  width: 100%;
  padding: 5rem 1rem 2rem;
  background-image: url("https://aprodmovistarcomsa.z13.web.core.windows.net/persons/celulares-vivo/bg-vivo-2.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
}

/* <div class="landing-wrapper"> (dentro de .landing-vivo) */
.landing-vivo .landing-wrapper {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 2rem;
}

.landing-wrapper__col-left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.landing-wrapper__offert {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.landing-wrapper__img-offer {
  position: relative;
  z-index: 1;
}

/* <div class="contenttitle"> */
.contenttitle {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  align-items: center;
  z-index: 5;
}

/* <div class="title-box"> */
.title-box {
  background: var(--blue);
  color: #fff;
  padding: 12px 40px;
  display: inline-block;
  transform: rotate(-1.5deg);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);
  margin: -20px auto 2rem;
}

/* <h2 class="title ..."> (dentro de .title-box) */
.title-box .title {
  margin: 0;
  font-size: 6vw;
  text-align: center;
  line-height: normal;
}

.landing-wrapper__info {
  display: flex;
  gap: 12px;
  flex-direction: column;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0px 0px 10px 0px #00000040;
  background-color: #F5F5F5;
}

.landing-wrapper__infobox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  font-size: 1.2rem;
  line-height: normal;
}

.landing-wrapper__infobox p:last-child{
  font-size: 130%;
}

.landing-wrapper__infotext {
  border-top: 1px solid var(--blue);
  padding: 6px 0 0;
}

/* <div class="col-right"> */
.landing-wrapper__col-right {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

/* <div class="benefits-wrapper benefits-desktop"> */
.benefits-desktop {
  display: flex;
  flex-direction: column;
  width: 328px;
  gap: 10px;
}

/* <div class="benefit-card benefit-card--small benefit-card--split"> */
.benefit-card {
  background: #F5F5F5;
  border: 1px solid #B6B7B7;
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #50535A;
}

.benefit-card--small {
  padding: 10px 20px;
}

.benefit-card--split {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Tipografía dentro de .benefit-card */
.benefit-card h3 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
}

.benefit-card p {
  margin: 0;
}

/* <div class="benefit-split-left"> y <div class="benefit-split-right"> */
.benefit-split-left {
  padding-right: 12px;
}

.benefit-split-right {
  padding-left: 12px;
  border-left: 1px solid var(--blue);
  text-align: left;
}

.benefit-split-left h3,
.benefit-split-right h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.benefit-split-left p,
.benefit-split-right p {
  margin: 0;
  font-size: 12px;
}

/* <div class="benefit-card benefit-card--wide"> */
.benefit-card--wide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* <p class="benefit-express-title"> */
.benefit-express-title {
  margin: 0 0 4px;
  font-size: 12px;
}

.benefit-express-title span {
  font-weight: 700;
}

/* <div class="shipping-row"> */
.shipping-row {
  display: flex;
  align-items: center;
}

.shipping-row i {
  font-size: 1.5rem;
}

/* <div class="arrow-container"> */
.arrow-container {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

/* <p class="benefit-express-subtitle"> */
.benefit-express-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
}

/* ===== Media queries (ordenadas según el DOM) ===== */

@media screen and (min-width: 600px) {
  .title-box .title {
    font-size: 2rem;
  }
}

@media screen and (min-width: 768px) {

  /* .c-logo-pages en desktop */
  .c-logo-pages {
    left: 24px;
    top: 24px;
    transform: none;
  }

  .landing-vivo {
    padding: 5rem 1rem 2rem;
  }

  .landing-vivo .landing-wrapper {
    flex-direction: row;
  }

  .landing-wrapper__offert {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;

  }

  .landing-wrapper__img-offer {
    z-index: 20;
  }

  .title-box {
    margin: 0 -20px 3rem 0;
  }

  .landing-wrapper__infobox {
    font-size: 1.1rem;
    gap: .5rem;
  }

}