body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: var(--color-white);
}
.section-container {
  width: min(1073px, calc(100% - 48px));
  margin-inline: auto;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
}
/* Figma header: 1px #272287 rule at y=0, orange frame y=1..131. */
.site-header {
  height: 131px;
  background: var(--color-accent);
  border-top: 1px solid var(--color-primary-alt);
  padding-top: 20px;
  position: relative;
  z-index: 3;
}
.navigation {
  height: 91px;
  width: min(1268px, calc(100% - 48px));
  margin: auto;
  border: 3px solid var(--color-primary-alt);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  display: flex;
  align-items: center;
  padding: 0 76px 0 345px;
  position: relative;
}
/* Logo is a CROP fill in Figma: image rendered at 131.2% and offset. */
.nav-logo {
  position: absolute;
  left: 236.5px;
  top: 0;
  width: 84px;
  height: 88px;
  overflow: hidden;
}
.nav-logo img {
  width: 131.2%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  margin: -14.88% 0 0 -16.43%;
}
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 65px;
  flex: 1;
}
.menu a {
  color: var(--color-primary-alt);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu a:first-child {
  color: var(--color-nav-active);
}
.menu-toggle {
  display: none;
}
.hero {
  height: 409px;
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
}
.hero-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma image 10: x=994 y=-121 1092x651 @10%, anchored to frame centre. */
.hero-pattern {
  position: absolute;
  opacity: 0.1;
  width: 1092px;
  height: 651px;
  max-width: none;
  object-fit: cover;
  left: calc(50% + 34px);
  top: -121px;
}
.hero-art,
.hero-copy {
  position: absolute;
  left: 50%;
  width: 1073px;
  transform: translateX(-50%);
  height: 100%;
  z-index: 1;
}
.hero-logo {
  position: absolute;
  width: 264px;
  height: 259px;
  left: 26.5px;
  top: 75px;
  object-fit: cover;
}
.hero-student {
  position: absolute;
  width: 527px;
  height: 505px;
  max-width: none;
  left: 573.5px;
  top: -14px;
  object-fit: cover;
}
.hero-copy {
  left: 50%;
  padding: 94px 0 0 330.5px;
  color: var(--color-white);
  z-index: 2;
}
.hero h1 {
  font-size: 64px;
  line-height: 1.05;
}
.hero-copy p {
  font-size: 28px;
  line-height: 1.364;
  margin-top: 9.6px;
}
/* Fade slideshow (Figma component set 11709:256). The outgoing slide stays
   opaque under the incoming one until the fade ends, so colours never dip. */
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0s linear 550ms,
    visibility 0s linear 550ms;
}
.hero-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 550ms ease,
    visibility 0s;
}
/* Variante 2 (11709:335): frame coords minus the 1073px stage offset (423.5). */
.slide-2 {
  background: var(--color-accent);
}
.journey-pattern {
  position: absolute;
  opacity: 0.1;
  width: 1092px;
  height: 651px;
  max-width: none;
  object-fit: cover;
  left: calc(50% - 1035px);
  top: -90px;
}
.journey-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1073px;
  height: 100%;
  transform: translateX(-50%);
}
.journey-student {
  position: absolute;
  width: 492px;
  height: 492px;
  max-width: none;
  left: -75.5px;
  top: -11px;
  object-fit: cover;
}
.journey-card {
  position: absolute;
  left: 340.5px;
  top: 109px;
  width: 433px;
  height: 191px;
  padding: 16px 0 0 23px;
  border-radius: 18px;
  background: var(--color-primary-alt);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.0447;
  white-space: nowrap;
}
.journey-card strong {
  font-weight: 700;
  color: var(--color-yellow);
}
.journey-logo {
  position: absolute;
  width: 264px;
  height: 259px;
  left: 803.5px;
  top: 75px;
  object-fit: cover;
}
/* Figma CTA pill (icon 7684:39), used as a standard fixed WhatsApp button. */
.whatsapp-floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 200px;
  min-height: 58px;
  padding: 0 0 0 6px;
  border-radius: 29px;
  background: var(--color-yellow);
  box-shadow: var(--shadow-cta);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.001;
  transition: transform 200ms ease;
}
.whatsapp-floating img {
  width: 49px;
  height: 49px;
  flex: none;
  border-radius: 50%;
}
.whatsapp-floating:focus-visible {
  transform: translateY(-2px);
}
@media (hover: hover) {
  .whatsapp-floating:hover {
    transform: translateY(-2px);
  }
}
/* Off-canvas menu exists only below 1024px (see responsive.css). */
.mobile-menu-overlay,
.mobile-drawer {
  display: none;
}
.about {
  padding-top: 44px;
  min-height: 765px;
  display: grid;
  grid-template-columns: 443px 1fr;
  gap: 40px;
}
.about-media {
  height: 654px;
  border-radius: var(--radius-media);
  overflow: hidden;
  position: relative;
}
.about-media > img:not(.about-decoration) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* Figma image 11: global 611,871 => 182,287 inside the 429,584 media. */
.about-decoration {
  position: absolute;
  width: 79px;
  height: 79px;
  left: 182px;
  top: 287px;
  opacity: 0.35;
  z-index: 1;
}
.about-copy {
  padding-top: 39px;
}
.about h2,
.levels h2,
.advantages h2,
.videos h2 {
  font-size: 48px;
  line-height: 1.2083;
  color: var(--color-primary);
}
.about p {
  font-size: 25px;
  line-height: 1.364;
  color: var(--color-black);
  margin-top: 28.5px;
}
.about p + p {
  margin-top: 34.1px;
}
.levels {
  height: 544px;
}
.levels h2 {
  text-align: center;
}
.levels-grid {
  display: grid;
  grid-template-columns: 588fr 488fr;
  gap: 22px;
  margin-top: 48px;
}
.level-card {
  height: 354px;
  border: 1px solid var(--color-yellow-border);
  border-radius: var(--radius-card);
  padding: 27px 32px 0 31px;
  color: var(--color-white);
}
.fundamental {
  background: var(--color-primary);
}
.high-school {
  background: var(--color-accent);
}
.level-label {
  height: 49px;
  border-radius: 12px;
  background: var(--color-yellow);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 15px;
  width: max-content;
  font-size: 24px;
  font-weight: 700;
  line-height: 33px;
}
.high-school .level-label {
  padding-right: 17px;
}
.level-label img {
  width: 25.7px;
  height: 25.7px;
}
.level-card p {
  font-size: 20px;
  line-height: 1.364;
  margin-top: 13px;
}
.level-card p + p {
  margin-top: 27.3px;
}
.level-card strong {
  font-weight: 900;
}
.advantages {
  height: 495px;
  background: var(--color-primary);
  color: var(--color-black);
  padding-top: 57px;
}
.advantages h2 {
  text-align: center;
  color: var(--color-yellow);
}
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 254px));
  justify-content: center;
  gap: 22px;
  margin-top: 39px;
}
.advantages article {
  height: 245px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 23px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  transition: box-shadow 200ms ease;
}
/* Figma hover variant (11675:1236): 5px #FFDD1D OUTSIDE stroke + 0 4 4 25% shadow.
   Painted with box-shadow so the card box never changes size. */
