/* ============================================
   OLÉ GOURMET — DESIGN SYSTEM
   ============================================ */
:root {
  --terracotta: #C45A3C;
  --terracotta-light: #D97A60;
  --terracotta-dark: #A3432B;
  --navy: #1B2A4A;
  --navy-light: #2A3D66;
  --navy-dark: #111D36;
  --gold: #D4A853;
  --gold-light: #E8C97A;
  --cream: #FBF7F0;
  --cream-dark: #F0E8D9;
  --warm-white: #FDFCFA;
  --warm-gray: #8A8278;
  --text: #2B2520;
  --text-muted: #6B635A;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-py: clamp(4rem, 8vw, 8rem);
  --container-px: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 3px rgba(27,42,74,0.06);
  --shadow-md: 0 4px 16px rgba(27,42,74,0.08);
  --shadow-xl: 0 16px 48px rgba(27,42,74,0.16);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--text); background:var(--warm-white); line-height:1.7; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--container-px); }

/* Section shared */
.section-tag { display:inline-block; font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--terracotta); margin-bottom:0.75rem; position:relative; padding-left:2.25rem; }
.section-tag::before { content:''; position:absolute; left:0; top:50%; width:1.5rem; height:1.5px; background:var(--terracotta); }
.section-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:600; line-height:1.15; color:var(--navy); margin-bottom:1rem; }
.section-desc { font-size:1.1rem; color:var(--text-muted); max-width:600px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.875rem 2rem; font-family:var(--font-body); font-size:0.95rem; font-weight:600; letter-spacing:0.02em; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:all 0.4s var(--ease-out); overflow:hidden; }
.btn--primary { background:var(--terracotta); color:#fff; }
.btn--primary:hover { background:var(--terracotta-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(196,90,60,0.35); }
.btn--outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.5); }
.btn--outline:hover { background:rgba(255,255,255,0.1); border-color:#fff; transform:translateY(-2px); }
.btn--full { width:100%; }

/* Reveal animations */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.product-grid .reveal:nth-child(2) { transition-delay:0.1s; }
.product-grid .reveal:nth-child(3) { transition-delay:0.2s; }
.product-grid .reveal:nth-child(4) { transition-delay:0.3s; }
.product-grid .reveal:nth-child(5) { transition-delay:0.4s; }
.product-grid .reveal:nth-child(6) { transition-delay:0.5s; }
.why-grid .reveal:nth-child(2) { transition-delay:0.08s; }
.why-grid .reveal:nth-child(3) { transition-delay:0.16s; }
.why-grid .reveal:nth-child(4) { transition-delay:0.24s; }
.why-grid .reveal:nth-child(5) { transition-delay:0.32s; }
.why-grid .reveal:nth-child(6) { transition-delay:0.4s; }

/* NAV */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1.25rem 0; transition:all 0.4s var(--ease-out); }
.navbar.scrolled { background:rgba(27,42,74,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:0.75rem 0; box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.nav-container { max-width:1200px; margin:0 auto; padding:0 var(--container-px); display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:0.75rem; }
.nav-logo-img { height:28px; width:auto; filter:brightness(0) invert(1); opacity:0.9; }
.nav-brand { font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:#fff; }
.nav-menu { display:flex; align-items:center; gap:2.5rem; list-style:none; }
.nav-link { font-size:0.875rem; font-weight:500; color:rgba(255,255,255,0.8); letter-spacing:0.02em; transition:color 0.3s; position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--gold); transition:width 0.3s var(--ease-out); }
.nav-link:hover { color:#fff; }
.nav-link:hover::after { width:100%; }
.nav-link--cta { color:#fff; background:var(--terracotta); padding:0.5rem 1.25rem; border-radius:var(--radius-sm); }
.nav-link--cta::after { display:none; }
.nav-link--cta:hover { background:var(--terracotta-dark); transform:translateY(-1px); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; z-index:1001; }
.nav-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:all 0.3s; }

/* HERO */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.05); animation:heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.05)} to{transform:scale(1.12)} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(17,29,54,0.92) 0%, rgba(27,42,74,0.78) 40%, rgba(27,42,74,0.6) 100%), linear-gradient(to top, rgba(17,29,54,0.8) 0%, transparent 50%); }
.hero-content { position:relative; z-index:2; text-align:center; padding:2rem var(--container-px); max-width:860px; }
.hero-badge { display:inline-block; font-size:0.75rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-light); padding:0.5rem 1.25rem; border:1px solid rgba(212,168,83,0.3); border-radius:50px; margin-bottom:2rem; animation:fadeInUp 0.8s 0.2s both var(--ease-out); }
.hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4.5rem); font-weight:700; line-height:1.1; color:#fff; margin-bottom:1.5rem; animation:fadeInUp 0.8s 0.4s both var(--ease-out); }
.hero-title-accent { color:var(--gold-light); font-weight:500; font-style:italic; }
.hero-subtitle { font-size:clamp(1rem,2vw,1.25rem); color:rgba(255,255,255,0.75); line-height:1.7; margin-bottom:2.5rem; animation:fadeInUp 0.8s 0.6s both var(--ease-out); }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeInUp 0.8s 0.8s both var(--ease-out); }
@keyframes fadeInUp { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0.75rem; color:rgba(255,255,255,0.4); font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; animation:fadeInUp 1s 1.2s both var(--ease-out); }
.hero-scroll-line { width:1px; height:40px; background:linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation:scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* ABOUT */
.about { padding:var(--section-py) 0; background:var(--warm-white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.about-image { position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.about-image img { width:100%; height:500px; object-fit:cover; border-radius:var(--radius-lg); transition:transform 0.6s var(--ease-out); }
.about-image:hover img { transform:scale(1.03); }
.about-image-accent { position:absolute; bottom:-1rem; right:-1rem; width:120px; height:120px; border:2px solid var(--gold); border-radius:var(--radius-lg); z-index:-1; }
.about-content { padding:1rem 0; }
.about-text { font-size:1.05rem; color:var(--text-muted); margin-bottom:1rem; line-height:1.8; }
.about-text:last-of-type { margin-bottom:2rem; }
.about-stats { display:flex; gap:2rem; padding-top:2rem; border-top:1px solid var(--cream-dark); }
.stat { display:flex; flex-direction:column; }
.stat-number { font-family:var(--font-display); font-size:1.75rem; font-weight:700; color:var(--terracotta); line-height:1; }
.stat-label { font-size:0.8rem; color:var(--text-muted); margin-top:0.25rem; }

/* PRODUCTS */
.products { padding:var(--section-py) 0; background:var(--cream); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.product-card { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:all 0.5s var(--ease-out); }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.product-image-wrap { position:relative; height:260px; overflow:hidden; }
.product-img { width:100%; height:100%; object-fit:cover; transition:all 0.6s var(--ease-out); }
.product-img--main { position:absolute; inset:0; }
.product-img--hover { position:absolute; inset:0; opacity:0; }
.product-card:hover .product-img--main { opacity:0; transform:scale(1.05); }
.product-card:hover .product-img--hover { opacity:1; }
.product-badge { position:absolute; top:1rem; left:1rem; padding:0.3rem 0.75rem; font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; background:var(--terracotta); color:#fff; border-radius:50px; z-index:1; }
.product-badge--seafood { background:var(--navy); }
.product-badge--veggie { background:#4A7C59; }
.product-info { padding:1.5rem; }
.product-name { font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--navy); margin-bottom:0.15rem; }
.product-spanish { display:block; font-size:0.8rem; font-style:italic; color:var(--terracotta-light); margin-bottom:0.75rem; }
.product-desc { font-size:0.9rem; color:var(--text-muted); line-height:1.6; margin-bottom:1.25rem; }
.product-cta { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; color:var(--terracotta); transition:gap 0.3s var(--ease-out); }
.product-cta:hover { gap:0.75rem; }
.product-cta svg { transition:transform 0.3s var(--ease-out); }
.product-cta:hover svg { transform:translateX(2px); }

/* WHY US */
.why-us { padding:var(--section-py) 0; background:var(--navy); position:relative; overflow:hidden; }
.why-us::before { content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(212,168,83,0.08) 0%, transparent 70%); }
.why-us .section-tag { color:var(--gold-light); }
.why-us .section-tag::before { background:var(--gold-light); }
.why-us .section-title { color:#fff; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.why-card { padding:2rem; border-radius:var(--radius-lg); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); transition:all 0.4s var(--ease-out); }
.why-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(212,168,83,0.2); transform:translateY(-4px); }
.why-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:rgba(212,168,83,0.1); color:var(--gold); margin-bottom:1.25rem; transition:all 0.3s var(--ease-out); }
.why-card:hover .why-icon { background:rgba(212,168,83,0.18); transform:scale(1.05); }
.why-title { font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:#fff; margin-bottom:0.5rem; }
.why-desc { font-size:0.9rem; color:rgba(255,255,255,0.55); line-height:1.6; }

/* CONTACT */
.contact { padding:var(--section-py) 0; background:var(--warm-white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.contact-text { font-size:1.05rem; color:var(--text-muted); line-height:1.8; margin-bottom:2rem; }
.contact-details { display:flex; flex-direction:column; gap:1rem; }
.contact-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:var(--cream); border-radius:var(--radius-md); transition:all 0.3s var(--ease-out); }
.contact-item:hover { background:var(--cream-dark); transform:translateX(4px); }
.contact-item-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--terracotta); color:#fff; border-radius:var(--radius-sm); flex-shrink:0; }
.contact-item-label { display:block; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.contact-item-value { font-size:1rem; font-weight:500; color:var(--navy); }
.contact-form-wrap { background:#fff; padding:2.5rem; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); border:1px solid var(--cream-dark); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; }
.form-label { font-size:0.8rem; font-weight:600; letter-spacing:0.04em; color:var(--navy); margin-bottom:0.4rem; }
.form-input { width:100%; padding:0.8rem 1rem; font-family:var(--font-body); font-size:0.95rem; color:var(--text); background:var(--cream); border:1.5px solid transparent; border-radius:var(--radius-sm); outline:none; transition:all 0.3s var(--ease-out); }
.form-input::placeholder { color:var(--warm-gray); }
.form-input:focus { border-color:var(--terracotta); background:#fff; box-shadow:0 0 0 3px rgba(196,90,60,0.08); }
.form-textarea { resize:vertical; min-height:100px; }
.btn--primary.btn--full { margin-top:1rem; padding:1rem; font-size:1rem; }

/* FOOTER */
.footer { background:var(--navy-dark); padding:4rem 0 0; color:rgba(255,255,255,0.6); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand { display:flex; flex-direction:column; }
.footer-logo { height:24px; width:auto; filter:brightness(0) invert(1); opacity:0.7; margin-bottom:0.5rem; }
.footer-brand-name { font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:#fff; margin-bottom:0.75rem; }
.footer-tagline { font-size:0.9rem; line-height:1.5; color:rgba(255,255,255,0.45); }
.footer-heading { font-family:var(--font-display); font-size:0.95rem; font-weight:600; color:#fff; margin-bottom:1rem; }
.footer-links { display:flex; flex-direction:column; gap:0.6rem; }
.footer-links a { font-size:0.875rem; color:rgba(255,255,255,0.5); transition:color 0.3s, transform 0.3s; display:inline-block; }
.footer-links a:hover { color:var(--gold-light); transform:translateX(4px); }
.social-icons { display:flex; gap:0.75rem; }
.social-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.08); transition:all 0.3s var(--ease-out); }
.social-icon:hover { background:var(--terracotta); border-color:var(--terracotta); color:#fff; transform:translateY(-2px); }
.footer-bottom { padding:1.5rem 0; text-align:center; font-size:0.8rem; color:rgba(255,255,255,0.3); }

/* RESPONSIVE */
@media(max-width:1024px) {
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-menu { position:fixed; top:0; right:-100%; width:280px; height:100vh; flex-direction:column; background:var(--navy-dark); padding:6rem 2rem 2rem; gap:1.5rem; transition:right 0.4s var(--ease-out); box-shadow:-10px 0 40px rgba(0,0,0,0.3); }
  .nav-menu.active { right:0; }
  .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.active span:nth-child(2) { opacity:0; }
  .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
  .nav-link { font-size:1rem; color:rgba(255,255,255,0.7); }
  .nav-link--cta { text-align:center; padding:0.75rem 1.5rem; }
  .hero-title { font-size:clamp(2rem,7vw,3rem); }
  .hero-scroll { display:none; }
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-image img { height:300px; }
  .about-image-accent { display:none; }
  .about-stats { flex-wrap:wrap; gap:1.5rem; }
  .product-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .product-image-wrap { height:220px; }
  .why-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:2rem; }
  .contact-form-wrap { padding:1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
}
@media(max-width:480px) {
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-badge { font-size:0.65rem; padding:0.4rem 1rem; }
  .product-image-wrap { height:200px; }
}