@font-face {
  font-family: "Bebas Smart";
  src: url("./assets/fonts/bebas-regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Barlow Smart";
  src: url("./assets/fonts/barlow-condensed-regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter Smart";
  src: url("./assets/fonts/inter-variable.ttf") format("truetype");
  font-display: swap;
}

:root {
  --rabbit-red: #ff1744;
  --navy: #0b132b;
  --electric: #1e88ff;
  --cyan: #00e5ff;
  --white: #ffffff;
  --soft-white: rgba(255, 255, 255, 0.84);
  --glass: rgba(4, 12, 28, 0.64);
  --glass-strong: rgba(5, 13, 31, 0.88);
  --border-red: rgba(255, 23, 68, 0.68);
  --shadow-red: 0 0 18px rgba(255, 23, 68, 0.74),
    0 0 52px rgba(255, 23, 68, 0.28);
  --font-ui: "Inter Smart", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: "Bebas Smart", "Barlow Smart", Impact, sans-serif;
  --font-condensed: "Barlow Smart", "Arial Narrow", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #020711;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--white);
  font-family: var(--font-ui);
  background: #020711;
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

strong,
b {
  font-weight: 400;
}

.landing-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 22%, rgba(30, 136, 255, 0.2), transparent 27rem),
    linear-gradient(90deg, rgba(2, 7, 17, 0.98) 0%, rgba(2, 7, 17, 0.78) 31%, rgba(2, 7, 17, 0.16) 67%);
}

.planet-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(90deg, rgba(2, 7, 17, 0.48), rgba(2, 7, 17, 0.02)),
    url("./assets/images/planeta.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  opacity: 0.92;
  transform: scale(1.01);
}

.space-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 67% 55%, rgba(255, 23, 68, 0.2), transparent 19rem),
    radial-gradient(circle at 86% 74%, rgba(255, 23, 68, 0.17), transparent 13rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.58));
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 3.3rem) clamp(1.25rem, 4vw, 4rem);
  pointer-events: none;
}

.brand-link {
  display: inline-flex;
  width: clamp(16rem, 23vw, 31rem);
  max-width: 68vw;
  pointer-events: auto;
}

.brand-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
}

.language-menu {
  position: relative;
  pointer-events: auto;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 3.1rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--border-red);
  border-radius: 999px;
  color: var(--white);
  background: rgba(2, 7, 17, 0.62);
  box-shadow: 0 0 18px rgba(255, 23, 68, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.language-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 85, 119, 0.95);
  background: rgba(10, 20, 44, 0.72);
}

.chevron {
  color: var(--rabbit-red);
  font-size: 1.2rem;
  line-height: 1;
}

.language-options {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  display: grid;
  min-width: 11.5rem;
  padding: 0.5rem;
  border: 1px solid rgba(255, 23, 68, 0.46);
  border-radius: 1.1rem;
  background: rgba(3, 9, 22, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 170ms ease, transform 170ms ease, visibility 170ms ease;
}

.language-menu.is-open .language-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.portal-entry-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 999px;
  color: var(--white);
  background: rgba(2, 7, 17, 0.62);
  text-decoration: none;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.18);
  pointer-events: auto;
}

.portal-entry-link:hover,
.portal-entry-link:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.62);
  outline-offset: 3px;
}

.language-options button {
  border: 0;
  border-radius: 0.78rem;
  padding: 0.68rem 0.75rem;
  color: var(--soft-white);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.language-options button:hover {
  color: var(--white);
  background: rgba(255, 23, 68, 0.16);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(41rem, 42vw);
  margin-left: clamp(1.25rem, 4vw, 4rem);
  margin-top: clamp(4.5rem, 11vh, 10rem);
}

.eyebrow {
  margin: 0;
  color: var(--rabbit-red);
  font-family: var(--font-condensed);
  font-size: clamp(1rem, 1.5vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-callout {
  margin-top: clamp(2rem, 4.2vw, 3.6rem);
}

h1 {
  margin: 0;
  font-size: clamp(3.6rem, 7.2vw, 8.9rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.87;
  text-wrap: balance;
}

h1 span {
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-ui);
  font-weight: 380;
  letter-spacing: -0.06em;
}

h1 strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--rabbit-red);
  font-family: var(--font-display);
  font-size: 1.08em;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-shadow: 0 0 18px rgba(255, 23, 68, 0.54), 0 0 46px rgba(255, 23, 68, 0.22);
}

.hero-logo-wordmark {
  width: min(100%, clamp(19rem, 35vw, 43rem));
}

.hero-logo-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.accent-line {
  display: block;
  width: clamp(4rem, 7vw, 7.5rem);
  height: 0.26rem;
  margin: clamp(1.45rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.4vw, 2rem);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rabbit-red), rgba(255, 23, 68, 0));
  box-shadow: var(--shadow-red);
}

.hero-description {
  max-width: 42rem;
  margin: 0;
  color: var(--soft-white);
  font-size: clamp(1.1rem, 1.65vw, 1.78rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.map-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.country-pin {
  --pin-size: clamp(4rem, 5.3vw, 6.6rem);
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--pin-size);
  height: calc(var(--pin-size) * 1.24);
  border: 0;
  padding: 0;
  color: var(--white);
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.country-pin::before {
  content: "";
  position: absolute;
  inset: 0 6% 12%;
  border-radius: 52% 52% 52% 52% / 50% 50% 56% 56%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, rgba(255, 23, 68, 0.95), rgba(115, 19, 41, 0.56));
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.96), 0 0 42px rgba(255, 23, 68, 0.46);
  clip-path: polygon(50% 0%, 86% 14%, 100% 49%, 78% 80%, 55% 80%, 50% 100%, 45% 80%, 22% 80%, 0 49%, 14% 14%);
}

.country-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 14px var(--white), 0 0 25px rgba(255, 23, 68, 0.88);
  transform: translateX(-50%);
}

.country-pin .flag {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--pin-size) * 0.66);
  height: calc(var(--pin-size) * 0.66);
  margin-bottom: calc(var(--pin-size) * 0.18);
  border: 0.2rem solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: #fff;
  font-size: calc(var(--pin-size) * 0.37);
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(3, 9, 22, 0.24);
}

.country-pin.has-image {
  width: calc(var(--pin-size) * 1.05);
  height: calc(var(--pin-size) * 1.22);
}

.country-pin.has-image::before,
.country-pin.has-image::after {
  display: none;
}

.pin-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(255, 23, 68, 0.62))
    drop-shadow(0 0 22px rgba(255, 23, 68, 0.32));
  pointer-events: none;
}

.pin-label {
  position: absolute;
  top: 37%;
  left: calc(100% + 0.58rem);
  z-index: 2;
  color: var(--white);
  font-family: var(--font-condensed);
  font-size: clamp(0.78rem, 1.2vw, 1.24rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
  white-space: nowrap;
}

.pin-salvador .pin-label,
.pin-costa-rica .pin-label,
.pin-ecuador .pin-label {
  left: auto;
  right: calc(50% - 1.5rem);
  top: calc(100% - 0.4rem);
}

.pin-brasil .pin-label {
  top: 48%;
}

.country-pin.has-image .pin-label {
  left: calc(100% + 0.15rem);
}

.pin-mexico.has-image .pin-label {
  left: calc(100% + 0.05rem);
  top: 40%;
}

.pin-honduras.has-image .pin-label {
  left: calc(100% + 0.05rem);
  top: 40%;
}

.pin-costa-rica.has-image .pin-label,
.pin-salvador.has-image .pin-label,
.pin-ecuador.has-image .pin-label {
  left: auto;
  right: calc(48% - 1.5rem);
  top: calc(100% - 0.35rem);
}

.pin-panama.has-image .pin-label {
  left: calc(100% + 0.05rem);
  top: 42%;
}

.country-pin:hover,
.country-pin:focus-visible {
  filter: saturate(1.18) brightness(1.08);
  transform: translate(-50%, -50%) scale(1.07);
}

.country-pin:focus-visible,
.language-toggle:focus-visible,
.language-options button:focus-visible,
.country-grid button:focus-visible,
.modal-close:focus-visible,
.modal-action:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.country-pin.is-coming {
  opacity: 0.72;
}

.country-pin.is-coming::before {
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.62), 0 0 28px rgba(255, 23, 68, 0.25);
  filter: grayscale(0.1);
}

.pin-canada {
  left: 65%;
  top: 12%;
}

.pin-usa {
  left: 65%;
  top: 28%;
}

.pin-mexico {
  left: 56.3%;
  top: 41.3%;
}

.pin-honduras {
  left: 65%;
  top: 45.6%;
}

.pin-salvador {
  left: 53.5%;
  top: 52.3%;
}

.pin-costa-rica {
  left: 63.4%;
  top: 59.1%;
}

.pin-panama {
  left: 70%;
  top: 61.4%;
}

.pin-ecuador {
  left: 77.2%;
  top: 73.4%;
}

.pin-brasil {
  left: 83.9%;
  top: 80.4%;
}

.mobile-country-panel {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(9px);
}

.modal-backdrop[hidden] {
  display: none;
}

.country-modal {
  position: relative;
  width: min(92vw, 34rem);
  padding: clamp(1.55rem, 4vw, 2.3rem);
  border: 1px solid rgba(255, 23, 68, 0.6);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 90% 4%, rgba(255, 23, 68, 0.18), transparent 12rem),
    linear-gradient(145deg, rgba(5, 15, 35, 0.96), rgba(2, 7, 17, 0.96));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.58), 0 0 50px rgba(255, 23, 68, 0.18);
}

.modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

.modal-kicker {
  margin: 0 0 0.45rem;
  color: var(--rabbit-red);
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.country-modal h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 0.96;
}

.country-modal p:not(.modal-kicker) {
  margin: 1.05rem 0 1.45rem;
  color: var(--soft-white);
  font-size: 1.05rem;
  line-height: 1.55;
}

.modal-action {
  width: 100%;
  min-height: 3.1rem;
  border: 1px solid rgba(255, 23, 68, 0.7);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.95), rgba(255, 23, 68, 0.58));
  box-shadow: 0 0 26px rgba(255, 23, 68, 0.26);
  cursor: pointer;
  font-weight: 400;
}

.experience-page {
  background: #020711;
}

.experience-shell {
  --experience-gutter: clamp(2rem, 5vw, 5rem);
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.4rem) clamp(1rem, 2vw, 2.5rem)
    clamp(1rem, 2vw, 1.8rem);
  background: #020711;
}

.experience-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("./assets/images/page2/portada-panda-margen.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 60% center;
  filter: saturate(1.02) contrast(1.02) brightness(0.94);
}

.experience-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 0.78) 0%, rgba(2, 7, 17, 0.38) 36%, rgba(2, 7, 17, 0.1) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(2, 7, 17, 0.01) 48%, rgba(2, 7, 17, 0.78) 84%, #020711 100%),
    radial-gradient(circle at 33% 30%, rgba(0, 229, 255, 0.15), transparent 24rem);
}

.experience-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-left: var(--experience-gutter);
}

.experience-brand {
  width: clamp(12.8rem, 17.6vw, 22.4rem);
  max-width: 50vw;
}

.hamburger-menu {
  display: inline-grid;
  gap: 0.42rem;
  width: 3.8rem;
  min-height: 3rem;
  place-content: center;
  border: 0;
  border-radius: 1rem;
  background: rgba(3, 9, 22, 0.18);
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  width: 2.65rem;
  height: 0.24rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}

.hamburger-menu:hover span,
.hamburger-menu:focus-visible span {
  background: var(--white);
}

.experience-hero {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  width: min(32rem, 34vw);
  margin-top: clamp(1rem, 3.6vh, 3rem);
  margin-left: var(--experience-gutter);
}

.steam-block {
  display: grid;
  justify-items: start;
  width: 100%;
}

.steam-logo-frame {
  width: min(100%, clamp(17rem, 28vw, 30rem));
  overflow: visible;
}

.steam-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42));
}

.impact-card {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.45rem);
  min-width: min(100%, 30rem);
  margin-top: clamp(0.5rem, 1.8vh, 1.25rem);
  padding: clamp(0.85rem, 1.7vw, 1.25rem) clamp(1rem, 2vw, 1.65rem);
  border: 1px solid rgba(0, 229, 255, 0.66);
  border-left-color: rgba(255, 23, 68, 0.76);
  border-radius: 1.15rem;
  background: rgba(2, 7, 17, 0.52);
  box-shadow:
    inset 0 0 24px rgba(0, 229, 255, 0.06),
    0 0 34px rgba(0, 229, 255, 0.14),
    0 0 38px rgba(255, 23, 68, 0.12);
  backdrop-filter: blur(8px);
}

.impact-image-card {
  display: block;
  width: min(100%, clamp(14.8rem, 22.5vw, 21rem));
  min-width: 0;
  margin-top: clamp(0.65rem, 1.6vh, 1.2rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.impact-image-card img {
  display: block;
  width: 100%;
  height: auto;
}

.impact-icon {
  color: var(--rabbit-red);
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  line-height: 1;
}

.impact-icon svg,
.audience-icon svg,
.benefit-item span svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-card p {
  margin: 0;
  display: grid;
  gap: 0.12rem;
}

.impact-card strong {
  font-family: var(--font-condensed);
  font-size: clamp(2.3rem, 4.6vw, 4.9rem);
  line-height: 0.85;
  color: var(--rabbit-red);
  letter-spacing: 0.035em;
  text-shadow: 0 0 16px rgba(255, 23, 68, 0.4), 0 0 22px rgba(30, 136, 255, 0.24);
}

.impact-card span {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(0.98rem, 1.45vw, 1.45rem);
  line-height: 1.15;
}

.audience-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 1vw, 0.95rem);
  margin-top: clamp(2.3rem, 6vh, 5.4rem);
}

.audience-grid.is-teacher-only {
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
}

.audience-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.8rem, 1.2vw, 1.15rem);
  min-height: clamp(5.4rem, 8.5vw, 7rem);
  border: 1px solid rgba(126, 87, 194, 0.5);
  border-radius: 1.25rem;
  color: var(--white);
  background: linear-gradient(135deg, rgba(64, 12, 89, 0.7), rgba(6, 17, 45, 0.68));
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(10px);
}

.audience-card.blue {
  border-color: rgba(30, 90, 255, 0.58);
  background: linear-gradient(135deg, rgba(20, 26, 100, 0.7), rgba(4, 19, 55, 0.68));
}

.audience-card.cyan {
  border-color: rgba(0, 136, 209, 0.58);
  background: linear-gradient(135deg, rgba(4, 54, 99, 0.7), rgba(3, 21, 52, 0.68));
}

.audience-card.magenta {
  border-color: rgba(236, 64, 170, 0.58);
  background: linear-gradient(135deg, rgba(88, 16, 92, 0.7), rgba(4, 17, 45, 0.68));
}

.audience-icon {
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 5.3vw, 5rem);
  height: clamp(3.4rem, 5.3vw, 5rem);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.18), rgba(126, 87, 194, 0.28));
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1;
}

.audience-card strong {
  display: block;
  margin-bottom: 0.32rem;
  font-size: clamp(1.02rem, 1.45vw, 1.35rem);
  font-weight: 400;
  line-height: 1.05;
}

.audience-card small {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  line-height: 1.42;
}

.audience-card em {
  color: rgba(255, 255, 255, 0.76);
  font-style: normal;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.audience-card:hover,
.audience-card:focus-visible,
.hamburger-menu:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.72);
  outline-offset: 4px;
}

.benefits-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(91vw, 110rem);
  margin: clamp(0.7rem, 1.2vw, 1rem) auto 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.35rem;
  background: rgba(4, 14, 31, 0.56);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.benefit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  min-height: clamp(4.5rem, 7vw, 6.5rem);
  padding: 0.9rem;
}

.benefit-item + .benefit-item {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.benefit-item span {
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
}

.benefit-item.red span,
.benefit-item.red strong {
  color: var(--rabbit-red);
}

.benefit-item.cyan span {
  color: var(--cyan);
}

.benefit-item.orange span {
  color: #ff8a00;
}

.benefit-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.98rem, 1.6vw, 1.35rem);
  line-height: 1.22;
}

.experience-closing {
  position: relative;
  z-index: 3;
  margin: clamp(0.75rem, 1.3vw, 1.15rem) auto 0;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  letter-spacing: 0.01em;
}

.experience-closing strong {
  color: var(--rabbit-red);
  font-weight: 400;
}

.teacher-page {
  background: #020711;
}

.teacher-shell {
  --teacher-gutter: clamp(2rem, 4.2vw, 5.2rem);
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.4rem) clamp(1rem, 2vw, 2.5rem)
    clamp(1rem, 2vw, 1.8rem);
  background: #020711;
}

.teacher-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("./assets/images/page3/jaguar.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: saturate(1.08) contrast(1.05);
}

.teacher-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 0.9) 0%, rgba(2, 7, 17, 0.74) 37%, rgba(2, 7, 17, 0.18) 74%),
    linear-gradient(180deg, rgba(2, 7, 17, 0.08) 0%, rgba(2, 7, 17, 0.08) 55%, rgba(2, 7, 17, 0.88) 88%, #020711 100%),
    radial-gradient(circle at 58% 13%, rgba(0, 229, 255, 0.16), transparent 24rem);
}

.teacher-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-left: var(--teacher-gutter);
}

.teacher-brand {
  width: clamp(16rem, 22vw, 28rem);
  max-width: 62vw;
}

.teacher-hero {
  position: relative;
  z-index: 2;
  width: min(58rem, 52vw);
  margin-top: clamp(2.2rem, 7vh, 5.5rem);
  margin-left: var(--teacher-gutter);
}

.steam-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 1.6vw, 1.6rem);
  margin: 0 0 clamp(1rem, 1.8vw, 1.55rem);
  font-family: var(--font-ui);
  font-size: clamp(0.92rem, 1.15vw, 1.18rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.steam-blue {
  color: #8bd800;
}

.steam-cyan {
  color: var(--cyan);
}

.steam-orange {
  color: #ff8a00;
}

.steam-purple {
  color: #8b32ff;
}

.teacher-hero h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-ui);
  font-size: clamp(3rem, 4.35vw, 5.45rem);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 1.13;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.46);
}

.teacher-hero h1 span {
  display: block;
  font: inherit;
  letter-spacing: inherit;
}

.teacher-hero h1 .teacher-steam-line {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1vw, 1rem);
  margin: 0.03em 0 0.01em;
  white-space: nowrap;
}

.teacher-steam-logo {
  display: block;
  width: clamp(10rem, 18vw, 22rem);
  max-width: 48%;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.26));
}

.teacher-hero h1 .teacher-steam-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.teacher-copy {
  margin-top: clamp(1.15rem, 2vw, 1.75rem);
  display: grid;
  gap: 0.7rem;
}

.teacher-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  line-height: 1.38;
}

.teacher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

