/* =====================================================================
   Instituciones Page Styles
   ===================================================================== */

/* =====================================================================
   Base & Reset
   ===================================================================== */
* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
}

input,
button,
textarea,
select {
  font-family: inherit;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}

.site-main {
  background: var(--color-beige);
  color: var(--color-black);
}

/* =====================================================================
   Header
   ===================================================================== */
/* =====================================================================
   Header
   ===================================================================== */
.site-header,
header {
  height: var(--header-height-mobile);
  background: var(--color-bg);
  box-shadow: 0px 4px 4px 0px #00000040;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.site-header.is-transparent {
  background: transparent;
  box-shadow: none;
}

.site-header.is-transparent.is-scrolled {
  background: var(--color-white);
  box-shadow: 0px 4px 4px 0px #00000040;
}

.site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.site-header.is-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
}

.site-header.is-overlay + .site-main {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 1120px) {
  .site-header.is-overlay + .site-main {
    padding-top: var(--header-height-desktop);
  }
}

.site-header.is-overlay + .site-main.no-offset {
  padding-top: 0;
}

@media (min-width: 1120px) {
  .site-header.is-overlay + .site-main.no-offset {
    padding-top: 0;
  }
}

@media (min-width: 1120px) {
  .site-header,
  header {
    height: var(--header-height-desktop);
  }
}

/* Header layout */
.site-header .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  height: 100%;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 15px;
  padding-inline: 0px;
}

/* Header — brand, nav, actions */
.header-brand {
  grid-column: span 2;
}

.header-brand img {
  width: 100%;
  height: 100%;
  max-width: 81px;
  max-height: 20px;

  @media (min-width: 1120px) {
    max-width: 101px;
    max-height: 25px;
  }
}

.header-nav {
  grid-column: 3 / span 5;
  display: none;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 5px;

  @media (min-width: 1120px) {
    display: flex;
  }
}

.header-nav a.is-active {
  color: var(--color-purple);
  text-decoration: underline;
}

.header-actions {
  grid-column: 9 / span 4;
  display: none;
  justify-content: space-between;
  gap: 20px;

  @media (min-width: 1120px) {
    display: flex;
    margin-bottom: 5px;
  }

  .btn {
    flex-grow: 1;

    @media (min-width: 1120px) {
      font-size: var(--body-m-size);
      line-height: var(--body-m-line);
      max-width: 170px;
    }
  }
}

.header-nav a {
  text-decoration: none;
  color: var(--color-black);
  font-weight: var(--weight-medium);

  &.is-active {
    color: var(--color-purple);
  }
}

.header-nav a:hover {
  color: var(--color-purple);
}

.mobile-controls {
  display: flex;
  align-items: center;
  gap: 36px;

  .btn {
    width: 100%;
    height: 100%;
    max-width: 103px;
    max-height: 24px;
    padding: 8px 24px !important;
    font-family: var(--font-sans);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
  }
}

.mobile-menu-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}

