/* =========================================================
   GINGER EXPORT PERU — Design System & Site Styles
   Organic Ginger & Turmeric Exporter — Pichanaki, Peru
   ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand colors (sampled from client logo) */
  --c-green-900:#14261a;   /* deepest green — headings on light bg */
  --c-green-800:#1c3626;   /* header/footer background */
  --c-green-700:#244631;   /* dark band background (philosophy) */
  --c-green-600:#2f5a3f;   /* hover / secondary */
  --c-green-500:#3a6b32;   /* leaf green accent */
  --c-gold-600:#b9862a;    /* deep gold — hover state */
  --c-gold-500:#c9962b;    /* primary CTA gold */
  --c-gold-400:#d4a94f;    /* lighter gold accent / borders */
  --c-gold-300:#e6c988;    /* subtle gold tint */
  --c-orange-500:#d97a26;  /* turmeric orange accent */
  --c-cream-100:#fbf8f2;   /* page background */
  --c-cream-200:#f4efe4;   /* section alt background */
  --c-cream-300:#ece4d3;   /* card borders / dividers */
  --c-white:#ffffff;
  --c-text:#2a2a24;        /* body text */
  --c-text-soft:#5b5b50;   /* secondary text */
  --c-text-on-dark:#f3efe4;
  --c-text-on-dark-soft:#c9d3c7;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(20,38,26,0.08);
  --shadow-md: 0 10px 30px rgba(20,38,26,0.14);
  --shadow-lg: 0 20px 50px rgba(20,38,26,0.22);
  --header-height: 84px;
  --transition: 0.25s ease;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-height) + 12px); }
body{
  font-family:var(--font-body);
  color:var(--c-text);
  background:var(--c-cream-100);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--c-green-900); line-height:1.2; font-weight:700; }
.container{ max-width:var(--container-max); margin:0 auto; padding:0 24px; }
section{ position:relative; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
::selection{ background:var(--c-gold-400); color:var(--c-green-900); }

/* ---------- 3. UTILITIES ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-gold-600); font-weight:600; margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after{ content:""; width:22px; height:1px; background:var(--c-gold-500); }
.section-title{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:16px; }
.section-lead{ color:var(--c-text-soft); font-size:1.05rem; max-width:640px; }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{ margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;} .mb-48{margin-bottom:48px;}
.pad-section{ padding:88px 0; }
.pad-section-sm{ padding:56px 0; }
.bg-cream-alt{ background:var(--c-cream-200); }
.bg-dark{ background:var(--c-green-700); color:var(--c-text-on-dark); }
.bg-dark h2, .bg-dark h3{ color:var(--c-white); }
.divider-gold{ width:64px; height:3px; background:var(--c-gold-500); border-radius:3px; margin:14px auto; }
/* .reveal is kept as a hook class for potential future use, but content is
   always fully visible by default - reliability matters more than a
   scroll-triggered fade for a production lead-gen site. */
.reveal{ opacity:1; transform:none; }

/* ---------- 4. BUTTONS (CTAs) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:50px; font-weight:600; font-size:0.98rem;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap; letter-spacing:0.01em;
}
.btn-primary{
  background:linear-gradient(135deg, var(--c-gold-500), var(--c-gold-600));
  color:var(--c-green-900); box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{
  background:transparent; border:2px solid var(--c-cream-100); color:var(--c-cream-100);
}
.btn-outline:hover{ background:var(--c-cream-100); color:var(--c-green-800); transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; border:2px solid var(--c-green-700); color:var(--c-green-700); }
.btn-outline-dark:hover{ background:var(--c-green-700); color:var(--c-white); }
.btn-whatsapp{
  background:#25D366; color:#0b3d1f; box-shadow:var(--shadow-sm);
}
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:#20bd5a; }
.btn-block{ width:100%; }
.btn svg{ width:19px; height:19px; flex-shrink:0; }

/* ---------- 5. HEADER / NAV ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-height);
  background:var(--c-cream-100);
  border-bottom:1px solid rgba(20,38,26,0.07);
  transition:box-shadow var(--transition);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:56px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-display); font-size:1.15rem; color:var(--c-green-900); letter-spacing:0.02em; }
.brand-text span{ font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-gold-600); font-weight:600; }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav ul{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  display:inline-block; padding:10px 16px; font-weight:600; font-size:0.92rem;
  color:var(--c-green-900); border-radius:50px; transition:background var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a.active{ background:var(--c-green-800); color:var(--c-white); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-switch{ display:flex; align-items:center; gap:4px; border:1px solid var(--c-cream-300); border-radius:50px; padding:4px; background:var(--c-white); }
.lang-switch a{ padding:6px 12px; font-size:0.78rem; font-weight:700; border-radius:50px; color:var(--c-text-soft); letter-spacing:0.04em; }
.lang-switch a.active{ background:var(--c-green-800); color:var(--c-white); }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--c-green-800); flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--c-white); position:relative; transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:rotate(45deg); top:0; }
.nav-toggle.is-open span::after{ transform:rotate(-45deg); top:0; }

@media (min-width: 941px){
  /* The gap between the logo and the first nav link was landing much wider
     than the gaps between the nav links themselves, because .brand and
     .main-nav were the only two flex children of the header container - all
     leftover width collapsed into that single gap. Flattening .main-nav,
     its <ul> and .header-actions with display:contents promotes the logo,
     each nav link, the language switch and the CTA button into one flat row
     of flex items, so justify-content:space-between (combined with the
     gap below) distributes the header's free space evenly across every gap
     in the bar instead of dumping it all next to the logo. The container's
     own gap is lowered here (from 20px to 10px) because it now acts as the
     minimum for all 6 gaps in the flattened row at once (6x20=120px) rather
     than just the one gap it used to cover - at narrower desktop widths
     (~940-1100px) that larger minimum was forcing the "Request a Quote"
     button past the edge of the header instead of letting space-between's
     extra spacing shrink first. */
  .site-header .container{ gap:10px; }
  .main-nav{ display:contents; }
  .main-nav ul{ display:contents; }
  .header-actions{ display:contents; }
}