/* "Socioemocional" is one 7.26em word: from 1024px up it would overflow the
   card at the shared title size, so only this title shrinks to fit its card. */
@media (min-width: 1024px) {
  .advantages article {
    container-type: inline-size;
  }
  .advantages .advantage-title-long {
    font-size: min(45px, calc((100cqi - 20px) / 7.26));
  }
}
@media (hover: hover) {
  .advantages article:hover {
    box-shadow:
      0 0 0 5px var(--color-yellow-border),
      0 4px 4px 5px rgb(0 0 0 / 25%);
  }
}
.advantages span {
  width: 70px;
  height: 70px;
  flex: none;
  border-radius: 18px;
  background: var(--color-accent);
  display: grid;
  place-items: center;
}
.advantages span img {
  width: 40px;
  height: 40px;
}
.advantages h3 {
  font-size: 45px;
  line-height: 1.34;
  font-weight: 700;
}
.videos {
  height: 735px;
  position: relative;
  padding-top: 51px;
  overflow: hidden;
}
.videos-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videos-inner {
  position: relative;
  text-align: center;
}
.videos h2 {
  color: var(--color-primary);
}
.videos-inner > p {
  font-size: 25px;
  line-height: 1.364;
  color: var(--color-black);
  margin-top: 14px;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 38px;
}
.video-card {
  height: 370px;
  border: 3px dashed var(--color-border-muted);
  border-radius: var(--radius-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 66px;
  background: var(--color-white);
}
.video-card img {
  width: 115.7px;
  height: 115.7px;
}
.video-card h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-primary-alt);
  margin-top: 14.3px;
}
/* Figma centres each text block in a 78px row; card 1's block is shorter, so it sits 5px lower. */
.video-card:first-child h3 {
  margin-top: 19.3px;
}
.video-card p {
  font-size: 16px;
  line-height: 1.364;
  color: var(--color-text-dark);
  margin-top: 20px;
}
.contacts {
  height: 580px;
  position: relative;
  background: var(--color-primary);
  overflow: hidden;
  padding-top: 71px;
}
/* Figma bg 3 / bg 4: 780x580 CROP boxes (image 1036 wide, offset -217,-597). */
.contacts-pattern {
  position: absolute;
  top: 0;
  width: 780px;
  height: 580px;
  overflow: hidden;
}
.contacts-pattern img {
  position: absolute;
  width: 1036px;
  max-width: none;
  height: auto;
  left: -217px;
  top: -597px;
}
.pattern-left {
  left: 0;
  transform: rotate(180deg);
}
.pattern-right {
  right: 10px;
}
.contacts-inner {
  display: grid;
  grid-template-columns: 375px 584px;
  gap: 38px;
  align-items: start;
  position: relative;
}
.contact-card {
  height: 436px;
  margin-top: 1px;
  padding: 20px 22px 0 26px;
  color: var(--color-white);
  background: var(--color-accent);
  border: 1px solid var(--color-border-muted);
  border-radius: 18px;
  font-size: 20px;
  line-height: 1.364;
}
.contact-card h2 {
  font-size: 30px;
  line-height: 1.2083;
  margin-bottom: 32.7px;
}
.contact-card p + p {
  margin-top: 27.3px;
}
.contact-card strong {
  font-weight: 900;
}
.map {
  height: 438px;
  overflow: hidden;
  border-radius: 22px;
  position: relative;
}
/* Figma CROP: image 121.81% wide, x=-5.35% of the frame (-31.2px) => 24.5% of the overflow. */
.map > img:first-child {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 24.5% 0;
}
/* Figma marker 1126,3239 => 252,175 inside the 874,3064 map. In node 1:2 the
   map group sits above this marker, so it is not visible in the live frame. */