.mobile-menu-toggle .icon-close {
  display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-menu {
  display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-close {
  display: block;
}

.site-header.is-menu-open {
  background: var(--color-white);
}

.mobile-menu-overlay {
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: var(--z-modal);
  padding: 24px 20px;
  padding-bottom: 10px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: fit-content;
  width: 100vw;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.site-header.is-menu-open .mobile-menu-overlay {
  display: flex;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  padding-bottom: 18px;
}

.mobile-nav-link {
  font-family: var(--font-sans);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--color-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.mobile-nav-link i {
  color: var(--color-purple);
  width: 20px;
  height: 20px;
}

.mobile-nav-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 23px;
}

.mobile-nav-contact {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.mobile-nav-contact a {
  position: relative;
  color: var(--color-black);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  text-decoration: underline;
}

.mobile-menu-footer {
  text-align: right;
  width: 100%;
}

.mobile-menu-footer .separator-line {
  height: 0.5px;
  background: var(--color-black);
  width: 100%;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  header {
    width: 100vw;
  }

  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
  }
}

@media (min-width: 768px) {
  .header-nav {
    display: inline-flex;
  }

  .header-actions {
    display: inline-flex;
  }

  .mobile-controls {
    display: none;
  }

  .mobile-menu-overlay {
    display: none !important;
    /* Force hide on desktop even if class is active */
  }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer,
footer {
  /* mobile: natural height */
  background: var(--color-black);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .site-footer,
  footer {
    height: var(--footer-height-desktop);
  }
}

/* Footer padding: mobile and desktop */
.site-footer .container {
  padding: 40px 16px;
}

@media (min-width: 1024px) {
  .site-footer .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0px;
    height: 100%;
  }
}

/* Footer Grid & Links */
.footer-grid {
  display: grid;
  flex-grow: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }
}

.footer-divider {
  grid-column: 4 / span 9;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.footer-logo {
  flex: 1;
}

.footer-links {
  flex: 1;
}

.footer-contact {
  flex: 1;
  margin-left: 10px;
}

.footer-legal {
  flex: 1;
  text-align: left;
}

@media (min-width: 1024px) {
  .footer-logo {
    grid-column: 1 / span 3;
  }

  .footer-links {
    grid-column: 4 / span 3;
  }

  .footer-contact {
    grid-column: 7 / span 3;
  }

  .footer-legal {
    grid-column: 10 / span 3;
  }
}

/* Footer logo sizes */
.footer-logo img {
  height: 55px;
}

@media (min-width: 1024px) {
  .footer-logo img {
    height: 70px;
    margin-top: 6px;
  }
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a,
.footer-contact a,
.footer-legal a {
  color: var(--color-white);
  text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  color: var(--color-purple);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
}

/* Social icons */
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.social-icons img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile Footer Updates */
@media (max-width: 1024px) {
  .site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .footer-grid,
  .footer-divider,
  .footer-bottom {
    display: contents;
  }

  .footer-logo {
    order: 1;
    width: 100%;
  }

  .footer-links {
    order: 2;
    gap: 24px;
    width: 100%;
  }

  .footer-contact {
    order: 3;
    gap: 24px;
    width: 100%;
  }

  .social-icons {
    order: 4;
    width: 100%;
    gap: 24px;
  }

  .footer-legal {
    order: 5;
    width: 100%;
    text-align: left;
  }

  .footer-bottom > .body-s {
    order: 6;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    margin-top: -16px;
    /* Closer to legal */
  }

  .footer-logo img {
    height: 48px;
    /* Slightly smaller for mobile */
  }
}

/* =====================================================================
   Buttons (Synced with Home)
   ===================================================================== */

.btn {
  font-family: var(--font-sans);
}

/* Button Animations (Replicated from Home/Empresas) */
.btn-primary-default {
  position: relative;
  overflow: hidden;
  z-index: 0;
  color: #ffffff;
  background: transparent;
  border: 1px solid #110e3d;
  border-radius: 30px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 450ms ease;

  &.purple {
    color: var(--color-white);
    border-color: var(--color-purple);
  }
}

/* Initial Background (Dark Blue) */
.btn-primary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #110e3d;
  transform: scaleX(1);
  transform-origin: center;
}

/* Hover Background (Purple Swipe) */
.btn-primary-default::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-purple);
  transform: scaleX(0); /* Hidden initially */
  transform-origin: right; /* Exit to right */
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .btn-primary-default:hover::before {
    transform: scaleX(1);
    transform-origin: left; /* Enter from left */
  }

  .btn-primary-default:hover {
    border-color: var(--color-purple);
    opacity: 1;
  }
}

/* Secondary Button (Outline -> Purple Fill) */
.btn-secondary-default {
  position: relative;
  overflow: hidden;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  transition: none;
  background-color: transparent;
  z-index: 1;
  border-radius: 30px; /* Ensure radius matches */
  padding: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &.white {
    color: var(--color-white);
    border-color: var(--color-white);
  }
}

.btn-secondary-default::before,
.btn-secondary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-secondary-default::before {
  background-color: transparent;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-secondary-default::after {
  background-color: var(--color-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary-default:hover::before {
  transform-origin: right;
}

.btn-secondary-default:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-secondary-default:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.btn-secondary-default:hover {
  color: var(--color-white);
  border-color: var(--color-purple);
  background: transparent;
}

/* Secondary Dark Button (White Outline -> Purple Fill) */
.btn-secondary-dark {
  position: relative;
  overflow: hidden;
  color: var(
    --color-white
  ); /* Was black in home.css default but usually white for dark bg */
  border: 1px solid var(--color-black);
  transition: none;
  background-color: transparent;
  z-index: 1;
  border-radius: 30px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Fix for home.css discrepancy if needed, adhering to home.css strict copy */
.btn-secondary-dark {
  color: var(
    --color-black
  ); /* Matching home.css exact, though logically might be white/black depending on context */
}

.btn-secondary-dark::before,
.btn-secondary-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-secondary-dark::before {
  background-color: transparent;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-secondary-dark::after {
  background-color: var(--color-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary-dark:hover::before {
  transform-origin: right;
}

.btn-secondary-dark:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-secondary-dark:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.btn-secondary-dark:hover {
  color: var(--color-white);
  border-color: var(--color-purple);
  background: transparent;
}

/* Tertiary Button (Purple Fill) */
.btn-tertiary-default {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  border: 1px solid var(--color-purple);
  transition: none;
  background-color: transparent;
  z-index: 1;
  border-radius: 30px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-tertiary-default::before,
.btn-tertiary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-tertiary-default::before {
  background-color: var(--color-purple);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-tertiary-default::after {
  background-color: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tertiary-default:hover::before {
  transform-origin: right;
}

.btn-tertiary-default:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-tertiary-default:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.btn-tertiary-default:hover {
  color: var(--color-white);
  border-color: var(--color-purple);
  background: transparent;
}

/* =====================================================================
   Utilities
   ===================================================================== */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  padding-top: 40px;
  padding-bottom: 40px;
  height: 100%;
}

@media (min-width: 1024px) {
  .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.stack {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.no-margin {
  margin: 0 !important;
}

.title {
  font-size: var(--font-size-6);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.text-white {
  color: var(--color-white);
}

.text-dark {
  color: var(--color-black);
}

/* =====================================================================
   Block Separators
   ===================================================================== */
.separator-block {
  background: var(--color-purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) 16px;
  gap: var(--space-4);

  @media (min-width: 1024px) {
    background: var(--color-purple);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) 0;
    gap: var(--space-4);
    padding-bottom: 36px;
  }

  &.hero-separator {
    padding-bottom: 36px;

    @media (min-width: 1024px) {
      padding-bottom: 37px;
    }

    .container {
      gap: 6px;

      @media (min-width: 1024px) {
        gap: 16px;
      }
    }
  }

  &.function-separator {
    padding-inline: 16px;
    padding-bottom: 34px;

    @media (min-width: 1024px) {
      padding-inline: inherit;
      padding-bottom: 40px;
    }

    .container {
      gap: 8px;

      @media (min-width: 1024px) {
        gap: 16px;
        max-width: 900px;
      }
    }
  }

  &.ecosystem-separator {
    padding-bottom: 28px;

    @media (min-width: 1024px) {
      padding-bottom: 56px;
    }

    .container {
      @media (min-width: 1024px) {
        max-width: 994px;
        margin-top: 12px;
      }
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-4);

    @media (min-width: 1024px) {
      display: flex;
      flex-direction: column;
      padding: 0;
      gap: 12px;
      max-width: 840px;
    }

    .separator-block.is-purple {
      background-color: var(--color-purple);
      color: var(--color-white);
    }

    .separator-block.is-dark {
      background-color: var(--color-black);
      color: var(--color-white);
    }

    h1 {
      font-size: var(--heading-h3-size);
      line-height: var(--heading-h3-line);
      font-weight: var(--heading-h3-weight);

      @media (min-width: 1024px) {
        font-size: var(--heading-h1-size);
        line-height: var(--heading-h1-line);
        font-weight: var(--heading-h1-weight);
      }
    }
  }
}

.text-purple {
  color: var(--color-purple);
}

.no-margin {
  margin: 0;
}

#second-separator h1 {
  font-family: var(--heading-h3-family);
  font-size: var(--heading-h3-size);
  line-height: var(--heading-h3-line);
  font-weight: var(--heading-h3-weight);
}

/* =====================================================================
   Hero Section
   ===================================================================== */
.hero-instituciones {
  position: relative;
  padding-top: 80px;
  z-index: 2;

  @media (min-width: 1024px) {
    padding-top: 90px;
  }

  .container {
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: 0px !important;

    @media (min-width: 1024px) {
      padding-top: 40px;
      padding-inline: 0px;
    }

    .hero-grid {
      display: grid;
      grid-column: span 6;
      grid-template-columns: 1fr;
      grid-template-areas:
        "hero-content "
        "hero-visual"
        "hero-features ";
      gap: 0px;

      @media (min-width: 1024px) {
        grid-column: span 12;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "hero-content hero-visual"
          "hero-features hero-visual";
        column-gap: 34px;
        row-gap: 18px;
      }

      .hero-headline {
        grid-area: hero-content;
        text-align: center;
        margin-bottom: 36px;

        @media (min-width: 1024px) {
          padding-top: 26px;
          text-align: left;
          margin-bottom: 0px;
        }

        h1 {
          color: var(--color-black);
          font-size: var(--heading-h2-size);
          line-height: var(--heading-h2-line);
          margin-bottom: 8px;
          text-align: center;

          @media (min-width: 1024px) {
            font-size: var(--heading-h1-size);
            line-height: var(--heading-h1-line);
            text-align: left;
            margin-bottom: 12px;
          }
        }

        p {
          color: var(--color-text);
          max-width: 500px;
          text-align: center;
          font-size: var(--body-l-size);
          margin: 0;
          margin-top: 0px;
          margin-bottom: 22px;

          @media (min-width: 1024px) {
            font-size: var(--body-l-size);
            text-align: left;
            max-width: 668px;
          }
        }

        .btn {
          font-size: var(--body-s-size);
          line-height: var(--body-s-line);

          @media (min-width: 1024px) {
            max-width: 196px;
            font-size: var(--body-m-size);
            line-height: var(--body-m-line);
          }

          &:hover {
            background-color: var(--color-purple);
          }
        }
      }

      .hero-features {
        grid-area: hero-features;
        display: flex;
        flex-direction: column;

        font-size: var(--body-l-size);
        line-height: var(--body-l-line);

        @media (min-width: 1024px) {
          margin-top: 0px;
        }

        .text-purple {
          color: var(--color-purple);
          font-weight: var(--weight-bold);
        }

        .hero-feature {
          font-size: var(--body-m-size);
          line-height: var(--body-m-line);

          @media (min-width: 1024px) {
            font-size: var(--body-l-size);
            line-height: var(--body-l-line);
          }

          strong {
            font-size: var(--heading-h3-size);
            line-height: var(--heading-h3-line);
          }

          &:nth-child(1) {
            margin-bottom: 4px;
          }

          &:nth-child(2) {
            margin-bottom: 4px;
          }
        }
      }

      .hero-visual {
        grid-area: hero-visual;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: start;
        margin-bottom: 30px;

        @media (min-width: 1024px) {
          padding-top: 38px;
          justify-content: end;
          align-items: end;
          margin-bottom: 0px;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;

          opacity: 0;
          transform: translateY(12px) scale(0.975);
          filter: blur(8px) saturate(0.9);
          transition:
            opacity var(--dur-slow) var(--ease-emphasized),
            transform var(--dur-slow) var(--ease-emphasized),
            filter 700ms var(--ease-decelerate);
          will-change: opacity, transform, filter;
        }

        img.is-visible {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0) saturate(1);
        }

        .main-image {
          display: block;
          position: relative;
          max-width: 256px;
          max-height: 208px;
          aspect-ratio: 256 / 208;
          top: 0px;
          bottom: auto;
          left: 2px;
          object-fit: cover;

          /* Main Student Image */
          @media (min-width: 1024px) {
            display: block;
            position: relative;
            max-width: 455px;
            max-height: 293px;
            aspect-ratio: 455 / 293;
            bottom: 42px;
            left: 0px;
          }
        }
      }

      .hero-layer {
        position: absolute;
        display: block;
        max-width: 100%;
        max-height: 100%;
        transition: transform 0.3s ease;
      }

      .layer-1 {
        left: 18px;
        top: 9px;
        max-width: 155px;
        max-height: 70px;

        /* Top Chat Bubble - con-hero-instituciones */
        @media (min-width: 1024px) {
          top: -15px;
          left: -5px;
          max-width: 263px;
          max-height: 118px;
          z-index: 10;
        }
      }

      .layer-2 {
        top: -15px;
        right: 36px;
        max-width: 144px;
        max-height: 24px;

        /* Prestigio Tag */
        @media (min-width: 1024px) {
          top: 14px;
          right: 40px;
          max-width: 191px;
          max-height: 32px;
          z-index: 10;
        }
      }

      .layer-3 {
        top: auto;
        bottom: -9px;
        right: 20px;
        left: auto;
        max-width: 115px;
        max-height: 31px;

        /* Ginia Logo */
        @media (min-width: 1024px) {
          top: 160px;
          left: 14px;
          max-width: 143px;
          max-height: 39px;
          z-index: 10;
        }
      }

      .layer-4 {
        bottom: 6px;
        left: 40px;
        max-width: 79px;
        max-height: 103px;

        /* Generacion CVs Tag */
        @media (min-width: 1024px) {
          bottom: -48px;
          left: 141px;
          max-width: 117px;
          max-height: 151px;
          z-index: 10;
        }
      }

      .layer-5 {
        bottom: 49px;
        left: 132px;
        right: auto;
        max-width: 70px;
        max-height: 50px;

        /* Stats Card - Egresados Colocados */
        @media (min-width: 1024px) {
          bottom: -23px;
          right: 38px;
          left: auto;
          max-width: 140px;
          max-height: 99px;
          z-index: 10;
        }
      }

      .visual-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }
  }

  .logo-section {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    margin-top: 30px;

    @media (min-width: 1024px) {
      margin-top: 26px;
      gap: 8px;
    }

    h2 {
      text-align: left;
      font-size: var(--heading-h4-size);

      @media (min-width: 1024px) {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line-height);
      }
    }
  }

  .logo-marquee {
    overflow: hidden;
    position: relative;
  }
}

.logo-strip {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: logoMarquee 25s linear infinite;

  @media (min-width: 768px) {
    gap: 48px;
  }

  div {
    height: 40px;
    display: block;
    opacity: 0.85;
    object-fit: contain;
    transition: opacity var(--dur-fast) var(--ease-standard);

    &.conalep {
      width: 35px;
      height: 35px;

      background-repeat: no-repeat;
      background-size: contain;
      background-position: center 40%;

      &.black {
        background-image: url("../public/logos/conalep-black.svg");

        &:hover {
          background-image: url("../public/logos/conalep.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/conalep-white.svg");
      }

      @media (min-width: 1120px) {
        width: 45px;
        height: 45px;
      }
    }

    &.spaghetto {
      width: 63px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/spaghetto-black.svg");

        &:hover {
          background-image: url("../public/logos/spaghetto.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/spaghetto-white.svg");
      }

      @media (min-width: 1120px) {
        width: 95px;
        height: 30px;
      }
    }

    &.ebc {
      width: 40px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/ebc-black.svg");

        &:hover {
          background-image: url("../public/logos/ebc.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/ebc-white.svg");
      }

      @media (min-width: 1120px) {
        width: 70px;
        height: 35px;
      }
    }

    &.fundacion-donde {
      width: 89px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/fundacion-donde-black.svg");

        &:hover {
          background-image: url("../public/logos/fundacion-donde.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/fundacion-donde-white.svg");
      }

      @media (min-width: 1120px) {
        width: 133px;
        height: 30px;
      }
    }

    &.icb {
      width: 28px;
      height: 35px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/icb-black.svg");

        &:hover {
          background-image: url("../public/logos/icb.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/icb-white.svg");
      }

      @media (min-width: 1120px) {
        width: 36px;
        height: 45px;
      }
    }

    &.megamedia {
      width: 83px;
      height: 25px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/megamedia-black.svg");

        &:hover {
          background-image: url("../public/logos/megamedia.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/megamedia-white.svg");
      }

      @media (min-width: 1120px) {
        width: 117px;
        height: 35px;
      }
    }

    &.unid {
      width: 48px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/unid-black.svg");

        &:hover {
          background-image: url("../public/logos/unid.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/unid-white.svg");
      }

      @media (min-width: 1120px) {
        width: 73px;
        height: 30px;
      }
    }

    &.vive-xux {
      width: 60px;
      height: 25px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/vive-xux-black.svg");

        &:hover {
          background-image: url("../public/logos/vive-xux.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/vive-xux-white.svg");
      }

      @media (min-width: 1120px) {
        width: 85px;
        height: 35px;
      }
    }

    &.carfer {
      width: 49px;
      height: 30px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/carfer-black.svg");

        &:hover {
          background-image: url("../public/logos/carfer.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/carfer-white.svg");
      }

      @media (min-width: 1120px) {
        width: 66px;
        height: 40px;
      }
    }

    &.patron {
      width: 23px;
      height: 30px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/patron-black.svg");

        &:hover {
          background-image: url("../public/logos/patron.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/patron-white.svg");
      }

      @media (min-width: 1120px) {
        width: 31px;
        height: 40px;
      }
    }
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes logoMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =====================================================================
   Impulsa Section
   ===================================================================== */
.impulsa-section {
  position: relative;
  padding: 40px 0;
  z-index: 2;

  @media (min-width: 1024px) {
    padding: 43px 0;
    padding-top: 126px;
    padding-bottom: 79px;
  }

  .container {
    position: relative;
    z-index: 2;
    padding-top: 32px;
    padding-bottom: 0px !important;
    row-gap: 0px;

    @media (min-width: 1024px) {
      row-gap: 14px;
      padding-inline: 0;
    }

    .impulsa-header {
      grid-column: span 6;

      @media (min-width: 1024px) {
        grid-column: span 12;
        animation: slideInLeft 0.5s ease-out forwards;
      }

      h2 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        color: var(--color-black);

        @media (min-width: 1024px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        color: var(--color-text);
        max-width: 290px;
        margin-top: 5px;
        margin-bottom: 0px;

        @media (min-width: 1024px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 800px;
        }
      }
    }

    .impulsa-grid {
      grid-column: span 6;
      display: grid;
      grid-template-areas:
        "text"
        "visual";
      margin-top: 0px;
      margin-bottom: 0px;
      row-gap: 24px;

      @media (min-width: 1024px) {
        grid-column: 1 / span 12;
        grid-template-areas: "visual text";
        grid-template-columns: 548px 548px;
        gap: 24px;
      }

      .impulsa-visual {
        grid-area: visual;
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        justify-self: center;

        @media (min-width: 1024px) {
          height: 100%;
          justify-self: start;
        }

        .main-image {
          /* Main Student Image */
          width: 208px;
          height: 239px;
          object-fit: contain;
          object-position: left;

          @media (min-width: 1024px) {
            object-position: left;
            width: 346px;
            height: 430px;
            position: relative;
            left: 0px;
            top: 0px;
          }
        }

        .impulsa-layer {
          position: absolute;
          display: block;
          max-width: 100%;
          max-height: 100%;
          transition: transform 0.3s ease;
        }

        .layer-1 {
          /* Top Chat Bubble */
          top: 10%;
          right: 30px;
          width: 45%;
          z-index: 10;

          @media (min-width: 1024px) {
            top: 44px;
            right: 0;
            width: 269px;
            z-index: 10;
            height: 59px;
          }
        }

        .layer-2 {
          /* Bottom Chat Bubble */
          top: 57%;
          right: 10%;
          width: 45%;
          z-index: 10;

          @media (min-width: 1024px) {
            top: 216px;
            right: 0;
            width: 264px;
            z-index: 10;
            height: 162px;
          }
        }
      }

      .impulsa-content {
        grid-area: text;
        padding-top: 12px;

        @media (min-width: 1024px) {
          padding-top: 28px;
        }

        .impulsa-list {
          list-style: none;
          padding: 0;
          margin: 0px;

          @media (min-width: 1024px) {
            padding-bottom: 18px;
          }

          li {
            h3 {
              font-size: var(--heading-h4-size);
              line-height: var(--heading-h4-line);

              @media (min-width: 1024px) {
                font-size: var(--heading-h3-size);
                line-height: var(--heading-h3-line);
              }
            }

            p {
              margin: 0;
              color: var(--color-text);
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);

              @media (min-width: 1024px) {
                font-size: var(--body-l-size);
                line-height: var(--body-l-line);
              }
            }

            &:nth-child(1) {
              margin-bottom: 10px;

              @media (min-width: 1024px) {
                margin-bottom: 10px;
              }
            }

            &:nth-child(2) {
              margin-bottom: 10px;

              @media (min-width: 1024px) {
                margin-bottom: 12px;
              }
            }

            &:nth-child(3) {
              margin-bottom: 12px;

              @media (min-width: 1024px) {
                margin-bottom: 10px;
              }
            }

            &:nth-child(4) {
              margin-bottom: 12px;

              @media (min-width: 1024px) {
                margin-bottom: 12px;
              }
            }
          }
        }

        .btn {
          width: 100%;
          height: 100%;
          max-width: 206px;
          max-height: 24px;
          margin-top: 15px;

          @media (min-width: 1024px) {
            max-width: 202px;
            max-height: 26px;
            margin-top: 0px;
          }
        }
      }
    }
  }
}

.background-blur-circle-container {
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 127.78%; /* 100% + 13.89% * 2 to match Figma inset */
    height: 119.56%; /* 100% + 9.78% * 2 to match Figma inset */
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(164, 118, 255, 0.4) 0%,
      rgba(164, 118, 255, 0.2) 40%,
      transparent 70%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }

  &::before {
    top: -9.78%;
    right: -13.89%;
    -webkit-animation: ellipseFloat 10s ease-in-out infinite;
    animation: ellipseFloat 10s ease-in-out infinite;
  }

  &::after {
    bottom: -9.78%;
    left: -13.89%;
    -webkit-animation: ellipseFloat 10s ease-in-out infinite reverse;
    animation: ellipseFloat 10s ease-in-out infinite reverse;
  }
}

@keyframes ellipseFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(25%, -15%) scale(1.3);
  }
  50% {
    transform: translate(40%, 25%) scale(1.5);
  }
  75% {
    transform: translate(-20%, 35%) scale(1.3);
  }
}

/* =====================================================================
   Formacion Section
   ===================================================================== */
.formacion-section {
  position: relative;
  padding-top: 34px;
  padding-bottom: 56px;
  background-color: var(--color-beige);
  overflow-x: hidden;

  @media (min-width: 1024px) {
    padding: 80px 0;
    padding-bottom: 82px;
  }

  .container {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 0px;
    column-gap: 0px;
    z-index: 2;

    @media (min-width: 1024px) {
      padding-inline: 0;
    }

    .formacion-header {
      text-align: left;
      grid-column: 1 / span 12;

      @media (min-width: 1024px) {
        margin-bottom: 34px;
        grid-column: 1 / span 12;
      }

      h2 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin-bottom: 6px;
        color: var(--color-black);
        max-width: 1020px;

        @media (min-width: 1024px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 10px;
        }
      }

      p {
        color: var(--color-text);
        max-width: 1000px;
        margin: 0;

        @media (min-width: 1024px) {
          margin-top: -8px;
        }
      }
    }

    .formacion-rows {
      padding-top: 12px;
      grid-column: 1 / span 12;

      @media (min-width: 1024px) {
        padding-top: 0;
        grid-column: 1 / span 12;
      }

      .formacion-row {
        display: flex;
        flex-direction: column;
        gap: 19px;
        align-items: start;

        @media (min-width: 1024px) {
          flex-direction: row;
          gap: 119px;
        }

        &:nth-child(1) {
          margin-bottom: 30px;

          @media (min-width: 1024px) {
            margin-bottom: 80px;

            .formacion-title-content {
              max-width: 425px;
            }
          }
        }

        &:nth-child(2) {
          margin-bottom: 12px;

          @media (min-width: 1024px) {
            margin-bottom: 80px;

            .formacion-content {
              gap: 30px;
            }
          }
        }

        &:nth-child(3) {
          @media (min-width: 1024px) {
            .formacion-list {
              li {
                font-size: var(--body-m-size);
                line-height: var(--body-m-line);
                padding-left: 22px;
              }
            }

            .formacion-content {
              gap: 32px;
            }
          }
        }

        .formacion-visual {
          order: 1;

          @media (min-width: 1024px) {
            order: 1;
            justify-self: start;
          }

          img {
            width: 100%;
            height: 100%;
          }

          &:nth-child(1) {
            @media (min-width: 1024px) {
              justify-self: start;
              max-width: 453px;
              max-height: 254px;
            }
          }

          &:nth-child(2) {
            @media (min-width: 1024px) {
              justify-self: start;
              max-width: 451px;
            }
          }

          &:nth-child(3) {
            @media (min-width: 1024px) {
              justify-self: start;
              max-width: 451px;
            }
          }
        }
      }

      .formacion-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;

        @media (min-width: 1024px) {
          top: -5px;
          order: 2;
          gap: 24px;
        }

        .formacion-title-group {
          display: flex;
          align-items: start;
          flex-direction: row;
          gap: 6px;

          @media (min-width: 1024px) {
            gap: 16px;
          }

          .formacion-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* background-color: #e6deff; */
            /* padding: var(--space-2); */
            /* Light purple background */
            /* border-radius: 50%; */
            color: var(--color-purple);
            width: 40px; /* Enforcing size based on previous SVG attributes if needed, or letting IMG handle it */
            height: 40px;
          }

          .formacion-title-content {
            h3 {
              font-size: var(--heading-4-size);
              font-weight: var(--heading-h4-weight);
              font-family: var(--font-sans);

              @media (min-width: 1024px) {
                font-size: var(--heading-h3-size);
                font-weight: var(--heading-h3-weight);
                margin-bottom: -3px;
              }
            }

            p.formacion-subtitle {
              margin: 0;
              font-size: var(--body-m-size);
              font-weight: var(--body-m-weight);

              @media (min-width: 1024px) {
                font-size: var(--body-l-size);
                line-height: var(--body-l-line);
              }
            }
          }
        }

        .formacion-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 0px;

          @media (min-width: 1024px) {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
          }

          li {
            position: relative;
            padding-left: 24px;
            color: var(--color-text);
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);

            @media (min-width: 1024px) {
              font-size: var(--body-l-size);
              line-height: var(--body-l-line);
            }

            &::before {
              content: "•";
              position: absolute;
              left: 8px;
              color: var(--color-text);
              font-weight: bold;
            }
          }
        }

        .btn {
          align-self: flex-start;
          width: 206px;
          height: 26px;

          @media (min-width: 1024px) {
            align-self: flex-start;
            width: 206px;
            height: 26px;
            margin-top: -6px;
          }
        }
      }
    }
  }
}

.decorator {
  display: none;
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 1;

  @media (min-width: 1024px) {
    display: inherit;
  }
}

/* =====================================================================
   HIW Section (Copied from base.css)
   ===================================================================== */
.hiw-section {
  padding-top: 8px;
  padding-bottom: 40px;
  background:
    radial-gradient(
      760px circle at 85% 65%,
      rgba(164, 118, 255, 0.28) 0%,
      transparent 60%
    ),
    var(--color-beige);

  @media (min-width: 1024px) {
    padding-top: 80px;
    padding-bottom: 52px;
    background:
      radial-gradient(
        760px circle at 85% 65%,
        rgba(164, 118, 255, 0.28) 0%,
        transparent 60%
      ),
      var(--color-beige);
  }

  .container {
    row-gap: 0px;

    @media (min-width: 1024px) {
      row-gap: 24px;
    }

    .title {
      grid-column: span 6;
      margin-bottom: 42px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-bottom: 0px;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 100%;
        }
      }
    }

    .hiw-flow {
      grid-column: span 6;
      display: grid;
      grid-template-areas:
        "hiw-label-1 hiw-label-2"
        "match-1 match-4"
        "match-2 match-5"
        "match-3 match-6"
        "match-7 match-7";
      grid-template-columns: 1fr 1fr;
      row-gap: 5px;
      column-gap: 15px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        grid-template-areas:
          "hiw-label-1 hiw-label-1 hiw-label-1 hiw-label-1"
          "match-1 match-2 match-3 match-7"
          "match-4 match-5 match-6 match-7"
          "hiw-label-2 hiw-label-2 hiw-label-2 hiw-label-2";
        grid-template-columns: repeat(4, 285px);
        row-gap: 0px;
        column-gap: 0px;
      }

      .hiw-item {
        display: flex;
        flex-direction: column;

        @media (min-width: 1024px) {
          opacity: 0;
          transition: opacity 0.6s ease-out;
          gap: 16px;
        }

        .hiw-title {
          display: flex;
          align-items: start;

          @media (min-width: 1120px) {
            min-height: 48px;
          }
        }

        &:nth-of-type(1) {
          grid-area: match-1;

          h3 {
            max-width: 138px;
          }

          p {
            max-width: 265px;
          }
        }

        &:nth-of-type(2) {
          grid-area: match-2;

          h3 {
            max-width: 140px;
          }

          p {
            max-width: 220px;
          }
        }

        &:nth-of-type(3) {
          grid-area: match-3;

          p {
            max-width: 256px;
          }
        }

        &:nth-of-type(4) {
          grid-area: match-4;
        }

        &:nth-of-type(5) {
          grid-area: match-5;

          h3 {
            max-width: 206px;
          }

          p {
            max-width: 260px;
          }
        }

        &:nth-of-type(6) {
          grid-area: match-6;

          p {
            max-width: 260px;
          }
        }

        &:nth-of-type(7) {
          grid-area: match-7;
          display: grid;
          grid-template-areas:
            "icon"
            "title"
            "text";
          align-self: center;
          row-gap: 0px;
          column-gap: 14px;
          margin-bottom: 0;
          text-align: center;

          @media (min-width: 1120px) {
            grid-template-areas:
              "icon title"
              "icon text";
            margin-bottom: 46px;
            text-align: left;
          }

          .hiw-icon {
            grid-area: icon;
          }

          img {
            justify-self: center;

            @media (min-width: 1120px) {
              justify-self: start;
            }
          }

          h3 {
            grid-area: title;
            margin: 0;

            @media (min-width: 1120px) {
            }
          }

          p {
            grid-area: text;
            margin: 0;

            @media (min-width: 1120px) {
            }
          }
        }

        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6) {
          margin-top: 0;

          @media (min-width: 1120px) {
            margin-top: 42px !important;
          }

          h3,
          h4 {
            /* margin-bottom: 8px; */

            @media (max-width: 1120px) {
              margin-bottom: 0px;
            }
          }
        }

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(5),
        &:nth-of-type(6),
        &:nth-of-type(7) {
          @media (max-width: 1120px) {
            margin-top: 26px;
          }
        }

        img {
          width: 100%;
          height: 100%;
          max-width: 32px;
          max-height: 32px;
          margin-bottom: 6px;

          @media (min-width: 1120px) {
            max-width: 40px;
            max-height: 40px;
            margin-bottom: 0;
          }
        }

        h3,
        h4 {
          margin-bottom: 0px;

          @media (max-width: 1120px) {
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);
            margin-bottom: 4px;
          }
        }

        p {
          margin: 0;
          font-size: var(--body-s-size);
          line-height: var(--body-s-line);

          @media (min-width: 1120px) {
            font-size: var(--body-m-size);
            line-height: var(--body-m-line);
          }
        }
      }

      .hiw-label {
        &:first-of-type {
          grid-area: hiw-label-1;
          margin-bottom: 13px;
        }

        &:last-of-type {
          grid-area: hiw-label-2;
        }
      }
    }

    .hiw-cta {
      grid-column: span 6;
      display: flex;
      justify-content: center;
      margin-top: 39px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-top: 0;
      }

      button {
        width: 100%;
        max-width: 196px;
      }
    }

    /* Animation Trigger */
    &.is-inview {
      .hiw-item {
        @media (min-width: 1024px) {
          opacity: 1;
        }

        /* Always Visible: 1-1, 2-1 */
        &:nth-of-type(1),
        &:nth-of-type(4) {
          transition-delay: 0s;
          opacity: 1;
        }

        /* Step 1: 1-2, 2-2 */
        &:nth-of-type(2),
        &:nth-of-type(5) {
          transition-delay: 0.1s;
        }

        /* Step 2: 1-3, 2-3 */
        &:nth-of-type(3),
        &:nth-of-type(6) {
          transition-delay: 0.3s;
        }

        /* Step 3: 3-1 */
        &:nth-of-type(7) {
          transition-delay: 0.5s;
        }
      }
    }
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100px);

    opacity: 0;
  }

  100% {
    transform: translateX(0);

    opacity: 1;
  }
}

