@font-face {
  font-family: "Krisha DS";
  src: url("assets/tu-equipo/fonts/KrishaRegular-518Zx.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.te-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(720px, 100svh);
  scroll-margin-top: 74px;
  color: #fff;
  background: #063168;
}
.te-backgrounds, .te-backgrounds img { position: absolute; inset: 0; width: 100%; height: 100%; }
.te-backgrounds { z-index: -2; }
.te-backgrounds img { object-fit: cover; }
.te-layout { position: relative; min-height: inherit; }
.te-copy {
  position: absolute; z-index: 2; left: 7.5%; top: 30%;
  width: 21%; max-width: 350px;
}
.te-title { margin: 0 0 18px; font-family: "Krisha DS", sans-serif; font-weight: 400; line-height: .94; letter-spacing: 0; color: #fff; }
.te-title span { display: block; white-space: nowrap; font-size: clamp(60px, 6.8vw, 136px); }
.te-title .te-title__outline { margin-top: 12px; font-size: clamp(44px, 5vw, 100px); color: transparent; -webkit-text-stroke: 1.2px #fff; }
.te-copy p { margin: 0; max-width: 32ch; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; text-wrap: pretty; }
.te-player { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Fade only the bottom silhouette; shared by the canvas and image fallback.
   Text, CTA and the already-approved background blend are separate siblings. */
.te-player {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, #000d 88%, #0005 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, #000d 88%, #0005 95%, transparent 100%);
}
.te-player__fallback, .te-player canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.te-player__fallback { object-fit: contain; object-position: center bottom; }
.te-player canvas { visibility: hidden; }
.te-player.is-webgl canvas { visibility: visible; }
.te-player.is-webgl .te-player__fallback { visibility: hidden; }
.te-quote { position: absolute; z-index: 2; top: 44%; right: 5.5%; width: 17%; max-width: 290px; text-align: center; }
.te-quote__link { display: block; padding: 20px 10px; background: #fff; color: #171717; border-radius: 7px 7px 0 0; font-size: clamp(16px, 1.4vw, 24px); line-height: 1.2; transition: background-color .2s; }
.te-quote__link:hover { background: #ececec; }
.te-quote__link:focus-visible, .te-pause:focus-visible { outline: 2px solid white; outline-offset: 5px; }
.te-quote__price { margin: 0; padding: 13px 6px; border: 1px solid #ffffff8c; border-top: 0; border-radius: 0 0 7px 7px; font-size: clamp(16px, 1.35vw, 23px); line-height: 1.2; }
.te-pause { position: absolute; z-index: 3; right: 5.5%; bottom: 24px; background: transparent; color: #fff; border: 1px solid #ffffff70; border-radius: 3px; padding: 8px 12px; font: inherit; font-size: 11px; cursor: pointer; }
.te-pause[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  .te-copy { left: 5%; top: 22%; width: 25%; }
  .te-copy p { font-size: 14px; }
  .te-title span { font-size: 70px; }
  .te-title .te-title__outline { font-size: 52px; }
  .te-quote { width: 21%; right: 4%; top: 55%; }
}
@media (max-width: 760px) {
  .te-section { min-height: 100svh; }
  .te-layout { display: flex; flex-direction: column; min-height: 0; }
  .te-copy { position: relative; left: auto; top: auto; width: auto; max-width: 460px; margin: 0 auto; padding: 64px 26px 0; }
  .te-title span { font-size: clamp(70px, 16vw, 104px); }
  .te-title .te-title__outline { font-size: clamp(52px, 11.8vw, 77px); }
  .te-copy p { font-size: 15px; max-width: 36ch; }
  .te-player { position: relative; inset: auto; width: 100%; height: clamp(400px, 115vw, 660px); margin-top: 25px; }
  .te-player__fallback { object-fit: cover; }
  .te-quote { position: relative; top: auto; right: auto; width: min(78%, 330px); max-width: none; margin: 24px auto 88px; }
  .te-quote__link, .te-quote__price { font-size: 20px; }
  .te-pause { right: 26px; }
}