@media (max-width: 940px){
  .main-nav{
    position:fixed; top:var(--header-height); left:0; right:0; bottom:0;
    background:var(--c-cream-100); flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:24px; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-nav a{ padding:16px 12px; font-size:1.05rem; border-bottom:1px solid var(--c-cream-300); border-radius:0; }
  .main-nav .header-actions{ margin-top:20px; flex-direction:column; align-items:stretch; }
  .main-nav .lang-switch{ justify-content:center; }
  .main-nav .btn{ width:100%; margin-top:12px; }
  .nav-toggle{ display:flex; }
}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; margin-top:var(--header-height);
  background:var(--c-green-900);
}
.hero-media{ position:relative; width:100%; aspect-ratio:1600/813; overflow:hidden; background:var(--c-green-900); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,38,26,0.55) 0%, rgba(20,38,26,0) 42%);
}
.hero-panel{
  background:var(--c-green-800);
  position:relative; z-index:2;
}
.hero-panel-inner{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  padding:48px 0;
}
.hero-eyebrow{ color:var(--c-gold-400); }
.hero-eyebrow::before, .hero-eyebrow::after{ background:var(--c-gold-400); }
.hero h1{
  color:var(--c-white); font-size:clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom:16px;
}
.hero p{ color:var(--c-text-on-dark-soft); font-size:1.05rem; max-width:520px; margin-bottom:26px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-badges{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.hero-badge{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:18px 12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
}
.hero-badge svg{ width:30px; height:30px; color:var(--c-gold-400); }
.hero-badge span{ font-size:0.82rem; font-weight:600; color:var(--c-text-on-dark); line-height:1.3; }

@media (max-width: 860px){
  .hero-panel-inner{ grid-template-columns:1fr; padding:40px 0; }
}

/* ---------- 7. PAGE (INNER) BANNER ---------- */
.page-banner{
  margin-top:var(--header-height); position:relative;
  height:280px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--c-green-900);
}
.page-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; }
.page-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,38,26,0.55), rgba(28,54,38,0.9)); }
.page-banner-content{ position:relative; z-index:2; color:var(--c-white); padding:0 24px; }
.page-banner-content .eyebrow{ color:var(--c-gold-400); justify-content:center; }
.page-banner-content .eyebrow::before,.page-banner-content .eyebrow::after{ background:var(--c-gold-400); }
.page-banner h1{ color:var(--c-white); font-size:clamp(1.8rem,3.6vw,2.6rem); }
.breadcrumb{ margin-top:14px; font-size:0.85rem; color:var(--c-text-on-dark-soft); }
.breadcrumb a{ color:var(--c-gold-300); }

/* ---------- 8. TRUST / INFO STRIP ---------- */
.trust-strip{ background:var(--c-green-800); color:var(--c-text-on-dark); padding:40px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr) 1.4fr; gap:28px; align-items:center; }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.trust-item svg{ width:32px; height:32px; color:var(--c-gold-400); }
.trust-item span{ font-size:0.85rem; font-weight:600; }
.trust-copy{ font-size:0.95rem; color:var(--c-text-on-dark-soft); border-left:1px solid rgba(255,255,255,0.18); padding-left:28px; }
@media (max-width: 940px){
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-copy{ grid-column:1/-1; border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding-left:0; padding-top:20px; text-align:center; }
}