.advisor-button,
.how-button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.35rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid rgba(0, 229, 255, 0.7);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.86), rgba(0, 229, 255, 0.38));
  box-shadow: 0 0 26px rgba(0, 229, 255, 0.16), 0 0 26px rgba(255, 23, 68, 0.12);
  cursor: pointer;
  font-weight: 400;
}

.how-button {
  border-color: rgba(139, 216, 0, 0.74);
  background: linear-gradient(90deg, rgba(139, 216, 0, 0.82), rgba(0, 229, 255, 0.32));
  box-shadow: 0 0 26px rgba(139, 216, 0, 0.14), 0 0 26px rgba(0, 229, 255, 0.12);
}

.advisor-button span,
.how-button span {
  font-size: 1.7rem;
  line-height: 0;
}

.advisor-button:hover,
.advisor-button:focus-visible,
.how-button:hover,
.how-button:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.78);
  outline-offset: 4px;
}

.teacher-next-cue {
  position: absolute;
  right: var(--teacher-gutter);
  bottom: clamp(8.3rem, 9.4vw, 10.4rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.2rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(0, 229, 255, 0.68);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(4, 14, 31, 0.64);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.teacher-next-cue em {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.62);
  font-style: normal;
  line-height: 1;
  animation: scrollNudge 1.55s ease-in-out infinite;
}

.teacher-next-cue:hover,
.teacher-next-cue:focus-visible {
  outline: 2px solid rgba(139, 216, 0, 0.72);
  outline-offset: 4px;
  background: rgba(5, 24, 44, 0.76);
}

.teacher-benefits {
  position: absolute;
  left: var(--teacher-gutter);
  right: var(--teacher-gutter);
  bottom: clamp(1.6rem, 3.2vw, 3rem);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(4, 14, 31, 0.58);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.teacher-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  min-height: clamp(4.5rem, 6.8vw, 6.4rem);
  padding: 0.95rem 1rem;
}

.teacher-benefit + .teacher-benefit {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.teacher-benefit span {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 3.5vw, 3.6rem);
  height: clamp(2.6rem, 3.5vw, 3.6rem);
  flex: 0 0 auto;
  border: 2px solid var(--cyan);
  border-radius: 999px;
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.24);
}

.teacher-benefit svg {
  display: block;
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.teacher-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  line-height: 1.22;
}

.how-page {
  background: #020711;
}

.how-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.2rem) clamp(1rem, 2.2vw, 2.8rem)
    clamp(1.2rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.08), transparent 22rem),
    radial-gradient(circle at 92% 38%, rgba(236, 64, 170, 0.07), transparent 24rem),
    #020711;
}

.how-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 7, 17, 0.25), rgba(2, 7, 17, 0.92)),
    radial-gradient(circle at 22% 25%, rgba(139, 216, 0, 0.08), transparent 18rem);
}

.how-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.how-brand {
  width: clamp(14rem, 18vw, 22rem);
  max-width: 58vw;
}

.how-intro {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto clamp(1rem, 1.8vw, 1.6rem);
}

.how-intro h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-condensed);
  font-size: clamp(3rem, 5.4vw, 6.35rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.how-intro p {
  margin: clamp(0.65rem, 1.1vw, 0.95rem) 0 0;
  color: var(--cyan);
  font-size: clamp(1.05rem, 1.55vw, 1.7rem);
  line-height: 1.28;
}

.how-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.7vw, 1.7rem);
  align-items: stretch;
}

.how-card {
  margin: 0;
}

.how-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.8rem, 1.6vw, 1.4rem);
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.32));
}

.how-closing {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: min(74rem, 76vw);
  margin: clamp(1rem, 1.7vw, 1.55rem) auto 0;
  padding: clamp(0.7rem, 1vw, 0.95rem) clamp(1rem, 2vw, 1.9rem);
  border: 1px solid rgba(139, 216, 0, 0.6);
  border-right-color: rgba(0, 229, 255, 0.62);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(3, 12, 27, 0.66);
  box-shadow: inset 0 0 26px rgba(0, 229, 255, 0.04), 0 0 24px rgba(139, 216, 0, 0.08);
  text-align: center;
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  line-height: 1.25;
}

.how-closing span {
  color: #9ee400;
  font-size: 1.25em;
  flex: 0 0 auto;
}

.how-closing strong:first-of-type {
  color: var(--cyan);
}

.how-closing strong:last-of-type {
  color: #9ee400;
}

.how-closing em {
  color: var(--white);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.how-actions {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: clamp(0.9rem, 1.5vw, 1.25rem);
}

.operation-button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.35rem;
  padding: 0.85rem 1.45rem;
  border: 1px solid rgba(0, 229, 255, 0.74);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.82), rgba(0, 229, 255, 0.36));
  box-shadow: 0 0 26px rgba(0, 229, 255, 0.15), 0 0 22px rgba(255, 23, 68, 0.12);
  cursor: pointer;
  font-weight: 400;
}

.operation-button span {
  font-size: 1.7rem;
  line-height: 0;
}

.operation-button:hover,
.operation-button:focus-visible {
  outline: 2px solid rgba(139, 216, 0, 0.72);
  outline-offset: 4px;
}

.operation-actions {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(0.9rem, 1.5vw, 1.25rem);
}

.modules-button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.35rem;
  padding: 0.85rem 1.45rem;
  border: 1px solid rgba(158, 228, 0, 0.72);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(90deg, rgba(139, 216, 0, 0.8), rgba(0, 229, 255, 0.32));
  box-shadow: 0 0 26px rgba(139, 216, 0, 0.14), 0 0 22px rgba(0, 229, 255, 0.12);
  cursor: pointer;
  font-weight: 400;
}

.modules-button span {
  font-size: 1.7rem;
  line-height: 0;
}

.modules-button:hover,
.modules-button:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.72);
  outline-offset: 4px;
}

.portal-action-link {
  text-decoration: none;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.62), rgba(255, 23, 68, 0.32));
}

.operation-page {
  background: #020711;
}

.operation-shell {
  position: relative;
  min-height: 100svh;
  overflow: auto;
  isolation: isolate;
  padding: clamp(1rem, 2.1vw, 2.35rem) clamp(1rem, 3vw, 3.6rem)
    clamp(1.1rem, 2vw, 2rem);
  background: #020711;
}

.operation-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("./assets/images/page5/imagen-oscuro.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  opacity: 0.88;
}

.operation-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 0.96) 0%, rgba(2, 7, 17, 0.76) 42%, rgba(2, 7, 17, 0.18) 100%),
    linear-gradient(180deg, rgba(2, 7, 17, 0.04) 0%, rgba(2, 7, 17, 0.5) 72%, rgba(2, 7, 17, 0.94) 100%),
    radial-gradient(circle at 62% 30%, rgba(0, 229, 255, 0.16), transparent 25rem);
}

.operation-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.operation-brand {
  width: clamp(13rem, 17vw, 21rem);
  max-width: 56vw;
}

.operation-intro {
  position: relative;
  z-index: 3;
  width: min(78rem, 86vw);
  margin-top: clamp(1.8rem, 5vh, 4.2rem);
}

.operation-intro h1 {
  margin: clamp(0.8rem, 1.2vw, 1.1rem) 0 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(3rem, 5.6vw, 7.35rem);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.94;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.operation-intro > p:not(.steam-kicker) {
  margin: clamp(0.7rem, 1.3vw, 1.15rem) 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.5vw, 1.65rem);
  line-height: 1.3;
}

.operation-steps {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.4rem);
}

.operation-step {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
  min-height: clamp(9rem, 13vw, 12rem);
  padding: clamp(1rem, 1.7vw, 1.55rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(5, 17, 38, 0.66);
  backdrop-filter: blur(10px);
}

.step-red {
  border-color: rgba(255, 23, 68, 0.64);
  box-shadow: inset 0 0 24px rgba(255, 23, 68, 0.03);
}

.step-cyan {
  border-color: rgba(0, 229, 255, 0.58);
  box-shadow: inset 0 0 24px rgba(0, 229, 255, 0.03);
}

.step-green {
  border-color: rgba(158, 228, 0, 0.6);
  box-shadow: inset 0 0 24px rgba(158, 228, 0, 0.03);
}

.step-number {
  display: grid;
  place-items: center;
  width: clamp(2.45rem, 3.2vw, 3.25rem);
  height: clamp(2.45rem, 3.2vw, 3.25rem);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: clamp(1.15rem, 1.8vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
}

.step-icon {
  color: currentColor;
  width: clamp(3.1rem, 4.2vw, 4.8rem);
}

.step-icon svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-red {
  color: var(--rabbit-red);
}

.step-cyan {
  color: var(--cyan);
}

.step-green {
  color: #9ee400;
}

.operation-step h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.28rem, 1.9vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.operation-step p {
  margin: clamp(0.55rem, 1vw, 0.85rem) 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.98rem, 1.25vw, 1.28rem);
  line-height: 1.42;
}

.operation-details {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(19rem, 0.86fr) minmax(24rem, 1.14fr);
  gap: clamp(0.95rem, 1.6vw, 1.4rem);
  margin-top: clamp(1.2rem, 2vw, 1.9rem);
}

.price-panel,
.capacity-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  background: rgba(5, 17, 38, 0.68);
  box-shadow: inset 0 0 24px rgba(0, 229, 255, 0.03);
  backdrop-filter: blur(10px);
}

.price-panel {
  padding: clamp(1rem, 1.7vw, 1.55rem);
}

