/* =========================================================
   MARTINELLI HERRITAGE
   /css/landing-herritage/style-2.css

   OBJETIVO DE ESTA VERSIÓN:
   - Mantener EXACTA la posición original de los H2 en desktop.
   - Mantener 40px / 20px en 1920px y pantallas grandes.
   - Reducir solo un poco la tipografía en desktop más estrecho.
   - Hacer que el párrafo quede SIEMPRE debajo del H2 con
     la misma separación, aunque el título tenga más líneas.
   - Mantener los ajustes MOBILE por idioma que ya estaban.
   ========================================================= */


/* =========================================================
   RESET / CONTENEDOR
   ========================================================= */

#martinelli-herritage,
#martinelli-herritage * {
  box-sizing: border-box;
}

#martinelli-herritage {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  overflow: hidden;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#martinelli-herritage h2,
#martinelli-herritage p {
  margin: 0;
  padding: 0;
  font-size: 10px;
}


/* =========================================================
   SECCIONES
   ========================================================= */

#martinelli-herritage .herritage-section {
  position: relative;

  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  overflow: hidden;
}


/* =========================================================
   IMÁGENES DESKTOP
   ========================================================= */

#martinelli-herritage .herritage-cover {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/portada_RC_landing_desk_1.jpg");
}

#martinelli-herritage .herritage-section-1 {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_desk_3.jpg");
}

#martinelli-herritage .herritage-section-2 {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_desk_4.jpg");
}

#martinelli-herritage .herritage-section-3 {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_desk_6.jpg");
}

#martinelli-herritage .herritage-section-4 {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_desk_5.jpg");
}

#martinelli-herritage .herritage-section-5 {
  aspect-ratio: 3840 / 1750;

  background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_desk_7.jpg");
}


/* =========================================================
   VÍDEO
   ========================================================= */

#martinelli-herritage .herritage-video-section {
  position: relative;

  width: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #000;

  /*
   * DESKTOP
   * Misma proporción que las imágenes desktop del landing.
   */
  aspect-ratio: 3840 / 1750;
}


/* Vídeo */

#martinelli-herritage .herritage-video {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center center;

  border: 0;
}


/* Por defecto: desktop */

/* Por defecto mostramos DESKTOP */

#martinelli-herritage .herritage-video-desktop {
  display: block;
}

#martinelli-herritage .herritage-video-mobile {
  display: none;
}



/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

#martinelli-herritage .herritage-title,
#martinelli-herritage .herritage-copy {
  font-family: "montserrat-regular", "Montserrat", sans-serif !important;

  font-weight: 400 !important;
  font-style: normal !important;

  line-height: 1 !important;
  letter-spacing: -0.07em !important;

  color: #000;

  word-break: normal;
  overflow-wrap: normal;

  hyphens: none;
  -webkit-hyphens: none;
}

#martinelli-herritage .herritage-title {
  white-space: normal;
}

#martinelli-herritage .herritage-title-4 {
  color: white;
}

#martinelli-herritage .herritage-copy-4 {
  color: white;
}

#martinelli-herritage .herritage-copy-4-text {
    color: white;
}


/* =========================================================
   ENLACES DE IMAGEN
   ========================================================= */

#martinelli-herritage .herritage-image-link {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 3;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  text-decoration: none;

  cursor: pointer;
}

#martinelli-herritage .herritage-image-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: -4px;
}


/* =========================================================
   ALT ACCESIBLE PARA BACKGROUND IMAGES
   ========================================================= */