/* =====================================================================
   Impact Section
   ===================================================================== */
.impact-section {
  position: relative;
  padding: 40px 0;
  z-index: 2;
  background:
    radial-gradient(circle at 20% 60%, var(--color-blue) -80%, transparent 40%),
    radial-gradient(
      circle at 20% 68%,
      var(--color-yellow) -80%,
      transparent 40%
    );
  background-color: var(--color-beige);

  @media (min-width: 1024px) {
    padding: 60px 0;
    padding-top: 59px;
    background:
      radial-gradient(
        circle at 40% 0%,
        var(--color-purple) -80%,
        transparent 40%
      ),
      radial-gradient(
        circle at 0% 30%,
        var(--color-purple) -120%,
        transparent 30%
      ),
      radial-gradient(
        circle at 100% 60%,
        var(--color-blue) -120%,
        transparent 20%
      ),
      radial-gradient(
        circle at 100% 68%,
        var(--color-yellow) -120%,
        transparent 20%
      );
  }

  .container {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;
    row-gap: 0px;
    column-gap: 0px;

    @media (min-width: 1024px) {
      padding-inline: 0;
      row-gap: 18px;
    }

    .title {
      grid-column: span 6;

      @media (min-width: 1120px) {
        grid-column: span 12;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;
        margin-bottom: 6px;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-l-size);
          line-height: var(--body-l-line);
          max-width: 708px;
        }
      }
    }

    .press-carousel {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      gap: 0px;
      width: 100%;

      @media (min-width: 1024px) {
        grid-column: span 12;
        gap: 40px;
        overflow: visible;
        flex: 1;
      }
    }

    .press-viewport {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0px 20px;
      margin: 0 -20px;
      width: calc(100% + 40px);
      padding-bottom: 20px;
      margin-bottom: -20px;

      &::-webkit-scrollbar {
        display: none;
      }

      @media (min-width: 1024px) {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
        overflow-x: visible;
        padding: 0;
        margin: 0;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    /* .press-track is effectively redundant if viewport handles the grid/flex,
       but usually wraps items. If HTML has viewport > track > items,
       we need to make track display:contents or match parent.
       Let's assume track is the direct container of cards?
       Wait, HTML is: carousel > viewport > track > cards.
       So track should be the flex/grid container.
       Adjusting selector to target .press-track for layout.
    */
    .press-viewport {
      /* Reset viewport if it's just a wrapper, or styling it if it's the scroller.
         In trust-carousel, trust-cards is the scroller.
         Here press-viewport seems to be the intended scroller.
         BUT press-track is inside.
         Let's make press-track the one that behaves like trust-cards.
         And viewport just handles overflow or is reset.
      */
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      /* Resetting previous hacks */
      padding: 0;
      margin: 0;

      &::-webkit-scrollbar {
        display: none;
      }

      @media (min-width: 1024px) {
        overflow: visible;
      }
    }

    .press-track {
      display: flex;
      gap: 16px;
      width: max-content; /* Ensure it grows horizontally */

      @media (min-width: 1024px) {
        display: grid;
        grid-column: span 12;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
        width: 100%;
        padding: 0;
      }
    }

    /* Animate when parent container (.press-carousel) has .appear class */
    /* Animate when parent container (.press-carousel) has .appear class */
    .press-carousel.appear .press-viewport .press-track .press-card {
      @media (min-width: 1024px) {
        animation: slide-in-left 0.5s ease-out forwards;
      }
    }

    .press-card {
      flex: 0 0 70vw;
      width: 70vw;
      position: relative;
      scroll-snap-align: center;
      display: flex;
      flex-direction: column;
      gap: 0px;

      @media (min-width: 1024px) {
        flex: none;
        max-width: 357px;
        grid-column: span 4;
        gap: 0px;
        opacity: 0;
      }

      img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        margin-bottom: 16px;
        aspect-ratio: 223 / 122;

        @media (min-width: 1024px) {
          margin-bottom: 8px;
          max-width: 357px;
          max-height: 201px;
          aspect-ratio: 357 / 201;
        }
      }

      &:nth-child(1) {
        h3 {
          max-width: 200px;
          @media (max-width: 1024px) {
            max-width: 186px;
          }
        }
        @media (min-width: 1024px) {
          animation-delay: 0s;
        }
      }

      &:nth-child(2) {
        h3 {
          @media (max-width: 1024px) {
            max-width: 220px;
          }
        }
        @media (min-width: 1024px) {
          animation-delay: 0.2s !important;
        }
      }

      &:nth-child(3) {
        h3 {
          @media (max-width: 1024px) {
            max-width: 220px;
          }
        }
        @media (min-width: 1024px) {
          animation-delay: 0.4s !important;
        }
      }

      h3 {
        font-size: var(--heading-h4-size);
        line-height: var(--heading-h4-line);
        margin-bottom: 8px;

        @media (min-width: 1024px) {
          font-size: var(--heading-h3-size);
          line-height: var(--heading-h3-line);
          max-width: 220px;
        }
      }

      p {
        font-size: var(--body-m-size);
        line-height: var(--body-m-line);
        color: var(--color-text);
        margin: 0;

        @media (min-width: 1024px) {
          max-width: 330px;
        }
      }
    }

    /* Mobile Pagination */
    .press-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      width: 100%;

      @media (min-width: 1024px) {
        display: none;
      }
    }

    .press-pagination-mobile {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .press-pagination-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-black);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s ease;

      &.is-active {
        width: 32px;
        height: 6px;
        background: var(--color-purple);
        border-radius: 100px;
        opacity: 1;
      }
    }
  }

  .impact-cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    grid-column: span 6;

    @media (min-width: 1024px) {
      margin-top: 10px;
      grid-column: span 12;
    }

    .btn {
      width: 100%;
      max-width: 228px;
    }
  }
}