.panel-kicker {
  margin: 0 0 0.35rem;
  color: var(--cyan);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-panel h2,
.capacity-panel h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.65rem, 2.4vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.price-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.25vw, 1.15rem);
  margin-top: clamp(1rem, 1.5vw, 1.35rem);
}

.price-card {
  min-height: clamp(8.2rem, 11vw, 10.6rem);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.85rem;
  text-align: center;
  background: rgba(8, 16, 40, 0.48);
}

.price-one {
  border-color: rgba(255, 23, 68, 0.72);
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.16), rgba(5, 17, 38, 0.48));
}

.price-two {
  border-color: rgba(0, 229, 255, 0.64);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.13), rgba(5, 17, 38, 0.48));
}

.price-card p {
  margin: 0;
  font-weight: 400;
  font-size: clamp(0.98rem, 1.2vw, 1.2rem);
}

.price-one p {
  color: var(--rabbit-red);
}

.price-two p {
  color: var(--cyan);
}

.price-card strong {
  color: var(--white);
  font-size: clamp(3rem, 5vw, 5.3rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.price-card span {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
}

.price-note {
  margin: clamp(0.9rem, 1.4vw, 1.25rem) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  line-height: 1.35;
}

.country-contact {
  margin-top: clamp(1rem, 1.7vw, 1.45rem);
  padding: clamp(1rem, 1.7vw, 1.45rem);
  border: 2px solid rgba(0, 229, 255, 0.42);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(4, 12, 28, 0.72) 48%),
    rgba(4, 12, 28, 0.72);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 0 24px rgba(255, 255, 255, 0.04);
}

.country-contact[hidden] {
  display: none;
}

.country-contact p {
  margin: 0 0 0.35rem;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-contact h3 {
  margin: 0 0 clamp(0.8rem, 1.2vw, 1.05rem);
  color: var(--white);
  font-size: clamp(1.25rem, 1.65vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.country-contact-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.country-contact-link {
  display: grid;
  gap: 0.18rem;
  min-height: 4.3rem;
  padding: 0.82rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.78rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.country-contact-link.whatsapp {
  border-color: rgba(37, 211, 102, 0.55);
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.24), rgba(255, 255, 255, 0.07));
}

.country-contact-link.email {
  border-color: rgba(0, 229, 255, 0.36);
}

.country-contact-link span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-contact-link strong {
  color: var(--white);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  font-weight: 900;
  line-height: 1.2;
}

.country-contact-link:hover,
.country-contact-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 229, 255, 0.14);
}

.capacity-panel {
  display: grid;
  grid-template-columns: 1fr minmax(11rem, 16rem);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
  padding: clamp(1rem, 1.7vw, 1.55rem);
}

.capacity-copy ul {
  display: grid;
  gap: clamp(0.65rem, 1.2vw, 1.05rem);
  margin: clamp(1rem, 1.5vw, 1.35rem) 0 0;
  padding: 0;
  list-style: none;
}

.capacity-copy li {
  position: relative;
  padding-left: 1.35rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.32rem);
  line-height: 1.35;
}

.capacity-copy li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #9ee400;
  box-shadow: 0 0 12px rgba(158, 228, 0, 0.52);
}

.capacity-box {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.18rem;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(158, 228, 0, 0.72);
  border-radius: 0.95rem;
  color: #9ee400;
  text-align: center;
  background: rgba(4, 12, 28, 0.52);
  box-shadow: inset 0 0 22px rgba(158, 228, 0, 0.04);
}

.capacity-box svg {
  width: clamp(3.4rem, 4.6vw, 5rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capacity-box p,
.capacity-box span {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.55vw, 1.7rem);
  line-height: 1.12;
}

.capacity-box strong {
  font-size: clamp(4.2rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.08em;
}

.modules-page {
  background: #020711;
}

.modules-shell {
  position: relative;
  min-height: 100svh;
  overflow: auto;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.2rem) clamp(1rem, 3vw, 3.5rem)
    clamp(1.2rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.09), transparent 20rem),
    radial-gradient(circle at 82% 32%, rgba(139, 216, 0, 0.08), transparent 22rem),
    radial-gradient(circle at 22% 68%, rgba(255, 23, 68, 0.08), transparent 23rem),
    #020711;
}

.modules-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 7, 17, 0.18), rgba(2, 7, 17, 0.88)),
    radial-gradient(circle at 50% 15%, rgba(30, 136, 255, 0.08), transparent 28rem);
}

.modules-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.modules-brand {
  width: clamp(13rem, 17vw, 21rem);
  max-width: 56vw;
}

.modules-intro {
  position: relative;
  z-index: 2;
  width: min(100%, 78rem);
  margin: clamp(0.7rem, 1.4vw, 1.3rem) auto clamp(1.1rem, 2vw, 1.8rem);
  text-align: center;
}

.modules-intro h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(2.8rem, 5.4vw, 6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.42);
}

.modules-intro h1 span {
  display: inline-block;
  background: linear-gradient(90deg, #9ee400, #00e5ff 45%, #ff8a00 68%, #7e57c2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.modules-intro p {
  margin: clamp(0.45rem, 0.9vw, 0.75rem) 0 0;
  color: var(--cyan);
  font-size: clamp(1.05rem, 1.55vw, 1.65rem);
  line-height: 1.28;
}

.modules-intro small {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.95rem, 1.25vw, 1.25rem);
  line-height: 1.3;
}

.modules-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.5vw, 1.35rem);
  width: min(82rem, 78vw);
  margin: 0 auto;
}

.module-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: clamp(1rem, 1.8vw, 1.5rem);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 180ms ease, filter 180ms ease;
}

.module-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.34));
}

.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-4px);
  outline: 2px solid rgba(0, 229, 255, 0.58);
  outline-offset: 4px;
  filter: saturate(1.08);
}

.module-two:hover,
.module-two:focus-visible {
  outline-color: rgba(158, 228, 0, 0.66);
}

.module-three:hover,
.module-three:focus-visible {
  outline-color: rgba(255, 23, 68, 0.7);
}

.module-four:hover,
.module-four:focus-visible {
  outline-color: rgba(126, 87, 194, 0.76);
}

.programs-page {
  background: #020711;
}

.programs-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.2rem) clamp(1rem, 3vw, 3.5rem)
    clamp(1.2rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 78% -10%, rgba(0, 229, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 44% 52%, rgba(0, 229, 255, 0.08), transparent 20rem),
    #020711;
}

.programs-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% -2%, transparent 0 14rem, rgba(0, 229, 255, 0.82) 14.08rem, transparent 14.25rem),
    radial-gradient(circle at 88% 0%, rgba(0, 229, 255, 0.22), transparent 18rem),
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.08), transparent 0.08rem),
    radial-gradient(circle at 86% 28%, rgba(255, 255, 255, 0.1), transparent 0.07rem),
    radial-gradient(circle at 65% 18%, rgba(255, 255, 255, 0.09), transparent 0.06rem),
    linear-gradient(180deg, rgba(2, 7, 17, 0.1), rgba(2, 7, 17, 0.92));
}

.programs-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 7, 17, 0.98) 0%, rgba(2, 7, 17, 0.8) 43%, rgba(2, 7, 17, 0.28) 100%);
}

.programs-header {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
}

.programs-brand {
  width: clamp(13rem, 17vw, 21rem);
  max-width: 56vw;
}

.programs-hero {
  position: relative;
  z-index: 2;
  width: min(48rem, 46vw);
  margin-top: clamp(1.5rem, 5vh, 4.6rem);
}

.back-to-modules {
  display: inline-flex;
  align-items: center;
  min-height: 2.7rem;
  padding: 0.55rem 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  border: 1px solid rgba(0, 229, 255, 0.38);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(4, 14, 31, 0.52);
  text-decoration: none;
  font-weight: 400;
}

.back-to-modules:hover,
.back-to-modules:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.62);
  outline-offset: 3px;
}

.programs-hero > p {
  margin: 0;
  color: var(--cyan);
  font-size: clamp(1.3rem, 2.2vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.programs-hero h1 {
  margin: clamp(0.45rem, 1vw, 0.7rem) 0 0;
  color: rgba(255, 255, 255, 0.97);
  font-size: clamp(3.2rem, 5.7vw, 7rem);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.42);
}

.programs-hero > span {
  display: block;
  margin-top: clamp(0.8rem, 1.45vw, 1.35rem);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.35vw, 1.45rem);
  line-height: 1.42;
}

.age-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.15rem;
  margin-top: clamp(1rem, 2vw, 1.65rem);
  padding: 0.62rem 1.2rem;
  border: 1px solid rgba(0, 229, 255, 0.58);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(4, 14, 31, 0.52);
  font-weight: 400;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  letter-spacing: 0.04em;
}

.age-pill svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.programs-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.25vw, 1.05rem);
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
}

.program-card {
  position: relative;
  min-height: clamp(9rem, 13vw, 13rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35rem;
  padding: clamp(1rem, 1.6vw, 1.45rem);
  border: 1px solid rgba(0, 229, 255, 0.48);
  border-radius: 0.72rem;
  color: var(--white);
  background: rgba(4, 14, 31, 0.72);
  cursor: pointer;
  text-align: left;
  isolation: isolate;
}

.program-01,
.program-02,
.program-03 {
  grid-column: span 2;
}

.program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2, 7, 17, 0.88) 0%, rgba(2, 7, 17, 0.64) 42%, rgba(2, 7, 17, 0.04) 100%);
}

.program-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 220ms ease, filter 220ms ease;
}

.program-card span {
  color: var(--cyan);
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  font-weight: 400;
  line-height: 1;
}

