/* ================= HEADER ================= */
  /* ================= HEADER PRO ================= */

  .header-content {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 16px 0;
  }

  /* LOGO */
  .logo-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-light);
    border: 3px solid var(--green);
    flex-shrink: 0;
  }

  .logo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* BRAND */
  .brand {
    display: flex;
    flex-direction: column;
  }

  .brand h1 {
    font-size: 20px;
    font-weight: 900;
    color: var(--green-dark);
    line-height: 1;
  }

  .brand span {
    font-size: 12px;
    color: var(--gray);
    font-weight: 600;
  }

  /* NAV */
  .nav {
    margin-left: auto;
    display: flex;
    gap: 22px;
  }

  .nav a {
    text-decoration: none;
    font-weight: 700;
    color: var(--gray-dark);
    position: relative;
    padding: 5px 0;
  }

  .nav a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--yellow);
    transition: .3s;
  }

  .nav a:hover::after {
    width: 100%;
  }



  /* ================= HERO ================= */
  .hero {
    position: relative;
    height: 85vh;
    overflow: hidden;
  }

  .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(31, 61, 43, 0.9),
      rgba(31, 61, 43, 0.4)
    );
    z-index: 1;
  }

  .hero-content {
    position: absolute;
    z-index: 2;
    color: var(--white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1200px, 90%);
  }

  .badge {
    background: var(--yellow);
    color: var(--gray-dark);
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 4px;
  }

  .hero h1 {
    font-size: 3.2rem;
    margin-bottom: 18px;
    max-width: 650px;
    line-height: 1.1;
  }

  .hero p {
    max-width: 520px;
    margin-bottom: 30px;
    line-height: 1.7;
    font-size: 16px;
    color: #e9e9e9;
  }

  .hero-actions .btn {
    padding: 15px 28px;
    border-radius: 8px;
    text-decoration: none;
    margin-right: 12px;
    font-weight: 700;
    display: inline-block;
  }

  .btn.primary {
    background: var(--green);
    color: var(--white);
  }

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

  .btn.secondary {
    border: 2px solid var(--yellow);
    color: var(--yellow);
  }

  .btn.secondary:hover {
    background: var(--yellow);
    color: var(--gray-dark);
  }

  /* ===== MÓVIL ===== */
  @media (max-width: 768px) {
    .hero {
      height: 90vh;
    }

    .hero-overlay {
      background: linear-gradient(
        180deg,
        rgba(31, 61, 43, 0.88),
        rgba(31, 61, 43, 0.55)
      );
    }

    .hero-content {
      text-align: center;
      width: 90%;
    }

    .hero h1 {
      font-size: 2.2rem;
      max-width: 100%;
      margin-bottom: 16px;
    }

    .hero p {
      max-width: 100%;
      font-size: 15px;
      margin: 0 auto 24px;
    }

    .hero-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .hero-actions .btn {
      margin-right: 0;
      width: 100%;
      max-width: 280px;
      text-align: center;
    }

    .badge {
      margin-bottom: 16px;
    }
  }
  /* ================= SECTIONS ================= */
  .section {
    padding: 90px 0;
  }

  .section.light {
    background: var(--gray-light);
  }

  .section h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
    color: var(--green-dark);
  }

  .section-subtitle {
    color: var(--gray);
    margin-bottom: 50px;
    max-width: 600px;
  }

  /* ================= CATEGORIES ================= */
  .categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .category-card {
    background: var(--white);
    padding: 35px;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .3s;
    border-left: 6px solid var(--green);
  }

  .category-card .icon {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .category-card h3 {
    margin-bottom: 10px;
    color: var(--green-dark);
  }

  .category-card p {
    color: var(--gray);
    font-size: 15px;
  }

  .category-card:hover {
    transform: translateY(-8px);
    border-left-color: var(--yellow);
  }

  /* ================= PRODUCTS ================= */
  .products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
  }

  .product-card {
    background: var(--white);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
    transition: .3s;
  }

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

  .product-card img {
    width: 100%;
    height: 190px;
    object-fit: contain;
  }

  .product-card h4 {
    margin: 18px 0 10px;
    color: var(--green-dark);
  }

  .product-card ul {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.6;
  }

  .product-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }

  .product-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid var(--green);
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    color: var(--green-dark);
  }

  .product-actions button:hover {
    background: var(--green-light);
    color: var(--white);
    border-color: var(--green-light);
  }

  .product-actions .primary {
    background: var(--green);
    color: var(--white);
    border: none;
  }

  .product-actions .primary:hover {
    background: var(--green-dark);
  }

  .tag {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--yellow);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 4px;
  }

  /* ================= FOOTER ================= */
  .footer {
    background: #0b0b0b;
    color: #ddd;
    margin-top: 80px;
  }

  .footer-container {
    max-width: 1200px;
    margin: auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
  }

  .footer-col h3,
  .footer-col h4 {
    margin-bottom: 15px;
    color: #fff;
  }

  .footer-col p {
    font-size: 14px;
    line-height: 1.6;
    color: #bbb;
  }

  .footer-col a {
    display: block;
    color: #bbb;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .footer-col a:hover {
    color: #25D366;
  }

  .footer-location {
    margin-top: 15px;
    font-size: 14px;
  }

  /* ================= REDES ================= */
  .socials {
    display: flex;
    gap: 15px;
    margin-top: 10px;
  }

  .social-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  }


  .social-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  }

  .social-btn:hover {
    transform: scale(1.1);
  }

  .social-btn.whatsapp {
    background: #25D366;
  }

  .social-btn.insta {
    background: #E1306C;
  }

  /* ================= LOOP INFINITO REAL ================= */

  .brands-strip {
    background: #ffffff;
    overflow: hidden;
    padding: 35px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .brands-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scrollLoop 20s linear infinite;
  }

  .brands-track img {
    height: 60px;
    object-fit: contain;
    margin-right: 90px; /* espacio real entre logos */
    flex-shrink: 0;
    transition: transform .3s ease;
  }

  .brands-track img:hover {
    transform: scale(1.08);
  }

  /* 🔥 CLAVE: usamos translate3d para fluidez GPU */
  @keyframes scrollLoop {
    0% {
      transform: translate3d(0,0,0);
    }
    100% {
      transform: translate3d(-33.333%,0,0);
    }
  }
  /* ================= FOOTER BOTTOM ================= */
  .footer-bottom {
    background: #000;
    text-align: center;
    padding: 15px;
    font-size: 13px;
    color: #888;
  }
  /* ================= WHATSAPP FLOAT ================= */
  .whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 999;
    transition: transform .25s, box-shadow .25s;
  }

  .whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0,0,0,.35);
  }

  /* ================= FILTROS ================= */
  .filters {
    display: flex;
    gap: 15px;
    margin: 30px 0;
  }

  .filters input,
  .filters select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    max-width: 250px;
  }

  /* ================= MODAL ================= */
  .modal {
  position: fixed;
  inset: 0;
  background:
  linear-gradient(
  rgba(31, 61, 43, 0.85),
  rgba(31, 61, 43, 0.85)
  ),
  url("img/campo.jpg");
  background-size: cover;
  background-position: center;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  }

  .modal-content {
    background: rgba(255,255,255,0.95);
    max-width: 1100px;
    width: 95%;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding: 40px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
  }

  .close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 26px;
    cursor: pointer;
  }

  /* ================= SLIDER ================= */
  .slider {
    position: relative;
  }

  .slider img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: 14px;
    background: #f4f6f4;
  }

  .slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(47, 107, 63, 0.9);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
  }

  .slider button:hover {
    background: var(--green-dark);
    transform: translateY(-50%) scale(1.1);
  }

  .prev { left: 15px; }
  .next { right: 15px; }

  .prev { left: 10px; }
  .next { right: 10px; }

  /* ================= MODAL INFO ================= */
  .modal-info h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--green-dark);
    margin-bottom: 12px;
  }

  .modal-info p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
  }
  .modal-price {
    font-size: 22px;
    font-weight: 700;
    color: #3483fa;
    margin-bottom: 20px;
  }
  .btn.whatsapp {
    background: linear-gradient(135deg, #25D366, #1ebe5d);
    color: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    text-align: center;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(37,211,102,.4);
    transition: transform .2s, box-shadow .2s;
  }

  .btn.whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(37,211,102,.55);
  }
  /* ================= QUICK CATEGORIES ================= */
  .quick-categories {
    background: var(--gray-light);
    padding: 50px 0;
  }

  .category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
  }

  .cat-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
    color: var(--white);
    height: 120px; /* más grandes */
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
    min-width: 180px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
  }

  /* Overlay oscuro para legibilidad */
  .cat-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    transition: background 0.3s ease;
  }

  .cat-btn:hover::before {
    background: rgba(0,0,0,0.2);
  }

  .cat-btn span {
    position: relative;
    z-index: 1;
    font-size: 18px;
  }

  /* Hover efecto pop */
  .cat-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
  }

  /* Ejemplo de icono */
  .cat-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }


  /* ================= INDEX CATEGORIES PRO ================= */

  .index-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 60px 5%;
  }

  .index-cat {
    position: relative;
    height: 230px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Overlay oscuro */
  .index-cat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
    z-index: 1;
    transition: 0.3s;
  }

  /* TEXTO */
  .index-cat span {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 4px 12px rgba(0,0,0,0.8);
  }

  /* Hover */
  .index-cat:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.3);
  }

  .index-cat:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.3));
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .index-categories {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

    .index-cat {
      height: 180px;
    }
  }
  /* Hover elegante */
  .index-cat:hover {
    transform: translateY(-6px);
  }

  .index-cat:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  }
  .index-cat:hover::before {
    background: rgba(0,0,0,0.15);
  }

  .index-cat span {
    position: relative; /* para que esté encima del overlay */
    z-index: 2;
    text-align: center;
  }

  /* Hover efecto elevación */
  .index-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
  }

  /* Responsive: tablet */
  @media (max-width: 1024px) {
    .index-categories {
      grid-template-columns: repeat(2, 1fr); /* 2 botones por fila */
    }
  }

  /* Responsive: móvil */
  @media (max-width: 768px) {
    .index-categories {
      grid-template-columns: 1fr; /* 1 botón por fila */
    }
    .index-cat {
      height: 180px;
      font-size: 20px;
    }
  }/* GRID DE 6 POR FILA */
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  /* tarjetas */
  .catalog-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
  }

  .catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
  }

  .catalog-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .catalog-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #2f6b3f;
  }

  .catalog-card .price {
    font-weight: 700;
    color: #3483fa;
    margin-bottom: 6px;
  }

  .catalog-card p {
    font-size: 14px;
    color: #555;
  }

  /* MODAL */
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.7);
    z-index: 999;
  }

  .modal-content {
    background: #fff;
    width: 90%;
    max-width: 1100px;
    border-radius: 16px;
    display: flex;
    gap: 30px;
    padding: 30px;
    position: relative;
  }

  .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
  }

  .slider {
    flex: 1;
    position: relative;
  }

  .slider-images img,
  .slider-images video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    display: none;
  }

  .slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(47,107,63,.8);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: 0.3s;
  }

  .slider button:hover {
    background: var(--green-dark);
  }

  .prev { left: 10px; }
  .next { right: 10px; }

  .modal-info {
    flex: 1;
  }

  .modal-info h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--green-dark);
    margin-bottom: 12px;
  }

  .modal-info .modal-price {
    font-size: 22px;
    font-weight: 700;
    color: #3483fa;
    margin-bottom: 15px;
  }

  .modal-info p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
  }


  /* MODAL */
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.7);
    z-index: 999;
  }

  .modal-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    padding: 25px;
    position: relative;
    flex-wrap: wrap;
  }

  .modal-slider {
    flex: 1;
    position: relative;
  }

  .modal-slider img,
  .modal-slider video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
  }

  .modal-slider .prev,
  .modal-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(47,107,63,.8);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .prev { left: 10px; }
  .next { right: 10px; }

  .modal-info {
    flex: 1;
    min-width: 250px;
  }

  .modal-info h2 {
    font-size: 26px;
    color: #2f6b3f;
    margin-bottom: 12px;
  }

  .modal-info .modal-price {
    font-size: 22px;
    font-weight: 700;
    color: #3483fa;
    margin-bottom: 15px;
  }

  .modal-info p {
    font-size: 15px;
    margin-bottom: 20px;
  }
  /* ================= GRID DE PRODUCTOS ================= */


  /* ================= CARDS ================= */
  .catalog-card {
    background: linear-gradient(145deg, #f0f5f9, #ffffff); /* sutil degradé */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
  }

  .catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  }

  .catalog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: transform 0.3s;
  }

  .catalog-card:hover img {
    transform: scale(1.05);
  }

  .catalog-card h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #2f6b3f;
  }

  .catalog-card .price {
    font-size: 15px;
    font-weight: 600;
    color: #3483fa;
    margin-bottom: 8px;
  }

  .catalog-card button {
    background-color: #2f6b3f;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
  }

  /* ================= MODAL ================= */
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.75);
    z-index: 999;
    overflow-y: auto;
  }

  .modal-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    padding: 25px;
    position: relative;
    flex-wrap: wrap;
  }

  .modal-slider {
    flex: 1;
    position: relative;
  }

  .modal-slider img,
  .modal-slider video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
  }

  .modal-slider .prev,
  .modal-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(47,107,63,0.85);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .prev { left: 10px; }
  .next { right: 10px; }

  .modal-info {
    flex: 1;
    min-width: 250px;
  }

  .modal-info h2 {
    font-size: 26px;
    color: #2f6b3f;
    margin-bottom: 12px;
  }

  .modal-info .modal-price {
    font-size: 22px;
    font-weight: 700;
    color: #3483fa;
    margin-bottom: 15px;
  }

  .modal-info p {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .modal-info .btn.whatsapp {
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
  }

  .modal-info .btn.whatsapp:hover {
    background: #1ebe5d;
  }
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    justify-content: start; /* evita que se estiren las cards */
    margin-top: 30px;
  }

  .catalog-card {
    width: 220px;       /* tamaño fijo “normal” */
    max-width: 220px;   /* para que no se agrande al filtrar */
    background: linear-gradient(145deg, #f0f5f9, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
  }
  .modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    overflow-y: auto;
  }

  .modal-content {
    background: #fff;
    width: 90%;
    max-width: 1100px;
    border-radius: 12px;
    display: flex;
    gap: 30px;
    padding: 30px;
    position: relative;
    flex-wrap: wrap;
  }

  /* ===== MODAL FONDO ===== */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  /* ===== CONTENIDO ===== */
  .modal-content {
    background: #fff;
    width: 1000px;
    max-width: 95%;
    border-radius: 18px;
      padding: 42px 35px 35px 35px;
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr 350px;
    gap: 30px;
    align-items: start;
  }

  /* ===== MINIATURAS ===== */
  .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .thumbnails img {
    width: 90px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
  }

  .thumbnails img:hover,
  .thumbnails img.active {
    opacity: 1;
    transform: scale(1.05);
  }
  .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;

    max-height: 500px;   /* mismo alto que la imagen */
    overflow-y: auto;    /* scroll si hay muchas */
    padding-right: 5px;
  }
  .thumbnails::-webkit-scrollbar {
    width: 6px;
  }

  .thumbnails::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .thumbnails::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  /* ===== IMAGEN GRANDE ===== */
  .main-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 12px;
  }

  /* ===== INFO PRODUCTO ===== */
  .modal-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .modal-info h2 {
    font-size: 24px;
    margin: 0;
  }

  .modal-info p {
    font-size: 15px;
    color: #555;
  }

  .modal-info .price {
    font-size: 22px;
    font-weight: bold;
  }

  .modal-info button {
    background: black;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
  }

  /* ===== BOTON CERRAR ===== */
  .close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
  }
  .modal-gallery {
    display: contents;
  }
  #lightbox .close {
    position: absolute;
    top: 25px;
    right: 30px;

    width: 45px;
    height: 45px;

    background: red;
    color: white;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    font-weight: bold;
    cursor: pointer;

    transition: 0.3s;
  }

  #lightbox .close:hover {
    transform: scale(1.1);
    background: #cc0000;
  }
  #lightbox .prev,
  #lightbox .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    background: rgba(0,0,0,0.6);
    color: white;

    border: none;
    border-radius: 50%;

    font-size: 26px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.3s;
  }

  #lightbox .prev {
    left: 30px;
  }

  #lightbox .next {
    right: 30px;
  }

  #lightbox .prev:hover,
  #lightbox .next:hover {
    background: rgba(0,0,0,0.9);
    transform: translateY(-50%) scale(1.1);
  }
  .modal-content .close {
    position: absolute;
    top: 20px;
    right: 25px;

    width: 40px;
    height: 40px;

    background: white;
    color: black;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    cursor: pointer;

    z-index: 20;
    transition: 0.3s;
  }

  .modal-content .close:hover {
    background: #f0f0f0;
    transform: scale(1.1);
  }
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .product-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
  }

  .close-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }
  .modal-gallery,
  .modal-info {
    margin-top: 40px;
  }
  /* ================= CORPORATE HIGHLIGHT AGRO ================= */

  .corporate-highlight {
    padding: 110px 0;
    background: #ffffff;
  }

  .corporate-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
  }

  /* Badge verde agro */
  .corp-badge {
    display: inline-block;
    background: #2e7d32; /* verde fuerte */
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
  }

  /* Título */
  .corporate-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
    line-height: 1.3;
    color: #1b1b1b;
  }

  /* Texto */
  .corporate-text p {
    color: #555;
    font-size: 16px;
    max-width: 500px;
  }

  /* Caja verde destacada */
  .corporate-stats {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .corporate-stats h3 {
    font-size: 32px;
    margin-bottom: 8px;
    color: #ffeb3b; /* amarillo agrícola */
  }

  .corporate-stats span {
    font-size: 14px;
    opacity: 0.9;
  }

  /* Responsive */

  @media (max-width: 900px) {
    .corporate-box {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .corporate-text p {
      margin: 0 auto;
    }

    .corporate-stats {
      margin-top: 40px;
      flex-direction: column;
      gap: 20px;
    }
  }
  /* ================= GENERAL ================= */
  body {
      font-family: 'Roboto', sans-serif;
      color: #333;
      line-height: 1.6;
      background: #f5f5f5;
      margin: 0;
  }

  h1,h2,h3,h4 {
      font-weight: 700;
      color: #2E7D32;
  }

  p, li {
      font-weight: 400;
  }

  /* ================= HERO PRO ================= */
  .sobre-nosotros-banner {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      overflow: hidden;
  }

  .sobre-nosotros-banner video,
  .sobre-nosotros-banner img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 0;
      left: 0;
      z-index: 1;
  }

  .banner-overlay {
      position: absolute;
      inset: 0;
      background: rgba(46,125,50,0.6);
      z-index: 2;
  }

  .banner-content {
      position: relative;
      z-index: 3;
      max-width: 900px;
      padding: 0 20px;
  }

  .banner-content h1 {
      font-size: 3rem;
      margin-bottom: 15px;
      text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
  }

  .banner-content p {
      font-size: 1.2rem;
      margin-bottom: 20px;
  }

  .banner-content .btn {
      background: #FFEB3B;
      color: #2E7D32;
      padding: 15px 30px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s;
  }

  .banner-content .btn:hover {
      background: #f3d600;
      transform: translateY(-2px);
  }

  /* ================= NUESTRA HISTORIA ================= */
  .about {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      background: #fff;
      gap: 40px;
  }

  .about .about-text {
      flex: 1 1 400px;
  }

  .about .about-text h2 {
      font-size: 2.2rem;
      margin-bottom: 20px;
  }

  .about .about-text p {
      font-size: 1.1rem;
  }

  .about .about-image {
      flex: 1 1 400px;
  }

  .about .about-image img {
      width: 100%;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  }

  /* ================= CARDS ================= */
  .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 60px 20px;
      background: #f5f5f5;
  }

  .card {
      background: white;
      border-radius: 15px;
      padding: 30px;
      flex: 1 1 250px;
      max-width: 300px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      transition: all 0.3s;
  }

  .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  }

  .card h3 {
      margin-bottom: 15px;
      color: #2E7D32;
  }

  .card ul {
      list-style: disc inside;
  }

  /* ================= CONTACTO DESTACADO ================= */
  .contacto-rapido {
      background: linear-gradient(135deg, #FFEB3B 0%, #2E7D32 100%);
      color: white;
      text-align: center;
      padding: 80px 20px;
      border-radius: 15px;
      margin: 60px 20px;
      position: relative;
  }

  .contacto-rapido h2 {
      font-size: 2.5rem;
      margin-bottom: 20px;
  }

  .contacto-rapido p {
      font-size: 1.2rem;
      margin-bottom: 30px;
  }

  .contacto-rapido .btn {
      background: white;
      color: #2E7D32;
      font-weight: bold;
      padding: 18px 40px;
      text-decoration: none;
      border-radius: 10px;
      font-size: 1.1rem;
      transition: all 0.3s;
  }

  .contacto-rapido .btn:hover {
      background: #f5f5f5;
      transform: translateY(-3px);
  }

  /* ================= RESPONSIVE ================= */
  @media(max-width: 1024px) {
      .about {
          flex-direction: column-reverse;
          text-align: center;
      }
      .about .about-image,
      .about .about-text {
          flex: 1 1 100%;
      }
  }

  @media(max-width:768px) {
      .sobre-nosotros-banner {
          height: 350px;
      }
      .banner-content h1 {
          font-size: 2rem;
      }
      .banner-content p {
          font-size: 1rem;
      }
      .cards {
          flex-direction: column;
          align-items: center;
      }
      .contacto-rapido h2 {
          font-size: 2rem;
      }
      .contacto-rapido p {
          font-size: 1rem;
      }
  }
  /* HERO VIDEO CORREGIDO */
  .sobre-nosotros-banner {
    position: relative;
    width: 100%;
    height: 500px; /* altura del hero */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;           /* ocupa toda la altura del contenedor */
    min-width: 100%;        /* asegura que también llene horizontalmente */
    transform: translate(-50%, -50%);
    object-fit: cover;      /* recorta lo sobrante para llenar hero */
    z-index: 1;
  }

  .banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(46,125,50,0.6);
    z-index: 2;
  }

  .banner-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 900px;
    padding: 0 20px;
  }

  .banner-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
  }

  .banner-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .banner-content .btn {
    background: #FFEB3B;
    color: #2E7D32;
    padding: 15px 30px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
  }

  .banner-content .btn:hover {
    background: #f3d600;
    transform: translateY(-2px);
  }

  /* RESPONSIVE */
  @media(max-width:1024px) {
    .sobre-nosotros-banner { height: 400px; }
    .banner-content h1 { font-size: 2.5rem; }
  }

  @media(max-width:768px) {
    .sobre-nosotros-banner { height: 300px; }
    .banner-content h1 { font-size: 2rem; }
    .banner-content p { font-size: 1rem; }
  }
  /* HERO SOBRE NOSOTROS */
  .sobre-nosotros-hero{
    position: relative;
    height: 520px;
    overflow: hidden;
  }

  /* VIDEO O IMAGEN */

  .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* OVERLAY AGRO */

  .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(20,40,25,0.85),
        rgba(46,125,50,0.45)
    );
    z-index: 2;
  }

  /* CONTENIDO */

  .hero-content{
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%); /* centra exacto */

    z-index: 3;
    text-align: center;
    max-width: 700px;
    width: 90%;
  }
  .hero-content h1{
    font-size: 3.4rem;
    margin-bottom: 12px;
    color: white;
  }

  .hero-content p{
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
  }

  /* RESPONSIVE */

  @media(max-width:768px){

  .sobre-nosotros-hero{
  height:380px;
  }

  .hero-content h1{
  font-size:2.1rem;
  }

  .hero-content p{
  font-size:1rem;
  }

  }
  /* HERO SOBRE NOSOTROS */

  .sobre-nosotros-hero{
    position: relative;
    height: 520px;
    overflow: hidden;

    display: flex;
    align-items: center;     /* centra vertical */
    justify-content: center; /* centra horizontal */
    text-align: center;
  }

  /* video fondo */

  .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* overlay */

  .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
      120deg,
      rgba(20,40,25,0.85),
      rgba(46,125,50,0.45)
    );
    z-index: 2;
  }

  /* contenido */

  .hero-content{
    position: relative;
    z-index: 3;

    max-width: 750px;
    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* texto */

  .hero-content h1{
    font-size: 3.2rem;
    color: white;
    margin-bottom: 10px;
  }

  .hero-content p{
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
  }
  /* sobre-nosotros.css */

  /* ================= VARIABLES ================= */
  :root{
    --green-dark:#1f3d2b;
    --green:#2f6b3f;
    --green-light:#4fa36a;

    --yellow:#f2b705;

    --gray-dark:#1c1c1c;
    --gray:#6f6f6f;
    --gray-light:#f4f6f4;

    --white:#ffffff;
  }

  /* ================= RESET ================= */
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Roboto", sans-serif;
  }

  body{
    background: var(--white);
    color: var(--gray-dark);
  }

  /* ================= CONTAINER ================= */
  .container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ================= HEADER ================= */
  .header{
    background: var(--white);
    border-bottom: 2px solid var(--green-light);
    position: sticky;
    top:0;
    z-index: 20;
  }

  .header-content{
    display:flex;
    align-items:center;
    gap: 18px;
    padding: 14px 0;
  }

  .logo-box{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow:hidden;
    background: var(--gray-light);
    border: 3px solid var(--green);
    flex-shrink:0;
  }

  .logo-box img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .brand{
    display:flex;
    flex-direction:column;
  }

  .brand h1{
    font-size: 20px;
    font-weight: 900;
    color: var(--green-dark);
    line-height: 1.05;
  }

  .brand span{
    font-size: 12px;
    color: var(--gray);
    font-weight: 700;
  }

  .nav{
    margin-left:auto;
    display:flex;
    gap: 20px;
  }

  .nav a{
    text-decoration:none;
    font-weight: 800;
    color: var(--gray-dark);
    position:relative;
    padding: 5px 0;
  }

  .nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:3px;
    background: var(--yellow);
    transition: .25s;
  }

  .nav a:hover::after,
  .nav a.active::after{
    width:100%;
  }

  /* ================= HERO ================= */
  .about-hero{
    position: relative;
    height: 540px;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
  }

  .hero-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(
      120deg,
      rgba(15,30,20,0.88),
      rgba(46,125,50,0.35)
    );
    z-index:2;
  }

  .hero-content{
    position: relative;
    z-index:3;
    color: var(--white);
    text-align:center;
    max-width: 850px;
  }

  .hero-eyebrow{
    display:inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(242,183,5,0.95);
    color: #1b1b1b;
    margin-bottom: 16px;
    font-weight: 900;
  }

  .hero-content h1{
    font-size: 3.2rem;
    margin-bottom: 12px;
    line-height: 1.06;
  }

  .hero-content p{
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
  }

  /* ================= MINI HIGHLIGHTS ================= */
  .mini-highlights{
    margin-top: -35px;
    padding-bottom: 10px;
  }

  .mini-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .mini-card{
    background: var(--white);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    border-left: 6px solid var(--yellow);
  }

  .mini-card h3{
    color: var(--green-dark);
    margin-bottom: 6px;
    font-size: 18px;
  }

  .mini-card p{
    color: var(--gray);
    line-height: 1.6;
    font-size: 14px;
  }

  /* ================= SECTIONS ================= */
  .section{
    padding: 78px 0;
  }

  .section-light{
    background: var(--gray-light);
  }

  .section-title{
    font-size: 2.2rem;
    color: var(--green-dark);
    margin-bottom: 10px;
  }

  .section-subtitle{
    color: var(--gray);
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 40px;
  }

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

  /* ================= SPLIT (TEXTO + IMAGEN) ================= */
  .split{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items:center;
  }

  .split.reverse{
    grid-template-columns: 0.9fr 1.1fr;
  }

  .split.reverse .split-text{
    order: 2;
  }

  .split-text p{
    color: #3a3a3a;
    line-height: 1.85;
    margin-bottom: 14px;
  }

  .split-media img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.15);
  }

  /* ================= SERVICES ================= */
  .service-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .service-card{
    background: var(--white);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.10);
    border-top: 5px solid var(--green);
    transition: transform .25s, box-shadow .25s;
  }

  .service-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.14);
  }

  .service-card h3{
    color: var(--green-dark);
    margin-bottom: 8px;
  }

  .service-card p{
    color: var(--gray);
    line-height: 1.7;
    font-size: 14px;
  }

  /* ================= STATS ================= */
  .stats{
    padding: 26px 0 0;
  }

  .stats-box{
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    border-radius: 18px;
    padding: 32px 22px;
    display:flex;
    gap: 18px;
    justify-content: space-between;
    align-items:center;
    color: var(--white);
    box-shadow: 0 18px 55px rgba(0,0,0,0.22);
    margin-top: -20px;
  }

  .stat{
    flex:1;
    text-align:center;
    padding: 10px 8px;
  }

  .stat-num{
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffef7a;
    margin-bottom: 6px;
  }

  .stat-label{
    font-size: 13px;
    opacity: 0.95;
  }

  /* ================= VALUES CARDS ================= */
  .cards{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .card{
    background: var(--white);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.10);
    transition: transform .25s, box-shadow .25s;
    border-left: 6px solid var(--green-light);
  }

  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.14);
    border-left-color: var(--yellow);
  }

  .card h3{
    color: var(--green-dark);
    margin-bottom: 8px;
  }

  .card p{
    color: var(--gray);
    line-height: 1.7;
    font-size: 14px;
  }

  /* ================= CHECKLIST ================= */
  .checklist{
    list-style:none;
    padding-left:0;
    margin-top: 12px;
  }

  .checklist li{
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    color: #3a3a3a;
    line-height: 1.7;
  }

  .checklist li::before{
    content:"";
    position:absolute;
    left:0;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 6px 14px rgba(242,183,5,0.35);
  }

  /* ================= TEAM ================= */
  .team-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .member{
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    text-align:center;
    box-shadow: 0 14px 35px rgba(0,0,0,0.10);
  }

  .member-photo{
    width: 110px;
    height: 110px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow:hidden;
    border: 4px solid var(--green);
    background: var(--gray-light);
  }

  .member-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .member h4{
    color: var(--green-dark);
    margin-bottom: 6px;
    font-size: 16px;
  }

  .member p{
    color: var(--gray);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ================= CTA ================= */
  .cta{
    padding: 65px 0;
    background: linear-gradient(135deg, rgba(242,183,5,0.90), rgba(47,107,63,0.95));
  }

  .cta-box{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 18px;
  }

  .cta-text h2{
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 8px;
  }

  .cta-text p{
    color: rgba(255,255,255,0.92);
    line-height: 1.7;
    max-width: 700px;
  }

  /* ================= BUTTONS ================= */
  .btn{
    text-decoration:none;
    font-weight: 900;
    padding: 13px 18px;
    border-radius: 10px;
    display:inline-block;
    transition: transform .2s, background .2s, color .2s, border-color .2s;
  }

  .btn.primary{
    background: var(--green-dark);
    color: var(--white);
  }

  .btn.primary:hover{
    transform: translateY(-2px);
    background: #152a1e;
  }

  .btn.secondary{
    border: 2px solid rgba(255,255,255,0.85);
    color: var(--white);
  }

  .btn.secondary:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
  }

  /* ================= FOOTER ================= */
  .footer{
    background:#0b0b0b;
    color:#ddd;
    margin-top: 0;
  }

  .footer-container{
    max-width: 1200px;
    margin: auto;
    padding: 46px 20px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 34px;
  }

  .footer-col h3,
  .footer-col h4{
    margin-bottom: 14px;
    color:#fff;
  }

  .footer-col p{
    font-size: 14px;
    line-height: 1.6;
    color:#bbb;
  }

  .footer-col a{
    display:block;
    color:#bbb;
    text-decoration:none;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .footer-col a:hover{
    color:#25D366;
  }

  .footer-location{
    margin-top: 12px;
    font-size: 14px;
  }

  .socials{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    margin-top: 6px;
  }

  .social-btn{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform .2s;
  }

  .social-btn:hover{
    transform: scale(1.08);
  }

  .social-btn.whatsapp{ background:#25D366; }
  .social-btn.insta{ background:#E1306C; }

  .social-btn img{
    width: 22px;
    height: 22px;
    object-fit: contain;
    display:block;
  }

  /* ================= BRANDS STRIP ================= */
  .brands-strip{
    background:#ffffff;
    overflow:hidden;
    padding: 30px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .brands-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation: scrollLoop 20s linear infinite;
  }

  .brands-track img{
    height: 56px;
    object-fit: contain;
    margin-right: 85px;
    flex-shrink:0;
    transition: transform .25s ease;
  }

  .brands-track img:hover{
    transform: scale(1.06);
  }

  @keyframes scrollLoop{
    0%{ transform: translate3d(0,0,0); }
    100%{ transform: translate3d(-33.333%,0,0); }
  }

  .footer-bottom{
    background:#000;
    text-align:center;
    padding: 14px;
    font-size: 13px;
    color:#888;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 1024px){
    .service-grid{ grid-template-columns: repeat(2, 1fr); }
    .cards{ grid-template-columns: repeat(2, 1fr); }
    .split{ grid-template-columns: 1fr; }
    .split.reverse .split-text{ order: 0; }
    .split-media img{ height: 320px; }
    .mini-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 768px){
    .about-hero{ height: 420px; }
    .hero-content h1{ font-size: 2.3rem; }
    .hero-content p{ font-size: 1rem; }

    .team-grid{ grid-template-columns: 1fr; }
    .stats-box{ flex-direction: column; }
    .cta-box{ flex-direction: column; align-items: flex-start; }
  }
  /* ===== SOBRE NOSOTROS: FIX CENTRADO HERO (override) ===== */
  .about-hero{
    position: relative;
    height: 540px;
    overflow: hidden;              /* para recortar el video */
    display: flex;
    align-items: center;           /* centro vertical */
    justify-content: center;       /* centro horizontal */
    text-align: center;
  }

  .about-hero .hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .about-hero .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
      120deg,
      rgba(15,30,20,0.88),
      rgba(46,125,50,0.35)
    );
    z-index: 2;
  }

  /* clave: resetear el hero-content global */
  .about-hero .hero-content{
    position: relative;
    z-index: 3;
    width: min(850px, 92%);
    margin: 0 auto;
    padding: 0 18px;

    top: auto;          /* anula tu hero viejo */
    left: auto;         /* anula tu hero viejo */
    transform: none;    /* anula tu hero viejo */
  }

  .about-hero .hero-content h1{
    color: #fff;
    font-size: 3.2rem;
    line-height: 1.05;
    margin-bottom: 12px;
  }

  .about-hero .hero-content p{
    color: rgba(255,255,255,0.92);
    font-size: 1.15rem;
    line-height: 1.7;
  }

  @media (max-width: 768px){
    .about-hero{ height: 420px; }
    .about-hero .hero-content h1{ font-size: 2.2rem; }
    .about-hero .hero-content p{ font-size: 1rem; }
  }
  /* ===== MINI CARDS: que no se corten ===== */
  .mini-highlights{
    position: relative;
    z-index: 5;
    margin-top: -55px;     /* overlap prolijo */
    padding-bottom: 25px;
  }

  .mini-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  @media (max-width: 1024px){
    .mini-grid{ grid-template-columns: 1fr; }
    .mini-highlights{ margin-top: -25px; }
  }

  /* =========================
    MEJORAS ESTÉTICAS (solo añade esto al FINAL de tu style.css)
    No rompe tu CSS actual: son overrides suaves.
  ========================= */

  /* 1) Estado activo del menú (usaste class="active" en Tienda) */
  .nav a.active::after{
    width: 100%;
  }

  /* 2) Página tienda: un poco más “premium” sin tocar tu estructura */
  .shop-page .section.light{
    background: linear-gradient(180deg, var(--gray-light), #ffffff);
  }

  /* 3) Filtros: mejor alineación, foco visible, y responsive real */
  .filters{
    align-items: center;
    flex-wrap: wrap;
  }

  .filters input,
  .filters select{
    outline: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
  }

  .filters input:focus,
  .filters select:focus{
    border-color: rgba(47,107,63,.55);
    box-shadow: 0 0 0 4px rgba(47,107,63,.15);
  }

  .filters input:focus{
    transform: translateY(-1px);
  }

  /* 4) Grid: mejor consistencia visual + evita “saltos” al cargar */
  .catalog-grid{
    align-items: stretch;
  }

  /* 5) Cards: micro-mejoras de tipografía, espacio y hover */
  .catalog-card{
    position: relative;
    overflow: hidden;
    will-change: transform;
  }

  .catalog-card img{
    transition: transform .25s ease;
  }

  .catalog-card:hover img{
    transform: scale(1.03);
  }

  /* 6) Botón: feedback más “clickable” */
  .catalog-card button{
    transition: transform .15s ease, filter .2s ease, background .2s;
  }

  .catalog-card button:active{
    transform: translateY(1px);
    filter: brightness(.96);
  }

  /* 7) Modal: más legible en pantallas chicas */
  .modal-content{
    max-height: calc(100vh - 40px);
    overflow: auto;
  }

  /* 8) Thumbnails: hover/active más claro (si tu JS pone .active) */
  .thumbnails img{
    border: 2px solid transparent;
  }

  .thumbnails img:hover{
    border-color: rgba(242,183,5,.8);
  }

  .thumbnails img.active{
    opacity: 1;
    border-color: var(--yellow);
  }

  /* 9) Lightbox: centra la imagen y evita desbordes */
  #lightbox img,
  #lightboxImage{
    display: block;
    margin: 0 auto;
    max-width: min(92vw, 1100px);
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
  }

  /* 10) Accesibilidad básica: respeta “reduce motion” */
  @media (prefers-reduced-motion: reduce){
    *{
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
  }
  /* =========================
    TIENDA — OVERRIDES ESTÉTICOS (PEGAR AL FINAL)
    Requiere: <body class="shop-page">
  ========================= */

  /* 1) Quita el “vacío” gigante arriba (90 + 90) */
  .shop-page .section{
    padding: 50px 0;
  }
  .shop-page .section.light{
    padding: 45px 0 18px;   /* menos abajo para que el grid suba */
  }
  .shop-page .section:not(.light){
    padding-top: 18px;      /* pega el grid a los filtros */
  }

  /* 2) Encabezado de la tienda más prolijo */
  .shop-page .section h2{
    font-size: 2.2rem;
    letter-spacing: -0.5px;
  }
  .shop-page .section-subtitle{
    margin-bottom: 22px;
  }

  /* 3) Barra de filtros tipo “card” */
  .shop-page .filters{
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    align-items: center;

    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
  }

  @media (max-width: 720px){
    .shop-page .filters{
      grid-template-columns: 1fr;
    }
  }

  /* Inputs más “premium” */
  .shop-page .filters input,
  .shop-page .filters select{
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
  }

  .shop-page .filters input:focus,
  .shop-page .filters select:focus{
    outline: none;
    border-color: rgba(47,107,63,.55);
    box-shadow: 0 0 0 4px rgba(47,107,63,.14);
  }

  /* 4) Grid: que arranque arriba y se vea más ordenado */
  .shop-page .catalog-grid{
    align-items: start;
    margin-top: 18px;
  }

  /* 5) Cards: mejor proporción, hover fino y tipografía */
  .shop-page .catalog-card{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 14px 35px rgba(0,0,0,.08);
    padding: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .shop-page .catalog-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0,0,0,.12);
  }

  .shop-page .catalog-card img{
    height: 190px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--gray-light);
    transition: transform .18s ease;
  }

  .shop-page .catalog-card:hover img{
    transform: scale(1.02);
  }

  .shop-page .catalog-card h4{
    font-size: 15px;
    font-weight: 900;
    color: var(--green-dark);
    margin-top: 10px;
    margin-bottom: 6px;
    min-height: 42px;
  }

  .shop-page .catalog-card .price{
    font-size: 15px;
    font-weight: 900;
    color: #3483fa;
    margin-bottom: 10px;
  }

  /* Botón con mejor “click feel” */
  .shop-page .catalog-card button{
    height: 42px;
    border-radius: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    transition: transform .12s ease, filter .2s ease, background .2s ease;
  }

  .shop-page .catalog-card button:active{
    transform: translateY(1px);
    filter: brightness(.96);
  }

  /* 6) Modal: evita cortes en pantallas bajas */
  .shop-page .modal-content{
    max-height: calc(100vh - 40px);
    overflow: auto;
  }

  /* 7) Miniaturas: estado activo más claro (si tu JS usa .active) */
  .shop-page .thumbnails img{
    border: 2px solid transparent;
  }
  .shop-page .thumbnails img:hover{
    border-color: rgba(242,183,5,.75);
    opacity: 1;
  }
  .shop-page .thumbnails img.active{
    border-color: var(--yellow);
    opacity: 1;
  }

  /* 8) Reduce motion (higiene visual) */
  @media (prefers-reduced-motion: reduce){
    .shop-page *{
      transition: none !important;
      animation: none !important;
    }
  } 
  /* =========================
    HERO TIENDA (PEGAR AL FINAL)
  ========================= */
  .shop-hero{
    position: relative;
    height: 440px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .shop-hero-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .shop-hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
      120deg,
      rgba(15,30,20,0.90),
      rgba(46,125,50,0.35)
    );
    z-index: 2;
  }

  .shop-hero-content{
    position: relative;
    z-index: 3;
    color: #fff;
    max-width: 820px;
    padding: 0 2px;
  }

  .shop-hero-badge{
    display: inline-block;
    background: rgba(242,183,5,0.95);
    color: #1c1c1c;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
  }

  .shop-hero h1{
    font-size: 3.0rem;
    line-height: 1.05;
    margin-bottom: 12px;
  }

  .shop-hero p{
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
    max-width: 620px;
    margin-bottom: 18px;
  }

  .shop-hero-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Para que el hero no choque con tu .section light */
  .shop-hero + .section.light{
    padding-top: 35px;
  }

  /* Responsive */
  @media (max-width: 768px){
    .shop-hero{ height: 360px; }
    .shop-hero h1{ font-size: 2.2rem; }
    .shop-hero p{ font-size: 1rem; }
  }
  /* =========================
    FOOTER — MEJORA ESTÉTICA (override suave)
    Pegalo al FINAL del style.css
  ========================= */

  .footer{
    margin-top: 0; /* evita cortes raros si venís de sections */
    background: radial-gradient(1200px 400px at 20% 0%, rgba(79,163,106,.12), transparent 60%),
                radial-gradient(900px 350px at 90% 20%, rgba(242,183,5,.10), transparent 55%),
                #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .footer-container{
    padding: 56px 20px;
    gap: 34px;
    align-items: start;
  }

  /* títulos más nítidos */
  .footer-col h3,
  .footer-col h4{
    letter-spacing: .2px;
    margin-bottom: 14px;
  }

  /* texto más legible */
  .footer-col p{
    color: rgba(255,255,255,0.72);
    line-height: 1.75;
  }

  /* ubicación como “chip” */
  .footer-location{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
  }

  /* links: underline suave + mejor spacing */
  .footer-col a{
    position: relative;
    display: inline-block;
    width: fit-content;
    padding: 6px 0;
    margin-bottom: 2px;
    color: rgba(255,255,255,0.72);
    transition: color .2s ease, transform .2s ease;
  }

  .footer-col a::after{
    content:"";
    position:absolute;
    left:0;
    bottom: 2px;
    width:0%;
    height:2px;
    background: rgba(242,183,5,0.9);
    transition: width .25s ease;
  }

  .footer-col a:hover{
    color: rgba(255,255,255,0.92);
    transform: translateX(2px);
  }

  .footer-col a:hover::after{
    width: 100%;
  }

  /* socials: más premium y consistentes */
  .socials{
    gap: 12px;
    align-items: center;
  }

  .social-btn{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }

  .social-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  }

  .social-btn img{
    width: 22px;
    height: 22px;
  }

  /* brands strip: integrado, menos “pegote” blanco */
  /* fondo más claro para logos */
  .brands-strip{
    background: #e9ecef;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 26px 0;
  }

  /* logos */
  .brands-track img{
    height: 54px;
    margin-right: 80px;
    opacity: .95;
    transition: transform .2s ease;
  }

  .brands-track img:hover{
    transform: scale(1.06);
  }

  /* footer bottom más limpio */
  .footer-bottom{
    background: rgba(0,0,0,0.55);
    border-top: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    padding: 14px 12px;
  }

  /* responsive: columna socials alineada si cae sola */
  @media (max-width: 768px){
    .footer-container{
      padding: 44px 18px;
    }
    .socials{
      justify-content: flex-start;
    }
  }
  /* mover redes a la derecha */
  .socials{
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .footer-container{
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }

  .socials{
    margin-left: auto;
  }
  /* ===== FOOTER: 3 columnas (izq info / centro secciones / der redes) ===== */
  .footer-container{
    max-width: 1200px;
    margin: auto;
    padding: 46px 20px;

    display: grid;
    grid-template-columns: 1fr 220px auto;
    gap: 34px;
    align-items: start;
  }

  /* Columna izquierda: info */
  .footer-col:first-child{
    justify-self: start;
    text-align: left;
  }

  /* Columna del medio: secciones (vertical) */
  .footer-col:nth-child(2){
    justify-self: center;
    text-align: left;
  }

  .footer-col:nth-child(2) a{
    display: block;
    margin-bottom: 10px;
  }

  /* Columna derecha: redes */
  .socials{
    justify-self: end;
    align-self: start;
    display: flex;
    gap: 12px;
    margin-top: 0;
  }

  /* Responsive: en móvil apila en orden */
  @media (max-width: 768px){
    .footer-container{
      grid-template-columns: 1fr;
    }

    .footer-col:nth-child(2){
      justify-self: start;
    }

    .socials{
      justify-self: start;
    }
  }
  /* =========================
    RESPONSIVE TIENDA
  ========================= */

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

    /* header */
    .header-content{
      gap: 16px;
    }
    .nav{
      gap: 14px;
      flex-wrap: wrap;
    }

    /* hero tienda */
    .shop-hero{
      height: 460px;
    }
    .shop-hero-content h1{
      font-size: 2.6rem;
    }

    /* filtros */
    .filters{
      flex-wrap: wrap;
    }
    .filters input,
    .filters select{
      max-width: 100%;
      flex: 1 1 260px;
    }

    /* modal */
    .modal-content{
      grid-template-columns: 1fr;   /* si tu modal está en grid */
      gap: 20px;
      padding: 22px;
    }
    .main-image img{
      height: 360px;
      object-fit: contain;
    }
    .thumbnails{
      flex-direction: row;
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
      padding-right: 0;
      gap: 10px;
    }
    .thumbnails img{
      width: 90px;
      height: 70px;
      flex: 0 0 auto;
    }
  }

  /* Móvil */
  @media (max-width: 768px){

    /* header: que no se apriete */
    .header-content{
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .brand{
      min-width: 180px;
    }
    .nav{
      width: 100%;
      justify-content: center;
      padding-top: 8px;
    }

    /* hero tienda */
    .shop-hero{
      height: 420px;
    }
    .shop-hero-content{
      text-align: left;
    }
    .shop-hero-content h1{
      font-size: 2.2rem;
    }
    .shop-hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .shop-hero-actions .btn{
      width: 100%;
      text-align: center;
    }

    /* grid productos */
    .catalog-grid{
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 14px;
    }
    .catalog-card img{
      height: 160px;
    }

    /* modal */
    .modal-content{
      width: 94%;
      padding: 18px;
      border-radius: 14px;
    }
    .main-image img{
      height: 300px;
    }
    .modal-info h2{
      font-size: 22px;
    }
    .modal-price{
      font-size: 18px;
    }
  }

  /* Móvil chico */
  @media (max-width: 480px){
    .hero-content h1,
    .shop-hero-content h1{
      font-size: 1.9rem;
    }

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

    .catalog-card{
      padding: 10px;
    }
    .catalog-card h4{
      font-size: 14px;
    }
  } 
  /* ====== ESTILO DE DESCRIPCIÓN EN MODAL ====== */
  #modalDesc{
    white-space: pre-line;
  }
  #modalDesc h3{
    color: #1f8b3a;            /* verde */
    font-weight: 700;
    margin: 14px 0 8px;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
  }

  #modalDesc p{
    margin: 0 0 10px;
    line-height: 1.5;
    color: #222;
    font-size: 0.95rem;
  }

  #modalDesc ul{
    margin: 0 0 10px 18px;
    padding: 0;
  }

  #modalDesc li{
    margin: 6px 0;
    line-height: 1.35;
    color: #222;
    font-size: 0.95rem;
  }
  /* ====== QUE LA DESCRIPCIÓN LARGA NO ROMPA EL MODAL ====== */
  #modalDesc{
    max-height: 260px;      /* fija el área visible */
    overflow-y: auto;       /* scroll vertical */
    padding-right: 10px;    /* espacio para que no tape el scrollbar */
  }

  /* scrollbar más fino (opcional, Chrome/Edge) */
  #modalDesc::-webkit-scrollbar{
    width: 8px;
  }
  #modalDesc::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
  }
  #modalDesc::-webkit-scrollbar-track{
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
  }

  /* ================= FILTRO POR MARCAS ================= */

  .brand-filters{
    display: flex;
    justify-content: center;   /* centra la fila */
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;         /* todos en una fila */
    overflow-x: auto;          /* si no entran en móvil, hace scroll horizontal */
    padding: 12px 0;
    margin-bottom: 18px;
  }

  /* botones cuadrados */
  .brand-btn{
    width: 70px;
    height: 70px;
    flex: 0 0 70px;            /* evita que cambien tamaño */

    border-radius: 14px;       /* vértices redondeados */
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: transform .15s, box-shadow .2s, border-color .2s;
  }

  /* logos dentro */
  .brand-btn img{
    max-width: 42px;
    max-height: 32px;
    object-fit: contain;
  }

  /* hover */
  .brand-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);
    border-color: var(--green-light);
  }

  /* botón activo */
  .brand-btn.active{
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(242,183,5,.25);
  }
  /* ===== FILTRO MARCAS EN FILA ===== */

  .brand-filters{
    display: flex;
    flex-direction: row;      /* fuerza horizontal */
    align-items: center;
    justify-content: center;
    gap: 14px;

    flex-wrap: nowrap;        /* evita que bajen de fila */
    overflow-x: auto;         /* si no entran, scroll horizontal */

    width: 100%;
    margin: 15px 0 20px;
  }

  /* botones cuadrados */
  .brand-btn{
    width: 70px;
    height: 70px;
    flex: 0 0 70px;

    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
  }

  /* logos */
  .brand-btn img{
    max-width: 42px;
    max-height: 32px;
    object-fit: contain;
  }
  /* ===== BOTONES DE MARCA GRANDES RECTANGULARES ===== */

  .brand-filters{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18px;

    flex-wrap: nowrap;
    overflow-x: auto;

    margin: 20px 0 25px;
  }

  /* botón rectangular */
  .brand-btn{
    width: 200px;        /* ancho mayor */
    height: 110px;        /* alto menor que ancho = rectangular */
    flex: 0 0 150px;

    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
  }

  /* logos dentro */
  .brand-btn img{
    max-width: 90px;
    max-height: 45px;
    object-fit: contain;
  }

  /* hover */
  .brand-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0,0,0,.15);
  }

  /* activo */
  .brand-btn.active{
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(242,183,5,.25);
  }
  /* ================= POR QUE ELEGIRNOS ================= */

  .why-us{
    padding: 80px 0;
    background: #f7f7f7;
    text-align: center;
  }

  .why-us h2{
    font-size: 32px;
    margin-bottom: 10px;
  }

  .why-intro{
    max-width: 700px;
    margin: 0 auto 40px auto;
    color: #555;
  }

  .why-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 25px;
  }

  .why-card{
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform .2s;
  }

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

  .why-icon{
    font-size: 36px;
    margin-bottom: 15px;
  }

  .why-card h3{
    margin-bottom: 10px;
  }

  .why-card p{
    color: #555;
    font-size: 14px;
  }
  /* ================= POR QUE ELEGIRNOS ================= */

  .why-us{
    padding: 80px 0;
    background: #ffffff;
    text-align: center;
    position: relative;
  }

  /* franja verde inferior */
  .why-us::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #1f6f3d; /* verde corporativo */
  }

  .why-us h2{
    font-size: 32px;
    margin-bottom: 10px;
    color: #f2b705; /* amarillo */
  }

  .why-intro{
    max-width: 700px;
    margin: 0 auto 45px auto;
    color: #555;
  }

  /* grid */
  .why-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
    gap: 25px;
  }

  /* cards */
  .why-card{
    background: #1f6f3d;   /* verde */
    padding: 30px;
    border-radius: 14px;
    border: 2px solid #f2b705;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform .2s, box-shadow .2s;
  } 

  .why-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.15);
  }

  /* iconos */
  .why-icon{
    color: white;
  }

  /* títulos */
  .why-card h3{
    color: #f2b705;   /* amarillo */
  }

  .why-card p{
    color: white;
  }


  /* texto */
  .why-card p{
    color: #555;
    font-size: 14px;
  }
  .brand-btn{
    width: 160px;
    height: 90px;
    flex: 0 0 160px;

    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    font-size: 16px;
    color: #2c2c2c;

    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
  }

  .brand-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  .brand-btn.active{
    background: var(--yellow);
    color: #000;
  }
  @media (max-width: 768px){
    .hero-content{
      top: 47%;
    }
  }
  @media (max-width: 768px){
    .btn.primary{
      background: var(--yellow);
      color: var(--gray-dark);
    }

    .btn.primary:hover{
      background: #d89f04;
    }
  }
  @media (max-width: 768px){
    .hero p{
      max-width: 85%;
    }
  }
  @media (max-width: 768px){
    .header-content{
      gap: 10px;
      padding: 10px 0;
    }

    .logo-box{
      width: 48px;
      height: 48px;
      border-width: 2px;
    }

    .brand h1{
      font-size: 16px;
    }

    .brand span{
      font-size: 10px;
    }

    .nav{
      gap: 12px;
      flex-wrap: wrap;
    }

    .nav a{
      font-size: 13px;
      padding: 2px 0;
    }
  }
  @media (max-width: 768px){
    .hero{
      height: 78vh;
      min-height: 520px;
    }

    .hero-content{
      top: 46%;
      width: 88%;
    }

    .hero h1{
      font-size: 2rem;
      line-height: 1.15;
      margin-bottom: 14px;
    }

    .hero p{
      font-size: 14px;
      line-height: 1.5;
      max-width: 85%;
      margin: 0 auto 20px;
    }

    .badge{
      font-size: 11px;
      padding: 6px 12px;
      margin-bottom: 14px;
    }

    .hero-actions .btn{
      max-width: 260px;
      padding: 12px 18px;
      font-size: 14px;
    }
  }
  @media (max-width: 768px){
    .btn.primary{
      background: var(--yellow);
      color: var(--gray-dark);
    }

    .btn.primary:hover{
      background: #d9a504;
    }
  }
  @media (max-width: 768px){
    .section{
      padding: 55px 0;
    }
  }
  @media (max-width: 768px){

    .header-content{
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }

    .brand{
      text-align: center;
    }

    .brand h1{
      font-size: 18px;
      margin: 0;
    }

    .brand span{
      font-size: 11px;
    }

  }
  @media (max-width: 768px){

    .hero{
      height: 70vh;
      min-height: 480px;
    }

    .hero-content{
      width: 88%;
      top: 45%;
    }

    .hero h1{
      font-size: 1.9rem;
      line-height: 1.15;
    }

    .hero p{
      font-size: 14px;
      max-width: 85%;
      margin: 0 auto 18px;
    }

    .badge{
      font-size: 10px;
      padding: 5px 10px;
    }

    .hero-actions .btn{
      padding: 12px 16px;
      max-width: 240px;
      font-size: 14px;
    }

  }
  @media (max-width: 768px){

    footer{
      padding: 40px 20px;
      text-align: center;
    }

    footer h3{
      font-size: 16px;
      margin-bottom: 10px;
    }

    footer p{
      font-size: 13px;
      line-height: 1.5;
    }

    .footer-grid{
      gap: 20px;
    }

    .footer-bottom{
      margin-top: 20px;
      font-size: 12px;
    }

  }
  @media (max-width: 768px){

    .header-content{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .logo-box{
      width: 44px;
      height: 44px;
    }

    .brand{
      text-align: left;
    }

    .brand h1{
      font-size: 16px;
      margin: 0;
      line-height: 1.1;
    }

    .brand span{
      font-size: 10px;
      display: block;
    }

  }
  @media (max-width: 768px){

    .header .header-content{
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      flex-wrap: nowrap !important;
      gap: 10px !important;
      text-align: left !important;
    }

    .header .logo-box{
      width: 44px !important;
      height: 44px !important;
      flex: 0 0 44px !important;
      margin: 0 !important;
    }

    .header .brand{
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin: 0 !important;
    }

    .header .brand h1{
      font-size: 16px !important;
      line-height: 1.05 !important;
      margin: 0 !important;
    }

    .header .brand span{
      font-size: 10px !important;
      line-height: 1.1 !important;
      margin: 0 !important;
    }

  }
  @media (max-width: 768px){

    .header-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    /* logo + nombre en una fila */
    .logo-box,
    .brand{
      display: inline-flex;
      align-items: center;
    }

    .brand{
      text-align: left;
      margin-left: 6px;
    }

    /* contenedor logo + texto */
    .logo-brand{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* menú debajo */
    .nav{
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-top: 4px;
    }

    .nav a{
      font-size: 14px;
    }

  }
  @media (max-width: 768px){

    .header-content{
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      padding: 10px 0 !important;
    }

    .logo-brand{
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      width: auto !important;
    }

    .logo-box{
      width: 44px !important;
      height: 44px !important;
      flex: 0 0 44px !important;
      margin: 0 !important;
    }

    .brand{
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin: 0 !important;
    }

    .brand h1{
      font-size: 16px !important;
      line-height: 1.05 !important;
      margin: 0 !important;
    }

    .brand span{
      font-size: 10px !important;
      line-height: 1.1 !important;
      margin: 0 !important;
    }

    .nav{
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 14px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .nav a{
      font-size: 13px !important;
      padding: 2px 0 !important;
    }
  }
  @media (max-width: 768px){

    .header .header-content{
      display: grid !important;
      grid-template-areas:
        "logo"
        "nav";
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 10px 0 !important;
    }

    .header .logo-brand{
      grid-area: logo !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      width: auto !important;
      margin: 0 !important;
    }

    .header .logo-box{
      width: 42px !important;
      height: 42px !important;
      flex: 0 0 42px !important;
      margin: 0 !important;
    }

    .header .brand{
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: center !important;
      text-align: left !important;
      margin: 0 !important;
    }

    .header .brand h1{
      font-size: 16px !important;
      line-height: 1.05 !important;
      margin: 0 !important;
    }

    .header .brand span{
      font-size: 10px !important;
      line-height: 1.1 !important;
      margin: 0 !important;
    }

    .header .nav{
      grid-area: nav !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 14px !important;
      width: 100% !important;
      margin: 0 !important;
      margin-left: 0 !important; /* esto suele romperlo */
      padding: 0 !important;
    }

    .header .nav a{
      font-size: 13px !important;
      padding: 2px 0 !important;
    }
  }
  /* FOOTER COMPACTO */

  .footer-contact{
    margin-bottom: 8px;
  }

  .footer-social{
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
  }

  .footer-social a{
    font-size: 20px;
  }

  .footer-address{
    margin-bottom: 4px;
    line-height: 1.4;
  }

  /* versión móvil aún más compacto */

  @media (max-width:768px){

    footer{
      padding: 30px 20px;
    }

    .footer-contact{
      margin-bottom: 6px;
    }

    .footer-address{
      margin-bottom: 4px;
    }

    .footer-social{
      margin-top: 2px;
      gap: 10px;
    }

  }
  .logo-box{
    width: 46px;
    height: auto;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-box img{
    width: 46px;
    height: auto;
    display: block;
  }
  .logo-box{
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .logo-box img{
    width: 64px;
    height: auto;
    object-fit: contain;
  }
  @media (max-width:768px){

    .logo-box img{
      width: 52px;
    }

  }
  @media (max-width:768px){

    .logo-box img{
      width: 52px;
    }

  }
  @media (max-width: 768px){
    .logo-box img{
      width: 52px !important;
    }
  }
  .logo-box{
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: visible;
  }

  .logo-box img{
    height: auto;
    width: 70px;
    object-fit: contain;
  }
  @media (max-width:768px){

    .logo-box img{
      width: 90px;
      height: auto;
    }

  }
  /* tamaño normal en PC */
  .logo-box img{
    width: 70px;
    height: auto;
    object-fit: contain;
  }

  /* logo mucho más grande en celular */
  @media (max-width:768px){

    .logo-box img{
      width: 140px;   /* aprox el doble */
      height: auto;
    }

  }
  /* tamaño normal en PC */
  .logo-box img{
    width: 70px;
    height: auto;
    object-fit: contain;
  }

  /* logo mucho más grande en celular */
  @media (max-width:768px){

    .logo-box img{
      width: 140px;   /* aprox el doble */
      height: auto;
    }

  }/* ===== HEADER PC ===== */
  .logo-brand{
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .logo-box{
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .logo-box img{
    width: 125px;   /* más grande en PC */
    height: auto;
    display: block;
    object-fit: contain;
  }

  .brand{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    margin: 0;
  }

  .brand h1{
    font-size: 22px;
    line-height: 1.05;
    margin: 0 0 4px 0;
  }

  .brand span{
    font-size: 13px;
    line-height: 1.2;
    margin: 0;
  }
  @media (max-width: 768px){

    .logo-brand{
      gap: 10px;
    }

    .logo-box img{
      width: 140px;   /* el tamaño grande que querías en celu */
      height: auto;
    }

    .brand h1{
      font-size: 16px;
      margin: 0;
    }

    .brand span{
      font-size: 10px;
      margin: 0;
    }

  }
  @media (max-width: 768px){

    .hero{
      width: 100%;
      overflow: hidden;
    }

    .hero-video,
    .hero img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-content{
      width: 90%;
      max-width: 90%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .hero h1,
    .hero p{
      max-width: 100%;
      word-break: break-word;
    }

    .hero-actions{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .hero-actions .btn{
      width: 100%;
      max-width: 260px;
      margin-right: 0;
    }
  }
  .hero-video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
  }

  html, body {
    overflow-x: hidden;
  }

  @media (max-width: 768px) {
    .about,
    .about-hero,
    .split,
    .split.reverse,
    .cards,
    .service-grid,
    .team-grid,
    .mini-grid,
    .cta-box,
    .footer-container {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    .about *,
    .split *,
    .cards *,
    .service-grid *,
    .team-grid * {
      max-width: 100%;
      box-sizing: border-box;
    }

    .about img,
    .split-media img,
    .about-image img,
    .member-photo img {
      max-width: 100%;
      height: auto;
    }

    .split,
    .split.reverse {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }

    .about {
      padding: 50px 16px !important;
      gap: 24px !important;
    }

    .about .about-text,
    .about .about-image,
    .split-text,
    .split-media {
      min-width: 0 !important;
    }
  }
  /* ===== TIENDA MÓVIL: ARREGLO FILTRO MARCAS ===== */
  @media (max-width: 768px){

    html, body{
      overflow-x: hidden;
    }

    .brand-filters{
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 10px !important;

      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;

      padding: 8px 2px 12px !important;
      margin: 12px 0 18px !important;

      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .brand-btn{
      width: 130px !important;
      min-width: 130px !important;
      max-width: 130px !important;
      height: 62px !important;
      flex: 0 0 130px !important;

      border-radius: 14px !important;
      font-size: 14px !important;
      padding: 0 12px !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      white-space: nowrap !important;
    }

    .brand-btn span{
      display: block;
      width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 768px){
    .filters{
      flex-direction: column;
      align-items: stretch;
    }

    .filters input,
    .filters select{
      max-width: 100%;
    }
  }
  /* ===== TIENDA MÓVIL: GRID DE PRODUCTOS CORREGIDO ===== */
  @media (max-width: 768px){

    .catalog-grid{
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px !important;
      margin-top: 18px !important;
      width: 100% !important;
    }

    .catalog-card{
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 10px !important;
      border-radius: 12px !important;
    }

    .catalog-card img{
      width: 100% !important;
      height: 135px !important;
      object-fit: cover !important;
      border-radius: 10px !important;
      margin-bottom: 8px !important;
    }

    .catalog-card h4{
      font-size: 14px !important;
      line-height: 1.25 !important;
      min-height: 36px !important;
      margin-bottom: 4px !important;
    }

    .catalog-card .price{
      font-size: 14px !important;
      margin-bottom: 8px !important;
    }

    .catalog-card button{
      width: 100% !important;
      padding: 8px 10px !important;
      font-size: 13px !important;
      margin-top: 6px !important;
    }
  }
  @media (max-width: 480px){
    .catalog-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  .hero{
    position: relative;
    height: 70vh;
    min-height: 480px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-content{
    position: relative;
    z-index: 2;

    width: min(700px, 90%);
    margin: 0 auto;
  }

  .hero h1{
    text-align: center;
  }

  .hero p{
    margin-left: auto;
    margin-right: auto;
  }
  .hero{
    position: relative;
    height: 62vh;
    min-height: 430px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-content{
    position: relative;
    z-index: 2;

    width: min(680px, 88%);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: translateY(-18px);
  }

  .hero h1{
    font-size: 2.9rem;
    line-height: 1.08;
    margin: 0 0 14px;
    max-width: 640px;
    text-align: center;
  }

  .hero p{
    max-width: 620px;
    margin: 0 auto 24px;
    line-height: 1.55;
    text-align: center;
  }

  .badge{
    margin-bottom: 18px;
  }

  .hero-actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .hero-actions .btn{
    width: 100%;
    max-width: 320px;
    margin-right: 0;
  }
  @media (max-width: 768px){
    .hero{
      height: 68vh;
      min-height: 520px;
    }

    .hero-content{
      width: 90%;
      transform: translateY(-28px);
    }

    .hero h1{
      font-size: 2.15rem;
      line-height: 1.12;
      max-width: 100%;
      margin-bottom: 14px;
    }

    .hero p{
      font-size: 14px;
      line-height: 1.5;
      max-width: 100%;
      margin: 0 auto 22px;
    }

    .badge{
      font-size: 10px;
      padding: 6px 10px;
      margin-bottom: 14px;
    }

    .hero-actions .btn{
      max-width: 260px;
      padding: 12px 16px;
      font-size: 14px;
    }
  }
  /* ===== HERO HOME FIX DEFINITIVO ===== */
  .hero{
    position: relative !important;
    height: 68vh !important;
    min-height: 520px !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-video{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    z-index: 0 !important;
  }

  .hero-overlay{
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  .hero .hero-content{
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-10px) !important;
  }

  .hero .badge{
    margin: 0 0 14px 0 !important;
  }

  .hero h1{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;

    font-size: 2.15rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  .hero p{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .hero-actions{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .hero-actions .btn{
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 !important;
  }

  @media (min-width: 769px){
    .hero{
      height: 78vh !important;
      min-height: 620px !important;
    }

    .hero .hero-content{
      max-width: 760px !important;
      padding: 0 24px !important;
      transform: translateY(-20px) !important;
    }

    .hero h1{
      font-size: 3.1rem !important;
      line-height: 1.08 !important;
    }

    .hero p{
      font-size: 16px !important;
      line-height: 1.65 !important;
      max-width: 620px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .hero-actions{
      flex-direction: row !important; 
      justify-content: center !important;
    }

    .hero-actions .btn{
      max-width: 260px !important;
    }
  }
  .why-card h3 {
    color: #f6fa03;
  }

  .why-card p {
    color: #fff;
  }

  .why-icon {
    color: #fff;
  }
  .index-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  @media (max-width: 768px) {
    .index-categories {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    }
  .index-cat{
    width:100%;
    max-width:420px;
    height:120px;
  }}
    

  .filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .filters input {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 500px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    font-size: 16px;
  }

  .filters select {
    flex: 0 0 260px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    font-size: 16px;
    background: #fff;
  }
  @media (max-width: 768px) {
    .filters {
      flex-direction: column;
      align-items: stretch;
    }

    .filters input,
    .filters select {
      max-width: 100%;
      width: 100%;
      flex: 1 1 auto;
    }
  }
  /* ===== FIX LAYOUT TIENDA ===== */

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  body.shop-page {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .shop-page > * {
    width: 100%;
  }

  .section,
  .section.light,
  .shop-hero,
  footer.footer {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .filters-row {
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 20px;
  }

  .filters-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .filters-row select {
    flex: 0 0 260px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    font-size: 16px;
    background: #fff;
    box-sizing: border-box;
  }

  .catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 30px;
  }

  .footer {
    display: block !important;
    width: 100% !important;
    margin-top: 60px !important;
    clear: both !important;
  }

  .footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
  }

  .footer-col,
  .socials {
    flex: 1 1 220px;
    min-width: 220px;
  }

  .footer-bottom {
    width: 100%;
    text-align: center;
    padding: 18px 20px;
    box-sizing: border-box;
  }

  @media (max-width: 768px) {
    .filters-row {
      flex-direction: column;
      align-items: stretch;
    }

    .filters-row input,
    .filters-row select {
      width: 100%;
      flex: 1 1 auto;
    }

    .footer-container {
      flex-direction: column;
      gap: 24px;
    }
  }
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 240px));
    gap: 24px;
    justify-content: start;
  }
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 260px));
    gap: 24px;
    justify-content: start;
  }
  @media (max-width: 768px) {
    .catalog-grid {
      grid-template-columns: repeat(2, minmax(140px, 1fr));
      gap: 16px;
      justify-content: stretch;
    }
  }
  .hidden {
    display: none !important;
  }

  .repuestos-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 90px 20px;
    margin: 30px 0;
    border-radius: 20px;
    overflow: hidden;
  }

  .repuestos-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }

  .repuestos-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
  }

  .repuestos-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
  }

  .repuestos-content h2 {
    margin-bottom: 12px;
    font-size: 2rem;
    color: #fff;
  }

  .repuestos-content p {
    margin: 0 auto 24px;
    max-width: 700px;
    color: #fff;
  }

  .repuestos-form {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .repuestos-form input {
    width: min(100%, 520px);
    padding: 15px 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
  }

  .repuestos-form button {
    padding: 15px 22px;
    border: none;
    border-radius: 12px;
    background: #25D366;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .repuestos-form button:hover {
    opacity: 0.92;
  }

  @media (max-width: 768px) {
    .repuestos-content h2 {
      font-size: 1.5rem;
    }

    .repuestos-form {
      flex-direction: column;
      align-items: stretch;
    }

    .repuestos-form input,
    .repuestos-form button {
      width: 100%;
    }
  }
/* ===== MODAL PC CORREGIDO PARA HTML ACTUAL ===== */
@media (min-width: 769px){

  .modal-content{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 350px !important;
    grid-template-rows: auto auto !important;
    gap: 18px 28px !important;
    align-items: start !important;

    width: min(1100px, 95%) !important;
    max-width: min(1100px, 95%) !important;
    padding: 28px !important;
  }

  #modalMedia{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #modalMedia img,
  #modalMedia video{
    width: 100% !important;
    height: 430px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 12px !important;
    background: #f4f6f4 !important;
  }

  #modalThumbs{
    grid-column: 1 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;

    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
    max-height: none !important;
  }

  #modalThumbs img{
    width: 86px !important;
    min-width: 86px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    opacity: .75 !important;
  }

  #modalThumbs img.active,
  #modalThumbs img:hover{
    opacity: 1 !important;
  }

  .modal-info{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}
.status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  color: white;
  z-index: 2;
}

.status-badge.disponible {
  background: #16a34a; /* verde */
}

.status-badge.vendido {
  background: #dc2626; /* rojo */
}
.related-section {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ddd;

  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.related-section h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #2f6b3f;
}

.related-products {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

.related-products::-webkit-scrollbar {
  height: 8px;
}

.related-products::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
}

.related-card {
  position: relative;
  min-width: 180px;
  max-width: 180px;
  flex: 0 0 180px;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  cursor: pointer;
}

.related-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 8px;
}

.related-card h4 {
  font-size: 13px;
  margin: 8px 0 6px;
  color: #2f6b3f;
}

.related-card .price {
  margin-bottom: 8px;
  font-weight: 700;
  color: #3483fa;
}

.related-card button {
  width: 100%;
  cursor: pointer;
}
.related-card {
  min-width: 160px;
  max-width: 160px;
  flex: 0 0 160px;
}
.related-card button {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #2f6b3f;

  background: transparent;
  color: #2f6b3f;
  font-weight: 600;
  font-size: 12px;

  cursor: pointer;
  transition: all 0.2s ease;
}

.related-card button:hover {
  background: #2f6b3f;
  color: #fff;
}
/* ===== PRODUCTOS RELACIONADOS: MEJORA VISUAL ===== */

.related-section {
  grid-column: 1 / -1;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.related-section h3 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 800;
  color: #2f6b3f;
}

.related-products {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 12px;
  scroll-behavior: smooth;
}

.related-products::-webkit-scrollbar {
  height: 8px;
}

.related-products::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

.related-products::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
}

.related-card {
  position: relative;
  min-width: 170px;
  max-width: 170px;
  flex: 0 0 170px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

.related-card img {
  width: 100%;
  height: 105px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
}

.related-card h4 {
  font-size: 12.5px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #2f6b3f;
  font-weight: 800;
  min-height: 50px;
}

.related-card .price {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #3483fa;
}

.related-card button {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #2f6b3f;
  background: #fff;
  color: #2f6b3f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}

.related-card button:hover {
  background: #2f6b3f;
  color: #fff;
}

.related-card .status-badge {
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 7px;
  letter-spacing: .2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
}

.modal-content {
  background: #fff;
  width: min(1100px, 95%);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-areas:
    "media info"
    "thumbs info"
    "related related";
  gap: 18px 28px;
  align-items: start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

#modalMedia {
  grid-area: media;
}

#modalThumbs {
  grid-area: thumbs;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.modal-info {
  grid-area: info;
  min-width: 0;
}

.related-section {
  grid-area: related;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .modal-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "thumbs"
      "info"
      "related";
    padding: 18px;
  }

  #modalThumbs {
    flex-wrap: nowrap;
  }
}
/* ===== FIX RESPONSIVE REAL DEL MODAL EN CELULAR ===== */
html, body {
  overflow-x: hidden;
}

body.shop-page {
  overflow-x: hidden;
}

#productModal.modal {
  padding: 10px !important;
  align-items: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#productModal .modal-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#productModal .main-image,
#productModal #modalMedia,
#productModal .modal-info,
#productModal .related-section,
#productModal .related-products,
#productModal .thumbnails {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#productModal img,
#productModal video {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  #productModal.modal {
    padding: 8px !important;
  }

  #productModal .modal-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "thumbs"
      "info"
      "related" !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 14px !important;
    max-height: none !important;
  }

  #productModal #modalMedia {
    grid-area: media !important;
    width: 100% !important;
  }

  #productModal #modalMedia img,
  #productModal #modalMedia video {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    object-fit: contain !important;
    display: block !important;
  }

  #productModal #modalThumbs {
    grid-area: thumbs !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
  }

  #productModal #modalThumbs img {
    width: 72px !important;
    min-width: 72px !important;
    height: 60px !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
  }

  #productModal .modal-info {
    grid-area: info !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  #productModal .modal-info h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  #productModal .modal-price {
    font-size: 18px !important;
  }

  #productModal #modalDesc {
    max-height: 220px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    word-break: break-word !important;
  }

  #productModal .related-section {
    grid-area: related !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding-top: 12px !important;
  }

  #productModal .related-products {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }

  #productModal .related-card {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    flex: 0 0 145px !important;
  }

  #productModal .related-card img {
    width: 100% !important;
    height: 90px !important;
    object-fit: cover !important;
  }

  #productModal .related-card h4 {
    font-size: 12px !important;
    min-height: 38px !important;
  }

  #productModal .related-card button {
    height: 32px !important;
    font-size: 11px !important;
  }
}
/* ===== RESTAURAR MODAL EN PC SIN TOCAR CELULAR ===== */
@media (min-width: 769px) {
  #productModal.modal {
    padding: 18px !important;
    align-items: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #productModal .modal-content {
    width: min(1100px, 95%) !important;
    max-width: min(1100px, 95%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 28px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 350px !important;
    grid-template-areas:
      "media info"
      "thumbs info"
      "related related" !important;
    gap: 18px 28px !important;
    align-items: start !important;

    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #productModal #modalMedia {
    grid-area: media !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #productModal #modalMedia img,
  #productModal #modalMedia video {
    width: 100% !important;
    height: 430px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 12px !important;
    background: #f4f6f4 !important;
  }

  #productModal #modalThumbs {
    grid-area: thumbs !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
    max-height: none !important;
  }

  #productModal #modalThumbs img {
    width: 86px !important;
    min-width: 86px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    opacity: .75 !important;
    flex: 0 0 auto !important;
  }

  #productModal #modalThumbs img.active,
  #productModal #modalThumbs img:hover {
    opacity: 1 !important;
  }

  #productModal .modal-info {
    grid-area: info !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #productModal .related-section {
    grid-area: related !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid #e5e5e5 !important;
  }

  #productModal .related-products {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 12px !important;
  }

  #productModal .related-card {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    flex: 0 0 170px !important;
  }
}
.related-section {
  grid-area: related !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;

  margin: 10px 0 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid #e5e5e5 !important;
}