/* =====================================================================
   Ecosystem Section
   ===================================================================== */
.ecosystem-section {
  position: relative;
  padding-top: 72px;
  padding-bottom: 40px;
  overflow: hidden;

  @media (min-width: 1024px) {
    padding-top: 102px;
    padding-bottom: 60px;
  }

  .container {
    position: relative;
    row-gap: 0;
    column-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;

    @media (min-width: 1024px) {
      padding-inline: 0;
      row-gap: 24px;
      column-gap: 16px;
    }

    .title {
      grid-column: span 6;

      @media (min-width: 1120px) {
        grid-column: span 12;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;
        margin-bottom: 6px;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-l-size);
          line-height: var(--body-l-line);
          max-width: 708px;
        }
      }
    }

    .ecosystem-grid {
      display: grid;
      grid-template-rows: 1fr auto;
      gap: var(--space-6);
      grid-column-start: 1;
      grid-column-end: 7;

      @media (min-width: 1024px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 80px;
        grid-column-start: 1;
        grid-column-end: 13;
      }

      .ecosystem-logo {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 105px;
        max-height: 26px;

        @media (min-width: 1024px) {
          max-width: 162px;
          max-height: 40px;
          margin-bottom: 28px;
        }
      }

      .ecosystem-content {
        @media (min-width: 1024px) {
        }

        p {
          font-size: var(--body-s-size);
          line-height: var(--body-s-line);
          max-width: 454px;

          @media (min-width: 1024px) {
            font-size: var(--body-m-size);
            line-height: var(--body-m-line);
          }

          &:nth-of-type(1) {
            margin-top: 6px;
            margin-bottom: 20px;

            @media (min-width: 1024px) {
              margin-bottom: 20px;
              max-width: 454px;
            }
          }

          &:nth-of-type(2) {
            margin-bottom: 20px;

            @media (min-width: 1024px) {
              margin-bottom: 25px;
              max-width: 454px;
            }
          }

          &:nth-of-type(3) {
            @media (min-width: 1024px) {
              display: none;
            }
          }
        }

        .btn {
          width: 100%;
          max-width: 170px;
          padding-inline: 0px;
        }
      }

      .ecosystem-visual {
        @media (min-width: 1024px) {
        }

        .ecosystem-image-wrapper {
          position: relative;
          width: 100%;

          .ecosystem-main-img {
            display: block;
            position: relative;
            top: 3%;
            left: 22%;
            width: 100%;
            height: 100%;
            max-width: 43%;
            border-radius: var(--radius-m);
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;

            @media (min-width: 1024px) {
              left: 157px;
              top: 0px;
              max-width: 216px;
              max-height: 285px;
            }
          }

          .ecosystem-bubble {
            position: absolute;
            width: auto;
            /* max-width: 45%; */
            height: auto;
            z-index: 2;
            filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1));
          }

          .bubble-1 {
            top: 10%;
            left: 52%;
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;
            width: 49%;

            @media (min-width: 1024px) {
              width: 234px;
              height: 28px;
              top: 10px;
              right: 0px;
              animation: scaleInCenter 0.5s ease-out forwards;
              transform-origin: center center;
            }
          }

          .bubble-2 {
            top: 21%;
            left: 0px;
            width: 34.5%;
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;

            @media (min-width: 1024px) {
              top: 78px;
              left: 20px;
              right: auto;
              max-width: 183px;
              max-height: 61px;
              animation: scaleInCenter 0.5s ease-out forwards;
              transform-origin: center center;
            }
          }

          .bubble-3 {
            top: 49%;
            left: 56%;
            width: 35%;
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;

            @media (min-width: 1024px) {
              top: 140px;
              right: 16px;
              max-width: 214px;
              max-height: 23px;
              animation: scaleInCenter 0.5s ease-out forwards;
              transform-origin: center center;
            }
          }

          .bubble-4 {
            bottom: 18%;
            left: 3.8%;
            width: 31.5%;
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;

            @media (min-width: 1024px) {
              top: 181px;
              left: 21px;
              max-width: 183px;
              max-height: 49px;
              animation: scaleInCenter 0.5s ease-out forwards;
              transform-origin: center center;
            }
          }

          .bubble-5 {
            bottom: 11%;
            right: 14%;
            width: 30.6%;
            animation: scaleInCenter 0.5s ease-out forwards;
            transform-origin: center center;

            @media (min-width: 1024px) {
              bottom: 16px;
              right: 39px;
              max-width: 151px;
              max-height: 28px;
              animation: scaleInCenter 0.5s ease-out forwards;
              transform-origin: center center;
            }
          }

          @media (max-width: 1024px) {
            .ecosystem-container {
              grid-template-columns: 1fr;
              gap: 60px;
              margin-top: 80px;
            }

            .ecosystem-image-wrapper {
              margin: 0 auto;
              max-width: 500px;
            }
          }

          /* @media (max-width: 768px) {
            .ecosystem-bubble {
              transform: scale(0.8);

            }

            .bubble-1 {
              left: -5%;
            }

            .bubble-2 {
              right: -5%;
            }

            .bubble-3 {
              right: -5%;
            }

            .bubble-4 {
              left: -5%;
            }

            .bubble-5 {
              right: -5%;
            }
          } */
        }
      }
    }
  }

  .decorator-desktop {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 50px;
    z-index: 1;

    @media (min-width: 1024px) {
      display: block;
      position: absolute;
      bottom: 5px;
      right: 0px;
      z-index: 1;
    }

    .deco-eco {
      position: absolute;
      bottom: 100px;
      right: 40px;

      @media (min-width: 1024px) {
        bottom: -5px;
        right: 86px;
      }
    }
  }

  .decorator-mobile {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);

    @media (min-width: 1024px) {
      display: none;
    }

    .deco-eco {
      position: absolute;
      bottom: 100px;
      right: 40px;

      @media (min-width: 1024px) {
        bottom: -5px;
        right: 86px;
      }
    }
  }
}