/* ---------- 9. PRODUCTS ---------- */
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.product-card{
  background:var(--c-white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--c-cream-300); transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.product-card .img-wrap{ aspect-ratio:1/1; overflow:hidden; }
.product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .img-wrap img{ transform:scale(1.06); }
.product-card-body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.product-card h3{ font-size:1.25rem; margin-bottom:8px; }
.product-card p{ color:var(--c-text-soft); font-size:0.92rem; flex:1; }
.product-tag{
  display:inline-block; align-self:flex-start; margin-top:14px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--c-green-700); background:var(--c-cream-200);
  padding:6px 12px; border-radius:50px;
}
@media (max-width: 940px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .products-grid{ grid-template-columns:1fr; } }

/* ---------- 10. ABOUT SPLIT ---------- */
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-media{ position:relative; }
.about-media-grid{ display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:420px; }
.about-media-grid img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-md); }
.about-media-grid .tall{ grid-row:1/3; }
.badge-float{
  position:absolute; bottom:-24px; right:-18px; width:120px; height:120px; border-radius:50%;
  background:var(--c-white); box-shadow:var(--shadow-md); padding:8px; border:3px solid var(--c-gold-400);
}
.badge-float img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.about-copy p{ color:var(--c-text-soft); margin-bottom:16px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.stat{ text-align:center; padding:18px 10px; background:var(--c-cream-200); border-radius:var(--radius-md); }
.stat strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--c-green-800); }
.stat span{ font-size:0.78rem; color:var(--c-text-soft); text-transform:uppercase; letter-spacing:0.04em; }
@media (max-width: 940px){
  .about-split{ grid-template-columns:1fr; }
  .about-media-grid{ height:340px; }
  .badge-float{ width:92px; height:92px; bottom:-16px; right:8px; }
}

