/* =====================================================
   VARIABLES
===================================================== */

  :root {
    --info-max-width: 1280px;

    --info-color-text: #181818;
    --info-color-light: #f6f6f6;
    --info-color-red: #ff0038;
    --info-color-white: #ffffff;
    --info-color-accent: #ed002f;

    --info-radius-large: 32px;
    --info-radius-medium: 24px;
    --info-radius-small: 18px;
  }


  /* =====================================================
   SECCIÓN GENERAL
===================================================== */

  .info-section {
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
  }

  .info-section *,
  .info-section *::before,
  .info-section *::after {
    box-sizing: border-box;
  }

  .info-section__container {
    width: 100%;
    max-width: var(--info-max-width);
    margin: 0 auto;
  }


  /* =====================================================
   BLOQUE GENERAL DE TEXTO + IMAGEN
===================================================== */

  .media-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    border-radius: var(--info-radius-large);
  }


  /* =====================================================
   CONTENIDO
===================================================== */

  .media-block__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 64px;
  }

  .media-block__title {
    margin: 0 0 14px;
    font-size: clamp(28px, 2.3vw, 38px);
    font-weight: 700;
    line-height: 1.08;
    color: inherit;
  }

  .media-block__description {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    color: inherit;
  }

  .media-block__description p {
    margin: 0;
  }

  .media-block__description p+p {
    margin-top: 26px;
  }


  /* =====================================================
   IMAGEN
===================================================== */

  .media-block__media {
    position: relative;
    min-width: 0;
    min-height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }

  .media-block__image {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center;
  }


  /* =====================================================
   ORDEN DE COLUMNAS EN DESKTOP
===================================================== */

  .media-block--image-right .media-block__content {
    order: 1;
  }

  .media-block--image-right .media-block__media {
    order: 2;
  }

  .media-block--image-left .media-block__media {
    order: 1;
  }

  .media-block--image-left .media-block__content {
    order: 2;
  }


  /* =====================================================
   BLOQUE CLARO
===================================================== */

  .media-block--light {
    background-color: var(--info-color-light);
    color: var(--info-color-text);
  }

  .media-block--light .media-block__media {
    border-radius: var(--info-radius-large);
  }


  /* =====================================================
   TÍTULO ENTRE BLOQUES
===================================================== */

  .info-heading {
    padding: 70px 20px 55px;
    text-align: center;
  }

  .info-heading__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #282828;
  }


  /* =====================================================
   BLOQUE DESTACADO ROJO
===================================================== */

  .media-block--highlight {
    margin: 0 auto;
    padding: 18px;
    background-color: var(--info-color-red);
    color: var(--info-color-white);
  }

  .media-block--highlight .media-block__content {
    padding: 32px 36px 32px 42px;
  }

  .media-block--highlight .media-block__title {
    font-size: clamp(28px, 2.5vw, 38px);
  }

  .media-block--highlight .media-block__description {
    font-size: 17px;
    line-height: 1.45;
  }


  /* =====================================================
   IMAGEN INTERNA DEL BLOQUE ROJO
===================================================== */




  /* =====================================================
   TEXTO DESTACADO DEL PRECIO
===================================================== */

  .text-highlight {
    display: inline;
    padding: 0 4px;
    background-color: var(--info-color-white);
    color: #111111;
    font-weight: 800;
    white-space: nowrap;
  }


  /* =====================================================
   TABLET
===================================================== */

  @media (max-width: 1024px) {
    .media-block__content {
      padding: 40px;
    }

    .media-block__description {
      font-size: 16px;
    }

    .media-block--highlight .media-block__content {
      padding: 30px;
    }
  }


  /* =====================================================
   MOBILE
===================================================== */

  @media (max-width: 767px) {
    .info-section {
      padding: 28px 18px;
    }

    .media-block {
      display: flex;
      flex-direction: column;
      border-radius: 0;
      overflow: visible;
    }


    /* CONTENIDO MOBILE */

    .media-block__content {
      order: 1;
      padding: 0;
      text-align: center;
    }

    .media-block__title {
      margin-bottom: 18px;
      font-size: 24px;
      line-height: 1.15;
    }

    .media-block__description {
      font-size: 15px;
      line-height: 1.3;
    }

    .media-block__description p+p {
      margin-top: 24px;
    }


    /* IMAGEN MOBILE */

    .media-block__media {
      order: 2;
      width: 100%;
      min-height: 0;
      margin-top: 28px;
      aspect-ratio: 1.55 / 1;
      border-radius: var(--info-radius-small);
    }


    /* BLOQUE CLARO MOBILE */

    .media-block--light {
      padding: 0;
      background-color: transparent;
    }

    .media-block--light .media-block__title {
      color: var(--info-color-accent);
    }

    .media-block--light .media-block__media {
      border-radius: var(--info-radius-small);
    }


    /* TÍTULO CENTRAL MOBILE */

    .info-heading {
      padding: 60px 10px 34px;
    }

    .info-heading__title {
      font-size: 21px;
      line-height: 1.18;
    }


    /* BLOQUE ROJO MOBILE */

    .media-block--highlight {
      padding: 24px 10px 10px;
      border-radius: 24px;
    }

    .media-block--highlight .media-block__content {
      order: 1;
      padding: 0 14px;
    }

    .media-block--highlight .media-block__title {
      margin-bottom: 18px;
      font-size: 23px;
    }

    .media-block--highlight .media-block__description {
      font-size: 14px;
      line-height: 1.32;
    }

    .media-block--highlight .media-block__media {
      order: 2;
      margin-top: 26px;
    }

    .media-block__media--inset {
      min-height: 0;
      aspect-ratio: 1.35 / 1;
      border-radius: 20px;
    }
  }


  /* =====================================================
   MOBILE PEQUEÑO
===================================================== */

  @media (max-width: 380px) {
    .info-section {
      padding-right: 14px;
      padding-left: 14px;
    }

    .media-block__title {
      font-size: 22px;
    }

    .media-block__description {
      font-size: 14px;
    }

    .info-heading__title {
      font-size: 19px;
    }

    .media-block--highlight .media-block__title {
      font-size: 21px;
    }

    .media-block--highlight .media-block__description {
      font-size: 13px;
    }
  }