#martinelli-herritage .herritage-image-alt {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {


  /* VIDEO */

  #martinelli-herritage .herritage-video-section {
    /*
     * Sustituir por la proporción real del vídeo.
     *
     * Ejemplo:
     * vídeo 3840 x 1750
     */
    aspect-ratio: 3840 / 1750;
  }



  /*
   * El contenedor .herritage-text ocupa la posición ORIGINAL
   * del H2. El H2 ya no se mueve.
   *
   * Dentro del contenedor:
   * H2
   *   ↓ separación fija
   * copy
   *
   * Por tanto, si un idioma hace que el H2 tenga una línea
   * extra, el párrafo baja automáticamente.
   */

  #martinelli-herritage .herritage-text {
    position: absolute !important;
    z-index: 2;
  }

  #martinelli-herritage .herritage-title,
  #martinelli-herritage .herritage-copy {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }


  /* =====================================================
     TIPOGRAFÍA DESKTOP RESPONSIVE

     1920px o superior:
     H2 = 40px
     P  = 20px

     Por debajo de 1920px:
     baja solo ligeramente para evitar que el texto
     se haga demasiado grande en desktop estrecho.
     ===================================================== */

  #martinelli-herritage .herritage-title {
    font-family: "montserrat-regular", "Montserrat", sans-serif !important;

    font-size: clamp(24px, 2.083333vw, 40px) !important;
    font-weight: 400 !important;
    font-style: normal !important;

    line-height: 1 !important;
    letter-spacing: -0.07em !important;
  }

  #martinelli-herritage .herritage-copy,
  #martinelli-herritage .herritage-copy p {
    font-family: "montserrat-regular", "Montserrat", sans-serif !important;

    font-size: clamp(12px, 1.041667vw, 20px) !important;
    font-weight: 400 !important;
    font-style: normal !important;

    line-height: 1 !important;
    letter-spacing: -0.07em !important;

    /*color: #000 !important;*/
  }


  /* =====================================================
     SEPARACIÓN H2 -> COPY

     Mismo espacio en todos los idiomas.
     A 1920px = 40px.
     ===================================================== */

  #martinelli-herritage .herritage-copy {
    margin-top: clamp(24px, 2.083333vw, 40px) !important;
  }


  /* Separación entre los dos párrafos */

  #martinelli-herritage .herritage-copy p + p {
    margin-top: clamp(12px, 1.041667vw, 20px) !important;
  }


  /* =====================================================
     BLOQUE 1 DESKTOP

     MISMA posición que antes:
     title top 34.9%
     title left 3.4%
     title width 18%
     ===================================================== */

  #martinelli-herritage .herritage-text-1 {
    top: 6.9% !important;
    left: 3.4% !important;

    width: 18% !important;
    max-width: 18% !important;
  }

  /*
   * Antes copy = 15.6% del ancho total
   * y title = 18%.
   * 15.6 / 18 = 86.6667%
   */
  #martinelli-herritage .herritage-copy-1 {
    width: 86.6667%;
  }


  /* =====================================================
     BLOQUE 2 DESKTOP

     MISMA posición que antes:
     title top 6.9%
     title left 3.45%
     title width 17%
     ===================================================== */

  #martinelli-herritage .herritage-text-2 {
    top: 6.9% !important;
    left: 3.45% !important;

    width: 17% !important;
    max-width: 17% !important;
  }

  /*
   * Antes copy = 15.6%
   * y title = 17%.
   */
  #martinelli-herritage .herritage-copy-2 {
    width: 91.7647%;
  }


  /* =====================================================
     BLOQUE 3 DESKTOP

     MISMA posición que antes:
     title top 49.6%
     title left 80.7%
     title width 16%
     ===================================================== */

  #martinelli-herritage .herritage-text-3 {
    top: 49.6% !important;
    left: 80.7% !important;

    width: 16% !important;
    max-width: 16% !important;
  }

  /*
   * Antes copy = 15.2%
   * y title = 16%.
   */
  #martinelli-herritage .herritage-copy-3 {
    width: 95%;
  }


  /* =====================================================
     BLOQUE 4 DESKTOP

     MISMA posición que antes:
     title top 9.5%
     title left 5.15%
     title width 24%
     ===================================================== */

  #martinelli-herritage .herritage-text-4 {
    top: 58% !important;
    left: 80.7% !important;

    width: 24% !important;
    max-width: 20% !important;
    /*top: 9.5% !important;
    left: 5.15% !important;

    width: 24% !important;
    max-width: 24% !important;*/
  }

  /*
   * Antes copy = 18%
   * y title = 24%.
   */
  #martinelli-herritage .herritage-copy-4 {
    width: 75%;
  }

  #martinelli-herritage .herritage-copy-4-text {
    color: white;
  }
}


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