.program-card h2 {
  width: min(100%, 21rem);
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58);
}

.program-card i {
  display: block;
  width: 2.15rem;
  height: 0.18rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.52);
}

.program-card:hover,
.program-card:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.62);
  outline-offset: 3px;
}

.program-card:hover img,
.program-card:focus-visible img {
  transform: scale(1.055);
  filter: saturate(1.08);
}

.module-two-page .programs-shell,
.module-three-page .programs-shell {
  background:
    radial-gradient(circle at 78% -10%, rgba(158, 228, 0, 0.12), transparent 28rem),
    radial-gradient(circle at 44% 52%, rgba(158, 228, 0, 0.06), transparent 20rem),
    #020711;
}

.module-two-page .programs-shell::before,
.module-three-page .programs-shell::before {
  background:
    radial-gradient(circle at 92% -2%, transparent 0 14rem, rgba(158, 228, 0, 0.78) 14.08rem, transparent 14.25rem),
    radial-gradient(circle at 88% 0%, rgba(158, 228, 0, 0.2), transparent 18rem),
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.08), transparent 0.08rem),
    radial-gradient(circle at 86% 28%, rgba(255, 255, 255, 0.1), transparent 0.07rem),
    radial-gradient(circle at 65% 18%, rgba(255, 255, 255, 0.09), transparent 0.06rem),
    linear-gradient(180deg, rgba(2, 7, 17, 0.1), rgba(2, 7, 17, 0.92));
}

.module-two-page .back-to-modules,
.module-three-page .back-to-modules,
.module-two-page .age-pill,
.module-three-page .age-pill,
.module-two-page .program-card,
.module-three-page .program-card {
  border-color: rgba(158, 228, 0, 0.58);
}

.module-two-page .back-to-modules,
.module-three-page .back-to-modules,
.module-two-page .programs-hero > p,
.module-three-page .programs-hero > p,
.module-two-page .age-pill,
.module-three-page .age-pill,
.module-two-page .program-card span,
.module-three-page .program-card span {
  color: #9ee400;
}

.module-two-page .back-to-modules:hover,
.module-two-page .back-to-modules:focus-visible,
.module-three-page .back-to-modules:hover,
.module-three-page .back-to-modules:focus-visible,
.module-two-page .program-card:hover,
.module-two-page .program-card:focus-visible,
.module-three-page .program-card:hover,
.module-three-page .program-card:focus-visible {
  outline-color: rgba(158, 228, 0, 0.66);
}

.module-two-page .program-card i,
.module-three-page .program-card i {
  background: #9ee400;
  box-shadow: 0 0 12px rgba(158, 228, 0, 0.52);
}

.module-four-page .programs-shell {
  background:
    radial-gradient(circle at 78% -10%, rgba(30, 136, 255, 0.14), transparent 28rem),
    radial-gradient(circle at 44% 52%, rgba(126, 87, 194, 0.08), transparent 20rem),
    #020711;
}

.module-four-page .programs-shell::before {
  background:
    radial-gradient(circle at 92% -2%, transparent 0 14rem, rgba(30, 136, 255, 0.76) 14.08rem, transparent 14.25rem),
    radial-gradient(circle at 88% 0%, rgba(126, 87, 194, 0.2), transparent 18rem),
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.08), transparent 0.08rem),
    radial-gradient(circle at 86% 28%, rgba(255, 255, 255, 0.1), transparent 0.07rem),
    radial-gradient(circle at 65% 18%, rgba(255, 255, 255, 0.09), transparent 0.06rem),
    linear-gradient(180deg, rgba(2, 7, 17, 0.1), rgba(2, 7, 17, 0.92));
}

.module-four-page .back-to-modules,
.module-four-page .age-pill,
.module-four-page .program-card {
  border-color: rgba(30, 136, 255, 0.58);
}

.module-four-page .back-to-modules,
.module-four-page .programs-hero > p,
.module-four-page .age-pill,
.module-four-page .program-card span {
  color: #1e88ff;
}

.module-four-page .back-to-modules:hover,
.module-four-page .back-to-modules:focus-visible,
.module-four-page .program-card:hover,
.module-four-page .program-card:focus-visible {
  outline-color: rgba(30, 136, 255, 0.66);
}

.module-four-page .program-card i {
  background: #1e88ff;
  box-shadow: 0 0 12px rgba(30, 136, 255, 0.52);
}

.program-04,
.program-05 {
  min-height: clamp(10rem, 14vw, 14.2rem);
}

.program-04 {
  grid-column: span 3;
}

.program-05 {
  grid-column: span 3;
}

.programs-grid-two .program-card {
  grid-column: span 3;
}

.experience-detail-page {
  background: #020711;
}

.experience-detail-shell {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 2vw, 2.4rem);
  background:
    radial-gradient(circle at 24% 34%, rgba(158, 228, 0, 0.12), transparent 25rem),
    radial-gradient(circle at 92% 6%, rgba(0, 229, 255, 0.18), transparent 29rem),
    linear-gradient(135deg, #020711 0%, #031321 54%, #020711 100%);
}

.experience-detail-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 14%, rgba(158, 228, 0, 0.12), transparent 18rem),
    linear-gradient(90deg, rgba(2, 7, 17, 0.96), rgba(2, 7, 17, 0.78));
}

.experience-detail-header {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.7rem);
}

.experience-detail-brand {
  width: clamp(12.5rem, 17vw, 20rem);
  max-width: 58vw;
}

.experience-detail-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 0.95fr) minmax(22rem, 1.05fr);
  gap: clamp(1rem, 2vw, 1.45rem);
  width: min(100%, 112rem);
  margin: 0 auto;
}

.experience-detail-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.48);
  border-radius: 1.25rem;
  background: rgba(2, 17, 18, 0.74);
  box-shadow:
    inset 0 0 38px rgba(158, 228, 0, 0.08),
    0 0 34px rgba(0, 229, 255, 0.12);
  backdrop-filter: blur(10px);
}

.experience-summary-card {
  display: grid;
  align-content: start;
}

.experience-image-wrap {
  position: relative;
  min-height: clamp(17rem, 29vw, 28rem);
  overflow: hidden;
  background: #051009;
}

.experience-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
}

.experience-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 17, 0.02) 0%, rgba(2, 7, 17, 0.04) 62%, rgba(2, 7, 17, 0.42) 100%),
    linear-gradient(90deg, rgba(2, 7, 17, 0.12) 0%, rgba(2, 7, 17, 0.02) 46%, rgba(2, 7, 17, 0.06) 100%);
}

.experience-title-block {
  position: relative;
  display: grid;
  justify-items: start;
  padding: clamp(1rem, 1.8vw, 1.55rem) clamp(1.1rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(158, 228, 0, 0.22);
  background:
    radial-gradient(circle at 12% 20%, rgba(158, 228, 0, 0.1), transparent 16rem),
    rgba(2, 17, 18, 0.86);
}

.experience-title-block p {
  margin: 0 0 clamp(0.45rem, 0.8vw, 0.7rem);
  color: #9ee400;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  font-weight: 400;
}

.experience-title-block h1 {
  max-width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(2.25rem, 3.8vw, 4.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.58);
}

.experience-title-block > span {
  display: block;
  max-width: 30rem;
  margin-top: clamp(0.45rem, 0.85vw, 0.75rem);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.98rem, 1.25vw, 1.22rem);
  line-height: 1.35;
}

.experience-age {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.95rem;
  margin-top: clamp(0.75rem, 1.2vw, 1rem);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(158, 228, 0, 0.7);
  border-radius: 999px;
  color: #9ee400;
  background: rgba(5, 24, 10, 0.54);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
}

.experience-age svg,
.experience-tags svg,
.experience-info-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.experience-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1vw, 0.9rem);
  padding: clamp(0.75rem, 1.35vw, 1rem);
}

.experience-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-height: 3.45rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(158, 228, 0, 0.58);
  border-radius: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(5, 24, 10, 0.44);
  font-weight: 400;
  text-align: center;
}

.experience-tags span svg {
  color: #9ee400;
  flex: 0 0 auto;
}

.experience-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.15vw, 1rem);
  padding: 0 clamp(0.75rem, 1.35vw, 1rem) clamp(0.75rem, 1.35vw, 1rem);
}

.experience-secondary-action,
.experience-primary-action {
  min-height: 3.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 0.9rem;
  text-decoration: none;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.experience-secondary-action {
  border: 1px solid rgba(158, 228, 0, 0.58);
  color: #9ee400;
  background: rgba(5, 24, 10, 0.4);
}

.experience-primary-action {
  border: 1px solid rgba(158, 228, 0, 0.92);
  color: #f8ffe8;
  background: linear-gradient(135deg, rgba(158, 228, 0, 0.98), rgba(94, 185, 0, 0.92));
  box-shadow: 0 0 26px rgba(158, 228, 0, 0.22);
}

.experience-secondary-action:hover,
.experience-secondary-action:focus-visible,
.experience-primary-action:hover,
.experience-primary-action:focus-visible {
  outline: 2px solid rgba(158, 228, 0, 0.7);
  outline-offset: 3px;
}

.experience-info-card {
  padding: clamp(1.15rem, 2vw, 2rem);
}

.experience-info-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 1.7vw, 1.5rem);
  align-items: start;
  padding: clamp(1rem, 2vw, 1.8rem) 0;
}

.experience-info-row:first-child {
  padding-top: 0;
}

.experience-info-row + .experience-info-row {
  border-top: 1px solid rgba(158, 228, 0, 0.35);
}