.related-section h3 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 800;
  color: #2f6b3f;
}

.related-products {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 4px 12px !important;
  box-sizing: border-box !important;
}
@media (min-width: 769px) {
  #productModal .related-section {
    grid-area: related !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin: 10px 0 0 0 !important;
    padding-top: 14px !important;
  }

  #productModal .related-products {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ===== UNIFICAR ALTURA DE TODAS LAS CARDS RELACIONADAS ===== */
.related-card {
  position: relative;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  flex: 0 0 170px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  min-height: 320px !important;
  box-sizing: border-box !important;
}

.related-card img {
  width: 100% !important;
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.related-card h4 {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;
}

.related-card .price {
  margin-bottom: 10px !important;
}

.related-card button {
  margin-top: auto !important;
  width: 100% !important;
}
/* ===== BADGE DE ESTADO ===== */
.catalog-card,
.related-card {
  position: relative;
}

.status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.status-badge.vendido {
  background: #c62828;
}

.status-badge.disponible {
  background: #2e7d32;
}

/* ===== SECCIÓN RELACIONADOS ===== */
.related-section {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.related-section h3 {
  margin-bottom: 16px;
  font-size: 20px;
  color: #2f6b3f;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.related-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  padding-bottom: 12px;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

.related-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.related-card h4 {
  font-size: 14px;
  line-height: 1.35;
  color: #2f6b3f;
  margin: 10px 12px 6px;
  min-height: 38px;
}

.related-card .price {
  margin: 0 12px 10px;
  color: #3483fa;
  font-weight: 700;
}

.related-card button {
  margin: 0 12px;
  width: calc(100% - 24px);
  background: #2f6b3f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}

/* ===== AJUSTE DEL MODAL EN PC ===== */
@media (min-width: 769px) {
  .modal-content {
    display: grid;
    grid-template-columns: 100px 1fr 320px;
    gap: 24px;
    align-items: start;
  }

  .main-image {
    grid-column: 2;
  }

  .thumbnails {
    grid-column: 1;
  }

  .modal-info {
    grid-column: 3;
  }

  .related-section {
    grid-column: 1 / -1;
  }
}

/* ===== RELACIONADOS EN TABLET ===== */
@media (max-width: 1024px) {
  .related-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== RELACIONADOS EN MÓVIL ===== */
@media (max-width: 768px) {
  .related-products {
    grid-template-columns: 1fr;
  }

  .status-badge {
    font-size: 10px;
    padding: 5px 8px;
  }
}
.catalog-card,
.related-card {
  position: relative;
}

.status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.status-badge.vendido {
  background: #c62828;
}

.status-badge.disponible {
  background: #2e7d32;
}

.related-section {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.related-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  cursor: pointer;
}

.related-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.related-card h4 {
  font-size: 14px;
  margin: 10px 12px 6px;
  color: #2f6b3f;
}

.related-card .price {
  margin: 0 12px 10px;
  font-weight: 700;
  color: #3483fa;
}

.related-card button {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  background: #2f6b3f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
}

@media (max-width: 1024px) {
  .related-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .related-products {
    grid-template-columns: 1fr;
  }
}
/* ================= PROXIMOS INGRESOS ================= */
.incoming-section {
  padding: 70px 0 40px;
  background: #f7f8f6;
}

.incoming-header {
  text-align: center;
  margin-bottom: 28px;
}

.incoming-badge {
  display: inline-block;
  background: #2f6b3f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.incoming-header h2 {
  margin: 0 0 10px;
  font-size: 34px;
  color: #1f3d2b;
}

.incoming-header p {
  margin: 0 auto;
  max-width: 760px;
  color: #5d665f;
}

.incoming-carousel {
  overflow: hidden;
  position: relative;
}

.incoming-track {
  display: flex;
  gap: 22px;
  will-change: transform;
}

.incoming-card {
  min-width: calc(25% - 17px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.05);
  flex-shrink: 0;
}

.incoming-image {
  position: relative;
  height: 220px;
}

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

.incoming-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ffcc00;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
}

.incoming-body {
  padding: 18px;
}

.incoming-body h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: #2f6b3f;
}

.incoming-body p {
  margin: 0 0 16px;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.incoming-link {
  display: inline-block;
  text-decoration: none;
  background: #2f6b3f;
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  transition: .25s ease;
}

.incoming-link:hover {
  background: #244f2f;
}

@media (max-width: 1024px) {
  .incoming-card {
    min-width: calc(50% - 11px);
  }
}

@media (max-width: 640px) {
  .incoming-section {
    padding: 55px 0 25px;
  }

  .incoming-header h2 {
    font-size: 26px;
  }

  .incoming-card {
    min-width: 85%;
  }

  .incoming-image {
    height: 200px;
  }
}
.incoming-track {
  display: flex;
  gap: 20px;
}

.incoming-card {
  flex: 0 0 300px; /* tamaño fijo controlado */
}
@media (max-width: 1024px) {
  .incoming-card {
    flex: 0 0 240px;
  }
}

@media (max-width: 768px) {
  .incoming-card {
    flex: 0 0 80%;
  }
}
.seo-about {
  background: #ffffff;
  padding-top: 40px;
}

.seo-about h2 {
  font-size: 28px;
  color: #244b2f;
  margin-bottom: 15px;
}

.seo-about h3 {
  font-size: 22px;
  margin-top: 20px;
  color: #2f6b3f;
}

.seo-about p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 12px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.split-text {
  max-width: 600px;
}

.split-media img {
  width: 100%;
  border-radius: 12px;
}
.seo-about .container {
  max-width: 1100px; /* antes seguramente 900 o menos */
}
.split-text {
  max-width: 100%;
}
.split-text {
  max-width: 800px;
}
.seo-bottom {
  background: #f5f5f5;
  padding: 60px 20px;
}

.seo-bottom .container {
  max-width: 1100px;
  margin: 0 auto;
}

.seo-bottom h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.seo-bottom p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #444;
}

.seo-cta {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  background: #0a2540;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
}

.btn-secondary {
  background: #25D366;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
}
.repuestos-cta {
  padding: 30px 20px;
  background: #f5f5f5;
}

.repuestos-box {
  max-width: 1100px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.repuestos-text h3 {
  margin: 5px 0;
  font-size: 20px;
  color: #244b2f;
}

.repuestos-text p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.rep-badge {
  font-size: 12px;
  font-weight: 700;
  color: #2f6b3f;
}

.repuestos-action .btn {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .repuestos-box {
    flex-direction: column;
    text-align: center;
  }
}
.repuestos-cta {
  padding: 40px 20px;
  background: linear-gradient(135deg, #f5f5f5, #e9f1eb);
}

.repuestos-box {
  max-width: 1150px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.repuestos-text h3 {
  font-size: 22px;
  margin: 8px 0;
  color: #1e3d2f;
}

.repuestos-text p {
  font-size: 15px;
  color: #555;
  margin-bottom: 12px;
}

.rep-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #2f6b3f;
}

.rep-features {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #2f6b3f;
}

.repuestos-action {
  display: flex;
  align-items: center;
}

.rep-btn {
  background: #2f6b3f;
  color: white;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.rep-btn:hover {
  background: #244b2f;
  transform: translateY(-2px);
}.repuestos-bar {
  background: #f4c542; /* amarillo suave */
  padding: 12px 20px;
}

.repuestos-bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}

.rep-icon {
  font-size: 18px;
}

.repuestos-bar p {
  margin: 0;
  font-size: 14px;
  color: #222;
}

.rep-link {
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: underline;
}@media (max-width: 768px) {
  .repuestos-bar-content {
    flex-direction: column;
    gap: 5px;
  }
}