@media (max-width: 991px) {

  /*
   * IMPORTANTE:
   * En MOBILE mantenemos exactamente el sistema anterior:
   * título y copy posicionados de forma absoluta por idioma.
   *
   * El wrapper nuevo NO altera las posiciones mobile.
   */


#martinelli-herritage .herritage-video-section {
    /*
     * MOBILE
     *
     * Ajustado a una composición vertical 1080 x 1700.
     * Cambia estos valores si el vídeo mobile tiene otra
     * proporción.
     */
    aspect-ratio: 1080 / 1700;
  }


  #martinelli-herritage .herritage-video-desktop {
    display: none;
  }


  #martinelli-herritage .herritage-video-mobile {
    display: block;
  }

  #martinelli-herritage .herritage-text {
    position: static !important;
  }

  #martinelli-herritage .herritage-title,
  #martinelli-herritage .herritage-copy {
    position: absolute !important;
    z-index: 2;
  }


  /* =====================================================
     POSICIONES MOBILE POR IDIOMA
     ===================================================== */


  /* BASE */

  #martinelli-herritage {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 12.9%;

    --mobile-title-2-top: 40.5%;
    --mobile-copy-2-top: 47%;

    --mobile-title-3-top: 79%;
    --mobile-copy-3-top: 84.9%;

    --mobile-title-4-top: 55.5%;
    --mobile-copy-4-top: 81.9%;
  }


  /* ESPAÑOL */

  #martinelli-herritage[lang="es"] {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 12.9%;

    --mobile-title-2-top: 38.5%;
    --mobile-copy-2-top: 44%;

    --mobile-title-3-top: 77%;
    --mobile-copy-3-top: 82.9%;

    --mobile-title-4-top: 64.5%;/*55.5%;*/
    --mobile-copy-4-top: 74.9%;/*80.9*/
  }


  /* INGLÉS */

  #martinelli-herritage[lang="en"] {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 12.9%;

    --mobile-title-2-top: 38.5%;
    --mobile-copy-2-top: 44%;

    --mobile-title-3-top: 79%;
    --mobile-copy-3-top: 82.9%;

    --mobile-title-4-top: 63.5%;/*55.5%;*/
    --mobile-copy-4-top: 74.9%;/*80.9*/
  }


  /* FRANCÉS */

  #martinelli-herritage[lang="fr"] {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 12.9%;

    --mobile-title-2-top: 38.5%;
    --mobile-copy-2-top: 44%;

    --mobile-title-3-top: 79%;
    --mobile-copy-3-top: 82.9%;

    --mobile-title-4-top: 63.5%;/*55.5%;*/
    --mobile-copy-4-top: 74.9%;/*80.9*/
  }


  /* PORTUGUÉS */

    #martinelli-herritage[lang="pt"] {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 12.9%;

    --mobile-title-2-top: 39.5%;
    --mobile-copy-2-top: 44%;

    --mobile-title-3-top: 79%;
    --mobile-copy-3-top: 83.9%;

    --mobile-title-4-top: 65.5%;
    --mobile-copy-4-top: 76.9%;
  }


  /* NEERLANDÉS */

  #martinelli-herritage[lang="nl"] {
    --mobile-title-1-top: 3.9%;
    --mobile-copy-1-top: 10.9%;

    --mobile-title-2-top: 40.5%;
    --mobile-copy-2-top: 45%;

    --mobile-title-3-top: 78%;
    --mobile-copy-3-top: 84.9%;

    --mobile-title-4-top: 55.5%;
    --mobile-copy-4-top: 80.9%;
  }


  /* =====================================================
     IMÁGENES MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-cover {
    aspect-ratio: 1080 / 1700;

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/portada_RC_landing_movil_1.jpg");
  }

  #martinelli-herritage .herritage-section-1 {
    aspect-ratio: 1080 / 2700;/*aspect-ratio: 1080 / 3000;*/

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_movil_3.jpg");
  }

  #martinelli-herritage .herritage-section-2 {
    aspect-ratio: 1080 / 3000;

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_movil_4.jpg");
  }

  #martinelli-herritage .herritage-section-3 {
    aspect-ratio: 1080 / 3000;

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_movil_6.jpg");
  }

  #martinelli-herritage .herritage-section-4 {
    aspect-ratio: 1080 / 1700;

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_movil_5.jpg");
  }

  #martinelli-herritage .herritage-section-5 {
    aspect-ratio: 1080 / 1700;

    background-image: url("../../images/V26/09-septiembre/materiales-Royalcafe/RC_landing_movil_7.jpg");
  }


  /* =====================================================
     TIPOGRAFÍA MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-title {
    font-family: "montserrat-regular", "Montserrat", sans-serif !important;

    font-weight: 400 !important;
    font-style: normal !important;

    font-size: clamp(20px, 4vw, 49px) !important;

    line-height: 1 !important;
    letter-spacing: -0.07em !important;

    white-space: normal;

    word-break: normal;
    overflow-wrap: normal;

    hyphens: none;
    -webkit-hyphens: none;
  }

  #martinelli-herritage .herritage-copy {
    font-family: "montserrat-regular", "Montserrat", sans-serif !important;

    font-weight: 400 !important;
    font-style: normal !important;

    font-size: 2.315vw !important;

    line-height: 1 !important;
    letter-spacing: -0.07em !important;

    white-space: normal;

    margin-top: 0 !important;
  }

  #martinelli-herritage .herritage-copy p + p {
    margin-top: clamp(14px, 4.5vw, 24px) !important;
  }


  /* =====================================================
     BLOQUE 1 MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-title-1 {
    top: var(--mobile-title-1-top);
    left: 9.5%;

    width: 68%;
    max-width: 68%;
  }

  #martinelli-herritage .herritage-copy-1 {
    top: var(--mobile-copy-1-top);
    left: 9.5%;

    width: 54%;
  }


  /* =====================================================
     BLOQUE 2 MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-title-2 {
    top: var(--mobile-title-2-top);
    left: 33.15%;

    width: 58%;
    max-width: 58%;
  }

  #martinelli-herritage .herritage-copy-2 {
    top: var(--mobile-copy-2-top);
    left: 33.15%;

    width: 52%;
  }


  /* =====================================================
     BLOQUE 3 MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-title-3 {
    top: var(--mobile-title-3-top);
    left: 12.25%;

    width: 70%;
    max-width: 70%;
  }

  #martinelli-herritage .herritage-copy-3 {
    top: var(--mobile-copy-3-top);
    left: 12.25%;

    width: 54%;
  }


  /* =====================================================
     BLOQUE 4 MOBILE
     ===================================================== */

  #martinelli-herritage .herritage-title-4 {
    top: var(--mobile-title-4-top);
    left: 40.4%;/*12.4%*/

    width: 70%;
    max-width: 70%;
  }

  #martinelli-herritage .herritage-copy-4 {
    top: var(--mobile-copy-4-top);
    left: 40.25%;

    width: 57%;
  }
}