.experience-info-icon {
  display: grid;
  place-items: center;
  width: clamp(4rem, 6vw, 6rem);
  height: clamp(4rem, 6vw, 6rem);
  border: 1px solid rgba(158, 228, 0, 0.58);
  border-radius: 999px;
  color: #9ee400;
  background: rgba(5, 24, 10, 0.44);
}

.experience-info-icon svg {
  width: 52%;
  height: 52%;
}

.experience-info-row h2 {
  margin: 0 0 0.55rem;
  color: #9ee400;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.experience-info-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.35vw, 1.34rem);
  line-height: 1.52;
}

@keyframes scrollNudge {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (max-width: 1180px) {
  .landing-shell {
    background:
      radial-gradient(circle at 70% 21%, rgba(30, 136, 255, 0.18), transparent 23rem),
      linear-gradient(90deg, rgba(2, 7, 17, 0.98) 0%, rgba(2, 7, 17, 0.8) 38%, rgba(2, 7, 17, 0.22) 82%);
  }

  .planet-bg {
    background-position: 65% center;
  }

  .hero-copy {
    width: min(35rem, 47vw);
    margin-top: clamp(3rem, 9vh, 6rem);
  }

  .country-pin {
    --pin-size: clamp(3.25rem, 5.2vw, 5.2rem);
  }

  .pin-label {
    font-size: clamp(0.7rem, 1.35vw, 1rem);
  }

  .experience-shell {
    overflow: auto;
  }

  .experience-bg {
    background-position: 60% center;
  }

  .experience-hero {
    width: min(32rem, 42vw);
    margin-top: clamp(1.5rem, 5vh, 3.5rem);
    margin-left: var(--experience-gutter);
  }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefits-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .benefit-item:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .teacher-shell {
    overflow: auto;
  }

  .teacher-bg {
    background-position: 58% center;
  }

  .teacher-hero {
    width: min(48rem, 61vw);
    margin-top: clamp(2.4rem, 6vh, 4.8rem);
  }

  .teacher-hero h1 {
    font-size: clamp(2.75rem, 5.2vw, 4.6rem);
  }

  .teacher-benefits {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: clamp(2.5rem, 5vw, 4rem) var(--teacher-gutter) 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-next-cue {
    position: relative;
    right: auto;
    bottom: auto;
    margin: clamp(1.5rem, 3vw, 2rem) var(--teacher-gutter) 0 auto;
  }

  .teacher-benefit:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .teacher-benefit:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .how-shell {
    overflow: auto;
  }

  .how-header {
    margin-bottom: 1rem;
  }

  .how-cards {
    gap: 0.9rem;
  }

  .how-closing {
    width: min(100%, 62rem);
    border-radius: 1.4rem;
  }

  .operation-shell {
    overflow: auto;
  }

  .operation-intro {
    width: min(100%, 58rem);
  }

  .operation-intro h1 {
    font-size: clamp(2.8rem, 6.2vw, 5.6rem);
  }

  .operation-steps {
    grid-template-columns: 1fr;
  }

  .operation-details {
    grid-template-columns: 1fr;
  }

  .capacity-panel {
    grid-template-columns: 1fr minmax(11rem, 14rem);
  }

  .modules-shell {
    overflow: auto;
  }

  .modules-grid {
    width: min(100%, 68rem);
  }

  .modules-intro h1 {
    font-size: clamp(2.7rem, 6vw, 5rem);
  }

  .programs-shell {
    overflow: auto;
  }

  .programs-hero {
    width: min(100%, 44rem);
  }

  .programs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-01,
  .program-02,
  .program-03,
  .program-04,
  .program-05,
  .programs-grid-two .program-card {
    grid-column: span 1;
  }
}

@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .landing-shell {
    min-height: 100svh;
    padding-bottom: 2rem;
    overflow: visible;
    background: #020711;
  }

  .planet-bg {
    height: 54svh;
    min-height: 28rem;
    background-size: cover;
    background-position: 63% top;
    opacity: 0.88;
    mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
  }

  .space-glow {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, 0.12), rgba(2, 7, 17, 0.94) 55%, #020711 100%),
      radial-gradient(circle at 70% 20%, rgba(30, 136, 255, 0.22), transparent 16rem);
  }

  .site-header {
    padding: 1.15rem;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .brand-link {
    width: clamp(11.5rem, 34vw, 16rem);
  }

  .portal-entry-link {
    order: 3;
    min-height: 2.55rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }

  .language-toggle {
    min-height: 2.65rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }

  .hero-copy {
    width: auto;
    margin: clamp(4rem, 15vh, 7rem) 1.15rem 0;
  }

  .hero-description {
    width: min(100%, 38rem);
  }

  .map-layer {
    display: none;
  }

  .mobile-country-panel {
    position: relative;
    z-index: 4;
    display: block;
    margin: clamp(2rem, 6vw, 3.5rem) 1.15rem 0;
    padding: 1rem;
    border: 1px solid rgba(255, 23, 68, 0.28);
    border-radius: 1.3rem;
    background: linear-gradient(145deg, rgba(5, 15, 35, 0.78), rgba(2, 7, 17, 0.76));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
  }

  .mobile-country-panel h2 {
    margin: 0 0 0.9rem;
    color: var(--rabbit-red);
    font-family: var(--font-condensed);
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .country-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .country-grid button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.45rem;
    border: 1px solid rgba(255, 23, 68, 0.32);
    border-radius: 1rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    text-align: left;
  }

  .country-grid button[data-status="active"] {
    border-color: rgba(255, 23, 68, 0.7);
    box-shadow: inset 0 0 22px rgba(255, 23, 68, 0.07);
  }

  .country-grid button[data-status="coming"] {
    opacity: 0.62;
  }

  .country-grid span {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--white);
    font-size: 1.25rem;
  }

  .country-grid span img {
    width: 2.55rem;
    height: 2.55rem;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(255, 23, 68, 0.35));
  }

  .experience-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .experience-bg {
    height: 64svh;
    min-height: 32rem;
    background-image: url("./assets/images/page2/portada-panda-mobile.png");
    background-size: cover;
    background-position: center 60%;
    mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
  }

  .experience-overlay {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, 0.02), rgba(2, 7, 17, 0.46) 50%, #020711 100%),
      linear-gradient(90deg, rgba(2, 7, 17, 0.5), rgba(2, 7, 17, 0.1));
  }

  .experience-header {
    align-items: flex-start;
    padding-left: 0;
  }

  .experience-brand {
    width: clamp(10.8rem, 46vw, 13.6rem);
  }

  .hamburger-menu {
    width: 3.1rem;
    min-height: 2.75rem;
  }

  .hamburger-menu span {
    width: 2rem;
  }

  .experience-hero {
    justify-items: center;
    width: min(100%, 31rem);
    margin: clamp(10rem, 34vh, 15rem) auto 0;
  }

  .steam-logo-frame {
    width: min(92%, 22.5rem);
  }

  .impact-card {
    width: 100%;
  }

  .impact-image-card {
    width: min(68%, 20.5rem);
  }

  .audience-grid {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .audience-card {
    min-height: 5rem;
    border-radius: 1rem;
  }

  .benefits-strip {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .benefit-item {
    justify-content: flex-start;
    padding-left: 1.2rem;
  }

  .benefit-item + .benefit-item,
  .benefit-item:nth-child(3),
  .benefit-item:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .experience-closing {
    padding: 0 0.6rem 1rem;
  }

  .teacher-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .teacher-bg {
    height: 58svh;
    min-height: 29rem;
    background-size: cover;
    background-position: 58% top;
    mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
  }

  .teacher-overlay {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, 0.08), rgba(2, 7, 17, 0.84) 53%, #020711 100%),
      linear-gradient(90deg, rgba(2, 7, 17, 0.84), rgba(2, 7, 17, 0.16));
  }

  .teacher-header {
    align-items: flex-start;
    padding-left: 0;
  }

  .teacher-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .teacher-hero {
    width: min(100%, 36rem);
    margin: clamp(6.8rem, 26vh, 11rem) 0 0;
  }

  .teacher-hero h1 {
    font-size: clamp(2.15rem, 9.8vw, 3.35rem);
    font-weight: 400;
    letter-spacing: -0.048em;
    line-height: 1.14;
  }

  .teacher-copy p {
    font-size: 0.98rem;
    line-height: 1.42;
  }

  .teacher-benefits {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    margin: 1.25rem 0 0;
  }

  .teacher-benefit {
    justify-content: flex-start;
    min-height: 4.2rem;
    padding-left: 1.2rem;
  }

  .teacher-benefit + .teacher-benefit,
  .teacher-benefit:nth-child(3),
  .teacher-benefit:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .teacher-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .advisor-button,
  .how-button {
    justify-content: center;
    width: 100%;
  }

  .teacher-next-cue {
    width: 100%;
    justify-content: center;
    margin: 1rem 0 0;
  }

  .how-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .how-header {
    align-items: flex-start;
  }

  .how-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .how-intro {
    text-align: left;
    margin-top: clamp(1.25rem, 5vw, 2rem);
  }

  .how-intro h1 {
    font-size: clamp(2.4rem, 12vw, 4rem);
    line-height: 1;
  }

  .how-intro p {
    font-size: 1rem;
  }

  .how-cards {
    grid-template-columns: 1fr;
  }

  .how-closing {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 1.2rem;
    font-size: 0.98rem;
  }

  .how-actions {
    justify-content: stretch;
  }

  .operation-button {
    width: 100%;
    justify-content: center;
  }

  .operation-actions {
    justify-content: stretch;
  }

  .modules-button {
    width: 100%;
    justify-content: center;
  }

  .operation-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .operation-bg {
    height: 54svh;
    min-height: 27rem;
    background-size: cover;
    background-position: 63% top;
    mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
  }

  .operation-overlay {
    background:
      linear-gradient(180deg, rgba(2, 7, 17, 0.08), rgba(2, 7, 17, 0.82) 48%, #020711 100%),
      linear-gradient(90deg, rgba(2, 7, 17, 0.84), rgba(2, 7, 17, 0.16));
  }

  .operation-header {
    align-items: flex-start;
  }

  .operation-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .operation-intro {
    width: min(100%, 38rem);
    margin-top: clamp(5.8rem, 24vh, 10rem);
  }

  .operation-intro h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.6rem);
    line-height: 1.02;
  }

  .operation-intro > p:not(.steam-kicker) {
    font-size: 1rem;
  }

  .operation-step {
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    min-height: auto;
  }

  .operation-step .step-icon {
    grid-column: 1;
    grid-row: 2;
    width: 3rem;
  }

  .operation-step > div:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .price-options {
    grid-template-columns: 1fr;
  }

  .capacity-panel {
    grid-template-columns: 1fr;
  }

  .capacity-box {
    min-height: 14rem;
  }

  .modules-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .modules-header {
    align-items: flex-start;
  }

  .modules-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .modules-intro {
    margin-top: clamp(1.5rem, 6vw, 2.6rem);
    text-align: left;
  }

  .modules-intro h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.6rem);
    line-height: 1.02;
  }

  .modules-intro p {
    font-size: 1rem;
  }

  .modules-intro small {
    font-size: 0.95rem;
  }

  .modules-grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 0.95rem;
  }

  .module-card {
    border-radius: 1rem;
  }

  .programs-shell {
    min-height: 100svh;
    padding: 1rem;
    overflow: auto;
  }

  .programs-header {
    align-items: flex-start;
  }

  .programs-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .programs-hero {
    width: 100%;
    margin-top: clamp(1.5rem, 6vw, 2.6rem);
  }

  .back-to-modules {
    width: 100%;
    justify-content: center;
  }

  .programs-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.8rem);
    line-height: 1;
  }

  .programs-hero > span {
    font-size: 0.98rem;
  }

  .programs-grid {
    grid-template-columns: 1fr;
  }

  .programs-grid-two .program-card {
    grid-column: span 1;
  }

  .program-card {
    min-height: 10.75rem;
    border-radius: 0.95rem;
  }

  .program-card h2 {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
  }

  .experience-detail-shell {
    overflow: auto;
    padding: 1rem;
  }

  .experience-detail-header {
    margin-bottom: 1rem;
  }

  .experience-detail-brand {
    width: clamp(13.5rem, 58vw, 17rem);
  }

  .experience-detail-layout {
    grid-template-columns: 1fr;
  }

  .experience-image-wrap {
    min-height: 27rem;
  }

  .experience-title-block {
    justify-content: start;
    padding: 1.1rem;
  }

  .experience-title-block h1 {
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }

  .experience-tags,
  .experience-actions {
    grid-template-columns: 1fr;
  }

  .experience-info-card {
    padding: 1rem;
  }

  .experience-info-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .experience-info-icon {
    width: 4.2rem;
    height: 4.2rem;
  }
}

