/* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    :root {
      --orange-500: #f97316;
      --orange-600: #ea580c;
      --orange-400: #fb923c;
      --orange-100: rgba(249,115,22,0.1);
      --orange-200: rgba(249,115,22,0.2);
      --white: #ffffff;
      --gray-50: #f5f5f5;
      --gray-400: #a1a1aa;
      --gray-500: #71717a;
      --bg-dark: #0a0a0a;
      --bg-card: #141414;
      --bg-elevated: #0f0f0f;
      --bg-muted: #1c1c1c;
      --border-color: #262626;
      --radius: 0.625rem;
      --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
      --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    }

    body {
      font-family: var(--font-sans);
      color: var(--gray-50);
      background-color: var(--bg-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      background-image: url(images/hero-supplements.jpg);
      background-position: center;
      background-attachment: fixed;
      background-size: cover;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; font-family: inherit; }
    input, textarea { font-family: inherit; }

    /* ===== UTILITIES ===== */
    .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
    @media (min-width: 640px) { .container { padding: 0 1.5rem; } }
    @media (min-width: 1024px) { .container { padding: 0 2rem; } }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      font-weight: 500; font-size: 0.875rem; line-height: 1.25rem;
      border-radius: var(--radius); border: 1px solid transparent;
      padding: 0.625rem 1.25rem; transition: all 0.15s ease;
      white-space: nowrap;
    }
    .btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }
    .btn-primary { background: var(--orange-500); color: var(--white); border-color: var(--orange-500); }
    .btn-primary:hover { background: var(--orange-600); border-color: var(--orange-600); }
    .btn-outline { background: transparent; color: var(--gray-50); border-color: var(--border-color); }
    .btn-outline:hover { background: var(--bg-muted); }
    .btn-secondary { background: var(--bg-dark); color: var(--gray-50); border-color: var(--border-color); }
    .btn-secondary:hover { background: var(--bg-muted); }
    .btn-ghost { background: transparent; color: var(--orange-500); border-color: transparent; padding-left: 0; padding-right: 0; }
    .btn-ghost:hover { color: var(--orange-400); }
    .btn-cta-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3); }
    .btn-cta-outline:hover { background: rgba(255,255,255,0.1); }
    .btn-cta-dark { background: var(--bg-dark); color: var(--gray-50); border-color: var(--bg-dark); }
    .btn-cta-dark:hover { background: var(--bg-muted); }
    .btn-full { width: 100%; }

    /* ===== ICON ===== */
    .icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
    .icon-sm { width: 1rem; height: 1rem; }
    .icon-lg { width: 1.5rem; height: 1.5rem; }
    .icon-xl { width: 2rem; height: 2rem; }

    /* ===== HEADER ===== */
    .header {
      position: sticky; top: 0; z-index: 50;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-dark);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 4rem;
    }
    .logo { display: flex; align-items: center; gap: 0.5rem; }
    .logo-icon {
      display: flex; align-items: center; justify-content: center;
      width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
      background: var(--orange-500); color: var(--white);
    }
    .logo-text { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--gray-50); }
    .nav-desktop { display: none; align-items: center; gap: 2rem; }
    .nav-desktop a { font-size: 0.875rem; font-weight: 500; color: var(--gray-400); transition: color 0.15s; }
    .nav-desktop a:hover { color: var(--orange-500); }
    .header-cta-desktop { display: none; }
    .mobile-toggle {
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; padding: 0.25rem; color: var(--gray-50);
    }
    .mobile-nav {
      display: none; border-top: 1px solid var(--border-color);
      background: var(--bg-dark); padding: 1rem;
    }
    .mobile-nav.open { display: block; }
    .mobile-nav a {
      display: block; padding: 0.5rem 0; font-size: 0.875rem;
      font-weight: 500; color: var(--gray-50); transition: color 0.15s;
    }
    .mobile-nav a:hover { color: var(--orange-500); }
    .mobile-nav .btn { margin-top: 0.75rem; max-width: 200px; text-align: center;}
    @media (min-width: 768px) {
      .nav-desktop { display: flex; }
      .header-cta-desktop { display: flex; }
      .mobile-toggle { display: none; }
    }

    .content-ig {
        display: flex;
        align-items: center;
    }
    .content-ig a {
        margin-right: 20px;
        padding-top: 10px;
    }

    /* ===== HERO ===== */
    .hero {
      position: relative; overflow: hidden; background: #0a0a0acc;
      padding: 5rem 0;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(ellipse at top right, rgba(249,115,22,0.08), transparent 60%);
    }
    .hero-inner { position: relative; max-width: 52rem; margin: 0 auto; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      border: 1px solid var(--orange-200); background: var(--orange-100);
      border-radius: 9999px; padding: 0.375rem 1rem;
      font-size: 0.875rem; font-weight: 500; color: var(--orange-500);
      margin-bottom: 1.5rem;
    }
    .hero h1 {
      font-family: var(--font-heading); font-size: 2.25rem;
      letter-spacing: -0.025em; color: var(--gray-50); line-height: 1.2;
      text-wrap: balance;
    }
    .hero h1 .highlight { color: var(--orange-500); }
    .hero p.subtitle {
      margin-top: 1.5rem; max-width: 42rem; margin-left: 0; 
      font-size: 1.125rem; color: var(--gray-400); line-height: 1.7;
      text-wrap: pretty;
    }
    .hero-buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; }
    .hero-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
      max-width: 42rem; margin: 4rem 0 0;
      padding-top: 2rem; border-top: 1px solid var(--gray-500);
    }
    .hero-stat { display: flex; flex-direction: column; gap: 0.5rem;}
    .hero-stat .stat-icon { color: var(--orange-500); margin-bottom: 0.25rem; }
    .hero-stat .stat-value { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 700; color: var(--gray-50); }
    .hero-stat .stat-label { font-size: 0.75rem; color: var(--gray-400); }
    @media (min-width: 640px) {
      .hero { padding: 7rem 0; }
      .hero h1 { font-size: 3rem; }
      .hero-buttons { flex-direction: row; }
      .hero-stat .stat-value { font-size: 2.25rem; }
      .hero-stat .stat-label { font-size: 0.875rem; }
    }
    @media (min-width: 1024px) { .hero { padding: 9rem 0; } .hero h1 { font-size: 3.3rem; } }

    /* ===== BRANDS ===== */
    .brands {
      border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
      background: var(--bg-elevated); padding: 2.5rem 0;
    }
    .brands-label {
      text-align: center; font-size: 0.75rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--orange-500); margin-bottom: 2rem;
    }
    .brands-list {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 1rem 2.5rem;
    }
    .brands-list span {
      font-family: var(--font-heading); font-size: 1rem; font-weight: 600;
      color: rgba(161,161,170,0.5); transition: color 0.15s;
    }
    .brands-list span:hover { color: var(--orange-500); }
    @media (min-width: 640px) { .brands-list span { font-size: 1.125rem; } }

    /* ===== SECTION HEADER ===== */
    .section-header { max-width: 42rem; margin: 0 auto; text-align: center; }
    .section-header .label {
      font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--orange-500);
    }
    .section-header h2 {
      margin-top: 0.5rem; font-family: var(--font-heading);
      font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em;
      color: var(--gray-50); text-wrap: balance;
    }
    .section-header p {
      margin-top: 1rem; font-size: 1.125rem; color: var(--gray-400);
      line-height: 1.7; text-wrap: pretty;
    }
    @media (min-width: 640px) { .section-header h2 { font-size: 2.25rem; } }


    /* ===== MARCAS NAC E IMPORT ===== */
    
    .marcas {background: var(--bg-dark); padding: 30px 0}
    .content-marcas {display: flex;justify-content: center;}
    .marcas p {color:var(--gray-400); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;}
    .importadas, .nacionales { border-left: 2px solid var(--gray-400); padding-left: 15px; padding-right: 20px;}
    .logos {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
    .logos img {margin: 10px}

    /* ===== CATALOG ===== 
    .catalog { background: var(--bg-dark); padding: 5rem 0; }*/
    .catalog { background-image: url(images/deposito.jpg); background-size: cover; background-position: center; padding: 5rem 0; }
    @media (min-width: 640px) { .catalog { padding: 7rem 0; } }
    .catalog-grid {
      display: grid; gap: 1.5rem; max-width: 64rem; margin: 3.5rem auto 0;
    }
    @media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
    .catalog-card {
      border: 1px solid var(--border-color); border-radius: var(--radius);
      background: var(--bg-card); transition: all 0.2s;
      overflow: hidden;
    }
    .catalog-card:hover { border-color: rgba(249,115,22,0.4); box-shadow: 0 10px 25px -5px rgba(249,115,22,0.05); }
    .catalog-card-header { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem 0.5rem; }
    .catalog-icon-box {
      display: flex; align-items: center; justify-content: center;
      width: 3rem; height: 3rem; border-radius: 0.75rem; flex-shrink: 0;
      background: var(--orange-100); color: var(--orange-500); transition: all 0.2s;
    }
    .catalog-card:hover .catalog-icon-box { background: var(--orange-500); color: var(--white); }
    .catalog-badge {
      display: inline-block; font-size: 0.75rem; font-weight: 500;
      background: var(--bg-muted); color: var(--gray-400);
      padding: 0.125rem 0.5rem; border-radius: 9999px;
    }
    .catalog-card h3 {
      font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600;
      color: var(--gray-50); margin-top: 0.25rem;
    }
    .catalog-card-body { padding: 0 1.5rem 1.5rem; }
    .catalog-card-body p { color: var(--gray-400); margin-bottom: 1rem; }

    /* ===== ADVANTAGES ===== */
    .advantages { background: var(--bg-elevated); padding: 5rem 0; }

    @media (min-width: 640px) { .advantages { padding: 7rem 0; } }
    .advantages-grid {
      display: grid; gap: 2rem; max-width: 64rem; margin: 3.5rem auto 0;
    }
    @media (min-width: 640px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .advantages-grid { grid-template-columns: repeat(3, 1fr); } }
    .advantage-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .advantage-icon {
      display: flex; align-items: center; justify-content: center;
      width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
      background: var(--orange-100); color: var(--orange-500);
    }
    .advantage-item h3 {
      font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--gray-50);
    }
    .advantage-item p { color: var(--gray-400); line-height: 1.7; }

    /* ===== TESTIMONIALS ===== */
    .testimonials { background: var(--bg-dark); padding: 5rem 0; }
    @media (min-width: 640px) { .testimonials { padding: 7rem 0; } }
    .testimonials-grid {
      display: grid; gap: 1.5rem; max-width: 64rem; margin: 3.5rem auto 0;
    }
    @media (min-width: 640px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
    .testimonial-card {
      border: 1px solid var(--border-color); border-radius: var(--radius);
      background: var(--bg-card);
      padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
    }
    .testimonial-card .quote-icon { color: rgba(249,115,22,0.3); }
    .testimonial-card blockquote { flex: 1; color: var(--gray-50); line-height: 1.7; text-wrap: pretty; }
    .testimonial-footer { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 0.5rem; }
    .testimonial-footer .name { font-weight: 600; color: var(--gray-50); }
    .testimonial-footer .role { font-size: 0.875rem; color: var(--gray-400); }

    /* ===== CTA BANNER ===== */
    .cta-banner { background: var(--orange-500); padding: 4rem 0; }
    @media (min-width: 640px) { .cta-banner { padding: 5rem 0; } }
    .cta-inner { max-width: 56rem; margin: 0 auto; text-align: center; }
    .cta-inner h2 {
      font-family: var(--font-heading); font-size: 1.875rem; font-weight: 700;
      color: var(--white); letter-spacing: -0.025em; text-wrap: balance;
    }
    .cta-inner p { margin-top: 1rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 1.125rem; color: rgba(255,255,255,0.8); line-height: 1.7; text-wrap: pretty; }
    .cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; }
    @media (min-width: 640px) { .cta-inner h2 { font-size: 2.25rem; } .cta-buttons { flex-direction: row; justify-content: center; } }

    /* ===== CONTACT ===== */
    .contact { background: var(--bg-elevated); padding: 5rem 0; }
    @media (min-width: 640px) { .contact { padding: 7rem 0; } }
    .contact-grid {
      display: grid; gap: 3rem; max-width: 64rem; margin: 3.5rem auto 0;
    }
    @media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
    .contact-info { display: flex; flex-direction: column; gap: 2rem; }
    .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
    .contact-info-icon {
      display: flex; align-items: center; justify-content: center;
      width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; flex-shrink: 0;
      background: var(--orange-100); color: var(--orange-500);
    }
    .contact-info-item h3 { font-weight: 600; color: var(--gray-50); }
    .contact-info-item p { margin-top: 0.25rem; color: var(--gray-400); }
    .contact-info-item .small { font-size: 0.875rem; }
    .contact-form {
      display: flex; flex-direction: column; gap: 1.25rem;
      border: 1px solid var(--border-color); border-radius: 0.75rem;
      background: var(--bg-card); padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    @media (min-width: 640px) { .contact-form { padding: 2rem; } }
    .form-group { display: flex; flex-direction: column; gap: 0.375rem; }
    .form-group label { font-size: 0.875rem; font-weight: 500; color: var(--gray-50); }
    .form-group input, .form-group textarea {
      width: 100%; padding: 0.625rem 0.75rem;
      border: 1px solid var(--border-color); border-radius: var(--radius);
      font-size: 0.875rem; color: var(--gray-50); background: var(--bg-muted);
      transition: border-color 0.15s;
    }
    .form-group input:focus, .form-group textarea:focus {
      outline: none; border-color: var(--orange-500);
      box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-500); }
    .form-group textarea { resize: vertical; min-height: 6rem; }

    /* ===== FOOTER ===== */
    .footer { border-top: 1px solid var(--border-color); background: var(--bg-dark); padding: 2.5rem 0; }
    .footer-inner {
      display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    }
    .footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; }
    .footer-nav a { font-size: 0.875rem; color: var(--gray-400); transition: color 0.15s; }
    .footer-nav a:hover { color: var(--orange-500); }
    .footer-copy { font-size: 0.875rem; color: var(--gray-400); }
    @media (min-width: 640px) {
      .footer-inner { flex-direction: row; justify-content: space-between; }
    }

    /* edit CSS */
    .logo img {max-width: 200px}