.background-blur-circle-container {
  position: relative;

  .background-blur-circle-impact-ecosystem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(150px);
    z-index: 1;
    overflow: hidden;

    .circle {
      position: absolute;
      border-radius: 100%;
      background-color: var(--color-purple);
      opacity: 0.8;

      &.circle-1 {
        top: 0%;
        left: 40%;
        width: 50rem;
        height: 10rem;
        max-width: 974px;
        max-height: 231px;
        transform: translateX(-50%);
      }

      &.circle-2 {
        top: 15%;
        right: 0;
        width: 30rem;
        height: 10rem;
        max-width: 423px;
        max-height: 231px;
        background-color: var(--color-blue);
      }

      &.circle-3 {
        top: 40%;
        right: 0;
        width: 10rem;
        height: 10rem;
        max-width: 240px;
        max-height: 231px;
        background-color: var(--color-yellow);
      }

      &.circle-4 {
        bottom: 30%;
        left: -17%;
        width: 30rem;
        height: 10rem;
        max-width: 423px;
        max-height: 231px;
        background-color: var(--color-purple);
      }
    }
  }
}

/* =====================================================================
   Contact Section (Synced with Home)
   ===================================================================== */
.contact-section {
  padding-top: 60px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
  background:
    /* Left Ellipse: Matches Figma 30:872 */
    radial-gradient(
      ellipse 337px 215px at 0% 58%,
      rgba(164, 118, 255, 0.45) 0%,
      transparent 70%
    ),
    /* Right Circle: Matches Figma 26:821 */
    radial-gradient(
        circle 173px at 94% 86%,
        rgba(164, 118, 255, 0.45) 0%,
        transparent 70%
      ),
    var(--color-beige);

  @media (min-width: 1120px) {
    padding-top: 80px;
    padding-bottom: 52px;
  }

  .container {
    row-gap: 0px;
    column-gap: 0px;
    padding-top: 0px;
    padding-bottom: 0px;

    @media (min-width: 1120px) {
      row-gap: 24px;
      column-gap: 16px;
    }

    .contact-grid {
      grid-column: span 6;
      display: grid;
      gap: 20px;
      grid-template-areas: "title" "form";
      grid-template-columns: 1fr;
      column-gap: 0px;
      row-gap: 0px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        grid-template-areas: "title form" "media form";
        grid-template-columns: minmax(0, 548px) 1fr;
      }

      h1 {
        grid-area: title;
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin-bottom: 25px;

        @media (min-width: 1120px) {
          max-width: 400px;
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 0px;
        }
      }

      .contact-visual {
        grid-area: media;
        position: relative;
        display: none;

        @media (min-width: 1120px) {
          display: block;
        }

        img {
          position: absolute;
          width: 100%;
          height: 100%;

          &:nth-child(1) {
            position: relative;
            top: 4px;
            left: 79px;
            max-width: 300px;
            max-height: 216px;
            aspect-ratio: 300 / 216;
          }

          &:nth-child(2) {
            left: 0px;
            bottom: 49px;
            max-width: 123px;
            max-height: 64px;
            aspect-ratio: 123 / 64;
          }

          &:nth-child(3) {
            left: 0px;
            top: 96px;
            max-width: 153px;
            max-height: 24px;
            aspect-ratio: 153 / 24;
          }

          &:nth-child(4) {
            top: 95px;
            right: 93px;
            max-width: 139px;
            max-height: 31px;
            aspect-ratio: 139 / 31;
          }

          &:nth-child(5) {
            top: 38px;
            right: 93px;
            max-width: 103px;
            max-height: 25px;
            aspect-ratio: 103 / 25;
          }
        }
      }

      form {
        grid-area: form;
        display: flex;
        flex-direction: column;
        gap: 24px;

        @media (min-width: 1120px) {
        }

        .form-row {
          &.is-2 {
            display: flex;
            gap: 20px;
            width: 100%;
            flex-direction: column;

            @media (min-width: 1120px) {
              flex-direction: row;
            }

            div {
              flex: 1;
            }
          }

          .form-field {
            label {
              line-height: 1;
            }
            input {
              margin: 0;
              padding: 0;
            }
          }
        }

        .contact-actions {
          .btn {
            font-family: var(--font-sans);
          }
        }
      }
    }
  }

  .contact-form .form-label,
  .contact-form .form-label--desktop,
  .contact-form .form-label--mobile {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--weight-medium);
    color: var(--color-black);
    display: block;
  }

  .contact-form .form-label--desktop {
    display: none;
  }

  @media (min-width: 768px) {
    .contact-form .form-label--desktop {
      display: block;
    }

    .contact-form .form-label--mobile {
      display: none;
    }
  }

  .contact-form .form-control {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    background: transparent;
    box-shadow: none;
    width: 100%;
    color: var(--color-dark);
    height: 24px;
    transition:
      border-color var(--dur-normal) var(--ease-standard),
      color var(--dur-normal) var(--ease-standard);
  }

  .contact-form .form-control:focus {
    outline: none;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
  }

  .contact-form .form-control::placeholder {
    color: #888888;
  }

  .contact-form .form-field.is-active .form-control,
  .contact-form .form-field.is-typing .form-control {
    border-bottom-color: var(--color-purple);
  }

  .contact-form .form-field.is-error .form-label {
    color: var(--color-error);
  }

  .contact-form .form-field.is-error .form-control,
  .contact-form .form-control[aria-invalid="true"] {
    border-bottom-color: #e20038;
    color: #e20038;
  }

  .contact-form .form-field.is-error .form-error {
    display: block;
  }

  .form-error {
    display: none;
    color: #e20038;
    font-family: var(--body-s-family);
    font-size: 12px;
    line-height: 1.2;
    margin-top: 4px;
  }

  .select-wrapper {
    position: relative;
    display: block;
  }

  .contact-form select.form-control.form-control--select {
    height: 40px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right center;
  }

  .contact-form select.form-control.form-control--select.is-placeholder {
    color: #888888;
  }

  .contact-form .custom-select {
    color: var(--color-dark);
  }

  .contact-form .custom-select__trigger {
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-black);
    height: 24px;
    padding: 0;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
  }

  .contact-form .custom-select__trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: block;
    padding-right: 8px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
  }

  .contact-form .custom-select__trigger.is-placeholder {
    color: #888888;
  }

  .contact-form .form-field.is-active .custom-select__trigger,
  .contact-form .form-field.is-typing .custom-select__trigger,
  .contact-form .custom-select.open .custom-select__trigger {
    border-bottom-color: var(--color-purple);
  }

  .contact-form .form-field.is-error .custom-select__trigger {
    border-bottom-color: #e20038;
    color: #e20038;
  }

  .contact-form .custom-select__trigger svg,
  .contact-form .custom-select__trigger i {
    color: rgba(17, 14, 61, 0.7);
  }

  .select-icon {
    position: absolute;
    right: 18px;
    top: 54%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(17, 14, 61, 0.7);
    pointer-events: none;
  }

  .form-field--radio {
    display: flex;
    flex-direction: column;
  }

  .form-radio-label {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    color: rgba(17, 14, 61, 0.8);
  }

  .form-field--radio .form-radio-group {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (min-width: 1120px) {
    }
  }

  .form-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    color: rgba(17, 14, 61, 0.8);
    cursor: pointer;
    user-select: none;
  }

  .form-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(164, 118, 255, 0.8);
    background: transparent;
    margin: 0;
    display: grid;
    place-items: center;
    transition:
      border-color var(--dur-normal) var(--ease-standard),
      background-color var(--dur-normal) var(--ease-standard);
  }

  .form-radio input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-purple);
    transform: scale(0);
    transition: transform var(--dur-normal) var(--ease-standard);
  }

  .form-radio input[type="radio"]:checked {
    border-color: var(--color-purple);
  }

  .form-radio input[type="radio"]:checked::before {
    transform: scale(1);
  }

  .form-field--textarea {
    height: 60px;
    display: flex;
    flex-direction: column;
  }

  .form-field--textarea textarea.form-control {
    flex: 1;
    resize: none;
    overflow: hidden;
  }

  .form-radio--alt {
    color: var(--color-white);
  }

  .form-radio--alt input[type="radio"] {
    border-color: var(--color-white);
  }

  .form-radio--alt input[type="radio"]::before {
    background: var(--color-white);
  }

  .contact-actions {
    grid-column: span 3;

    .btn {
      width: 100%;
      max-width: 196px;
    }
  }

  .contact-profile-fields {
    grid-column: span 6;
    display: none;
  }

  .contact-profile-fields.has-content {
    display: block;
  }

  .contact-profile-fields {
    .form-control--select {
      height: auto !important;
    }

    .form-control--select.is-placeholder {
      color: #888888;
    }
  }

  @media (max-width: 768px) {
    .contact-left {
      grid-column: span 6;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));

      h1 {
        grid-column: span 5;
      }

      img {
        display: none;
      }
    }

    .contact-right {
      grid-column: span 6;

      .is-2 .form-field {
        grid-column: span 6 !important;
      }
    }

    .form-field--radio {
      height: auto;
    }
  }
}