@media (max-width: 560px) {
  .site-header {
    align-items: flex-start;
  }

  .language-toggle span[data-i18n="language"] {
    display: none;
  }

  .language-toggle {
    width: 2.9rem;
    justify-content: center;
    gap: 0;
  }

  .chevron {
    display: none;
  }

  .language-options {
    right: -0.1rem;
  }

  .planet-bg {
    min-height: 24rem;
    background-position: 60% top;
  }

  .hero-copy {
    margin-top: clamp(3.5rem, 16vh, 5.8rem);
  }

  h1 {
    font-size: clamp(3.35rem, 19vw, 5.3rem);
  }

  h1 span {
    font-size: 0.72em;
    letter-spacing: -0.045em;
  }

  .hero-description {
    font-size: 1.02rem;
  }

  .country-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
p,
span,
strong,
small,
a,
li,
em {
  font-weight: 400 !important;
}

.steam-portal-page {
  --portal-ink: #061127;
  --portal-muted: #536079;
  --portal-line: #d6dfeb;
  --portal-soft: #f3f7fc;
  --portal-blue: #075fe4;
  --portal-cyan: #00a9e8;
  --portal-green: #00a86b;
  --portal-red: #ff1744;
  color: var(--portal-ink);
  background: var(--portal-soft);
}

.steam-portal-page h1,
.steam-portal-page h2,
.steam-portal-page h3,
.steam-portal-page p,
.steam-portal-page span,
.steam-portal-page strong,
.steam-portal-page small,
.steam-portal-page button,
.steam-portal-page input,
.steam-portal-page li {
  letter-spacing: 0;
}

.portal-app {
  min-height: 100svh;
  background:
    linear-gradient(180deg, rgba(238, 247, 255, 0.96), rgba(247, 250, 254, 1) 42%),
    #f5f8fc;
}

.portal-login-view {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 2.2rem);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 45%, rgba(0, 0, 0, 0.9) 100%),
    #000;
  isolation: isolate;
}

.portal-login-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 23, 68, 0.12) 52%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7.5rem),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7.5rem);
}

.portal-login-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), #000 82%);
}

.portal-public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-brand,
.portal-topbar-brand {
  width: clamp(13rem, 19vw, 21rem);
  max-width: 64vw;
}

.portal-login-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.92fr) minmax(20rem, 1.08fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  width: min(100%, 88rem);
  min-height: calc(100svh - 7rem);
  margin: 0 auto;
}

.portal-login-panel,
.portal-login-mentor,
.portal-access-strip article,
.portal-program-card,
.portal-side-panel article,
.portal-slide-frame,
.portal-slide-list,
.portal-viewer-header {
  border-radius: 8px;
}

.portal-login-panel {
  padding: clamp(1rem, 2.5vw, 2rem) 0;
  border: 0;
  color: var(--white);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.portal-kicker {
  margin: 0 0 0.65rem;
  color: var(--portal-red);
  font-family: var(--font-condensed);
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  text-transform: uppercase;
}

.portal-login-panel h1,
.portal-welcome h1,
.portal-viewer-header h1 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(2.3rem, 4.2vw, 4.6rem);
  line-height: 1.04;
  color: inherit;
}

.portal-login-panel h1 {
  max-width: 40rem;
  color: var(--white);
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: 0.96;
}

.portal-login-panel > p,
.portal-welcome-copy > p,
.portal-section-heading > p,
.portal-side-panel p,
.portal-side-panel li {
  color: var(--portal-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.5;
}

.portal-login-panel > p {
  max-width: 34rem;
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.portal-login-form {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 36rem);
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}

.portal-login-form label {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
}

.portal-password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
}

.portal-password-row input {
  width: 100%;
  min-height: 3.55rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 0 1rem;
  color: #061127;
  background: #fff;
  outline: none;
}

.portal-password-row input:focus {
  border-color: rgba(255, 23, 68, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.26);
}

.portal-login-view .portal-primary-button {
  min-height: 3.55rem;
  border-color: rgba(255, 23, 68, 0.94);
  background: linear-gradient(180deg, #ff1744, #b60f30);
  box-shadow: 0 16px 34px rgba(255, 23, 68, 0.28);
}

.portal-login-view .portal-primary-button:hover,
.portal-login-view .portal-primary-button:focus-visible {
  outline: 3px solid rgba(255, 23, 68, 0.28);
  outline-offset: 2px;
}

.portal-primary-button,
.portal-ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  border-radius: 8px;
  padding: 0.68rem 1.05rem;
  cursor: pointer;
}

.portal-primary-button {
  border: 1px solid rgba(7, 95, 228, 0.88);
  color: var(--white);
  background: linear-gradient(180deg, #0b6bff, #064dbb);
  box-shadow: 0 12px 26px rgba(7, 95, 228, 0.22);
}

.portal-primary-button:hover,
.portal-primary-button:focus-visible {
  outline: 3px solid rgba(7, 95, 228, 0.24);
  outline-offset: 2px;
}

.portal-ghost-button {
  border: 1px solid rgba(7, 95, 228, 0.28);
  color: var(--portal-blue);
  background: rgba(255, 255, 255, 0.84);
}

.portal-form-message {
  min-height: 1.3rem;
  margin: 0;
  color: #ffb9c7;
  font-size: 0.95rem;
}

.portal-login-mentor {
  display: grid;
  justify-items: center;
  align-self: stretch;
  align-content: end;
  gap: 0.85rem;
  padding: 0;
  color: var(--white);
  background: transparent;
  border: 0;
}

.portal-login-mentor p {
  margin: 0;
  color: var(--white);
  font-size: 1.35rem;
}

.portal-login-mentor span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.portal-smarty-figure {
  width: min(100%, 25rem);
  min-height: clamp(33rem, 62vw, 48rem);
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  background-image: url("./assets/images/portal/smarty-presentando-derecha.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
}

.portal-dashboard-view {
  min-height: 100svh;
  padding-bottom: clamp(1.2rem, 2vw, 2rem);
  background: #f5f8fc;
}

.portal-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 3.4rem);
  min-height: clamp(5.2rem, 7vw, 7.2rem);
  padding: clamp(1rem, 1.8vw, 1.55rem) clamp(1.2rem, 3vw, 3.2rem);
  color: var(--white);
  background: #020711;
}

