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


    :root {
      --dark:  #0b0f07;
      --green: #8fa86a;
      --cream: #e8e0cc;
      --muted: #7a7265;
      --mid:   #1a1f11;
    }

    html { scroll-behavior: auto; }
    html, body { overflow-x: hidden; }

    body {
      background: var(--dark);
      color: var(--cream);
      font-family: 'Rubik', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }

    /* ─── BACKGROUND LAYER ─── */
    #bg-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 115%;
      object-fit: cover;
      object-position: center;
      transform-origin: center center;
      transition: opacity 0.9s ease;
      will-change: transform;
    }

    #hero-video {
      opacity: 1;
      transition: opacity 1.2s ease;
      object-fit: cover;
      object-position: center;
    }
    #hero-video { opacity: 1; transition: opacity 1.2s ease; }
    #bgA { opacity: 0; }
    #bgB { opacity: 0; }

    @media (max-width: 768px) {
      #bgA { opacity: 0; }
    }

    .bg-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(5,8,3,0.75) 0%, transparent 70%),
        linear-gradient(to top,   rgba(5,8,3,0.88) 0%, rgba(5,8,3,0.4) 32%, transparent 62%),
        linear-gradient(to bottom, rgba(5,8,3,0.55) 0%, transparent 22%);
      z-index: 1;
    }

    /* ─── PROGRESS BAR ─── */
    #progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0%;
      background: var(--green);
      z-index: 1000;
      pointer-events: none;
    }

    /* ─── NAV ─── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.4rem 3rem;
      transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease;
    }

    nav.solid {
      background: rgba(11, 15, 7, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding-top: 0.9rem;
      padding-bottom: 0.9rem;
    }

    .nav-logo {
      text-decoration: none;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    #main-nav.solid .nav-logo {
      opacity: 1;
      pointer-events: auto;
    }

    .nav-logo img {
      height: 58px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);   /* logo blanco sobre fondo oscuro */
      transition: opacity 0.2s;
    }

    .nav-logo:hover img { opacity: 0.82; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--cream);
      text-decoration: none;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.75;
      transition: opacity 0.2s;
    }

    .nav-links a:hover { opacity: 1; }

    .nav-cta {
      border: 1px solid var(--green) !important;
      padding: 0.4rem 1.1rem;
      color: var(--green) !important;
      opacity: 1 !important;
      transition: background 0.25s, color 0.25s !important;
    }

    .nav-cta:hover {
      background: var(--green) !important;
      color: var(--dark) !important;
      opacity: 1 !important;
    }

    .nav-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      z-index: 300;
      padding: 4px;
      background: none;
      border: none;
    }

    .nav-burger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--cream);
      transition: transform 0.3s, opacity 0.3s;
    }

    .nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger.active span:nth-child(2) { opacity: 0; }
    .nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ─── CONTENT ─── */
    main { position: relative; z-index: 10; }

    /* Transparent sections */
    .section-transparent {
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 3rem 3rem 3.5rem;
      position: relative;
    }

    /* Gradiente local para legibilidad del texto */
    .section-transparent::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top,  rgba(5,8,3,0.93) 0%, rgba(5,8,3,0.62) 38%, rgba(5,8,3,0.18) 68%, transparent 100%),
        linear-gradient(to right, rgba(5,8,3,0.55) 0%, transparent 55%);
      z-index: 0;
      pointer-events: none;
    }

    .section-transparent > * { position: relative; z-index: 1; }

    .section-transparent.align-right {
      align-items: flex-end;
      text-align: right;
    }

    /* Transporte está alineado a la derecha: cubrimos ese lado */
    .section-transparent.align-right::before {
      background:
        linear-gradient(to top,  rgba(5,8,3,0.93) 0%, rgba(5,8,3,0.62) 38%, rgba(5,8,3,0.18) 68%, transparent 100%),
        linear-gradient(to left, rgba(5,8,3,0.60) 0%, transparent 55%);
    }

    /* Solid band sections */
    .section-solid {
      background: rgba(11, 15, 7, 0.88);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      padding: 5rem 3rem;
    }

    /* ─── TYPOGRAPHY ─── */
    .eyebrow {
      font-family: 'Rubik', sans-serif;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 1.25rem;
    }

    .chapter-num {
      font-family: 'Rubik', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 1.5rem;
    }

    h1.hero-title {
      font-family: 'Rubik', sans-serif;
      font-size: clamp(3.2rem, 6.5vw, 6.5rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--cream);
      margin-bottom: 1.5rem;
      max-width: 740px;
    }

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

    h2 {
      font-family: 'Rubik', sans-serif;
      font-size: clamp(1.9rem, 3.5vw, 3.1rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--cream);
      margin-bottom: 1.5rem;
      max-width: 620px;
    }

    h2 em { font-style: italic; color: var(--green); }

    .section-solid h2 { max-width: 720px; }

    p.body-text {
      font-size: 0.98rem;
      line-height: 1.82;
      color: var(--cream);
      opacity: 0.8;
      max-width: 540px;
      margin-bottom: 1.1rem;
    }

    .align-right p.body-text { margin-left: auto; }

    .stat-inline {
      margin-top: 2.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(143, 168, 106, 0.22);
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }

    .stat-inline-num {
      font-family: 'Rubik', sans-serif;
      font-size: 3.2rem;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
    }

    .stat-inline-label {
      font-size: 0.82rem;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    /* ─── HERO ─── */
    .hero { height: 100vh; justify-content: center; }

    .hero-content {
      max-width: 780px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .hero-logo {
      width: clamp(216px, 34vw, 456px);
      height: auto;
      filter: brightness(0) invert(1);
    }


    .hero-subtitle {
      font-size: 1rem;
      line-height: 1.78;
      color: var(--cream);
      opacity: 0.75;
      max-width: 520px;
    }

    .scroll-indicator {
      position: absolute;
      bottom: 3rem;
      right: 3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
    }

    .scroll-line {
      width: 1px;
      height: 56px;
      background: linear-gradient(to bottom, var(--green), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(0.9); }
      50% { opacity: 1; transform: scaleY(1); }
    }

    .scroll-text {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ─── STATS ─── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }

    .stat-item {
      padding: 3rem 1.5rem;
      border-right: 1px solid rgba(143, 168, 106, 0.14);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .stat-item:last-child { border-right: none; }

    .stat-service {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      opacity: 0.8;
    }

    .stat-num {
      font-family: 'Rubik', sans-serif;
      font-size: clamp(2.2rem, 3vw, 3.4rem);
      font-weight: 700;
      color: var(--cream);
      line-height: 1;
    }

    .stat-label {
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.06em;
      line-height: 1.5;
    }

    /* ─── SECTION HEADER ─── */
    .section-header {
      text-align: left;
      margin-bottom: 2.5rem;
    }

    /* ─── SERVICES GRID ─── */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid rgba(143, 168, 106, 0.12);
    }

    .service-card {
      padding: 2.5rem 2rem;
      border-right: 1px solid rgba(143, 168, 106, 0.12);
      border-bottom: 1px solid rgba(143, 168, 106, 0.12);
      position: relative;
      overflow: hidden;
      transition: background 0.3s ease;
      cursor: default;
    }

    .service-card:nth-child(3n)   { border-right: none; }
    .service-card:nth-child(n+4)  { border-bottom: none; }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--green);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .service-card:hover::before  { transform: scaleX(1); }
    .service-card:hover          { background: rgba(143, 168, 106, 0.04); }

    .service-num {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      color: var(--green);
      margin-bottom: 1rem;
    }

    .service-title {
      font-family: 'Rubik', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 0.75rem;
    }

    .service-desc {
      font-size: 0.86rem;
      line-height: 1.72;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }

    .service-detail {
      font-size: 0.73rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--green);
      opacity: 0.85;
    }

    /* ─── FEEDLOT DETAIL ─── */
    .feedlot-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border: 1px solid rgba(143, 168, 106, 0.12);
    }

    .feedlot-card {
      padding: 3rem 2.5rem;
      border-right: 1px solid rgba(143, 168, 106, 0.12);
      border-bottom: 1px solid rgba(143, 168, 106, 0.12);
    }

    .feedlot-card:nth-child(2n)  { border-right: none; }
    .feedlot-card:nth-child(n+3) { border-bottom: none; }

    .feedlot-card-title {
      font-family: 'Rubik', sans-serif;
      font-size: 1.08rem;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 0.3rem;
    }

    .feedlot-card-location {
      font-size: 0.73rem;
      color: var(--green);
      letter-spacing: 0.09em;
      margin-bottom: 1rem;
    }

    .feedlot-card-desc {
      font-size: 0.88rem;
      line-height: 1.72;
      color: var(--muted);
      margin-bottom: 1.5rem;
    }

    .feedlot-card-num {
      font-family: 'Rubik', sans-serif;
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
    }

    .feedlot-card-num-label {
      font-size: 0.74rem;
      color: var(--muted);
      margin-top: 0.3rem;
      letter-spacing: 0.04em;
    }

    /* ─── ABOUT ─── */
    .about-section {
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3rem;
      overflow: hidden;
      position: relative;
    }

    .about-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top,  rgba(5,8,3,0.82) 0%, rgba(5,8,3,0.45) 40%, transparent 75%),
        linear-gradient(to right, rgba(5,8,3,0.70) 0%, transparent 60%);
      z-index: 0;
      pointer-events: none;
    }

    .about-years {
      position: absolute;
      right: -0.05em;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Rubik', sans-serif;
      font-size: clamp(16rem, 26vw, 32rem);
      font-weight: 700;
      color: rgba(143, 168, 106, 0.1);
      line-height: 1;
      user-select: none;
      pointer-events: none;
      transform-origin: center right;
    }

    .about-content {
      position: relative;
      z-index: 1;
      max-width: 680px;
    }

    .about-quote {
      font-family: 'Rubik', sans-serif;
      font-size: clamp(1.4rem, 2.8vw, 2.1rem);
      font-style: italic;
      color: var(--cream);
      line-height: 1.45;
      margin-bottom: 2rem;
      border-left: 2px solid var(--green);
      padding-left: 1.5rem;
    }

    /* ─── REPRESENTATIVES ─── */
    .reps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      max-width: 860px;
      margin: 0 auto;
    }

    .rep-card {
      text-align: center;
      padding: 2.5rem 1.5rem;
    }

    .rep-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 2px solid rgba(143, 168, 106, 0.45);
      overflow: hidden;
      margin: 0 auto 1.25rem;
    }

    .rep-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .rep-name {
      font-family: 'Rubik', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 0.3rem;
    }

    .rep-role {
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }

    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.07em;
      color: var(--green);
      border: 1px solid rgba(143, 168, 106, 0.38);
      padding: 0.5rem 1.3rem;
      text-decoration: none;
      transition: background 0.22s, color 0.22s;
    }

    .btn-whatsapp:hover { background: var(--green); color: var(--dark); }

    .btn-whatsapp svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ─── LOCATION TAGS ─── */
    .location-tags {
      display: flex;
      gap: 0.75rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .align-right .location-tags { justify-content: flex-end; }

    .location-tag {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border: 1px solid rgba(143, 168, 106, 0.38);
      padding: 0.38rem 1rem;
      color: var(--green);
    }

    /* ─── CONTACT ─── */
    .contact-wrap { max-width: 700px; }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 1rem;
    }

    .form-group label {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(143, 168, 106, 0.2);
      border-radius: 0;
      padding: 0.82rem 1rem;
      color: var(--cream);
      font-family: 'Rubik', sans-serif;
      font-size: 0.93rem;
      font-weight: 300;
      outline: none;
      transition: border-color 0.2s;
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
    }

    .form-group select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238fa86a' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }

    .form-group select option { background: #0b0f07; color: var(--cream); }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: var(--green); }

    .form-group textarea { min-height: 110px; resize: vertical; }

    .btn-submit {
      background: transparent;
      border: 1px solid var(--green);
      color: var(--green);
      padding: 0.9rem 2.5rem;
      font-family: 'Rubik', sans-serif;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.28s, color 0.28s;
      margin-top: 0.5rem;
    }

    .btn-submit:hover { background: var(--green); color: var(--dark); }
    .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

    .form-feedback {
      margin-top: 1rem;
      font-size: 0.88rem;
      min-height: 1.2em;
    }
    .form-feedback--ok    { color: var(--green); }
    .form-feedback--error { color: #e07070; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--dark);
      border-top: 1px solid rgba(143, 168, 106, 0.12);
      padding: 2.5rem 3rem;
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 2rem;
    }

    .footer-logo img {
      height: 52px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
      opacity: 0.75;
    }

    .footer-links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-links a {
      font-size: 0.76rem;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.06em;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--cream); }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
    }

    .footer-copy {
      font-size: 0.72rem;
      color: var(--muted);
    }

    .footer-social {
      color: var(--muted);
      display: flex;
      align-items: center;
      transition: color 0.2s;
    }

    .footer-social:hover { color: var(--green); }

    .nav-instagram {
      display: flex;
      align-items: center;
      color: var(--cream);
      opacity: 0.7;
      transition: opacity 0.2s;
    }

    .nav-instagram:hover { opacity: 1; }

    /* ─── MOBILE ─── */
    @media (max-width: 768px) {
      html, body, main, section, header, footer {
        overflow-x: hidden;
        max-width: 100%;
      }

      /* Sin Ken Burns en mobile — evita overflow horizontal del bg */
      .bg-img {
        transform: none !important;
        will-change: opacity;
        width: 100vw;
        height: 100svh;
        object-fit: cover;
        object-position: center center;
        image-rendering: high-quality;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }

      #hero-video {
        width: 100vw;
        height: 100svh;
        object-fit: cover;
      }

      #bg-layer {
        overflow: hidden;
        width: 100vw;
        height: 100svh;
      }

      nav {
        padding: 0.85rem 1.25rem;
        gap: 0;
      }

      .nav-logo img { height: 42px; }

      .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(11, 15, 7, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        z-index: 9999;
      }

      .nav-links.open { display: flex; }
      .nav-links.open a { font-size: 1rem; opacity: 1; }

      .nav-burger { display: flex; }

      .section-transparent { padding: 2rem 1.5rem 2.5rem; }
      .section-solid { padding: 4rem 1.5rem; }

      h1.hero-title { font-size: 2.4rem; }
      h2 { font-size: 1.6rem; }

      .hero { justify-content: center; padding-top: 38vh; }
      .hero-content { justify-content: center; }
      .hero-logo { width: 72vw; }

      /* Hotelería y Consignataria: columnas apiladas */
      #hoteleria .hoteleria-pin-inner,
      #consignataria .hoteleria-pin-inner {
        flex-direction: column;
        padding: 1rem 0 1.5rem;
      }

      #hoteleria .feedlot-slide,
      #consignataria .feedlot-slide {
        width: 100% !important;
        min-width: 0;
      }

      #hoteleria .feedlot-slide-content,
      #consignataria .feedlot-slide-content {
        width: 100%;
        max-width: 100%;
      }

      #hoteleria h2,
      #consignataria h2 {
        max-width: 100%;
      }

      #hoteleria p.body-text,
      #consignataria p.body-text {
        max-width: 100%;
      }

      #hoteleria .feedlot-slide-content,
      #consignataria .feedlot-slide-content {
        padding: 1.25rem 1.5rem;
      }

      /* Mapas cuadrados y pequeños en mobile */
      .maps-grid { gap: 1rem; }
      .map-frame-wrap {
        width: min(260px, 80vw) !important;
        height: min(260px, 80vw) !important;
        min-height: 0 !important;
      }
      .map-card { align-items: center; }
      .map-frame-wrap { margin: 0 auto; }

      /* Representantes más compacto */
      .reps-grid { grid-template-columns: 1fr; max-width: 100%; gap: 0; }
      .rep-card { padding: 1rem 1rem; }
      .rep-avatar { width: 64px; height: 64px; margin-bottom: 0.75rem; }
      .rep-name { font-size: 0.9rem; }
      .rep-role { margin-bottom: 0.75rem; }
      .reps-inner { padding: 1rem 1.25rem !important; }
      #consignataria .reps-inner { padding: 1rem 1.25rem !important; }

      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-item {
        border-right: 1px solid rgba(143,168,106,0.14);
        border-bottom: 1px solid rgba(143,168,106,0.14);
      }
      .stat-item:nth-child(2n) { border-right: none; }
      .stat-item:nth-child(5)  { border-bottom: none; border-right: none; grid-column: span 2; }

      .services-grid  { grid-template-columns: 1fr; }
      .service-card   { border-right: none; }
      .service-card:nth-child(n) { border-bottom: 1px solid rgba(143,168,106,0.12); }
      .service-card:last-child   { border-bottom: none; }

      .feedlot-grid  { grid-template-columns: 1fr; }
      .feedlot-card  { border-right: none; }
      .feedlot-card:nth-child(n)   { border-bottom: 1px solid rgba(143,168,106,0.12); }
      .feedlot-card:last-child     { border-bottom: none; }

      .form-row { grid-template-columns: 1fr; }

      footer { grid-template-columns: 1fr; text-align: center; }
      .footer-logo { display: flex; justify-content: center; }
      .footer-bottom { justify-content: center; }
      .footer-copy { text-align: center; }
      .footer-links { justify-content: center; }

      .about-years { display: none; }
      .scroll-indicator { display: none; }

      /* Overlay más oscuro en mobile para legibilidad */
      .section-transparent:not(.hero)::before {
        background:
          linear-gradient(to top, rgba(5,8,3,0.97) 0%, rgba(5,8,3,0.80) 45%, rgba(5,8,3,0.48) 72%, transparent 100%),
          linear-gradient(to right, rgba(5,8,3,0.65) 0%, transparent 70%);
      }

      .hoteleria-pin-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(5,8,3,0.56);
        z-index: 0;
        pointer-events: none;
      }
    }

    /* ═══════════════════════════════════════════
       NUEVOS EFECTOS DE SCROLL
    ═══════════════════════════════════════════ */

    /* ─── MARQUEE ─── */
    .marquee-wrap {
      overflow: hidden;
      padding: 1.1rem 0;
      background: rgba(11,15,7,0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(143,168,106,0.1);
      border-bottom: 1px solid rgba(143,168,106,0.1);
      position: relative;
      z-index: 10;
    }

    .marquee-track {
      display: flex;
      gap: 2.5rem;
      width: max-content;
      animation: marqueeScroll 30s linear infinite;
      will-change: transform;
    }

    .marquee-wrap:hover .marquee-track { animation-play-state: paused; }

    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .marquee-track span {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cream);
      opacity: 0.5;
      white-space: nowrap;
    }

    .marquee-track .mdot {
      color: var(--green);
      opacity: 1 !important;
      font-size: 0.85rem;
    }

    /* ─── GALERÍA CLIP-PATH ─── */
    .clip-gallery {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 55vh 35vh;
      gap: 3px;
      position: relative;
      z-index: 10;
    }

    .clip-item {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .clip-item:first-child { grid-row: span 2; }

    .clip-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.08);
      transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .clip-item:hover img { transform: scale(1.0); }

    .clip-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
      pointer-events: none;
      z-index: 1;
    }

    .clip-label {
      position: absolute;
      bottom: 1.1rem;
      left: 1.2rem;
      font-size: 0.63rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--cream);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      z-index: 2;
    }

    .clip-item:hover .clip-label { opacity: 1; transform: translateY(0); }

    @media (max-width: 768px) {
      .clip-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 40vw);
      }
      .clip-item:first-child { grid-row: span 1; grid-column: span 2; }
    }

    /* ─── GALERÍA HORIZONTAL ─── */
    .hscroll-section {
      overflow: hidden;
      position: relative;
      z-index: 10;
      background: var(--dark);
    }

    .hscroll-eyebrow {
      position: absolute;
      top: 2.5rem;
      left: 3rem;
      z-index: 30;
      pointer-events: none;
    }

    .hscroll-track {
      display: flex;
      align-items: center;
      height: 100vh;
      padding: 0 5vw;
      gap: 1.2rem;
      will-change: transform;
    }

    .hscroll-item {
      position: relative;
      height: 52vh;
      width: 36vw;
      flex-shrink: 0;
      overflow: hidden;
      transition: height 0.5s ease;
    }

    .hscroll-item:nth-child(even) { height: 42vh; }

    .hscroll-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hscroll-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
      pointer-events: none;
    }

    .hscroll-cap {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(232,224,204,0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(11,15,7,0.5);
      padding: 0.3rem 0.7rem;
      z-index: 2;
    }

    /* Número de slide */
    .hscroll-num {
      position: absolute;
      top: 1.2rem;
      right: 1.2rem;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      color: rgba(232,224,204,0.4);
      z-index: 2;
    }

    @media (max-width: 768px) {
      .hscroll-section { display: none; }
    }

    /* ─── LÍNEA DIVISORA ANIMADA ─── */
    .line-divider {
      height: 1px;
      background: rgba(143,168,106,0.12);
      overflow: hidden;
      position: relative;
      z-index: 10;
    }

    .line-divider::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--green), rgba(143,168,106,0.3));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .line-divider.line-anim::after { transform: scaleX(1); }

    /* ─── LAYOUT HOTELERÍA (texto + cards lado a lado) ─── */
    .hoteleria-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
      width: 100%;
    }

    .hoteleria-cards {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Cards dentro de sección transparente: fondo oscuro propio */
    .hoteleria-cards .estab-card {
      background: rgba(11, 15, 7, 0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(143,168,106,0.15);
    }

    .align-right .hoteleria-cards .estab-card {
      text-align: right;
    }

    .align-right .hoteleria-cards .estab-stats {
      justify-content: flex-end;
    }

    /* ─── HOTELERIA / FEEDLOTS PIN SECTION ─── */
    .hoteleria-pin-section {
      position: relative;
    }
    .hoteleria-pin-inner {
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    .hoteleria-pin-inner::before { display: none; }
    .feedlot-slide {
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      display: flex;
      align-items: flex-end;
      z-index: 1;
    }
    #slide-hoteleria { left: 0; }
    #slide-feedlots  { right: 0; }
    #slide-consig    { left: 0; }
    #slide-reps      { right: 0; }
    .feedlot-slide-content {
      position: relative;
      padding: 3rem 3rem 3.5rem;
      width: 100%;
    }

    /* ─── HOTELERIA y CONSIGNATARIA: layout estático 2 columnas ─── */
    #hoteleria .hoteleria-pin-inner,
    #consignataria .hoteleria-pin-inner {
      height: auto;
      min-height: 0;
      overflow: visible;
      display: flex;
      align-items: flex-start;
      padding: 1.5rem 0 2rem;
    }
    #hoteleria .feedlot-slide,
    #consignataria .feedlot-slide {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      height: auto;
      width: 50%;
      align-items: flex-start;
    }
    #slide-reps {
      align-self: flex-start;
    }
    #hoteleria .feedlot-slide-content,
    #consignataria .feedlot-slide-content {
      padding: 1.5rem 2rem 2rem;
    }
    #hoteleria .feature-list--highlight li {
      padding: 0.5rem 0;
    }
    #hoteleria .estab-card,
    #consignataria .estab-card {
      padding: 1.5rem 1.75rem;
    }
    #hoteleria .estab-desc,
    #consignataria .estab-desc {
      margin-bottom: 1rem;
    }
    #consignataria .reps-inner {
      padding: 1.5rem 2rem;
    }
    #slide-hoteleria,
    #slide-feedlots,
    #slide-consig,
    #slide-reps {
      visibility: visible;
      opacity: 1;
    }

    .reps-inner {
      background: rgba(11, 15, 7, 0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(143, 168, 106, 0.15);
      border-radius: 4px;
      padding: 2.8rem 2.5rem;
    }

    @media (max-width: 768px) {
      .hoteleria-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .hoteleria-pin-inner  { height: auto; }
      .feedlot-slide        { position: relative; width: 100%; height: auto; }
      .feedlot-slide-content { padding: 2rem 1.5rem 2.5rem; }
      #slide-hoteleria, #slide-feedlots,
      #slide-consig, #slide-reps { visibility: visible; opacity: 1; }
    }

    /* ─── ESTABLECIMIENTOS FEEDLOT ─── */
    .estab-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 3rem;
      border: 1px solid rgba(143,168,106,0.15);
    }

    .estab-card {
      padding: 2.8rem 2.5rem;
      border-right: 1px solid rgba(143,168,106,0.15);
      position: relative;
      overflow: hidden;
    }

    .estab-card:last-child { border-right: none; }

    .estab-tag {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 0.6rem;
    }

    .estab-name {
      font-family: 'Rubik', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 0.4rem;
    }

    .estab-location {
      font-size: 0.78rem;
      color: var(--muted);
      margin-bottom: 1.5rem;
      letter-spacing: 0.04em;
    }

    .estab-desc {
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--cream);
      opacity: 0.75;
      margin-bottom: 1.75rem;
    }

    .estab-stats {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .estab-stat-num {
      font-family: 'Rubik', sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
    }

    .estab-stat-label {
      font-size: 0.7rem;
      color: var(--muted);
      letter-spacing: 0.06em;
      margin-top: 0.2rem;
    }

    @media (max-width: 768px) {
      .estab-grid { grid-template-columns: 1fr; }
      .estab-card { border-right: none; border-bottom: 1px solid rgba(143,168,106,0.15); }
      .estab-card:last-child { border-bottom: none; }
    }

    /* ─── MAPAS ─── */
    .maps-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 3rem;
    }

    .map-card {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .map-label {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 0.75rem;
      text-align: left;
    }

    .map-frame-wrap {
      position: relative;
      overflow: hidden;
      height: 600px;
      min-height: 600px;
      border: 1px solid rgba(143,168,106,0.15);
    }

    .map-frame-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      filter: invert(90%) hue-rotate(180deg) saturate(0.6) brightness(0.85);
    }

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

    /* ─── FEATURES LIST ─── */
    .feature-list {
      list-style: none;
      margin-top: 1.8rem;
      display: grid;
      gap: 0.6rem;
      max-width: 540px;
    }

    .feature-list li {
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--cream);
      opacity: 0.78;
      padding-left: 1.2rem;
      position: relative;
    }

    .feature-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.58em;
      width: 5px;
      height: 1px;
      background: var(--green);
    }

    .align-right .feature-list { margin-left: auto; }
    .align-right .feature-list li { padding-left: 0; padding-right: 1.2rem; text-align: right; }
    .align-right .feature-list li::before { left: auto; right: 0; }

    /* Feature list con labels destacados */
    .feature-list--highlight {
      gap: 0;
      max-width: 580px;
    }

    .feature-list--highlight li {
      padding: 0.9rem 0 0.9rem 0;
      border-bottom: 1px solid rgba(143,168,106,0.1);
      display: grid;
      grid-template-columns: 11rem 1fr;
      gap: 1rem;
      align-items: baseline;
      opacity: 1;
    }

    .feature-list--highlight li:last-child { border-bottom: none; }

    .feature-list--highlight li::before { display: none; }

    .fl-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--green);
      flex-shrink: 0;
    }

    .fl-value {
      font-size: 0.88rem;
      line-height: 1.65;
      color: var(--cream);
      opacity: 0.78;
    }

    @media (max-width: 768px) {
      .feature-list--highlight li {
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }
    }


    /* ═══════════════════════════════════════════════════════════
       ADAPTABILIDAD POR RESOLUCION
       ═══════════════════════════════════════════════════════════
       El sitio tenia un solo corte, en 768px: todo era "escritorio"
       o "mobile". Las resoluciones intermedias -- notebooks de 1280
       o 1366, una ventana a media pantalla, un monitor escalado al
       125% -- recibian el layout de escritorio sin tener el ancho
       para sostenerlo. De ahi venia el desalineado de las tarjetas
       de representantes.

       Este bloque va al final a proposito: las media queries no
       suman especificidad, asi que para poder corregir reglas que
       ya existen mas arriba tiene que venir despues.

       Cortes usados:
         900px   la navegacion pasa a hamburguesa
         1100px  las secciones partidas 50/50 se apilan
         1180px  la grilla de stats baja de 5 a 3 columnas
       ═══════════════════════════════════════════════════════════ */

    /* ─── 1. ESCALA TIPOGRAFICA FLUIDA ───
       Un solo rem elastico en lugar de tocar 50 font-size uno por
       uno: todo lo que esta en rem (texto, padding, gap) acompaña.
       16px de 1600px para arriba, o sea identico a como se ve hoy en
       escritorio, y baja suave hasta 14px en 900px.
       Arranca en 769px para no tocar mobile, que ya estaba bien.
       Va en rem y no en px para no pisar el tamaño de fuente que el
       usuario haya configurado en su navegador. */
    @media (min-width: 769px) {
      html { font-size: clamp(0.875rem, 0.2857vw + 0.714rem, 1rem); }
    }

    /* ─── 2. TARJETAS DE REPRESENTANTES ───
       Este era el bug reportado: "Federico Blanchard" no entraba en
       una linea, partia en dos y empujaba su boton de WhatsApp mas
       abajo que los otros dos.

       La tarjeta pasa a ser una columna flex y el nombre es el que
       absorbe el espacio sobrante (flex: 1). Como las tres tarjetas
       miden lo mismo -- son celdas de grid, que por defecto se
       estiran a la mas alta -- el area del nombre crece igual en las
       tres. Resultado: cargo y boton quedan alineados sin importar
       si un nombre ocupa una linea o dos, y sin reservar espacio de
       mas cuando entran todos en una sola.

       Ojo: no usar margin-top:auto en el boton. Los margenes auto se
       resuelven ANTES que flex-grow, asi que se comerian el espacio
       que necesita el nombre y volveria el desalineado. */
    .rep-card {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .rep-name {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.25;
      text-align: center;
      text-wrap: balance;
    }

    @media (min-width: 769px) {
      .reps-grid {
        /* auto-fit en vez de 3 columnas fijas: si el contenedor no da
           para tres, bajan a dos o a una por su cuenta. Asi no hace
           falta un breakpoint por cada ancho posible. */
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
        gap: clamp(0.75rem, 1.6vw, 2rem);
        align-items: stretch;
      }

      .rep-card { padding: clamp(1rem, 1.8vw, 2.5rem) clamp(0.5rem, 1vw, 1.5rem); }
      .rep-name { font-size: clamp(0.9rem, 0.5vw + 0.72rem, 1.05rem); }
      .rep-role { margin-bottom: clamp(0.75rem, 1.2vw, 1.5rem); }

      .rep-avatar {
        width: clamp(68px, 5.6vw, 96px);
        height: clamp(68px, 5.6vw, 96px);
        margin-bottom: clamp(0.7rem, 1.1vw, 1.25rem);
      }

      /* El boton no baja de 44px de alto: es el minimo comodo para
         tocar con el dedo en una tablet o una notebook touch. */
      .btn-whatsapp {
        min-height: 44px;
        padding: 0.5rem clamp(0.8rem, 1.1vw, 1.3rem);
      }
    }

    /* ─── 3. SECCIONES PARTIDAS 50/50 ───
       #hoteleria y #consignataria ponen dos columnas al 50%. A 1920px
       cada una mide 960px y respira; a 1366px baja a 683px y el
       contenido queda apretado. Abajo de 1100px se apilan, igual que
       ya hacian en mobile, y cada bloque usa el ancho completo. */
    @media (max-width: 1100px) {
      #hoteleria .hoteleria-pin-inner,
      #consignataria .hoteleria-pin-inner {
        flex-direction: column;
        padding: 1.25rem 0 2rem;
      }
      #hoteleria .feedlot-slide,
      #consignataria .feedlot-slide { width: 100%; }
    }

    /* Etiqueta de ancho fijo (11rem) que en una columna angosta dejaba
       sin lugar a la descripcion. */
    .feature-list--highlight li { grid-template-columns: min(11rem, 38%) minmax(0, 1fr); }

    /* ─── 4. GRILLA DE STATS ───
       5 columnas en 1100px son 220px cada una: los rotulos se parten
       en tres o cuatro lineas. Agrego un paso intermedio de 5 a 3,
       antes del 5 a 2 que ya existia en mobile. Los bordes se
       recalculan porque cambia donde termina cada fila. */
    @media (min-width: 769px) and (max-width: 1180px) {
      .stats-grid { grid-template-columns: repeat(3, 1fr); }
      .stat-item {
        border-bottom: 1px solid rgba(143, 168, 106, 0.14);
        padding: clamp(1.5rem, 2.6vw, 3rem) clamp(0.75rem, 1.2vw, 1.5rem);
      }
      .stat-item:nth-child(3n)  { border-right: none; }
      .stat-item:nth-child(n+4) { border-bottom: none; }
    }

    @media (min-width: 1181px) {
      .stat-item { padding: clamp(2rem, 3vw, 3rem) clamp(0.75rem, 1.2vw, 1.5rem); }
    }

    /* ─── 5. MAPAS ───
       Tenian 600px de alto clavados. En una notebook de 768px de alto
       un solo mapa se comia toda la pantalla. Ahora es proporcional a
       la altura de la ventana, con piso y techo. */
    .maps-grid { gap: clamp(1rem, 2vw, 2rem); }

    .map-frame-wrap {
      height: clamp(260px, 46vh, 600px);
      min-height: 0;
    }

    @media (min-width: 769px) {
      /* Dos mapas mientras entren; si no, uno debajo del otro. */
      .maps-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
    }

    /* ─── 6. NAVEGACION ───
       Siete links mas el logo no entran abajo de ~900px, pero la
       hamburguesa recien aparecia en 768. En esa franja los links se
       amontonaban contra el logo.

       Las reglas del overlay se repiten aca en lugar de moverse del
       bloque de 768: el JS mueve el <ul> al <body> al abrirlo, asi
       que si el overlay no esta definido para este ancho el menu se
       abre sin estilos. */
    @media (max-width: 900px) {
      .nav-burger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(11, 15, 7, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        z-index: 9999;
      }
      .nav-links.open   { display: flex; }
      .nav-links.open a { font-size: 1rem; opacity: 1; }
    }

    /* Justo arriba del corte, los links se juntan un poco. */
    @media (min-width: 901px) and (max-width: 1150px) {
      .nav-links { gap: clamp(0.9rem, 1.7vw, 2rem); }
    }

    /* ─── 7. PANTALLAS BAJAS ───
       Una notebook de 1366x768 deja unos 730px utiles. El hero a
       100vh mas los paddings de 5rem dejaban el titulo sin aire.
       Esto apunta a la altura, no al ancho: es el eje que falta
       cuando el problema es "entra a lo ancho pero no a lo alto". */
    @media (min-width: 769px) and (max-height: 820px) {
      .section-solid       { padding-block: clamp(2.5rem, 5.5vh, 5rem); }
      .section-transparent { padding-block: clamp(2rem, 4.5vh, 4rem); }
      .map-frame-wrap      { height: clamp(240px, 40vh, 420px); }
      .stat-item           { padding-block: clamp(1.25rem, 3.5vh, 3rem); }
    }

    /* El hero usa svh donde exista: en mobile 100vh incluye la barra
       del navegador que despues se retrae, y el contenido saltaba. */
    .hero { height: 100vh; }
    @supports (height: 100svh) {
      .hero { height: 100svh; }
    }

    /* ─── 8. MONITORES ANCHOS ───
       Arriba de 1800px el rem ya esta topeado en 16px, asi que el
       padding lateral dejaba de crecer y el contenido quedaba
       demasiado pegado al borde. */
    @media (min-width: 1800px) {
      .section-solid,
      .section-transparent { padding-inline: clamp(3rem, 6vw, 9rem); }
      footer               { padding-inline: clamp(3rem, 6vw, 9rem); }
    }

    /* ─── 9. IMAGENES ───
       Red de seguridad: ninguna imagen desborda su contenedor,
       cualquiera sea la resolucion. */
    img { max-width: 100%; }