/* ---------------------------------------------------------------------
   Contact Section Dark Theme (Empresas Overrides)
   --------------------------------------------------------------------- */

.bg-degrade-contact-dark {
  background:
    radial-gradient(
      900px circle at 18% 12%,
      rgba(164, 118, 255, 0.15) 0%,
      rgba(164, 118, 255, 0) 60%
    ),
    radial-gradient(
      900px circle at 92% 14%,
      rgba(164, 118, 255, 0.12) 0%,
      rgba(164, 118, 255, 0) 62%
    ),
    radial-gradient(
      1000px circle at 88% 86%,
      rgba(164, 118, 255, 0.16) 0%,
      rgba(164, 118, 255, 0) 60%
    ),
    var(--color-black);
  color: var(--color-white);
}

.bg-degrade-contact-dark .contact-left h1 {
  color: var(--color-white);
}

.bg-degrade-contact-dark .contact-form .form-label {
  color: var(--color-white);
}

.bg-degrade-contact-dark .contact-form .form-control {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-white);
  padding: 10px 0;
  box-shadow: none;
}

.bg-degrade-contact-dark .contact-form .form-control:focus {
  border-color: var(--color-purple);
  box-shadow: none;
}

.bg-degrade-contact-dark .contact-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.bg-degrade-contact-dark .contact-form select.form-control {
  color: var(--color-white);
  background-position: right 0 center;
  padding-right: 24px;
}