.portal-nav {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.portal-nav button,
.portal-user-pill,
.portal-user-pill button {
  border-radius: 8px;
}

.portal-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  border: 1px solid transparent;
  padding: 0.6rem 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  cursor: pointer;
}

.portal-nav button.is-active {
  color: var(--white);
  border-color: rgba(0, 169, 232, 0.36);
  background: rgba(7, 95, 228, 0.26);
}

.portal-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.45rem 0.45rem 0.45rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
}

.portal-user-pill button {
  min-height: 2.2rem;
  border: 0;
  padding: 0 0.75rem;
  color: var(--white);
  background: rgba(255, 23, 68, 0.88);
  cursor: pointer;
}

.portal-welcome {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(28rem, 0.9fr) minmax(21rem, 0.58fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  min-height: calc(100svh - clamp(5.2rem, 7vw, 7.2rem));
  padding: clamp(3.2rem, 6vw, 6rem) clamp(1.5rem, 5.6vw, 5.8rem)
    clamp(4rem, 7vw, 6.6rem);
  color: var(--white);
  background:
    radial-gradient(circle at 76% 50%, rgba(255, 23, 68, 0.28), transparent 22rem),
    radial-gradient(circle at 98% 12%, rgba(0, 169, 232, 0.08), transparent 22rem),
    linear-gradient(90deg, #000 0%, #020711 58%, #000 100%);
}

.portal-welcome::before {
  content: "";
  position: absolute;
  left: clamp(1rem, 3.8vw, 3.7rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.32rem;
  height: clamp(16rem, 32vw, 22rem);
  background: var(--portal-red);
}

.portal-welcome-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  max-width: 46rem;
  padding-left: clamp(2rem, 3.4vw, 3.8rem);
}

.portal-welcome h1 {
  max-width: 43rem;
  color: var(--white);
  font-size: clamp(3rem, 5.1vw, 5.2rem);
  line-height: 0.95;
}

.portal-welcome h1 span {
  display: inline;
  color: inherit;
}

.portal-welcome-copy > p {
  max-width: 35rem;
  margin: clamp(1.2rem, 2vw, 1.65rem) 0 0;
  color: rgba(255, 255, 255, 0.74);
}

.portal-welcome .portal-kicker {
  margin: 0 0 clamp(1rem, 1.5vw, 1.35rem);
  color: var(--portal-red);
}

.portal-welcome-copy > p:not(.portal-kicker) {
  margin-top: clamp(1.2rem, 2vw, 1.65rem);
}

.portal-steam-logo {
  display: block;
  width: min(100%, clamp(25rem, 38vw, 34rem));
  height: auto;
  margin: clamp(1.8rem, 4vw, 3.1rem) 0 0;
  opacity: 0.96;
}

.portal-hero-smarty {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: end;
  align-self: end;
}

.portal-smarty-figure-large {
  width: min(100%, clamp(22rem, 31vw, 32rem));
  min-height: clamp(30rem, 50vw, 44rem);
  border: 0;
  background-color: transparent;
  background-image: url("./assets/images/portal/smarty-presentando-derecha.png");
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
}

.portal-access-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100% - 2rem, 86rem);
  margin: -1.4rem auto clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 3;
}

.portal-access-strip article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  min-height: 5.7rem;
  padding: 0.85rem;
  border: 1px solid var(--portal-line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(9, 24, 48, 0.1);
}

.portal-access-strip article > span {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  color: var(--portal-blue);
  background: rgba(7, 95, 228, 0.1);
}

.portal-access-strip h2,
.portal-side-panel h2,
.portal-programs-panel h2 {
  margin: 0;
  color: var(--portal-ink);
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
}

.portal-access-strip p {
  margin: 0.25rem 0 0;
  color: var(--portal-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.portal-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: 1rem;
  width: min(100% - 2rem, 94rem);
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
}

.portal-programs-panel {
  min-width: 0;
}

.portal-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.portal-section-heading > p {
  max-width: 31rem;
  margin: 0;
  text-align: right;
}

.portal-program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.portal-program-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 14.5rem;
  border: 1px solid rgba(7, 95, 228, 0.18);
  padding: 1rem;
  color: var(--white);
  text-align: left;
  background: #051123;
  cursor: pointer;
  isolation: isolate;
}

.portal-program-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 180ms ease, filter 180ms ease;
}

.portal-program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 10, 24, 0.22), rgba(3, 10, 24, 0.9) 78%),
    linear-gradient(90deg, rgba(3, 10, 24, 0.84), rgba(3, 10, 24, 0.15));
}

.portal-program-card.is-locked img {
  filter: grayscale(0.55) brightness(0.54);
}

.portal-program-card.is-locked::before {
  background:
    linear-gradient(180deg, rgba(3, 10, 24, 0.58), rgba(3, 10, 24, 0.92) 78%),
    rgba(5, 17, 35, 0.5);
}

.portal-program-card:hover,
.portal-program-card:focus-visible {
  outline: 3px solid rgba(7, 95, 228, 0.26);
  outline-offset: 2px;
}

.portal-program-card:hover img,
.portal-program-card:focus-visible img {
  transform: scale(1.05);
}

.portal-program-module,
.portal-program-number,
.portal-program-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
}

.portal-program-module {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 1.75rem;
  padding: 0.3rem 0.65rem;
  color: var(--white);
  background: rgba(7, 95, 228, 0.86);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.portal-program-number {
  min-width: 2.35rem;
  min-height: 2.35rem;
  margin-bottom: 0.55rem;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
}

.portal-program-card h3 {
  width: min(100%, 17rem);
  margin: 0;
  color: var(--white);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.12;
}

.portal-program-card p {
  margin: 0.35rem 0 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.portal-program-action {
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  color: var(--white);
  background: rgba(0, 168, 107, 0.92);
  font-size: 0.88rem;
}

.portal-program-card.is-locked .portal-program-action {
  background: rgba(255, 255, 255, 0.14);
}

.portal-side-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.portal-side-panel article {
  border: 1px solid var(--portal-line);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(9, 24, 48, 0.08);
}

.portal-side-panel ul {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0.9rem 0 0;
  list-style: none;
}

.portal-side-panel li {
  position: relative;
  padding-left: 1.15rem;
}

.portal-side-panel li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--portal-green);
}

.portal-side-panel p {
  margin: 0.85rem 0 0;
}

.portal-viewer-view {
  min-height: 100svh;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(2, 7, 17, 0.92), rgba(2, 7, 17, 1)),
    url("./assets/images/page8/modulo2/03-tesoros-oceano.png") center / cover no-repeat;
}

.portal-viewer-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(2, 7, 17, 0.82);
}

.portal-viewer-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
}

.portal-viewer-header h1 {
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  color: var(--white);
}

.portal-viewer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  color: var(--portal-cyan);
  background: rgba(0, 169, 232, 0.12);
  border: 1px solid rgba(0, 169, 232, 0.34);
}

.portal-viewer-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.portal-slide-list {
  max-height: calc(100svh - 8rem);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem;
  background: rgba(2, 7, 17, 0.82);
}

.portal-slide-list-head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  padding-bottom: 0.7rem;
}

.portal-slide-list-head p,
.portal-slide-list-head strong {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.portal-slide-buttons {
  display: grid;
  gap: 0.45rem;
}

.portal-slide-buttons button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.45rem;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.portal-slide-buttons button.is-active {
  border-color: rgba(0, 169, 232, 0.72);
  color: var(--white);
  background: rgba(7, 95, 228, 0.28);
}

.portal-slide-buttons span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--portal-cyan);
  background: rgba(0, 169, 232, 0.12);
}

.portal-slide-buttons strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-slide-stage {
  min-width: 0;
}

.portal-slide-frame {
  display: grid;
  place-items: center;
  min-height: min(68svh, 46rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(0.4rem, 1vw, 0.75rem);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  -webkit-user-select: none;
  user-select: none;
}

.portal-slide-frame img {
  display: block;
  width: 100%;
  max-height: min(74svh, 48rem);
  object-fit: contain;
  border-radius: 6px;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.portal-slide-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.portal-slide-controls p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

@media (max-width: 1080px) {
  .portal-topbar {
    grid-template-columns: 1fr auto;
  }

  .portal-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .portal-welcome {
    grid-template-columns: 1fr;
  }

  .portal-hero-smarty {
    display: none;
  }

  .portal-access-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-content-layout {
    grid-template-columns: 1fr;
  }

  .portal-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .portal-login-layout {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .portal-login-mentor {
    display: none;
  }

  .portal-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-viewer-header,
  .portal-viewer-layout,
  .portal-slide-controls {
    grid-template-columns: 1fr;
  }

  .portal-viewer-badge {
    width: fit-content;
  }

  .portal-slide-list {
    max-height: 13rem;
  }
}

@media (max-width: 620px) {
  .portal-password-row,
  .portal-access-strip,
  .portal-program-grid,
  .portal-side-panel,
  .portal-section-heading {
    grid-template-columns: 1fr;
  }

  .portal-section-heading {
    display: grid;
    align-items: start;
  }

  .portal-section-heading > p {
    text-align: left;
  }

  .portal-topbar {
    grid-template-columns: 1fr;
  }

  .portal-user-pill {
    justify-content: space-between;
  }

  .portal-welcome {
    padding: 1.2rem;
  }

  .portal-welcome::before {
    left: 1.2rem;
    top: 1.4rem;
    height: 4rem;
  }

  .portal-welcome-copy {
    padding-left: 1rem;
  }

  .portal-program-card {
    min-height: 13rem;
  }
}