/* ── SCROLL JS-CONTROLADO ────────────────────── */
    html,
    body {
      overflow: hidden;
      height: 100%;
    }

    #scroll-container {
      height: 100vh;
      overflow-y: scroll;
      scroll-behavior: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    #scroll-container::-webkit-scrollbar {
      display: none;
    }

    .snap-section {
      height: 100vh;
      min-height: 100vh;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Secciones con más contenido del que cabe: scroll interno permitido */
    .snap-section.scrollable {
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .snap-section.scrollable::-webkit-scrollbar {
      display: none;
    }

    /* ── NAVBAR ──────────────────────────────────── */
    #header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 0 2rem;
      height: 64px;
      display: flex;
      align-items: center;
      transition: background 0.35s ease, box-shadow 0.35s ease;
      background: transparent;
    }

    #header.scrolled {
      background: rgb(34, 40, 49);
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    }

    /* ── Ocultar navbar en móvil al bajar ── */
    @media (max-width: 991px) {
      #header {
        transition: background 0.35s ease, box-shadow 0.35s ease,
          transform 0.35s ease;
      }

      #header.nav-hidden {
        transform: translateY(-100%);
      }
    }

    #logo img {
      height: 42px;
      width: auto;
    }

    #logooscuro {
      display: none;
    }

    #header.scrolled #logoblanco {
      display: none;
    }

    #header.scrolled #logooscuro {
      display: block !important;
    }

    .nav-menu .nav-link {
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85) !important;
      padding: 0.45rem 0.9rem;
      position: relative;
      transition: color 0.25s;
    }

    .nav-menu .nav-link::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      right: 50%;
      height: 2px;
      background: rgb(89, 165, 44);
      border-radius: 2px;
      transition: left 0.25s, right 0.25s;
    }

    .nav-menu .nav-link:hover {
      color: #fff !important;
    }

    .nav-menu .nav-link:hover::after {
      left: 0.9rem;
      right: 0.9rem;
    }

    .nav-menu .nav-link.active-section {
      color: #fff !important;
    }

    .nav-menu .nav-link.active-section::after {
      left: 0.9rem;
      right: 0.9rem;
    }

    /* ── HERO ────────────────────────────────────── */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

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

    .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(34, 40, 49, 0.72) 0%, rgba(89, 165, 44, 0.22) 100%);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 0 1.5rem;
      max-width: 820px;
      animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(36px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .hero-eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgb(120, 200, 71);
      background: rgba(89, 165, 44, 0.15);
      border: 1px solid rgba(89, 165, 44, 0.35);
      border-radius: 100px;
      padding: 0.3rem 1rem;
      margin-bottom: 1.25rem;
    }

    .hero-content h1 {
      font-size: clamp(2.8rem, 7vw, 5rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 1.25rem;
    }

    .hero-content h1 span {
      color: rgb(120, 200, 71);
    }

    .hero-content p {
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
      max-width: 580px;
      margin: 0 auto 2rem;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgb(89, 165, 44);
      color: #fff;
      font-weight: 700;
      font-size: 0.92rem;
      padding: 0.8rem 1.9rem;
      border-radius: 100px;
      text-decoration: none;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 4px 18px rgba(89, 165, 44, 0.38);
    }

    .hero-cta:hover {
      background: rgb(120, 200, 71);
      transform: translateY(-2px);
      box-shadow: 0 8px 26px rgba(89, 165, 44, 0.48);
      color: #fff;
    }

    .hero-scroll {
      position: absolute;
      bottom: 1.75rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
      color: rgba(255, 255, 255, 0.45);
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      animation: bounce 2.5s ease-in-out infinite;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(7px);
      }
    }

    /* ── ABOUT (snap) ────────────────────────────── */
    #AboutUs {
      background: rgb(247, 249, 244);
      padding: 0;
    }

    .about-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    @media (max-width: 768px) {
      .about-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    .section-label {
      display: block;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgb(89, 165, 44);
      margin-bottom: 0.6rem;
    }

    .section-title {
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: rgb(34, 40, 49);
      margin-bottom: 1rem;
    }

    .about-text p {
      font-size: 0.97rem;
      line-height: 1.8;
      color: #505050;
      margin-bottom: 0;
    }

    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .stat-card {
      background: #fff;
      border-radius: 14px;
      padding: 1.35rem 1.25rem;
      border: 1px solid rgba(89, 165, 44, 0.14);
      transition: transform 0.25s, box-shadow 0.25s;
    }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(89, 165, 44, 0.13);
    }

    .stat-card .number {
      font-size: 2rem;
      font-weight: 800;
      color: rgb(89, 165, 44);
      line-height: 1;
      margin-bottom: 0.3rem;
    }

    .stat-card .label {
      font-size: 0.8rem;
      font-weight: 500;
      color: #666;
      line-height: 1.3;
    }

    /* ── PRODUCTS (snap) ─────────────────────────── */
    #Products {
      padding: 0;
    }

    .products-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      filter: brightness(0.32) saturate(0.7);
    }

    .products-inner {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
      width: 100%;
    }

    @media (max-width: 991px) {
      .products-inner {
        padding-top: 70px;
      }
    }

    .section-title.light {
      color: #fff;
    }

    @media (max-width: 991px) {
      #Products .section-title {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
      }

      #Products>p {
        font-size: 0.85rem;
      }
    }

    .products-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-top: 2rem;
    }

    @media (max-width: 768px) {
      .products-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 0.75rem;
      }
    }

    .product-card {
      background: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(89, 165, 44, 0.28);
      border-radius: 18px;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      transition: background 0.25s, transform 0.25s;
    }

    .product-card:hover {
      background: rgba(89, 165, 44, 0.1);
      transform: translateY(-3px);
    }

    .product-sector {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgb(120, 200, 71);
      margin-bottom: 0.35rem;
    }

    .product-card h4 {
      font-size: 1.35rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 0.65rem;
      line-height: 1.2;
    }

    .product-card p {
      font-size: 0.88rem;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.7);
      flex-grow: 1;
      margin: 0;
    }

    .product-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1rem;
      font-weight: 700;
      font-size: 0.85rem;
      color: rgb(120, 200, 71);
      text-decoration: none;
      transition: gap 0.2s;
    }

    .product-link:hover {
      gap: 0.75rem;
      color: rgb(120, 200, 71);
    }

    @media (max-width: 768px) {
      .product-card {
        padding: 1.1rem 1rem;
        border-radius: 14px;
      }

      .product-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.35rem;
      }

      .product-card p {
        font-size: 0.82rem;
        line-height: 1.55;
      }

      .product-link {
        margin-top: 0.6rem;
        font-size: 0.8rem;
      }

      .product-sector {
        margin-bottom: 0.2rem;
      }
    }

    .products-cta {
      margin-top: 1.75rem;
      text-align: center;
    }

    @media (max-width: 991px) {
      .products-cta {
        margin-top: 1rem;
      }

      .products-cta p {
        margin-bottom: 0.5rem;
      }
    }

    .products-cta p {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.88rem;
      margin-bottom: 0.75rem;
    }

    .btn-green {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgb(89, 165, 44);
      color: #fff;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 0.7rem 1.6rem;
      border-radius: 100px;
      text-decoration: none;
      transition: background 0.25s, transform 0.25s;
      box-shadow: 0 4px 14px rgba(89, 165, 44, 0.35);
    }

    .btn-green:hover {
      background: rgb(120, 200, 71);
      transform: translateY(-2px);
      color: #fff;
    }

    /* ── VALORES (snap) ──────────────────────────── */
    #Valores {
      background: #fff;
      padding: 0;
    }

    .valores-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
      width: 100%;
    }

    @media (max-width: 991px) {
      .valores-inner {
        padding-top: 300px;
      }

      .values-grid {
        margin-top: 1rem;
        gap: 0.75rem;
      }

      .value-card {
        padding: 1rem;
      }

      .value-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        margin-bottom: 0.6rem;
      }

      .value-card h4 {
        font-size: 0.92rem;
        margin-bottom: 0.3rem;
      }

      .value-card p {
        font-size: 0.8rem;
        line-height: 1.5;
      }

      .values-quote {
        margin-top: 1rem;
        font-size: 0.85rem;
      }
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-top: 1.75rem;
    }

    @media (max-width: 900px) {
      .values-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 500px) {
      .values-grid {
        grid-template-columns: 1fr;
      }
    }

    .value-card {
      background: rgb(247, 249, 244);
      border-radius: 16px;
      padding: 1.5rem 1.25rem;
      border: 1px solid rgba(89, 165, 44, 0.1);
      position: relative;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    }

    .value-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgb(89, 165, 44);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s;
    }

    .value-card:hover::before {
      transform: scaleX(1);
    }

    .value-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(89, 165, 44, 0.1);
      border-color: rgba(89, 165, 44, 0.22);
    }

    .value-icon {
      width: 44px;
      height: 44px;
      background: rgba(89, 165, 44, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: rgb(89, 165, 44);
      margin-bottom: 0.9rem;
    }

    .value-card h4 {
      font-size: 1rem;
      font-weight: 700;
      color: rgb(34, 40, 49);
      margin-bottom: 0.45rem;
    }

    .value-card p {
      font-size: 0.85rem;
      line-height: 1.65;
      color: #555;
      margin: 0;
    }

    .values-quote {
      text-align: center;
      margin-top: 1.75rem;
      font-size: 0.95rem;
      font-style: italic;
      color: #666;
    }

    /* ── INDICATOR DOTS ──────────────────────────── */
    #snap-dots {
      position: fixed;
      right: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .snap-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: 1.5px solid rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
    }

    .snap-dot.active {
      background: rgb(89, 165, 44);
      border-color: rgb(89, 165, 44);
      transform: scale(1.35);
    }

    /* ── FOOTER ──────────────────────────────────── */
    footer {
      background: rgb(34, 40, 49);
      border-top: 2px solid rgb(89, 165, 44);
      padding: 48px 0 28px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 2.5rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
      margin-bottom: 2rem;
    }

    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
      }
    }

    @media (max-width: 991px) {
      .footer-grid {
        padding-top: 70px;
      }
    }

    .footer-brand img {
      height: 40px;
      width: auto;
      margin-bottom: 0.75rem;
    }

    .footer-brand p {
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1.7;
    }

    .footer-ens {
      margin-top: 1rem;
    }

    .footer-ens img {
      height: 60px;
      width: auto;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    .footer-ens img:hover {
      opacity: 1;
    }

    .footer-col h5 {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgb(120, 200, 71);
      margin-bottom: 1rem;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0;
    }

    .footer-col ul a {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.5);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-col ul a:hover {
      color: #fff;
    }

    .footer-bottom {
      border-top: 1px solid rgba(89, 165, 44, 0.18);
      padding-top: 1.5rem;
      text-align: center;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.3);
      max-width: 1100px;
      margin: 0 auto;
      padding-left: 2rem;
      padding-right: 2rem;
    }

    .hide {
      display: none !important;
    }

    @media (max-width: 768px) {
      #snap-dots {
        display: none;
      }
    }