:root {
  --leti-navy: #071b4a;
  --leti-deep-navy: #1d2241;
  --leti-cyan: #0a77a5;
  --leti-blue: #58afe8;
  --leti-light-blue: #6bb6e8;
  --leti-white: #ffffff;
  --leti-cat: #f5f3e9;
  --field-border: #cad5e1;
  --field-placeholder: #818ba0;
  --card-shadow: 0 18px 55px rgba(7, 27, 74, 0.14);
  --font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: var(--font-family);
  color: var(--leti-navy);
  background: var(--leti-white);
}

body {
  min-height: 100vh;
}

.streaming-access {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--leti-white);
}

.background-layer {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-movil {
  position: absolute;
  display: none;
  inset: 0;
  z-index: -2;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-layer {
  position: absolute;
  top: 6.5vh;
  right: 4.6vw;
  z-index: 3;
}

.brand-logo {
  display: block;
  width: clamp(220px, 17vw, 330px);
  height: auto;
}

.event-copy {
  position: absolute;
  left: 3.4vw;
  top: 29.5vh;
  z-index: 2;
  width: min(46vw, 860px);
}

.event-copy p,
.event-copy h1,
.event-copy h2,
.access-card p,
.access-card h2 {
  margin-top: 0;
}

.eyebrow {
  margin-bottom: 5.5vh;
  color: var(--leti-blue);
  font-size: clamp(22px, 2.15vw, 42px);
  font-weight: 700;
  letter-spacing: 0.055em;
}

.event-copy h1 {
  margin-bottom: 2.8vh;
  color: var(--leti-navy);
  font-size: clamp(40px, 4.15vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.event-copy h2 {
  max-width: 850px;
  margin-bottom: 5.6vh;
  color: var(--leti-navy);
  font-size: clamp(24px, 2.3vw, 44px);
  line-height: 1.15;
}

.event-date {
  margin-bottom: 4.7vh;
  color: var(--leti-blue);
  font-size: clamp(22px, 2.3vw, 44px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.speakers {
  display: none;
  margin-bottom: 0;
  color: var(--leti-navy);
  font-size: clamp(22px, 2vw, 38px);
  line-height: 1.25;
}

.access-card {
  position: absolute;
  top: 21.5vh;
  left: 52vw;
  z-index: 4;
  width: min(31vw, 590px);
  padding: clamp(34px, 2.7vw, 54px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.845);
  box-shadow: var(--card-shadow);
  margin-bottom: 100px;
}

.access-card h2 {
  margin-bottom: 1.2vh;
  font-size: clamp(28px, 2.35vw, 46px);
  line-height: 1.05;
}

.access-intro {
  margin-bottom: 3.7vh;
  font-size: clamp(17px, 1.45vw, 28px);
  line-height: 1.35;
}

.access-form {
  display: grid;
  gap: 2vh;
}

.access-form label:not(.privacy-check) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.access-form input[type="text"],
.access-form input[type="email"] {
  width: 100%;
  min-height: clamp(45px, 6.4vh, 76px);
  padding: 0 24px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  outline: none;
  background: var(--leti-white);
  color: var(--leti-navy);
  font: 400 clamp(17px, 1.35vw, 26px)/1 var(--font-family);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.access-form input::placeholder {
  color: var(--field-placeholder);
}

.access-form input:focus {
  border-color: var(--leti-blue);
  box-shadow: 0 0 0 4px rgba(88, 175, 232, 0.18);
}

.access-form button {
  min-height: clamp(50px, 6.8vh, 80px);
  margin-top: 1vh;
  border: 0;
  border-radius: 12px;
  background: var(--leti-blue);
  color: var(--leti-white);
  cursor: pointer;
  font: 700 clamp(16px, 1.25vw, 24px)/1 var(--font-family);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.access-form button:hover {
  filter: brightness(0.94);
}
.access-form button:active {
  transform: translateY(1px);
}

.privacy-check {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 1vh;
  color: var(--leti-navy);
  font-size: clamp(12px, 0.9vw, 17px);
  line-height: 1.35;
}

.privacy-check input {
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--leti-blue);
}

.cat-layer {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(32vw, 610px);
  height: auto;
  pointer-events: none;
}

.ponentes {
  position: absolute;
  width: 22vw;
  left: 0;
  bottom: 0vh;
}

@media (max-width: 1010px) {
  .streaming-access {
    display: flex;
    flex-direction: column;
    gap: 36px;
    min-height: 100vh;
    padding: 36px 28px 70px;
  }

  .brand-layer,
  .event-copy,
  .access-card {
    position: relative;
    inset: auto;
  }

  .brand-layer {
    align-self: flex-end;
  }
  .event-copy {
    width: min(100%, 760px);
  }
  .access-card {
    width: min(100%, 620px);
  }
  .cat-layer {
    width: 26.6vw;
    right: 0;
    bottom: 4.5vh;
  }
  .eyebrow {
    margin-bottom: 28px;
  }
  .event-copy h2,
  .event-date {
    margin-bottom: 28px;
  }

  .speakers {
    display: block;
  }
  .ponentes {
    display: none;
  }
}

@media (max-width: 670px) {
  .streaming-access {
    padding: 24px 18px 48px;
  }
  .brand-logo {
    width: 190px;
  }
  .event-copy h1 {
    font-size: 42px;
  }
  .access-card {
    padding: 28px 22px;
  }
  .cat-layer {
    display: none;
    width: 70vw;
  }
  .background-layer {
    display: none;
  }
  .background-movil {
    display: block;
  }
}

@media (min-width: 1010px) {
  .cat-layer {
    width: 24vw;
    right: 0;
    bottom: 4.5vh;
  }

  .event-copy h1 {
    font-size: 4vw;
    line-height: 1.05;
    margin-bottom: 3.1vh;
    white-space: nowrap;
  }
  .event-copy h2 {
    font-size: 2.55vw;
    line-height: 1.15;
    margin-bottom: 5.3vh;
    white-space: nowrap;
  }

  .ponentes {
    position: absolute;
    width: 22vw;
    left: 0;
    bottom: 0vh;
  }
}

@media (max-width: 960px) {
  .background-layer {
    position: fixed;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cat-layer {
    position: fixed;
    width: 23vw;
    right: 0;
    bottom: 4.5vh;
  }
}