.map-marker {
  display: none;
  position: absolute;
  width: 16px;
  height: 20px;
  left: 43.15%;
  top: 39.95%;
}
.site-footer {
  height: 258px;
  background: var(--color-white);
  color: var(--color-nav-active);
}
.footer-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: center;
}
.footer-logo {
  width: 160px;
  height: 160px;
}
.site-footer p {
  text-align: center;
  font-size: 20px;
  line-height: 27px;
}

/* Figma desktop frame uses deliberate section overlaps. */
@media (min-width: 1024px) {
  .videos {
    margin-top: -14px;
  }

  .contacts {
    margin-top: -72px;
  }

  /* Footer rows from Figma: logo y+47, social y+101, copyright y+124. */
  .footer-inner {
    align-items: start;
  }
  .footer-logo {
    margin-top: 47px;
  }
  .site-footer p {
    margin-top: 124px;
  }
  .social-links {
    margin-top: 101px;
  }
}

/* Offsets from the 1920 frame centre (x=960). */
@media (min-width: 1440px) {
  .menu {
    position: absolute;
    inset: 0;
    display: block;
  }
  .menu a {
    position: absolute;
    top: 29px;
    transform: translateX(-50%);
  }
  .menu a:nth-child(1) { left: 421.05px; }
  .menu a:nth-child(2) { left: 572.1px; }
  .menu a:nth-child(3) { left: 719px; }
  .menu a:nth-child(4) { left: 832px; }
  .menu a:nth-child(5) { left: 969.6px; }

  .about {
    width: 1073px;
    margin-left: calc(50% - 531px);
  }

  .levels-grid {
    width: 1098px;
    margin-left: 20.5px;
    grid-template-columns: 588px 488px;
  }

  .advantages-grid {
    width: 1082px;
    margin-left: -3.5px;
  }

  .video-grid {
    width: 1084px;
    margin-left: -5.5px;
  }

  .contacts-inner,
  .footer-inner {
    width: 997px;
  }
}
.social-links {
  display: flex;
  gap: 13.8px;
  align-items: center;
  justify-content: flex-end;
}
.social-links > a {
  width: 73px;
  height: 73px;
  position: relative;
}
.social-links img {
  width: 73px;
  height: 73px;
}
.footer-whatsapp img + img {
  position: absolute;
  width: 46px;
  height: 46px;
  inset: 13.5px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide.is-active,
  .whatsapp-floating,
  .advantages article {
    transition: none;
  }
}