*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --green-vivid: #81B622;
      --green-forest: #3D7A22;
      --brown-warm: #4A3324;
      --dark-coffee: #1A1512;
      --brown-bg: #4B3D34;
      --soft-white: #EAEAEA;
      --green-btn: #2d5e1a;
      --green-badge: #2d5e1c;
      --white: #ffffff;
      --muted-light: rgba(234, 234, 234, .55);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--dark-coffee);
      color: var(--soft-white);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */
    .hero {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: var(--dark-coffee);
      background-image: url('/images/plant.svg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to right,
          rgba(26, 21, 18, 0.92) 0%,
          rgba(26, 21, 18, 0.80) 35%,
          rgba(26, 21, 18, 0.10) 55%,
          transparent 65%),
        linear-gradient(to bottom,
          rgba(26, 21, 18, 0.40) 0%,
          transparent 15%,
          transparent 60%,
          rgba(26, 21, 18, 0.85) 85%,
          rgba(26, 21, 18, 1.00) 100%);
    }

    /* NAVBAR */
    .navbar {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32px 72px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }

    .nav-brand-img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .nav-brand-name {
      font-family: 'Quicksand', sans-serif;
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--soft-white);
      letter-spacing: .02em;
      line-height: 1;
    }

    .nav-brand-name span {
      color: var(--green-vivid);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 44px;
    }

    .nav-links a {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 400;
      color: rgba(234, 234, 234, .88);
      text-decoration: none;
      letter-spacing: .04em;
      transition: color .2s;
    }

    .nav-links a:hover {
      color: var(--green-vivid);
    }

    .nav-btn {
      font-family: 'Quicksand', sans-serif !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      color: var(--white) !important;
      background: var(--green-forest);
      border-radius: 8px;
      padding: 13px 36px !important;
      letter-spacing: .06em !important;
      transition: background .2s, transform .2s !important;
    }

    .nav-btn:hover {
      background: var(--green-vivid) !important;
      transform: translateY(-2px);
      color: var(--white) !important;
    }

    /* HERO BODY */
    .hero-body {
      position: relative;
      z-index: 10;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 72px 100px;
      max-width: 660px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--green-badge);
      border-radius: 5px;
      padding: 8px 16px;
      margin-bottom: 36px;
      width: fit-content;
      animation: fadeUp .5s ease both;
    }

    .hero-badge svg {
      width: 17px;
      height: 17px;
      fill: var(--green-vivid);
      flex-shrink: 0;
    }

    .hero-badge-text {
      font-family: 'Inter', sans-serif;
      font-size: .88rem;
      font-weight: 500;
      color: rgba(234, 234, 234, .92);
      letter-spacing: .06em;
    }

    .hero-title {
      font-family: 'Playfair Display', serif;
      font-weight: 900;
      line-height: 1.0;
      margin-bottom: 30px;
      animation: fadeUp .6s ease .1s both;
    }

    .hero-title .line-plain {
      display: block;
      font-size: clamp(3.6rem, 8vw, 7rem);
      color: var(--soft-white);
      letter-spacing: -.01em;
    }

    .hero-title .line-green {
      display: block;
      font-size: clamp(3.6rem, 8vw, 7rem);
      color: var(--green-vivid);
      letter-spacing: -.01em;
    }

    .hero-sub {
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      color: rgba(234, 234, 234, .65);
      line-height: 1.75;
      max-width: 400px;
      margin-bottom: 48px;
      text-align: justify;
      animation: fadeUp .6s ease .2s both;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      background: var(--green-forest);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 7px;
      padding: 16px 32px;
      text-decoration: none;
      letter-spacing: .04em;
      transition: background .25s, transform .25s;
      width: fit-content;
      animation: fadeUp .6s ease .3s both;
    }

    .hero-cta:hover {
      background: var(--green-vivid);
      transform: translateY(-2px);
      color: var(--white);
    }

    /* ══════════════════════════════════════
       MÓDULOS
    ══════════════════════════════════════ */
    .section-modules {
      padding: 90px 72px 100px;
      background: var(--dark-coffee);
      position: relative;
    }

    .section-modules::before {
      background: none;
    }

    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 64px;
      position: relative;
    }

    .section-label {
      font-family: 'Quicksand', sans-serif;
      font-size: .72rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--green-vivid);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-label::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 1.5px;
      background: var(--green-vivid);
      flex-shrink: 0;
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--soft-white);
    }

    .section-title em {
      font-style: italic;
      color: var(--green-vivid);
    }

    .section-desc {
      max-width: 320px;
      font-family: 'Inter', sans-serif;
      font-size: .9rem;
      color: var(--muted-light);
      line-height: 1.75;
      font-weight: 300;
      text-align: right;
    }

    /* CARDS GRID */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
    }

    .cards-grid .card:nth-child(4) {
      grid-column: 1 / 3;
    }

    .cards-grid .card:nth-child(5) {
      grid-column: 3 / 4;
    }

    .card {
      background: var(--soft-white);
      border: 1px solid rgba(129, 182, 34, .15);
      border-radius: 16px;
      padding: 38px 34px;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      transition: transform .3s cubic-bezier(.25, .8, .25, 1),
        box-shadow .3s,
        border-color .3s,
        background .3s;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .18), 0 0 0 1px rgba(61, 122, 34, .25);
      background: #f5f5f0;
      border-color: rgba(61, 122, 34, .3);
    }

    .card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--green-forest), var(--green-vivid));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s ease;
    }

    .card:hover::after {
      transform: scaleX(1);
    }

    .card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(61, 122, 34, .10) 0%, transparent 70%);
      pointer-events: none;
      transition: opacity .3s;
      opacity: 0;
    }

    .card:hover::before {
      opacity: 1;
    }

    .card .card-num {
      font-family: 'Quicksand', sans-serif;
      font-size: .68rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(26, 21, 18, .35);
      margin-bottom: 24px;
    }

    .card .card-icon {
      width: 50px;
      height: 50px;
      background: rgba(61, 122, 34, .10);
      border: 1px solid rgba(61, 122, 34, .22);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      transition: background .3s, border-color .3s;
    }

    .card:hover .card-icon {
      background: rgba(61, 122, 34, .18);
      border-color: rgba(61, 122, 34, .4);
    }

    .card .card-icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--green-forest);
      stroke-width: 1.5;
      fill: none;
    }

    .card .card-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--dark-coffee);
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .card .card-desc {
      font-family: 'Inter', sans-serif;
      font-size: .84rem;
      color: rgba(26, 21, 18, .60);
      line-height: 1.7;
      font-weight: 400;
      flex: 1;
      margin-bottom: 26px;
    }

    .card .card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Quicksand', sans-serif;
      font-size: .82rem;
      font-weight: 600;
      color: var(--green-forest);
      letter-spacing: .04em;
      text-decoration: none;
      transition: gap .25s, color .2s;
    }

    .card .card-link:hover {
      gap: 14px;
      color: var(--dark-coffee);
    }

    .card .card-link svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
    }

    .card--highlight {
      background: var(--green-forest);
      border-color: rgba(129, 182, 34, .3);
    }

    .card--highlight:hover {
      background: #2f6318;
      border-color: rgba(129, 182, 34, .55);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .3), 0 0 30px rgba(129, 182, 34, .10);
    }

    .card--highlight .card-num {
      color: rgba(234, 234, 234, .45);
    }

    .card--highlight .card-icon {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .2);
    }

    .card--highlight .card-icon svg {
      stroke: var(--soft-white);
    }

    .card--highlight .card-title {
      color: var(--soft-white);
    }

    .card--highlight .card-desc {
      color: rgba(234, 234, 234, .72);
    }

    .card--highlight .card-link {
      color: var(--green-vivid);
    }

    .card--highlight .card-link:hover {
      color: var(--soft-white);
    }

    .card--highlight::after {
      background: linear-gradient(90deg, var(--green-vivid), #b8e044);
    }

    /* ══════════════════════════════════════
       HISTÓRIA
    ══════════════════════════════════════ */
    .section-historia {
      background: #F4F1EC;
      padding: 96px 72px 110px;
      font-family: 'Inter', sans-serif;
      position: relative;
      overflow: hidden;
    }

    .section-historia::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(to right, transparent, #81B622, transparent);
      opacity: .45;
    }

    .section-historia::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(129, 182, 34, .07) 0%, transparent 48%),
        radial-gradient(circle at 88% 78%, rgba(61, 122, 34, .05) 0%, transparent 44%);
      pointer-events: none;
    }

    .historia-header {
      text-align: center;
      margin-bottom: 72px;
      position: relative;
      z-index: 2;
    }

    .historia-label {
      font-family: 'Quicksand', sans-serif;
      font-size: .72rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: #3D7A22;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .historia-label::before,
    .historia-label::after {
      content: '';
      display: inline-block;
      width: 28px;
      height: 1.5px;
      background: #3D7A22;
      flex-shrink: 0;
    }

    .historia-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      font-weight: 700;
      line-height: 1.15;
      color: #1A1512;
    }

    .historia-title em {
      font-style: italic;
      color: #3D7A22;
    }

    /* trilha */
    .tl-wrap {
      position: relative;
      max-width: 820px;
      margin: 0 auto;
      z-index: 2;
    }

    .tl-track {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: rgba(61, 122, 34, .13);
      border-radius: 2px;
      overflow: visible;
      z-index: 1;
    }

    .tl-fill {
      width: 100%;
      height: 0%;
      background: linear-gradient(to bottom, #3D7A22, #81B622);
      border-radius: 2px;
      position: relative;
    }

    .tl-arrow {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid #81B622;
      opacity: 0;
      transition: opacity .3s ease;
      margin-left: -1px;
    }

    /* rows */
    .tl-row {
      display: grid;
      grid-template-columns: 1fr 56px 1fr;
      align-items: center;
      margin-bottom: 56px;
      position: relative;
    }

    .tl-row:last-child {
      margin-bottom: 0;
    }

    .tl-dot-col {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 3;
    }

    .tl-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #F4F1EC;
      border: 2px solid rgba(61, 122, 34, .2);
      transition: border-color .4s, background .4s, box-shadow .4s;
      flex-shrink: 0;
    }

    .tl-card-col {
      opacity: 0;
      transition: opacity .55s ease, transform .55s ease;
    }

    .tl-side-left {
      transform: translateX(-26px);
      text-align: right;
    }

    .tl-side-right {
      transform: translateX(26px);
      text-align: left;
    }

    .tl-card {
      display: inline-block;
      background: #FFFFFF;
      border: 1px solid rgba(61, 122, 34, .14);
      border-radius: 14px;
      padding: 22px 26px 20px;
      position: relative;
      box-shadow: 0 2px 14px rgba(26, 21, 18, .06);
      transition: box-shadow .3s, border-color .3s, transform .3s;
      max-width: 320px;
      width: 100%;
      overflow: hidden;
    }

    .tl-card:hover {
      box-shadow: 0 8px 32px rgba(26, 21, 18, .10);
      border-color: rgba(61, 122, 34, .28);
      transform: translateY(-3px);
    }

    .tl-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      background: linear-gradient(90deg, #3D7A22, #81B622);
      border-radius: 0 0 14px 14px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .45s ease .15s;
    }

    .tl-connector {
      position: absolute;
      top: 50%;
      height: 1.5px;
      background: rgba(61, 122, 34, .25);
      transform: scaleX(0);
      transition: transform .4s ease .2s;
      z-index: 0;
      display: none;
    }

    .tl-left .tl-connector {
      right: 56px;
      width: calc(50% - 56px);
      transform-origin: right;
    }

    .tl-right .tl-connector {
      left: 56px;
      width: calc(50% - 56px);
      transform-origin: left;
    }

    .tl-year {
      font-family: 'Quicksand', sans-serif;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      display: inline-block;
      background: rgba(61, 122, 34, .09);
      color: #3D7A22;
      border-radius: 5px;
      padding: 4px 10px;
      margin-bottom: 10px;
      transition: background .3s, color .3s;
    }

    .tl-card:hover .tl-year {
      background: #3D7A22;
      color: #fff;
    }

    .tl-card-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #1A1512;
      line-height: 1.3;
      margin-bottom: 7px;
    }

    .tl-card-desc {
      font-family: 'Inter', sans-serif;
      font-size: .85rem;
      color: rgba(26, 21, 18, .55);
      line-height: 1.72;
      font-weight: 400;
    }

    .historia-plant {
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }
    .historia-plant--tl {
      top: -60px;
      left: -60px;
      width: clamp(1200px, 32vw, 480px);
      opacity: 0.92;
    }
    .historia-plant--br {
      bottom: -60px;
      right: -60px;
      width: clamp(1800px, 32vw, 480px);
      opacity: 0.92;
    }

    /* estado revelado */
    .tl-row.revealed .tl-card-col {
      opacity: 1;
      transform: translateX(0);
    }

    .tl-row.revealed .tl-dot {
      border-color: #81B622;
      background: #3D7A22;
      box-shadow: 0 0 0 5px rgba(129, 182, 34, .13), 0 0 14px rgba(129, 182, 34, .22);
    }

    .tl-row.revealed .tl-connector {
      transform: scaleX(1);
    }

    .tl-row.revealed .tl-card::after {
      transform: scaleX(1);
    }

    @keyframes tl-pulse {

      0%,
      100% {
        box-shadow: 0 0 0 5px rgba(129, 182, 34, .13), 0 0 14px rgba(129, 182, 34, .22);
      }

      50% {
        box-shadow: 0 0 0 9px rgba(129, 182, 34, .07), 0 0 22px rgba(129, 182, 34, .32);
      }
    }

    .tl-row:last-child.revealed .tl-dot {
      animation: tl-pulse 2.2s ease-in-out infinite;
    }

    /* ══════════════════════════════════════
       STRIP — CREDENCIAIS
    ══════════════════════════════════════ */
    .strip-wrapper {
      width: 100%;
      background: rgba(26, 21, 18, .85);
      border-top: 1px solid rgba(129, 182, 34, .12);
      border-bottom: 1px solid rgba(129, 182, 34, .12);
      position: relative;
      overflow: hidden;
    }

    .strip-wrapper::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--green-vivid), transparent);
      opacity: .4;
    }

    .strip {
      padding: 52px 72px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      max-width: 1400px;
      margin: 0 auto;
    }

    .strip-item {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
    }

    .strip-icon {
      width: 46px;
      height: 46px;
      border: 1.5px solid rgba(129, 182, 34, .4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(129, 182, 34, .07);
      transition: border-color .3s, background .3s;
    }

    .strip-item:hover .strip-icon {
      border-color: var(--green-vivid);
      background: rgba(129, 182, 34, .15);
    }

    .strip-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--green-vivid);
      stroke-width: 1.5;
      fill: none;
    }

    .strip-text strong {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--soft-white);
      margin-bottom: 2px;
    }

    .strip-text span {
      font-family: 'Inter', sans-serif;
      font-size: .78rem;
      color: var(--muted-light);
    }

    .strip-divider {
      width: 1px;
      height: 44px;
      background: rgba(129, 182, 34, .15);
      flex-shrink: 0;
      margin: 0 4px;
    }

    /* ══════════════════════════════════════
       FOOTER
    ══════════════════════════════════════ */
    footer {
      background: var(--dark-coffee);
      border-top: 1px solid rgba(129, 182, 34, .1);
      padding: 52px 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 72px;
      right: 72px;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(129, 182, 34, .3), transparent);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .footer-brand-img {
      width: 34px;
      height: 34px;
      object-fit: contain;
      opacity: .8;
    }

    .footer-brand-name {
      font-family: 'Quicksand', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--soft-white);
    }

    .footer-brand-name span {
      color: var(--green-vivid);
    }

    .footer-copy {
      font-family: 'Inter', sans-serif;
      font-size: .78rem;
      color: rgba(234, 234, 234, .3);
      letter-spacing: .03em;
      line-height: 1.7;
    }

    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 20px;
    }

    .footer-logos {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .footer-logos img {
      height: 34px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: .35;
      transition: opacity .3s;
    }

    .footer-logos img:hover {
      opacity: .7;
    }

    .footer-tag {
      font-family: 'Quicksand', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      color: rgba(129, 182, 34, .5);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════════ */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card {
      opacity: 0;
      transform: translateY(24px);
    }

    .card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .card:hover {
      transform: translateY(-6px);
    }

    /* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
    @media (max-width: 1024px) {

      .navbar,
      .hero-body {
        padding-left: 40px;
        padding-right: 40px;
      }

      .section-modules {
        padding-left: 40px;
        padding-right: 40px;
      }

      .strip {
        padding-left: 40px;
        padding-right: 40px;
      }

      footer {
        padding-left: 40px;
        padding-right: 40px;
      }

      .section-historia {
        padding-left: 40px;
        padding-right: 40px;
      }
    }

    @media (max-width: 900px) {

      .navbar,
      .hero-body,
      .section-modules,
      .strip,
      footer {
        padding-left: 28px;
        padding-right: 28px;
      }

      .nav-links {
        gap: 20px;
      }

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

      .cards-grid .card:nth-child(4),
      .cards-grid .card:nth-child(5) {
        grid-column: auto;
      }

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .section-desc {
        text-align: left;
        max-width: 100%;
      }

      .strip {
        flex-wrap: wrap;
        gap: 28px;
      }

      .strip-item {
        flex: none;
      }

      .strip-divider {
        display: none;
      }

      footer {
        flex-direction: column;
        gap: 28px;
      }

      .footer-right {
        align-items: flex-start;
      }
    }

    @media (max-width: 720px) {
      .section-historia {
        padding: 64px 24px 80px;
      }

      .tl-row {
        grid-template-columns: 28px 1fr;
        grid-template-areas: "dot card";
        margin-bottom: 36px;
      }

      .tl-dot-col {
        grid-area: dot;
        align-self: flex-start;
        padding-top: 6px;
      }

      .tl-card-col {
        grid-area: card;
        text-align: left !important;
      }

      .tl-spacer {
        display: none;
      }

      .tl-connector {
        display: none;
      }

      .tl-track {
        left: 14px;
        transform: none;
      }

      .tl-card {
        max-width: 100%;
        width: 100%;
      }

      .tl-side-left {
        transform: translateX(20px);
      }

      .tl-side-right {
        transform: translateX(20px);
      }
    }

    @media (max-width: 680px) {
      .navbar {
        padding: 20px 24px;
      }

      .hero-body {
        padding: 0 24px 60px;
        max-width: 100%;
      }

      .nav-links a:not(.nav-btn) {
        display: none;
      }

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

      .section-modules {
        padding: 64px 24px;
      }
    }