/* ===================================== */
/* LANGUAGE OVERRIDES */
/* ===================================== */

/* ---------- SPANISH (ALL SIZES) ---------- */

html[lang="es"] .home-underline-yours {
  left: 0.05em;
  width: 95%;
}

html[lang="es"] .hero-title br {
  display: none;
}

html[lang="es"] .how-text-4 br {
  display: none;
}

html[lang="es"] .home-exclamation-left {
  right: -0em;
}

html[lang="es"] .lose-wrapper > span {
  position: relative;
  z-index: 5;
}

html[lang="es"] .how-crossout-lose {
  z-index: 1;
}

/* ---------- SPANISH (DESKTOP ONLY) ---------- */

@media (min-width: 1025px) {
  html[lang="es"] .home-content {
    grid-template-columns: 1.5fr 0.5fr;
  }

  html[lang="es"] .home-exclamation-left {
    right: -0.4em;
  }

  html[lang="es"] .hero-title {
    max-width: 22ch;
  }

  html[lang="es"] .how-arrow {
    top: 52%;
  }

  html[lang="es"] .how-text-4 {
    margin-bottom: clamp(7rem, 11vw, 13rem);
  }

  html[lang="es"] .view-tick {
    right: 7rem;
  }
}

/* ---------- SPANISH (MOBILE ONLY) ---------- */

@media (max-width: 767px) {
  html[lang="es"] .hero-title {
    max-width: 14ch;
  }

  html[lang="es"] .home-exclamation-left {
    width: 0.9em;
    right: -0.8em;
  }

  html[lang="es"] .view-image-container.is-student .view-tick {
    right: 7rem;
    bottom: 2.8rem;
  }

  html[lang="es"] .mobile-underline-1::after {
    background: url("/images/view-underline-mobile-1.svg") no-repeat center /
      contain;
  }

  html[lang="es"] .mobile-underline-2::after {
    background: url("/images/view-underline-mobile-3.svg") no-repeat center /
      contain;
  }
}

/* ---------- SPANISH (TABLET ONLY) ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
  html[lang="es"] .hero-title {
    max-width: 20ch;
  }

  html[lang="es"] .home-content {
    grid-template-columns: 1.3fr 0.7fr;
  }

  html[lang="es"] .how-arrow {
    top: 50%;
  }

  html[lang="es"] .how-text-4 {
    font-size: 1.7rem;
    margin-bottom: clamp(6rem, 8vw, 8rem);
  }
}

/* ---------- CATALAN (ALL SIZES) ---------- */

html[lang="ca"] .hero-title br {
  display: none;
}

html[lang="ca"] .lose-wrapper > span {
  position: relative;
  z-index: 5;
}

html[lang="ca"] .how-crossout-lose {
  z-index: 1;
}

html[lang="ca"] .how-cross-lose {
  left: 110%;
}

html[lang="ca"] .home-underline-yours {
  left: 0.15em;
  bottom: 0.05em;
}
/* ---------- CATALAN (DESKTOP ONLY) ---------- */

@media (min-width: 1025px) {
  html[lang="ca"] .hero-title {
    max-width: 22ch;
  }

  html[lang="ca"] .home-content {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 1rem;
  }

  html[lang="ca"] .home-exclamation-left {
    right: 0.1em;
  }

  html[lang="ca"] .how-arrow {
    top: 52%;
  }

  html[lang="ca"] .view-arrow {
    top: -17rem;
    left: 12%;
  }

  html[lang="ca"] .form-left h2 {
    font-size: 3.6rem;
    line-height: 1.1;
    max-width: 20ch;
  }

  html[lang="ca"] .form-underline-left {
    width: 70%;
    top: 43%;
    left: 65%;
  }
}

/* ---------- CATALAN (MOBILE ONLY) ---------- */
@media (max-width: 767px) {
  html[lang="ca"] .hero-title {
    width: 14ch;
  }

  html[lang="ca"] .how-cross-lose {
    top: 10%;
    left: 120%;
  }

  html[lang="ca"] .mobile-underline-1::after {
    width: 102%;
    left: -1%;
  }

  html[lang="ca"] .view-image-container.is-student .view-tick {
    right: 7rem;
    bottom: 2.8rem;
  }

  html[lang="ca"] .mobile-underline-1::after {
    background: url("/images/view-underline-mobile-1.svg") no-repeat center /
      contain;
  }

  html[lang="ca"] .mobile-underline-2::after {
    background: url("/images/view-underline-mobile-3.svg") no-repeat center /
      contain;
  }

  html[lang="ca"] .form-left {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  html[lang="ca"] .form-left h2 br:nth-of-type(2) {
    display: none;
  }

  html[lang="ca"] .form-left h2 {
    max-width: 25ch;
    line-height: 1.1;
  }

  html[lang="ca"] .form-underline-left {
    width: 90%;
    top: 43%;
    left: 64%;
  }
}

/* ---------- CATALAN (TABLET ONLY) ---------- */

@media (min-width: 768px) and (max-width: 1024px) {
  html[lang="ca"] .how-arrow {
    top: 50%;
  }
  html[lang="ca"] .how-text-4 br {
    display: none;
  }
  html[lang="ca"] .how-text-4 {
    font-size: 1.7rem;
    margin-bottom: clamp(6rem, 8vw, 8rem);
  }

  html[lang="ca"] .home-exclamation-left {
    right: -0.3em;
  }

  html[lang="ca"] .form-left h2 {
    font-size: clamp(2.8rem, 5vw, 3.8rem); /* igual que tablet.css */
    max-width: none;
    line-height: 1;
  }

  html[lang="ca"] .form-left h2 br {
    display: inline;
  }

  html[lang="ca"] .form-underline-left {
    width: 70%;
    top: 44%;
    left: 65%;
  }
}