/* ---------- 11. PHILOSOPHY / BEYOND ORGANIC BAND ---------- */
.philosophy{ padding:80px 0; }
.philosophy-inner{ display:grid; grid-template-columns:0.9fr 1.6fr; gap:48px; align-items:center; }
.infinity-mark{ font-family:var(--font-display); font-size:4.2rem; color:var(--c-gold-400); line-height:1; }
.philosophy h2{ color:var(--c-white); font-size:clamp(1.6rem,2.8vw,2.2rem); margin-bottom:10px; }
.philosophy p{ color:var(--c-text-on-dark-soft); }
.philosophy-tagline{ margin-top:14px; font-family:var(--font-display); font-style:italic; color:var(--c-gold-300); font-size:1.05rem; }
.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:36px; }
.pillar{ text-align:center; }
.pillar svg{ width:34px; height:34px; color:var(--c-gold-400); margin-bottom:10px; }
.pillar span{ font-size:0.78rem; font-weight:600; color:var(--c-text-on-dark); display:block; line-height:1.3; }
@media (max-width: 940px){
  .philosophy-inner{ grid-template-columns:1fr; text-align:center; }
  .pillars{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 560px){ .pillars{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 12. IMPACT PHOTO ROW ---------- */
.impact-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.impact-item{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.impact-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.impact-item:hover img{ transform:scale(1.08); }
.impact-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,38,26,0.85) 0%, rgba(20,38,26,0.05) 55%); }
.impact-caption{ position:absolute; left:0; right:0; bottom:0; padding:18px 14px; color:var(--c-white); z-index:2; }
.impact-caption strong{ display:block; font-size:0.88rem; font-weight:700; margin-bottom:4px; }
.impact-caption span{ font-size:0.74rem; color:var(--c-text-on-dark-soft); line-height:1.3; display:block; }
@media (max-width: 940px){ .impact-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 13. CERTIFICATIONS ---------- */
.cert-strip{ padding:52px 0; }
.cert-row{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:18px; margin-top:32px; }
.cert-item{
  display:flex; align-items:center; justify-content:center;
  background:var(--c-white); border:1px solid var(--c-cream-300); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); height:84px; min-width:128px; padding:14px 24px;
  transition:box-shadow var(--transition), transform var(--transition);
}
.cert-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cert-item img{
  max-height:100%; max-width:150px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(0.1); opacity:0.94; transition:opacity var(--transition);
}
.cert-item:hover img{ opacity:1; }
@media (max-width: 640px){
  .cert-row{ gap:12px; }
  .cert-item{ height:64px; min-width:100px; padding:10px 16px; }
  .cert-item img{ max-width:110px; }
}

/* ---------- 14. TESTIMONIAL / CTA BANNER ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--c-green-800), var(--c-green-700));
  border-radius:var(--radius-lg); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
}
.cta-banner h3{ color:var(--c-white); font-size:1.7rem; max-width:520px; }
.cta-banner p{ color:var(--c-text-on-dark-soft); margin-top:8px; max-width:480px; }
.cta-banner-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 15. CONTACT PAGE ---------- */
.contact-wrap{ display:grid; grid-template-columns:0.95fr 1.15fr; gap:48px; align-items:flex-start; }
.contact-info-card{
  background:var(--c-green-800); color:var(--c-text-on-dark); border-radius:var(--radius-lg); padding:40px 34px;
}
.contact-info-card h3{ color:var(--c-white); margin-bottom:6px; }
.contact-info-card p{ color:var(--c-text-on-dark-soft); margin-bottom:26px; }
.contact-line{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.contact-line svg{ width:22px; height:22px; color:var(--c-gold-400); flex-shrink:0; margin-top:2px; }
.contact-line strong{ display:block; font-size:0.92rem; }
.contact-line span, .contact-line a{ font-size:0.9rem; color:var(--c-text-on-dark-soft); }
.social-row{ display:flex; gap:10px; margin-top:30px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); transition:background var(--transition);
}
.social-row a:hover{ background:var(--c-gold-500); }
.social-row svg{ width:18px; height:18px; color:var(--c-white); }

.contact-form-card{ background:var(--c-white); border-radius:var(--radius-lg); padding:40px 36px; box-shadow:var(--shadow-sm); border:1px solid var(--c-cream-300); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:8px; color:var(--c-green-900); }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:13px 16px; border:1.5px solid var(--c-cream-300); border-radius:var(--radius-sm);
  background:var(--c-cream-100); transition:border-color var(--transition), background var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color:var(--c-gold-500); background:var(--c-white);
}
.form-group textarea{ min-height:130px; resize:vertical; }
.form-hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-status{ margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); font-size:0.92rem; display:none; }
.form-status.ok{ display:block; background:#e6f4ea; color:#1f6d3a; border:1px solid #b9e3c6; }
.form-status.error{ display:block; background:#fdecec; color:#a3312c; border:1px solid #f3c2c0; }
.form-consent{ font-size:0.8rem; color:var(--c-text-soft); margin-top:14px; }
@media (max-width: 940px){ .contact-wrap{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }

.map-embed{ margin-top:28px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--c-cream-300); }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* ---------- 16. FOOTER ---------- */
.site-footer{ background:var(--c-green-900); color:var(--c-text-on-dark-soft); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand img{ height:52px; margin-bottom:14px; }
.footer-brand p{ font-size:0.9rem; max-width:280px; }
.footer-col h4{ color:var(--c-white); font-size:0.95rem; margin-bottom:18px; font-family:var(--font-body); letter-spacing:0.03em; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:0.9rem; transition:color var(--transition); }
.footer-col a:hover{ color:var(--c-gold-400); }
.footer-contact-line{ display:flex; gap:10px; margin-bottom:14px; font-size:0.88rem; align-items:flex-start; }
.footer-contact-line svg{ width:17px; height:17px; color:var(--c-gold-400); flex-shrink:0; margin-top:3px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:0.8rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--c-text-on-dark-soft); }
.footer-bottom a:hover{ color:var(--c-gold-400); }
@media (max-width: 940px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

/* ---------- 17. WHATSAPP FLOATING BUTTON ---------- */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:1200;
  width:64px; height:64px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.25);
  animation:wa-pulse 2.6s infinite;
}
.whatsapp-float svg{ width:32px; height:32px; color:#fff; }
.whatsapp-float:hover{ background:#20bd5a; }
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.5), 0 8px 24px rgba(0,0,0,0.25); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0), 0 8px 24px rgba(0,0,0,0.25); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0), 0 8px 24px rgba(0,0,0,0.25); }
}
@media (max-width: 560px){ .whatsapp-float{ width:56px; height:56px; bottom:18px; right:18px; } .whatsapp-float svg{ width:28px; height:28px; } }

/* ---------- 18. MISC PAGE ELEMENTS ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } }
.badge-pill{ display:inline-block; background:var(--c-cream-200); color:var(--c-green-700); font-size:0.75rem; font-weight:700; padding:6px 14px; border-radius:50px; letter-spacing:0.04em; text-transform:uppercase; margin:4px 6px 4px 0; }
.table-specs{ width:100%; border-collapse:collapse; margin-top:18px; }
.table-specs th, .table-specs td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--c-cream-300); font-size:0.92rem; }
.table-specs th{ color:var(--c-green-800); font-weight:700; background:var(--c-cream-200); }
.back-to-top{ position:fixed; bottom:26px; left:26px; z-index:1100; width:46px; height:46px; border-radius:50%; background:var(--c-green-800); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition); }
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
.back-to-top svg{ width:18px; height:18px; }