.bg-degrade-contact-dark .contact-form select.form-control option {
  background-color: var(--color-black);
  color: var(--color-white);
}

.bg-degrade-contact-dark
  .contact-form
  select.form-control.form-control--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

/* Radio Buttons Customization for Dark Contact Section */
.bg-degrade-contact-dark .form-radio-group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}

.bg-degrade-contact-dark .form-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bg-degrade-contact-dark .form-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: transparent;
  margin: 0;
  display: grid;
  place-content: center;
  transition: all 0.2s ease;
}

.bg-degrade-contact-dark .form-radio input[type="radio"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-purple);
  transform: scale(0);
  transition: 0.2s transform ease-in-out;
}

.bg-degrade-contact-dark .form-radio input[type="radio"]:checked {
  border-color: var(--color-white);
}

.bg-degrade-contact-dark .form-radio input[type="radio"]:checked::before {
  transform: scale(1);
}

.bg-degrade-contact-dark .form-radio span {
  color: var(--color-white);
  font-size: var(--body-s-size);
}

/* Submit Button */
.bg-degrade-contact-dark .contact-actions .btn {
  background-color: var(--color-purple);
  color: var(--color-white);
  border-radius: 999px;
  padding: 12px 32px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bg-degrade-contact-dark .contact-actions .btn:hover {
  background-color: #5533dd;
}

/*  =====================================================================
   Animations
   ===================================================================== */

/* --- SCALE IN CENTER --- */
/* Clase base que ya tienes */
.scale-in-center {
  opacity: 0;
  transform: scale(0.1);
  /* Cámbialo de 0 a 0.1 */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease-out;
}

.scale-in-center.appear {
  opacity: 1;
  transform: scale(1);
}

/* Retrasos para que no salgan todas al mismo tiempo */
.layer-1 {
  transition-delay: 0.2s;
}

.layer-2 {
  transition-delay: 0.4s;
}

/* --- SLIDE IN LEFT --- */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: transform, opacity;
}

/* Nota: Sin el '&', para CSS puro */
.slide-in-left.appear {
  opacity: 1;
  transform: translateX(0);
}

.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: auto;
  height: auto;
  z-index: var(--z-sticky);
  transition:
    transform var(--dur-quick) var(--ease-standard),
    filter var(--dur-quick) var(--ease-standard);
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}

.floating-whatsapp svg {
  width: 60px;
  height: 60px;
  display: block;
}

@media (min-width: 768px) {
  .floating-whatsapp {
    bottom: 40px;
    right: 40px;
  }
}

@keyframes heroFloat {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.003);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}