/* Global Harvest Trading - Styles */
:root{
  --green:#6b8e23; /* olive green from assets */
  --green-dark:#4d6a13;
  --orange:#f29b2b;
  --black:#1e1e1e;
  --gray-900:#222;
  --gray-700:#555;
  --gray-200:#eee;
  --white:#fff;
  --container:1200px;
}

@media (min-width: 901px){
  /* Keep form visually slimmer on desktop */
  .contact-form{max-width:520px; justify-self:start}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--gray-900);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}

.container{width:min(var(--container),100% - 2rem);margin-inline:auto}
.container.narrow{width:min(900px,100% - 2rem)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr;gap:2rem}}

.btn{display:inline-block;padding:.85rem 1.25rem;border-radius:999px;font-weight:700;border:2px solid transparent;transition:.2s}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn-light{background:#fff;border-color:#fff;color:var(--green)}
.btn-light:hover{background:#f7f7f7}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.site-header .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:.5rem 0;gap:1rem;min-height:84px}
.site-header .brand img{height:64px;width:auto}
@media (min-width: 1025px){
  /* Desktop logo exact size 221x100 */
  .site-header .brand img{width:221px;height:100px}
  .site-header .nav{min-height:120px}
}
.site-header nav{display:flex;gap:1.5rem;align-items:center;justify-content:center}
.site-header nav a{position:relative;padding:.25rem 0;font-weight:600;color:#444}
.site-header nav a:hover{color:var(--green)}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--green);opacity:0;transform:scaleX(.4);transition:opacity .2s,transform .2s}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{opacity:1;transform:scaleX(1)}
@media (max-width: 720px){.site-header nav{gap:.75rem}.site-header nav a{display:inline-block;font-size:.95rem;padding:.4rem .5rem}}
@media (max-width: 720px){.site-header .brand img{height:88px}.site-header .nav{min-height:112px}}

/* Mobile menu */
.menu-toggle{display:none;position:relative;width:40px;height:34px;border:0;background:transparent;cursor:pointer}
.menu-toggle .bar{display:block;height:3px;background:#333;margin:6px 0;border-radius:2px;transition:.2s}
.mobile-menu{display:none;position:fixed;inset:84px 0 0 0;background:#fff;z-index:1000;padding:1rem 1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.08)}
@media (max-width: 720px){.mobile-menu{inset:112px 0 0 0}}
.mobile-menu a{display:block;padding:1rem 0;border-bottom:1px solid #eee;color:#222;font-weight:600}
.mobile-open .mobile-menu{display:block}
.mobile-open .menu-toggle .bar:nth-child(1){transform:translateY(9px) rotate(45deg)}
.mobile-open .menu-toggle .bar:nth-child(2){opacity:0}
.mobile-open .menu-toggle .bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width: 1024px){
  .primary-nav{display:none !important}
  .header-social{display:none !important}
  .menu-toggle{display:inline-block;justify-self:end}
  .site-header .nav{grid-template-columns:auto 1fr auto}
  /* make logo larger on tablets/phones */
  .site-header .brand img{height:72px}
  /* adjust mobile menu panel top to match larger header */
  .mobile-menu{inset:96px 0 0 0}
}

/* Header specific: centered primary nav and right social icons */
.primary-nav{justify-content:center}
.header-social{display:flex;gap:.5rem;justify-content:flex-end}
.header-social .social{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#f7f7f7;color:#444;border:1px solid #ececec;transition:background .2s, color .2s, border-color .2s}
.header-social .social:hover{background:#e9f2e3;color:var(--green);border-color:#d6e7cd}
@media (max-width: 900px){.header-social{display:none}}

/* Hero */
.hero{position:relative;min-height:92svh;display:flex;align-items:stretch;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:#1e1e1e url('https://globalharvesttrading.com/assets/harvestradingmockup.jpg') right 5%/cover no-repeat;filter:brightness(1);z-index:0}
.hero-bg::after{content:none}
.hero::after{content:none}

/* Sections */
.section{padding:5rem 0;background:#fff}
.section:nth-of-type(even){background:#fafafa}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#888;font-weight:700;margin:.25rem 0}
.text-green{color:var(--green)}

/* About */
.kpi{display:flex;gap:1rem;align-items:flex-start}
.kpi img{width:110px;height:auto}
.kpi-export img{width:150px}
.about h2{font-size:2.25rem;margin:.25rem 0 1rem}
.about h2{display:flex;flex-direction:column;gap:2px;margin:.25rem 0 .75rem}
.about .h2-top{font-size:1rem;line-height:1;color:var(--green);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.about .h2-main{font-size:3rem;line-height:1;font-weight:800;color:#111;letter-spacing:-.3px}
.about .kpi p{margin:.35rem 0;color:#444}
.about .kpi img{width:110px}
.about h2::after{content:"";display:block;width:140px;height:3px;background:#111;margin-top:8px;border-radius:2px}
.about .eyebrow{color:var(--green);font-size:.9rem}
.about .kpi{align-items:center}
.about{position:relative}
.about-girl{position:absolute;right:-10px;top:20px;bottom:auto;width:min(30vw,520px);height:auto;filter:drop-shadow(0 18px 32px rgba(0,0,0,.25));pointer-events:none;z-index:1}
/* give text room so it doesn't collide with the girl */
.about .container{padding-right:min(32vw,560px)}
@media (min-width: 1440px){.about-girl{width:600px;right:-12px;top:24px}.about .container{padding-right:620px}}
@media (max-width: 1100px){.about-girl{display:none}}
.about-visual{position:relative}
.about-visual .about-mark{position:absolute;left:-5%;bottom:-10%;width:60%;opacity:.08}

/* Export */
.export h2{font-size:3rem;margin:0 0 .75rem;line-height:1;letter-spacing:-.3px;font-weight:800;text-transform:uppercase;color:#111}
.export .eyebrow{color:var(--green);font-size:.9rem}
.export-note img{width:190px}
.export-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.export-visual img{max-height:560px;width:auto;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.18));margin-right:-24px}
/* underline under EXPORTACIÓN like mockup */
.export h2::after{content:"";display:block;width:160px;height:4px;background:#111;margin-top:10px;border-radius:2px}
.export p{max-width:78ch;color:#444}
.export{position:relative}
.export .container{padding-right: 560px}
.export-girl{position:absolute;right:-10px;bottom:-20px;top:auto;width:520px;height:auto;filter:drop-shadow(0 18px 32px rgba(0,0,0,.25));pointer-events:none;z-index:1}
/* ensure text sits above image if overlapping */
.export .container > *{position:relative;z-index:2}
@media (max-width: 1100px){.export .container{padding-right:0}.export-girl{display:none}}
@media (min-width: 1440px){.export .container{padding-right: 620px}.export-girl{width:600px;right:-12px;bottom:-24px}}

/* CTA strip */
.cta{background:linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);text-align:center;position:relative;overflow:hidden}
.cta p{margin:.5rem 0;font-weight:600;color:#333}
.cta-fruit-center{display:block;margin:0 auto 1rem;width:min(320px, 70%);max-width:360px}
/* watermark globe on left */
.cta::before{content:"";position:absolute;left:-4%;top:-10px;width:640px;height:640px;background:url('https://globalharvesttrading.com/assets/mundo.png') left center/contain no-repeat;opacity:.12;pointer-events:none;z-index:0}
.cta > *{position:relative;z-index:1}

/* Girl image fixed on the right across lower fold */
.page-girl{position:fixed;right:-8px;bottom:-12px;width:min(28vw,460px);height:auto;z-index:10;pointer-events:none;filter:drop-shadow(0 18px 32px rgba(0,0,0,.25))}
@media (max-width: 1100px){.page-girl{display:none}}

/* Footer */
.site-footer{background:#0e0e0e;color:#cfcfcf;padding:3rem 0 0}
.footer-heading{padding:0 0 1.75rem}
.footer-title{margin:0;text-align:center;font-size:1.6rem;letter-spacing:.02em;color:#ffffff}
.footer-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1.25rem;align-items:start}

.footer-logo{height:46px;margin-bottom:.75rem;filter:drop-shadow(0 2px 0 rgba(255,255,255,.03))}
@media (max-width: 720px){.footer-logo{height:88px}}
@media (min-width: 1025px){.footer-logo{height:100px}}
.footer-grid > div:first-child{justify-self:start}
@media (min-width: 901px){
  /* Nudge logo/contact block toward the form without changing order */
  .footer-grid > div:first-child{justify-self:end; margin-right:24px}
}
.site-footer h3{color:#fff;margin-top:0}
.small{font-size:.875rem;color:#aaa}
.contact-form{display:grid;gap:.75rem}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.contact-form input, .contact-form textarea{width:100%;padding:.75rem;border-radius:.5rem;border:1px solid #333;background:#121212;color:#eee}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#777}
.form-status{min-height:1.25rem;font-size:.9rem}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:.35rem 0}
/* Minimal icon row styling */
.with-icon{display:inline-flex;align-items:center;gap:.5rem}
.with-icon .icon{color:#98a89b}

/* Footer socials */
.footer-social{display:flex;gap:.5rem;margin-top:.5rem}
.footer-social .social{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#151515;color:#d9d9d9;border:1px solid #232323;transition:background .2s, color .2s, border-color .2s}
.footer-social .social:hover{background:#1e2a1a;color:#cde9c6;border-color:#284329}

/* Contact list with icons */
.with-icon{display:inline-flex;gap:.5rem;align-items:center;color:#dcdcdc}
.with-icon .icon{color:#98a89b}
.with-icon:hover{color:#ffffff}
.footer-info .footer-links{margin-top:.5rem;color:#bcbcbc}
.footer-info .footer-links .sep{margin:0 .6rem;color:#666}
.footer-info .footer-links a{color:#dcdcdc}
.footer-info .footer-links a:hover{color:#fff;text-decoration:underline}

/* Footer bottom strip */
.footer-bottom{background:#0a0a0a;border-top:1px solid #1b1b1b;padding:.6rem 0;color:#bcbcbc}
.footer-bottom p{margin:0;text-align:center;font-size:.92rem}
.footer-bottom a{color:#e6e6e6;font-weight:700}
.footer-bottom a:hover{color:#ffffff;text-decoration:underline}

/* ===================== */
/* Mobile responsiveness */
/* ===================== */

@media (max-width: 900px){
  /* Layout */
  .container{width:min(var(--container),100% - 1.25rem)}
  .section{padding:3.5rem 0}
  .footer-grid{grid-template-columns:1fr}
  .contact-form{max-width:none}
  /* Hero */
  .hero{min-height:86svh}
  .hero-bg{background-position:right 18%}
  /* Second section paddings: remove right room for girl */
  .about .container{padding-right:0}
  /* KPI rows */
  .kpi{gap:.75rem}
  .kpi img{width:90px}
  .about .kpi img{width:90px}
  .kpi-export img{width:110px}
  /* Headings scale */
  .about .h2-main{font-size:2.2rem}
  .export h2{font-size:2.2rem}
  .about h2::after{width:120px}
  .export h2::after{width:130px}
  /* CTA */
  .cta-fruit-center{max-width:260px}
}

@media (max-width: 720px){
  /* Stack icon above text for readability */
  .kpi{flex-direction:row;align-items:flex-start}
  .kpi img{width:76px}
  .kpi > div{flex:1}
  .about .h2-top{font-size:.9rem}
  .about .h2-main{font-size:1.9rem}
  .export h2{font-size:2rem}
  .cta{padding-top:2.5rem;padding-bottom:2.5rem}
  .cta-fruit-center{max-width:220px}
  .contact-form .form-row{grid-template-columns:1fr}
}

@media (max-width: 480px){
  .site-header nav{gap:.5rem}
  /* Keep larger logo size on small phones too */
  .site-header .brand img{height:88px}
  .site-header .nav{min-height:112px}
  .about .h2-main, .export h2{letter-spacing:0}
}

/* Responsive hero fine-tuning to better match mockup */
@media (min-width: 1280px){
  .hero{min-height:96svh}
  .hero-bg{background-position:right 0%}
  .hero-fruits{width:900px}
}
@media (max-width: 1200px){
  .hero-bg{background-position:right 14%}
  .hero-fruits{width:60vw}
}
@media (max-width: 900px){
  .hero{min-height:72vh}
  .hero-bg{background-position:right 25%}
  .hero-fruits{left:-6%;width:72vw;opacity:.95}
}

/* Mobile: keep full hero visible without cropping by sizing the parent */
@media (max-width: 720px){
  .hero{min-height:0; height:auto; aspect-ratio:16 / 9}
  /* use existing cover setup on .hero-bg; no special overrides needed */
}